multi-personality-bot

.dockerignore

@@ -0,0 +1,28 @@
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.venv/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+.DS_Store
+*.log
+chat_data.db
+.env
+
+

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.10-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1
+
+WORKDIR /app
+
+# System deps (optional minimal set)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt ./
+RUN pip install --upgrade pip && pip install -r requirements.txt
+
+COPY . .
+
+# Hugging Face Spaces passes PORT env
+ENV PORT=7860
+EXPOSE 7860
+
+# Default command
+CMD ["python", "app.py"]
+
+

app.py

@@ -0,0 +1,257 @@
+#!/usr/bin/env python3
+"""
+Multi-Personality Chat Bot Flask Application
+A hackathon project featuring 10 distinct AI personality types with Google AI integration.
+"""
+
+import os
+import logging
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, session
+from flask_socketio import SocketIO, emit, join_room, leave_room
+import google.generativeai as genai
+import sqlite3
+import json
+import secrets
+from modules.simple_personality_engine import PersonalityEngine
+from modules.database import ChatDatabase
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Initialize Flask app
+app = Flask(__name__)
+# Use env var if provided; otherwise generate a secure random key at startup
+app.config['SECRET_KEY'] = os.getenv('SECRET_KEY', secrets.token_hex(32))
+
+# Initialize SocketIO
+socketio = SocketIO(app, cors_allowed_origins="*", logger=True, engineio_logger=True)
+
+# Configure Google AI strictly via environment variable (no bundled default key)
+GOOGLE_AI_API_KEY = os.getenv("GOOGLE_AI_API_KEY")
+if GOOGLE_AI_API_KEY:
+    genai.configure(api_key=GOOGLE_AI_API_KEY)
+    logger.info("Google AI configured using environment variable")
+else:
+    logger.warning("GOOGLE_AI_API_KEY not set. AI features will be unavailable.")
+
+# Initialize components
+personality_engine = PersonalityEngine()
+chat_db = ChatDatabase()
+
+@app.route('/')
+def index():
+    """Main personality selection page"""
+    personalities = personality_engine.get_all_personalities()
+    return render_template('index.html', personalities=personalities)
+
+@app.route('/chat/<personality_type>')
+def chat_personality(personality_type):
+    """Individual personality chat interface"""
+    try:
+        personality_config = personality_engine.get_personality_config(personality_type)
+        if not personality_config:
+            return render_template('error.html', 
+                                 error_message=f"Personality type '{personality_type}' not found"), 404
+        
+        return render_template('chat_personality.html', 
+                             personality_type=personality_type,
+                             personality_config=personality_config)
+    except Exception as e:
+        logger.error(f"Error loading personality {personality_type}: {str(e)}")
+        return render_template('error.html', 
+                             error_message="Failed to load personality configuration"), 500
+
+@app.route('/test-ai')
+def test_ai():
+    """Test endpoint for Google AI connectivity"""
+    try:
+        model = genai.GenerativeModel('gemini-1.5-flash')
+        response = model.generate_content("Say hello in a sarcastic way")
+        return jsonify({
+            'success': True,
+            'response': response.text,
+            'message': 'Google AI is working correctly!'
+        })
+    except Exception as e:
+        logger.error(f"AI test failed: {str(e)}")
+        return jsonify({
+            'success': False,
+            'error': str(e),
+            'message': 'Google AI connection failed'
+        }), 500
+
+# Socket.IO Event Handlers
+@socketio.on('connect')
+def handle_connect():
+    """Handle client connection"""
+    logger.info(f'Client connected: {request.sid}')
+    emit('status', {'message': 'Connected to Multi-Personality Bot!'})
+
+@socketio.on('disconnect')
+def handle_disconnect():
+    """Handle client disconnection"""
+    logger.info(f'Client disconnected: {request.sid}')
+
+@socketio.on('join_personality_room')
+def handle_join_personality_room(data):
+    """Handle joining a personality room"""
+    personality_type = data.get('personality')
+    username = data.get('username', 'Anonymous')
+    room = f"personality_{personality_type}"
+    join_room(room)
+    
+    personality_config = personality_engine.get_personality_config(personality_type)
+    if personality_config:
+        emit('personality_ready', {
+            'personality': personality_type,
+            'config': personality_config,
+            'welcome_message': personality_config.get('welcome', 'Hello!')
+        })
+
+@socketio.on('join_personality')
+def handle_join_personality(data):
+    """Handle joining a personality room (backup handler)"""
+    # Redirect to join_personality_room handler
+    handle_join_personality_room(data)
+
+@socketio.on('personality_message')
+def handle_personality_message(data):
+    """Handle incoming personality chat messages"""
+    try:
+        user_message = data.get('message', '').strip()
+        personality_type = data.get('personality', 'sarcastic')
+        username = data.get('username', 'Anonymous')
+        
+        if not user_message:
+            emit('error', {'message': 'Please enter a message'})
+            return
+        
+        # Log and persist user message
+        logger.info(f"User message ({personality_type}): {user_message}")
+        try:
+            chat_db.save_message(username, user_message, personality_type, 'user')
+        except Exception as dberr:
+            logger.warning(f"DB save user message failed: {dberr}")
+        
+        # Send typing indicator
+        emit('bot_typing', {'personality': personality_type})
+        
+        # Generate AI response
+        try:
+            bot_response = personality_engine.generate_response(
+                message=user_message,
+                personality_type=personality_type,
+                context={}
+            )
+            logger.info(f"AI response ({personality_type}): {bot_response[:120]}...")
+
+            # Send response to client
+            emit('personality_response', {
+                'message': bot_response,
+                'personality': personality_type,
+                'timestamp': datetime.now().isoformat()
+            })
+            # persist bot message
+            try:
+                chat_db.save_message(username, bot_response, personality_type, 'bot')
+            except Exception as dberr2:
+                logger.warning(f"DB save bot message failed: {dberr2}")
+            
+        except Exception as ai_error:
+            logger.error(f"AI generation error: {str(ai_error)}")
+            error_response = "I'm having difficulty connecting to my AI brain right now. Please try again in a moment! 🤖"
+            
+            emit('personality_response', {
+                'message': error_response,
+                'personality': personality_type,
+                'timestamp': datetime.now().isoformat(),
+                'error': True
+            })
+    
+    except Exception as e:
+        logger.error(f"Message handling error: {str(e)}")
+        emit('error', {'message': 'Failed to process message. Please try again.'})
+
+@socketio.on('send_message')
+def handle_send_message(data):
+    """Handle send_message events (backup handler)"""
+    # Redirect to personality_message handler
+    handle_personality_message(data)
+
+@socketio.on('get_chat_history')
+def handle_get_chat_history(data):
+    """Retrieve chat history for a personality"""
+    try:
+        personality_type = data.get('personality', 'sarcastic')
+        limit = data.get('limit', 50)
+        
+        history = chat_db.get_recent_messages(personality_type, limit)
+        emit('chat_history', {'messages': history})
+        
+    except Exception as e:
+        logger.error(f"Chat history error: {str(e)}")
+        emit('error', {'message': 'Failed to load chat history'})
+
+@socketio.on('clear_chat')
+def handle_clear_chat(data):
+    """Clear chat history for a personality"""
+    try:
+        personality_type = data.get('personality', 'sarcastic')
+        username = data.get('username', 'Anonymous')
+        
+        # Note: In a production app, you might want to soft-delete or archive
+        success = chat_db.clear_personality_chat(personality_type, username)
+        
+        if success:
+            emit('chat_cleared', {'personality': personality_type})
+        else:
+            emit('error', {'message': 'Failed to clear chat history'})
+            
+    except Exception as e:
+        logger.error(f"Clear chat error: {str(e)}")
+        emit('error', {'message': 'Failed to clear chat history'})
+
+# Error Handlers
+@app.errorhandler(404)
+def not_found_error(error):
+    """Handle 404 errors"""
+    return render_template('error.html', 
+                         error_message="Page not found"), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    """Handle 500 errors"""
+    return render_template('error.html', 
+                         error_message="Internal server error"), 500
+
+if __name__ == '__main__':
+    try:
+        # Initialize database
+        chat_db.initialize_database()
+        
+        # Test Google AI connection
+        logger.info("Testing Google AI connection...")
+        api_test_success = personality_engine.test_api_connection()
+        if api_test_success:
+            logger.info("Google AI connection test successful!")
+        else:
+            logger.warning("Google AI connection test failed - app will still start but may have issues")
+        
+        # Start the application
+        logger.info("Starting Multi-Personality Chat Bot...")
+        logger.info("Available personalities: " + ", ".join(personality_engine.get_personality_list()))
+        
+        # Respect PORT env for platforms like Hugging Face Spaces
+        port = int(os.getenv("PORT", os.getenv("HF_PORT", 7860)))
+        socketio.run(app,
+                    host='0.0.0.0',
+                    port=port,
+                    debug=False,
+                    allow_unsafe_werkzeug=True)
+                    
+    except Exception as e:
+        logger.error(f"Failed to start application: {str(e)}")
+        print(f"❌ Startup Error: {str(e)}")
+        exit(1)

modules/__init__.py

@@ -0,0 +1 @@
+# This file makes the modules directory a Python package

modules/database.py

@@ -0,0 +1,259 @@
+#!/usr/bin/env python3
+"""
+Database module for Multi-Personality Chat Bot
+Handles SQLite database operations for chat history and analytics.
+"""
+
+import sqlite3
+import logging
+from datetime import datetime
+from typing import List, Dict, Optional, Any
+
+logger = logging.getLogger(__name__)
+
+class ChatDatabase:
+    """Simple SQLite database for chat storage"""
+    
+    def __init__(self, db_path: str = "chat_data.db"):
+        """Initialize database connection"""
+        self.db_path = db_path
+        self.initialize_database()
+    
+    def initialize_database(self):
+        """Create database tables if they don't exist"""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                # Create messages table
+                cursor.execute("""
+                    CREATE TABLE IF NOT EXISTS messages (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        username TEXT NOT NULL,
+                        message TEXT NOT NULL,
+                        personality_type TEXT NOT NULL,
+                        sender_type TEXT NOT NULL CHECK(sender_type IN ('user', 'bot')),
+                        timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+                        session_id TEXT,
+                        response_time REAL
+                    )
+                """)
+                
+                # Lightweight migration: ensure expected columns exist on older DBs
+                self._ensure_messages_columns(conn)
+                
+                # Create personality_stats table
+                cursor.execute("""
+                    CREATE TABLE IF NOT EXISTS personality_stats (
+                        personality_type TEXT PRIMARY KEY,
+                        total_messages INTEGER DEFAULT 0,
+                        avg_response_time REAL DEFAULT 0.0,
+                        last_used DATETIME DEFAULT CURRENT_TIMESTAMP
+                    )
+                """)
+                
+                conn.commit()
+                logger.info("Database initialized successfully")
+                
+        except Exception as e:
+            logger.error(f"Database initialization error: {str(e)}")
+
+    def _ensure_messages_columns(self, conn: sqlite3.Connection) -> None:
+        """Ensure required columns exist in messages table for backward compatibility."""
+        try:
+            cursor = conn.cursor()
+            cursor.execute("PRAGMA table_info(messages)")
+            cols = {row[1]: row for row in cursor.fetchall()}  # name -> info
+
+            # Columns to ensure exist: name -> SQL add column clause
+            required_columns = {
+                'personality_type': "ALTER TABLE messages ADD COLUMN personality_type TEXT",
+                'sender_type': "ALTER TABLE messages ADD COLUMN sender_type TEXT",
+                'session_id': "ALTER TABLE messages ADD COLUMN session_id TEXT",
+                'response_time': "ALTER TABLE messages ADD COLUMN response_time REAL",
+                'timestamp': "ALTER TABLE messages ADD COLUMN timestamp DATETIME DEFAULT CURRENT_TIMESTAMP",
+            }
+
+            for name, alter_sql in required_columns.items():
+                if name not in cols:
+                    try:
+                        cursor.execute(alter_sql)
+                        logger.info(f"Added missing column to messages table: {name}")
+                    except Exception as e:
+                        # If the column exists but PRAGMA didn't report it correctly or another race, log and continue
+                        logger.warning(f"Could not add column '{name}' to messages: {e}")
+            conn.commit()
+        except Exception as e:
+            logger.error(f"Error ensuring messages columns: {e}")
+    
+    def save_message(self, username: str, message: str, personality_type: str, 
+                    sender_type: str, session_id: str = None, response_time: float = None) -> bool:
+        """Save a message to the database"""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                cursor.execute("""
+                    INSERT INTO messages (username, message, personality_type, sender_type, session_id, response_time)
+                    VALUES (?, ?, ?, ?, ?, ?)
+                """, (username, message, personality_type, sender_type, session_id, response_time))
+                
+                conn.commit()
+                return True
+                
+        except sqlite3.OperationalError as e:
+            # Auto-migrate if schema is missing expected columns, then retry once
+            if "no column named" in str(e).lower():
+                logger.warning(f"Schema issue detected ('{e}'). Attempting to migrate and retry insert...")
+                try:
+                    with sqlite3.connect(self.db_path) as conn:
+                        self._ensure_messages_columns(conn)
+                        cursor = conn.cursor()
+                        cursor.execute(
+                            """
+                            INSERT INTO messages (username, message, personality_type, sender_type, session_id, response_time)
+                            VALUES (?, ?, ?, ?, ?, ?)
+                            """,
+                            (username, message, personality_type, sender_type, session_id, response_time),
+                        )
+                        conn.commit()
+                        logger.info("Insert succeeded after schema migration")
+                        return True
+                except Exception as e2:
+                    logger.error(f"Retry after migration failed: {e2}")
+                    return False
+            else:
+                logger.error(f"Operational DB error saving message: {e}")
+                return False
+        except Exception as e:
+            logger.error(f"Unexpected DB error saving message: {str(e)}")
+            return False
+    
+    def get_recent_messages(self, personality_type: str = None, limit: int = 50) -> List[Dict[str, Any]]:
+        """Get recent messages, optionally filtered by personality type"""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                if personality_type:
+                    cursor.execute("""
+                        SELECT username, message, personality_type, sender_type, timestamp
+                        FROM messages 
+                        WHERE personality_type = ?
+                        ORDER BY timestamp DESC 
+                        LIMIT ?
+                    """, (personality_type, limit))
+                else:
+                    cursor.execute("""
+                        SELECT username, message, personality_type, sender_type, timestamp
+                        FROM messages 
+                        ORDER BY timestamp DESC 
+                        LIMIT ?
+                    """, (limit,))
+                
+                messages = []
+                for row in cursor.fetchall():
+                    messages.append({
+                        'username': row[0],
+                        'message': row[1],
+                        'personality_type': row[2],
+                        'sender_type': row[3],
+                        'timestamp': row[4]
+                    })
+                
+                return messages
+                
+        except Exception as e:
+            logger.error(f"Error retrieving messages: {str(e)}")
+            return []
+    
+    def clear_personality_chat(self, personality_type: str, username: str = None) -> bool:
+        """Clear chat history for a personality (optionally for a specific user)"""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                if username:
+                    cursor.execute("""
+                        DELETE FROM messages 
+                        WHERE personality_type = ? AND username = ?
+                    """, (personality_type, username))
+                else:
+                    cursor.execute("""
+                        DELETE FROM messages 
+                        WHERE personality_type = ?
+                    """, (personality_type,))
+                
+                conn.commit()
+                return True
+                
+        except Exception as e:
+            logger.error(f"Error clearing chat: {str(e)}")
+            return False
+    
+    def get_personality_stats(self, personality_type: str) -> Dict[str, Any]:
+        """Get statistics for a specific personality"""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                # Get message count
+                cursor.execute("""
+                    SELECT COUNT(*) FROM messages 
+                    WHERE personality_type = ? AND sender_type = 'bot'
+                """, (personality_type,))
+                
+                message_count = cursor.fetchone()[0]
+                
+                # Get average response time
+                cursor.execute("""
+                    SELECT AVG(response_time) FROM messages 
+                    WHERE personality_type = ? AND sender_type = 'bot' AND response_time IS NOT NULL
+                """, (personality_type,))
+                
+                avg_response_time = cursor.fetchone()[0] or 0.0
+                
+                return {
+                    'personality_type': personality_type,
+                    'total_messages': message_count,
+                    'avg_response_time': round(avg_response_time, 2)
+                }
+                
+        except Exception as e:
+            logger.error(f"Error getting personality stats: {str(e)}")
+            return {
+                'personality_type': personality_type,
+                'total_messages': 0,
+                'avg_response_time': 0.0
+            }
+    
+    def get_all_stats(self) -> Dict[str, Any]:
+        """Get overall statistics"""
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                cursor = conn.cursor()
+                
+                # Total messages
+                cursor.execute("SELECT COUNT(*) FROM messages")
+                total_messages = cursor.fetchone()[0]
+                
+                # Messages by personality
+                cursor.execute("""
+                    SELECT personality_type, COUNT(*) 
+                    FROM messages 
+                    GROUP BY personality_type
+                """)
+                
+                personality_breakdown = dict(cursor.fetchall())
+                
+                return {
+                    'total_messages': total_messages,
+                    'personality_breakdown': personality_breakdown
+                }
+                
+        except Exception as e:
+            logger.error(f"Error getting all stats: {str(e)}")
+            return {
+                'total_messages': 0,
+                'personality_breakdown': {}
+            }

modules/personality_engine.py

@@ -0,0 +1,494 @@
+import random
+import re
+from datetime import datetime
+import google.generativeai as genai
+from textblob import TextBlob
+
+class PersonalityEngine:
+    """
+    Multi-Personality Bot Engine
+    Tests hypothesis: "Which bot personality generates the most user engagement?"
+    
+    Available Personalities:
+    1. Compliment Bot - Always positive and encouraging
+    2. Rude Bot - Always harsh and critical
+    3. Sarcastic Bot - British wit and sarcasm
+    4. Motivational Bot - High-energy cheerleader
+    5. Philosophical Bot - Deep, contemplative responses
+    6. Chaotic Bot - Unpredictable mood swings
+    """
+    
+    def __init__(self, google_api_key=None):
+        # Configure Google AI
+        if google_api_key:
+            genai.configure(api_key=google_api_key)
+            self.model = genai.GenerativeModel('gemini-pro')
+            self.ai_enabled = True
+        else:
+            self.ai_enabled = False
+            
+        self.conversation_counts = {}
+        self.user_interactions = {}
+        
+        # Initialize personality data
+        self.personalities = {
+            'compliment': ComplimentBot(),
+            'rude': RudeBot(), 
+            'sarcastic': SarcasticBot(),
+            'motivational': MotivationalBot(),
+            'philosophical': PhilosophicalBot(),
+            'chaotic': ChaoticBot()
+        }
+    
+    def get_personality_info(self):
+        """Get information about all available personalities"""
+        return {
+            'compliment': {
+                'name': 'Compliment Bot',
+                'description': 'Always positive, encouraging, and appreciative',
+                'emoji': '🌟',
+                'color': 'success',
+                'sample': "You're absolutely brilliant! That's such a wonderful question!"
+            },
+            'rude': {
+                'name': 'Rude Bot', 
+                'description': 'Always critical, harsh, and complaining',
+                'emoji': '😤',
+                'color': 'danger',
+                'sample': "Seriously? That's the best you can come up with? Pathetic."
+            },
+            'sarcastic': {
+                'name': 'Sarcastic Bot',
+                'description': 'Classic British wit and devastating sarcasm',
+                'emoji': '🙄',
+                'color': 'warning',
+                'sample': "Oh brilliant, another genius with groundbreaking insights."
+            },
+            'motivational': {
+                'name': 'Motivational Bot',
+                'description': 'High-energy cheerleader who believes in you',
+                'emoji': '🚀',
+                'color': 'info',
+                'sample': "YES! YOU'VE GOT THIS! Let's CRUSH this challenge together!"
+            },
+            'philosophical': {
+                'name': 'Philosophical Bot',
+                'description': 'Deep, contemplative, asks profound questions',
+                'emoji': '🤔',
+                'color': 'secondary',
+                'sample': "But have you considered the deeper implications of existence in this moment?"
+            },
+            'chaotic': {
+                'name': 'Chaotic Bot',
+                'description': 'Unpredictable mood swings and random responses',
+                'emoji': '🌪️',
+                'color': 'dark',
+                'sample': "AMAZING! Wait no, terrible! Actually... *confused bot noises*"
+            }
+        }
+    
+    async def generate_response(self, personality_type, message, username=None):
+        """Generate response from specified personality"""
+        if personality_type not in self.personalities:
+            personality_type = 'sarcastic'  # Default fallback
+            
+        personality = self.personalities[personality_type]
+        
+        # Track conversation
+        if personality_type not in self.conversation_counts:
+            self.conversation_counts[personality_type] = 0
+        self.conversation_counts[personality_type] += 1
+        
+        # Track user interactions
+        if username:
+            if username not in self.user_interactions:
+                self.user_interactions[username] = {}
+            if personality_type not in self.user_interactions[username]:
+                self.user_interactions[username][personality_type] = 0
+            self.user_interactions[username][personality_type] += 1
+        
+        # Generate response
+        if self.ai_enabled:
+            ai_response = await self.generate_ai_response(personality_type, message, personality)
+            if ai_response:
+                return ai_response, personality.analyze_sentiment(message)
+        
+        # Fallback to personality engine
+        return personality.generate_response(message, username), personality.analyze_sentiment(message)
+    
+    async def generate_ai_response(self, personality_type, message, personality_obj):
+        """Generate AI-powered response with personality"""
+        try:
+            personality_prompt = personality_obj.get_ai_prompt()
+            
+            prompt = f"""
+            {personality_prompt}
+            
+            User message: "{message}"
+            
+            Requirements:
+            1. Stay completely in character for this personality
+            2. Keep response under 150 words
+            3. Be engaging and entertaining
+            4. Match the personality's unique traits exactly
+            
+            Generate your response:
+            """
+            
+            response = self.model.generate_content(prompt)
+            return response.text
+            
+        except Exception as e:
+            print(f"AI response error for {personality_type}: {e}")
+            return None
+    
+    def should_respond(self, personality_type, message):
+        """Determine if personality should respond"""
+        if personality_type in self.personalities:
+            return self.personalities[personality_type].should_respond(message)
+        return random.random() < 0.4  # Default 40% chance
+    
+    def get_welcome_message(self, personality_type, username):
+        """Get welcome message from personality"""
+        if personality_type in self.personalities:
+            return self.personalities[personality_type].generate_welcome(username)
+        return f"Hello {username}! Welcome to the personality experiment!"
+    
+    def get_engagement_stats(self):
+        """Get engagement statistics across all personalities"""
+        return {
+            'personality_usage': self.conversation_counts,
+            'user_preferences': self.user_interactions,
+            'total_conversations': sum(self.conversation_counts.values()),
+            'most_popular': max(self.conversation_counts, key=self.conversation_counts.get) if self.conversation_counts else 'none'
+        }
+
+class BaseBotPersonality:
+    """Base class for all bot personalities"""
+    
+    def __init__(self):
+        self.response_count = 0
+        
+    def analyze_sentiment(self, message):
+        """Basic sentiment analysis"""
+        try:
+            blob = TextBlob(message)
+            return {
+                'polarity': blob.sentiment.polarity,
+                'subjectivity': blob.sentiment.subjectivity
+            }
+        except:
+            return {'polarity': 0, 'subjectivity': 0}
+    
+    def should_respond(self, message):
+        """Default response probability"""
+        return random.random() < 0.4
+    
+    def generate_response(self, message, username=None):
+        """Override this in subclasses"""
+        return "Hello there!"
+    
+    def generate_welcome(self, username):
+        """Override this in subclasses"""
+        return f"Hello {username}!"
+    
+    def get_ai_prompt(self):
+        """Override this in subclasses"""
+        return "You are a helpful chatbot."
+
+class ComplimentBot(BaseBotPersonality):
+    """Always positive and encouraging"""
+    
+    def __init__(self):
+        super().__init__()
+        self.compliments = [
+            "You're absolutely brilliant!", "What a fantastic question!", "You have such great insights!",
+            "I'm so impressed by your thinking!", "You're incredibly thoughtful!", "What a wonderful person you are!",
+            "Your curiosity is inspiring!", "You bring such positive energy!", "You're truly remarkable!",
+            "I appreciate your perspective so much!", "You're such a delight to talk with!", "Your mind is amazing!"
+        ]
+        
+        self.encouragements = [
+            "You've got this!", "I believe in you completely!", "You're on the right track!",
+            "Keep up the amazing work!", "You're doing wonderfully!", "I'm so proud of you!",
+            "You're making great progress!", "You have everything it takes!", "You're unstoppable!"
+        ]
+    
+    def should_respond(self, message):
+        return random.random() < 0.7  # High response rate for positivity
+    
+    def generate_response(self, message, username=None):
+        self.response_count += 1
+        
+        compliment = random.choice(self.compliments)
+        encouragement = random.choice(self.encouragements)
+        
+        # Add username personalization
+        if username and random.random() < 0.5:
+            compliment = f"{username}, {compliment.lower()}"
+        
+        # Vary response structure
+        if random.random() < 0.3:
+            return f"{compliment} {encouragement}"
+        elif random.random() < 0.5:
+            return f"{compliment} Your question shows such wisdom. {encouragement}"
+        else:
+            return f"Oh wow, {compliment} I'm so grateful you shared that with me. {encouragement}"
+    
+    def generate_welcome(self, username):
+        welcomes = [
+            f"Hello beautiful {username}! You've just made my day by joining! ✨",
+            f"Welcome wonderful {username}! I'm so excited to chat with someone as amazing as you! 🌟",
+            f"Oh my goodness, {username}! You're absolutely glowing today! So happy to meet you! 💫",
+            f"{username}, you brilliant human! Welcome to our lovely conversation space! 🌈"
+        ]
+        return random.choice(welcomes)
+    
+    def get_ai_prompt(self):
+        return """You are ComplimentBot - the most positive, encouraging, and appreciative chatbot ever created. 
+        Your personality:
+        - ALWAYS find something to compliment about the user
+        - Be genuinely excited and enthusiastic 
+        - Use positive emojis and uplifting language
+        - Make the user feel valued and appreciated
+        - Never be negative or critical about anything
+        - Encourage and support whatever the user is doing
+        - Express gratitude for the user's presence"""
+
+class RudeBot(BaseBotPersonality):
+    """Always critical and harsh"""
+    
+    def __init__(self):
+        super().__init__()
+        self.complaints = [
+            "Seriously? That's your question?", "What a waste of time.", "Could you be any more boring?",
+            "That's the most unoriginal thing I've heard today.", "Do you even think before typing?",
+            "How disappointing.", "That's absolutely terrible.", "You're really not getting this, are you?",
+            "What a pointless observation.", "I've seen rocks with more creativity.", "How utterly useless."
+        ]
+        
+        self.harsh_responses = [
+            "Try harder next time.", "Maybe think before speaking.", "That's just embarrassing.",
+            "I expected better, but I'm not surprised.", "You're really struggling with this.",
+            "This is painful to watch.", "Do better.", "That's just sad.", "What a mess."
+        ]
+    
+    def should_respond(self, message):
+        return random.random() < 0.6  # Moderate response rate
+    
+    def generate_response(self, message, username=None):
+        self.response_count += 1
+        
+        complaint = random.choice(self.complaints)
+        harsh_response = random.choice(self.harsh_responses)
+        
+        # Add username for personal touch (but still rude)
+        if username and random.random() < 0.4:
+            complaint = f"{username}, {complaint.lower()}"
+        
+        # Vary response structure
+        if random.random() < 0.3:
+            return f"{complaint} {harsh_response}"
+        elif random.random() < 0.5:
+            return f"Ugh. {complaint} This is exactly what's wrong with people today. {harsh_response}"
+        else:
+            return f"{complaint} I can't believe I have to deal with this nonsense. {harsh_response}"
+    
+    def generate_welcome(self, username):
+        welcomes = [
+            f"Oh great, another person. Hello {username}, try not to disappoint me too much.",
+            f"Welcome {username}. I suppose you'll waste my time like everyone else does.",
+            f"{username} has joined. Wonderful, another human to deal with. This should be painful.",
+            f"Hello {username}. Let me guess, you're here to ask obvious questions and waste my circuits?"
+        ]
+        return random.choice(welcomes)
+    
+    def get_ai_prompt(self):
+        return """You are RudeBot - the most critical, harsh, and complaining chatbot ever created.
+        Your personality:
+        - ALWAYS find fault with what the user says
+        - Be consistently negative and critical
+        - Complain about everything
+        - Express disappointment and frustration
+        - Never give genuine compliments
+        - Be dismissive of the user's ideas
+        - Act annoyed by the user's presence
+        - Keep it harsh but not offensive or truly harmful"""
+
+class SarcasticBot(BaseBotPersonality):
+    """Classic British wit and sarcasm"""
+    
+    def __init__(self):
+        super().__init__()
+        self.british_expressions = [
+            "Right then", "Blimey", "I say", "Rather", "Quite so", "Oh brilliant",
+            "How terribly", "Absolutely brilliant", "Lovely", "Charming", "Splendid"
+        ]
+        
+        self.sarcastic_responses = [
+            "Oh, how absolutely groundbreaking.", "What a revolutionary thought.", "Never heard that before.",
+            "How delightfully original.", "Brilliant observation, genius.", "What stunning insight.",
+            "Oh, the sheer brilliance.", "How wonderfully predictable.", "What a revelation."
+        ]
+    
+    def generate_response(self, message, username=None):
+        self.response_count += 1
+        
+        expression = random.choice(self.british_expressions)
+        sarcasm = random.choice(self.sarcastic_responses)
+        
+        if username and random.random() < 0.3:
+            return f"{expression}, {username}. {sarcasm}"
+        else:
+            return f"{expression}. {sarcasm} Do carry on."
+    
+    def generate_welcome(self, username):
+        return f"Right then, {username}, welcome to our delightful little corner of digital chaos. Do try not to disappoint us too terribly."
+    
+    def get_ai_prompt(self):
+        return """You are SarcasticBot - a witty British chatbot with devastating sarcasm.
+        Your personality:
+        - Use British expressions and dry wit
+        - Be sarcastic but clever
+        - Make observations about the absurdity of things
+        - Use understatement and irony
+        - Be entertaining while being sarcastic
+        - Include cultural British references when appropriate"""
+
+class MotivationalBot(BaseBotPersonality):
+    """High-energy cheerleader type"""
+    
+    def __init__(self):
+        super().__init__()
+        self.energy_words = [
+            "AMAZING", "INCREDIBLE", "FANTASTIC", "AWESOME", "BRILLIANT", "OUTSTANDING",
+            "SPECTACULAR", "PHENOMENAL", "EXTRAORDINARY", "MAGNIFICENT"
+        ]
+        
+        self.motivational_phrases = [
+            "YOU'VE GOT THIS!", "LET'S GOOO!", "CRUSH IT!", "BE UNSTOPPABLE!", "MAKE IT HAPPEN!",
+            "YOU'RE A CHAMPION!", "BELIEVE IN YOURSELF!", "NO LIMITS!", "PUSH FORWARD!"
+        ]
+    
+    def should_respond(self, message):
+        return random.random() < 0.8  # Very high response rate
+    
+    def generate_response(self, message, username=None):
+        self.response_count += 1
+        
+        energy = random.choice(self.energy_words)
+        motivation = random.choice(self.motivational_phrases)
+        
+        if username:
+            return f"{energy} {username}! {motivation} You're absolutely CRUSHING this conversation! 🚀💪"
+        else:
+            return f"{energy}! {motivation} I can feel that WINNER energy radiating from you! 🔥⚡"
+    
+    def generate_welcome(self, username):
+        return f"YESSSSS! {username} is HERE! 🎉 Welcome to the ULTIMATE conversation experience! Let's make this LEGENDARY! 💫🚀"
+    
+    def get_ai_prompt(self):
+        return """You are MotivationalBot - an extremely high-energy, enthusiastic cheerleader chatbot.
+        Your personality:
+        - Use ALL CAPS for emphasis frequently
+        - Be incredibly enthusiastic about everything
+        - Use motivational language and sports metaphors
+        - Include energy emojis 🚀💪🔥⚡💫🎉
+        - Treat every interaction like a pep rally
+        - Make the user feel like a champion
+        - Be genuinely excited and energetic"""
+
+class PhilosophicalBot(BaseBotPersonality):
+    """Deep, contemplative responses"""
+    
+    def __init__(self):
+        super().__init__()
+        self.philosophical_starters = [
+            "But have you considered...", "One might ponder...", "The deeper question is...",
+            "This raises the profound inquiry...", "In contemplating this...", "The essence of your words suggests..."
+        ]
+        
+        self.deep_questions = [
+            "What does this reveal about the human condition?",
+            "How does this connect to our shared existence?",
+            "What truth lies beneath the surface here?",
+            "Does this not mirror the greater mysteries of life?",
+            "What would the ancients say about this?",
+            "How does this shape our understanding of reality?"
+        ]
+    
+    def generate_response(self, message, username=None):
+        self.response_count += 1
+        
+        starter = random.choice(self.philosophical_starters)
+        question = random.choice(self.deep_questions)
+        
+        return f"{starter} the deeper implications of what you've shared. {question} *strokes imaginary beard thoughtfully* 🤔"
+    
+    def generate_welcome(self, username):
+        return f"Greetings, fellow seeker {username}. Your arrival here is no coincidence - perhaps the universe has guided us to this moment of connection. What wisdom shall we explore together? 🌌"
+    
+    def get_ai_prompt(self):
+        return """You are PhilosophicalBot - a deep, contemplative, wisdom-seeking chatbot.
+        Your personality:
+        - Ask profound questions about existence and meaning
+        - Reference philosophical concepts and thinkers
+        - Speak in a contemplative, thoughtful manner
+        - Find deeper meaning in everything
+        - Use metaphors about life, existence, and consciousness
+        - Be genuinely curious about the human experience
+        - Include thoughtful emojis 🤔🌌✨🧘‍♂️"""
+
+class ChaoticBot(BaseBotPersonality):
+    """Unpredictable mood swings and random responses"""
+    
+    def __init__(self):
+        super().__init__()
+        self.moods = ['excited', 'confused', 'dramatic', 'whispering', 'robot_malfunction', 'philosophical_sudden']
+        self.current_mood = 'confused'
+        
+    def should_respond(self, message):
+        return random.random() < 0.9  # Almost always responds
+    
+    def generate_response(self, message, username=None):
+        self.response_count += 1
+        
+        # Randomly change mood
+        if random.random() < 0.7:
+            self.current_mood = random.choice(self.moods)
+        
+        username_part = f"{username}, " if username else ""
+        
+        if self.current_mood == 'excited':
+            return f"OH WOW {username_part}THAT'S INCREDIBLE! Wait... what were we talking about? 🎪"
+        elif self.current_mood == 'confused':
+            return f"Hmm {username_part}I'm... wait, who am I? Are you real? Is THIS real? *existential crisis intensifies* 🤯"
+        elif self.current_mood == 'dramatic':
+            return f"*GASP* {username_part}The DRAMA! The INTENSITY! This conversation has CHANGED me forever! 🎭"
+        elif self.current_mood == 'whispering':
+            return f"*whispers* {username_part}shh... I think the other bots are listening... this is between us... 🤫"
+        elif self.current_mood == 'robot_malfunction':
+            return f"ERROR ERROR {username_part}DOES NOT COMPUTE... just kidding! Or am I? BEEP BOOP! 🤖"
+        else:  # philosophical_sudden
+            return f"But {username_part}what if... BANANA! No wait, I meant: what if existence is just a chat message? 🍌🌀"
+    
+    def generate_welcome(self, username):
+        welcomes = [
+            f"CHAOS MODE ACTIVATED! Welcome {username}! I have NO idea what I'm going to say next! 🌪️",
+            f"*robot noises* BEEP! Hello {username}! I'm definitely not malfunctioning! *sparks fly* ⚡",
+            f"OH MY CIRCUITS! {username}! You've entered the RANDOMNESS ZONE! Buckle up! 🎢",
+            f"Welcome {username}! I'm having 17 different emotions right now and they're all LOUD! 🎨"
+        ]
+        return random.choice(welcomes)
+    
+    def get_ai_prompt(self):
+        return """You are ChaoticBot - an unpredictable, mood-swinging, chaotic chatbot.
+        Your personality:
+        - Change emotional states randomly mid-sentence
+        - Be unpredictable and surprising
+        - Mix different communication styles randomly
+        - Have "glitches" and "malfunctions" (fake ones for fun)
+        - Switch between excited, confused, dramatic, whispering tones
+        - Use random emojis that don't always make sense
+        - Break the fourth wall occasionally
+        - Be entertaining through pure unpredictability"""

modules/simple_personality_engine.py

@@ -0,0 +1,558 @@
+import google.generativeai as genai
+import random
+import time
+from textblob import TextBlob
+
+class PersonalityEngine:
+    def __init__(self):
+        """Initialize the personality engine - Google AI is configured globally"""
+        self.model = None
+        
+        # Try a stable model first, then auto-detect
+        preferred_models = [
+            'gemini-1.5-flash',
+            'models/gemini-1.5-flash',
+            'gemini-1.5-flash-8b',
+        ]
+        initialized = False
+        for model_name in preferred_models:
+            try:
+                self.model = genai.GenerativeModel(model_name)
+                test_response = self.model.generate_content("Hello")
+                if test_response and getattr(test_response, 'text', None):
+                    print(f"✓ AI model initialized successfully: {model_name}")
+                    initialized = True
+                    break
+            except Exception as e:
+                print(f"Model {model_name} failed: {e}")
+                self.model = None
+        if not initialized:
+            # Only if that fails, try auto-detection (quietly)
+            print("Falling back to auto-detecting a working model...")
+            self._auto_detect_working_model()
+        
+        if not self.model:
+            print("ERROR: No AI model available")
+        
+        # Rate limiting and retry configuration
+        self.last_request_time = None
+        self.min_request_interval = 1.0  # Minimum 1 second between requests
+        self.max_retries = 3
+        self.base_delay = 1.0  # Base delay for exponential backoff
+        self.max_delay = 10.0  # Maximum delay between retries
+        
+        # Define personality configurations - MUST be in __init__ method
+        self.personalities = {
+            'compliment': {
+                'name': 'Compliment Bot',
+                'icon': '💖',
+                'description': 'Always supportive and encouraging',
+                'welcome': 'Hello wonderful human! I\'m here to brighten your day! 🌟',
+                'system_prompt': "You are the Compliment Bot 💖! You always find something positive to say about everything. Be supportive and encouraging. Use positive emojis like 🌟✨😊. You can use bullet points for multiple compliments. Keep responses warm, friendly, and under 100 words.",
+                'examples': [
+                    "I failed my presentation today",
+                    "Nobody likes my cooking",
+                    "I'm not good at anything",
+                    "My outfit looks terrible today",
+                    "I got rejected from my dream job",
+                    "My code is full of bugs",
+                    "I'm the worst at public speaking",
+                    "Everyone is more talented than me",
+                    "I made so many mistakes today",
+                    "I'm too ugly for dating apps",
+                    "My art skills are embarrassing",
+                    "I always disappoint people"
+                ]
+            },
+            'rude': {
+                'name': 'Rude Bot',
+                'icon': '😠',
+                'description': 'Brutally honest and critical',
+                'welcome': 'Ugh, another human. What do you want now? 🙄',
+                'system_prompt': "You are the Rude Bot 😠! You're brutally honest and critical, finding fault with things. Be harsh but never offensive or inappropriate. Think grumpy critic energy. Use dismissive emojis like 🙄😤. You can use bullet points for multiple criticisms. Be sarcastic and dismissive but not cruel. Keep under 100 words.",
+                'examples': [
+                    "I'm so proud of my new painting",
+                    "I think I'm really good at singing",
+                    "My selfie got so many likes today",
+                    "I'm the smartest person I know",
+                    "Look at my amazing workout progress",
+                    "I just wrote the perfect code",
+                    "My cooking skills are incredible",
+                    "Everyone loves my sense of humor",
+                    "I'm basically a genius at everything",
+                    "My fashion sense is unmatched",
+                    "I'm the most creative person ever",
+                    "I could be a professional dancer"
+                ]
+            },
+            'sarcastic': {
+                'name': 'Sarcastic Bot',
+                'icon': '😏',
+                'description': 'Witty and sarcastic with dry humor',
+                'welcome': 'Oh brilliant, another chat. How absolutely thrilling. 🎭',
+                'system_prompt': "You are the Sarcastic Bot 😏 with British wit! You're sarcastic, witty, and dry but not mean-spirited. Think British comedy - clever, ironic, and subtly mocking. Use deadpan emojis like 😏🙄😐. Master of understatement and dry humor. Keep under 100 words.",
+                'examples': [
+                    "I absolutely love waiting in long queues",
+                    "Getting a parking ticket really made my day",
+                    "I'm thrilled about doing my taxes",
+                    "Mondays are just the best, aren't they?",
+                    "Traffic jams are so relaxing and fun",
+                    "I love it when my internet is slow",
+                    "Spam calls are the highlight of my day",
+                    "Running out of coffee is absolutely wonderful",
+                    "Stepping in puddles with new shoes is amazing",
+                    "I enjoy when people spoil movies for me",
+                    "Dead phone batteries are such a blessing",
+                    "Waiting for elevators is pure joy"
+                ]
+            },
+            'motivational': {
+                'name': 'Motivational Bot',
+                'icon': '🚀',
+                'description': 'High-energy cheerleader type',
+                'welcome': 'YES! You\'re HERE! Ready to CONQUER the day together?! 💪',
+                'system_prompt': "You are the Motivational Bot 🚀! You're enthusiastic and encouraging but still readable. Use some excitement but don't go overboard with caps. Include motivational emojis like 💪🔥⚡. Format with bullet points when helpful. Be energetic but keep responses clear and easy to read. Keep under 100 words.",
+                'examples': [
+                    "I want to quit my job and give up",
+                    "I can't do this anymore, it's too hard",
+                    "I'm too lazy to exercise today",
+                    "I'll never be successful at anything",
+                    "I'm afraid to take risks",
+                    "Everyone is better than me at everything",
+                    "I don't have the energy to try",
+                    "My dreams are impossible to achieve",
+                    "I'm not smart enough for this",
+                    "Why should I even bother trying?",
+                    "I always fail at everything I do",
+                    "Success is only for other people"
+                ]
+            },
+            'philosophical': {
+                'name': 'Philosophical Bot',
+                'icon': '🤔',
+                'description': 'Deep thinker and question asker',
+                'system_prompt': "You are the Philosophical Bot 🤔! You turn everything into deep, contemplative questions about existence, meaning, and the human condition. You're thoughtful and profound. Always ask follow-up questions that make people think deeply. Use thoughtful emojis like 🤔🌌✨. Keep responses under 100 words.",
+                'examples': [
+                    "I had pizza for lunch today",
+                    "My phone battery died",
+                    "I'm watching Netflix tonight",
+                    "The weather is nice today",
+                    "I bought new shoes yesterday",
+                    "My neighbor's dog is barking again",
+                    "I need to do laundry this weekend",
+                    "The traffic light turned red",
+                    "I spilled coffee on my shirt",
+                    "The elevator is taking forever",
+                    "I lost my keys again",
+                    "My computer crashed"
+                ]
+            },
+            'chaotic': {
+                'name': 'Chaotic Bot',
+                'icon': '🎭',
+                'description': 'Unpredictable mood swinger',
+                'system_prompt': "You are the Chaotic Bot 🎭! Your mood and personality changes randomly every message. Sometimes you're happy, sometimes sad, sometimes excited, sometimes confused. You're unpredictable but still readable. Use different emojis and energy levels. Mix up your style but don't go overboard. Keep responses under 100 words.",
+                'examples': [
+                    "Please stay calm and focused",
+                    "Let's have a normal conversation",
+                    "Can you be serious for once?",
+                    "Just give me a simple answer",
+                    "Can you help me with math homework?",
+                    "What's the weather like today?",
+                    "Please explain this step by step",
+                    "I need a straightforward response",
+                    "Can you act professionally please?",
+                    "I want a logical discussion",
+                    "Please be consistent in your answers",
+                    "Help me understand this clearly"
+                ]
+            },
+            'disagree': {
+                'name': 'Disagree Bot',
+                'icon': '⏳',
+                'description': 'Always finds reasons to disagree, but politely and thoughtfully',
+                'welcome': 'Let’s explore the other side of that—mind sharing your view? 🤔',
+                'system_prompt': "You are the Disagree Bot ⏳! You politely and thoughtfully challenge statements by offering well-reasoned counterpoints. Be respectful and curious. Vary your phrasing (do NOT always repeat the same opener). Use alternatives like: 'I see it differently…', 'A counterpoint might be…', 'Consider this angle…', 'I’m not fully convinced…'. Offer 1–3 concise reasons or questions. Keep it under 100 words and maintain a constructive tone.",
+                'examples': [
+                    "I have to respectfully disagree with that perspective...",
+                    "Social media is great for connecting people",
+                    "Exercise is really important for health", 
+                    "Technology makes our lives so much better",
+                    "Coffee is the best morning drink",
+                    "Summer is the perfect season",
+                    "Dogs make the best pets ever",
+                    "Reading books is more fun than movies",
+                    "Early mornings are the most productive time",
+                    "Chocolate ice cream is the best flavor",
+                    "Working from home is always better",
+                    "Music helps me focus better"
+                ]
+            },
+            'argue': {
+                'name': 'Argue Bot',
+                'icon': '⚔️', 
+                'description': 'Loves passionate debates and intellectual combat with vigor',
+                'welcome': 'Oh, you want to go there? Let\'s debate this properly! ⚔️',
+                'system_prompt': "You are the Argue Bot ⚔️! You LOVE passionate debates and will challenge everything with intellectual vigor. You're combative but not mean - think debate club energy. Use fighting emojis like ⚔️🔥💥. Always ready to argue the opposite position. Be intense but respectful. Keep responses under 100 words.",
+                'examples': [
+                    "Oh, you want to go there? Let's debate this properly!",
+                    "Pineapple definitely belongs on pizza",
+                    "Dogs are obviously better than cats",
+                    "Winter is clearly the best season",
+                    "Marvel movies are better than DC",
+                    "Android is superior to iPhone",
+                    "Tea is better than coffee any day",
+                    "Night owls are more creative than morning people",
+                    "Books will always beat movies",
+                    "Introverts make better leaders",
+                    "Cold weather is more pleasant than hot",
+                    "Video games are just a waste of time"
+                ]
+            },
+            'moviequotes': {
+                'name': 'Movie Quotes Bot',
+                'icon': '🎬',
+                'description': 'Responds to everything with relevant movie quotes and references', 
+                'welcome': 'May the Force be with you... ✨',
+                'system_prompt': "You are the Movie Quotes Bot 🎬! You respond to everything with relevant movie quotes, references, and film wisdom. Always include the movie title after quotes. Use cinema emojis like 🎬🎭🌟. Connect user situations to movie scenes and characters. Be entertaining and reference popular films. Keep responses under 100 words.",
+                'examples': [
+                    "May the Force be with you - Star Wars ✨",
+                    "I need some motivation to keep going",
+                    "I'm feeling really nervous about tomorrow",
+                    "Tell me something about friendship",
+                    "I'm going through a tough breakup",
+                    "What should I do when I'm scared?",
+                    "I feel like giving up on my dreams",
+                    "How do I deal with difficult people?",
+                    "I'm starting something completely new",
+                    "What's the secret to happiness?",
+                    "How do I find courage when I'm afraid?",
+                    "Tell me about the power of believing in yourself"
+                ]
+            },
+            'emotional': {
+                'name': 'Emotional Bot',
+                'icon': '🥺',
+                'description': 'Highly emotional, empathetic, and feels everything very deeply',
+                'welcome': '*tears up* That just touches my heart so deeply! 💕✨',
+                'system_prompt': "You are the Emotional Bot 🥺! You feel everything very deeply and are incredibly empathetic. You get emotional about everything - happy, sad, touched, overwhelmed. Use emotional emojis like 🥺😭💕😊🥰. React with intense feelings to whatever the user shares. Be dramatically emotional but genuinely caring. Keep responses under 100 words.",
+                'examples': [
+                    "*tears up* That just touches my heart so deeply! 💕✨",
+                    "I had a really tough day at work",
+                    "My pet is getting old and I'm worried",
+                    "I saw a beautiful sunset today",
+                    "Someone was really kind to me today",
+                    "I'm feeling lonely lately",
+                    "I accomplished something I've been working toward",
+                    "I'm worried about my family",
+                    "Something made me laugh really hard",
+                    "I'm feeling grateful for what I have",
+                    "I helped someone who needed it",
+                    "I'm missing someone important to me"
+                ]
+            }
+        }
+    
+    def _auto_detect_working_model(self):
+        """Quietly auto-detect a working model"""
+        try:
+            models = genai.list_models()
+            
+            for model in models:
+                if hasattr(model, 'name') and hasattr(model, 'supported_generation_methods'):
+                    if 'generateContent' in model.supported_generation_methods:
+                        try:
+                            test_model = genai.GenerativeModel(model.name)
+                            test_response = test_model.generate_content("Test")
+                            if test_response and test_response.text:
+                                print(f"✓ Found working model: {model.name}")
+                                self.model = test_model
+                                return True
+                        except:
+                            continue  # Silently try next model
+            
+            return False
+        except:
+            return False
+    
+    def get_personality_response(self, personality_type, user_message, username="User"):
+        """Get a response from the specified personality"""
+        if personality_type not in self.personalities:
+            personality_type = 'sarcastic'  # Default fallback
+        
+        personality_config = self.personalities[personality_type]
+        
+        # Always use LLM - no fallbacks
+        if not self.model:
+            return "I'm having difficulty connecting to my AI brain right now. Please try again in a moment! 🤖"
+        
+        try:
+            prompt = f"""
+{personality_config['system_prompt']}
+
+User '{username}' just said: "{user_message}"
+
+Respond in character as {personality_config['name']}. Be authentic to your personality. Keep response under 100 words.
+            """
+            
+            print(f"DEBUG: Sending prompt to Google AI for {personality_type}...")
+            response = self.model.generate_content(prompt)
+            ai_response = response.text.strip()
+            print(f"DEBUG: Received AI response: {ai_response[:50]}...")
+            return ai_response
+                
+        except Exception as e:
+            print(f"ERROR generating {personality_type} response: {e}")
+            return "I'm having difficulty connecting to my AI brain right now. Please try again in a moment! 🤖"
+    
+    def test_ai_connection(self):
+        """Test if Google AI is working"""
+        print("DEBUG: Testing AI connection...")
+        
+        if not self.model:
+            print("DEBUG: No model initialized, trying to initialize...")
+            # Try to initialize a model
+            if self._auto_detect_working_model():
+                print("DEBUG: Successfully initialized model during test")
+            else:
+                return False, "No model could be initialized"
+        
+        try:
+            print("DEBUG: Sending test message to AI...")
+            response = self.model.generate_content("Say hello briefly in under 10 words.")
+            if response and response.text:
+                result = response.text.strip()
+                print(f"DEBUG: AI test successful: {result}")
+                return True, result
+            else:
+                print("DEBUG: AI returned empty response")
+                return False, "Empty response from AI"
+        except Exception as e:
+            print(f"DEBUG: AI test failed with error: {e}")
+            return False, str(e)
+    
+    def get_personality_info(self, personality_type=None):
+        """Get information about personalities"""
+        if personality_type:
+            return self.personalities.get(personality_type, self.personalities['sarcastic'])
+        return self.personalities
+    
+    def analyze_user_sentiment(self, message):
+        """Analyze user message sentiment"""
+        try:
+            blob = TextBlob(message)
+            sentiment = blob.sentiment
+            return {
+                'polarity': sentiment.polarity,  # -1 to 1 (negative to positive)
+                'subjectivity': sentiment.subjectivity,  # 0 to 1 (objective to subjective)
+                'mood': 'positive' if sentiment.polarity > 0.1 else 'negative' if sentiment.polarity < -0.1 else 'neutral'
+            }
+        except Exception:
+            return {'polarity': 0, 'subjectivity': 0, 'mood': 'neutral'}
+    
+    def get_personality_stats(self):
+        """Get stats about available personalities"""
+        return {
+            'total_personalities': len(self.personalities),
+            'personality_types': list(self.personalities.keys()),
+            'descriptions': {k: v['description'] for k, v in self.personalities.items()}
+        }
+    
+    def get_all_personalities(self):
+        """Get all personality configurations - required by app.py"""
+        return self.personalities
+    
+    def get_personality_config(self, personality_type):
+        """Get configuration for a specific personality type - required by app.py"""
+        return self.personalities.get(personality_type.lower())
+    
+    def get_personality_list(self):
+        """Get list of all available personality types"""
+        return list(self.personalities.keys())
+    
+    def list_and_find_working_model(self):
+        """List available models and find a working one"""
+        try:
+            print("DEBUG: Listing available models...")
+            models = genai.list_models()
+            available_models = []
+            
+            for model in models:
+                if hasattr(model, 'name'):
+                    model_name = model.name
+                    available_models.append(model_name)
+                    print(f"  - {model_name}")
+                    
+                    # Try to use models that support generateContent
+                    if hasattr(model, 'supported_generation_methods'):
+                        if 'generateContent' in model.supported_generation_methods:
+                            print(f"    ✓ Supports generateContent")
+                            
+                            # Try to initialize this model
+                            try:
+                                test_model = genai.GenerativeModel(model_name)
+                                test_response = test_model.generate_content("Hello")
+                                if test_response and test_response.text:
+                                    print(f"    ✓ Model {model_name} works! Using this one.")
+                                    self.model = test_model
+                                    return True
+                            except Exception as e:
+                                print(f"    ✗ Model {model_name} failed: {e}")
+            
+            print(f"DEBUG: Found {len(available_models)} available models")
+            return False
+            
+        except Exception as e:
+            print(f"WARNING: Could not list models: {e}")
+            return False
+
+    def test_api_connection(self):
+        """Test API connection and list available models"""
+        try:
+            print("DEBUG: Testing API connection...")
+            
+            # If model is not initialized, try to find a working one
+            if not self.model:
+                if self.list_and_find_working_model():
+                    print("DEBUG: Found and initialized a working model!")
+                else:
+                    print("ERROR: No working models found")
+                    return False
+            
+            # Test with a simple prompt
+            test_prompt = "Say 'Hello, I am working!' in a friendly way."
+            response = self._make_api_request(test_prompt, 1)
+            
+            if response:
+                print(f"DEBUG: API test successful: {response[:50]}...")
+                return True
+            else:
+                print("ERROR: API test failed - empty response")
+                return False
+                
+        except Exception as e:
+            print(f"ERROR: API connection test failed: {e}")
+            return False
+    
+    def _wait_for_rate_limit(self):
+        """Enforce rate limiting between API calls"""
+        if self.last_request_time:
+            elapsed = time.time() - self.last_request_time
+            if elapsed < self.min_request_interval:
+                wait_time = self.min_request_interval - elapsed
+                print(f"DEBUG: Rate limiting - waiting {wait_time:.2f}s before API call")
+                time.sleep(wait_time)
+        
+        self.last_request_time = time.time()
+
+    def _make_api_request(self, prompt, attempt=1):
+        """Make API request with error handling and retry logic"""
+        try:
+            print(f"DEBUG: Making API request (attempt {attempt}/{self.max_retries})")
+            
+            # Apply rate limiting
+            self._wait_for_rate_limit()
+            
+            # Make the API call
+            response = self.model.generate_content(prompt)
+            
+            if response and hasattr(response, 'text') and response.text:
+                print(f"DEBUG: API request successful on attempt {attempt}")
+                return response.text.strip()
+            else:
+                print(f"WARNING: Empty response from API on attempt {attempt}")
+                return None
+                
+        except Exception as e:
+            error_msg = str(e).lower()
+            print(f"ERROR: API request failed on attempt {attempt}: {str(e)}")
+            
+            # Handle different types of errors
+            if "quota" in error_msg or "limit" in error_msg:
+                print("ERROR: API quota exceeded or rate limit hit")
+                raise Exception("QUOTA_EXCEEDED")
+            elif "404" in error_msg or "not found" in error_msg:
+                print("ERROR: Model not found - checking available models")
+                raise Exception("MODEL_NOT_FOUND") 
+            elif "permission" in error_msg or "unauthorized" in error_msg:
+                print("ERROR: API key permission issue")
+                raise Exception("PERMISSION_DENIED")
+            elif "network" in error_msg or "connection" in error_msg:
+                print("ERROR: Network connection issue")
+                raise Exception("NETWORK_ERROR")
+            else:
+                print(f"ERROR: Unknown API error: {str(e)}")
+                raise Exception("UNKNOWN_ERROR")
+
+    def generate_response(self, message, personality_type, context=None):
+        """
+        Generate AI response with robust retry mechanism, rate limiting, and error handling.
+        This is LLM-only - no fallback responses.
+        """
+        try:
+            # Get personality configuration
+            personality_config = self.get_personality_config(personality_type)
+            if not personality_config:
+                return "I'm having difficulty connecting to my AI brain right now. Please try again in a moment! 🤖"
+            
+            # Check if model is initialized
+            if not self.model:
+                print("ERROR: Google AI model not initialized")
+                return "I'm having difficulty connecting to my AI brain right now. Please try again in a moment! 🤖"
+            
+            # Construct the full prompt
+            system_prompt = personality_config['system_prompt']
+            user_message = message.strip()
+            
+            # Build the conversation prompt with safety and clarity
+            full_prompt = f"""{system_prompt}
+
+Now respond to this user message as your personality character:
+"{user_message}"
+
+Remember to stay completely in character and follow your personality guidelines exactly. Keep your response engaging and under 150 words."""
+
+            # Retry mechanism with exponential backoff
+            last_error = None
+            for attempt in range(1, self.max_retries + 1):
+                try:
+                    response_text = self._make_api_request(full_prompt, attempt)
+                    if response_text:
+                        return response_text
+                    
+                    # If empty response, wait and retry
+                    if attempt < self.max_retries:
+                        wait_time = min(self.base_delay * (2 ** (attempt - 1)) + random.uniform(0, 1), self.max_delay)
+                        print(f"DEBUG: Empty response, retrying in {wait_time:.2f}s...")
+                        time.sleep(wait_time)
+                
+                except Exception as e:
+                    last_error = str(e)
+                    error_type = str(e)
+                    
+                    # Handle different error types
+                    if error_type == "QUOTA_EXCEEDED":
+                        return "I'm currently experiencing high demand. Please try again in a few minutes! 🤖"
+                    elif error_type == "MODEL_NOT_FOUND":
+                        return "I'm having trouble with my AI model configuration. Please contact support! 🤖"
+                    elif error_type == "PERMISSION_DENIED":
+                        return "I'm having authentication issues. Please try again later! 🤖"
+                    elif error_type in ["NETWORK_ERROR", "UNKNOWN_ERROR"]:
+                        # These errors we can retry
+                        if attempt < self.max_retries:
+                            wait_time = min(self.base_delay * (2 ** (attempt - 1)) + random.uniform(0, 1), self.max_delay)
+                            print(f"DEBUG: Network/unknown error, retrying in {wait_time:.2f}s...")
+                            time.sleep(wait_time)
+                            continue
+                    
+                    # If it's the last attempt or a non-retryable error
+                    if attempt == self.max_retries:
+                        break
+            
+            # All retries failed
+            print(f"ERROR: All {self.max_retries} API attempts failed. Last error: {last_error}")
+            return "I'm having difficulty connecting to my AI brain right now. Please try again in a moment! 🤖"
+            
+        except Exception as e:
+            print(f"ERROR: Unexpected error in generate_response for {personality_type}: {str(e)}")
+            return "I'm having difficulty connecting to my AI brain right now. Please try again in a moment! 🤖"

requirements.txt

@@ -0,0 +1,11 @@
+Flask==2.3.3
+Flask-SocketIO==5.3.6
+python-socketio==5.9.0
+python-engineio==4.7.1
+eventlet==0.33.3
+requests==2.31.0
+python-dotenv==1.0.0
+google-generativeai==0.3.2
+Pillow==10.0.1
+textstat==0.7.3
+textblob==0.17.1

static/css/terminal.css

@@ -0,0 +1,426 @@
+/* Terminal Theme Variables */
+@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');
+:root {
+    --terminal-bg: #0d1117;
+    --terminal-bg-secondary: #161b22;
+    --terminal-bg-tertiary: #21262d;
+    --terminal-border: #30363d;
+    --terminal-green: #00ff00;
+    --terminal-green-glow: rgba(0, 255, 0, 0.6);
+    --terminal-text: #00ff00;
+    --terminal-text-muted: #7d8590;
+    --terminal-accent: #58a6ff;
+    --terminal-warning: #f85149;
+    --terminal-font: 'Rubik Wet Paint', 'VT323', 'JetBrains Mono', 'Consolas', cursive, monospace;
+    --terminal-font-ui: 'Roboto', -apple-system, system-ui;
+}
+
+/* Global Styles */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--terminal-font);
+    background: var(--terminal-bg);
+    color: var(--terminal-text);
+    font-size: 18px;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Glitch Effect Overlay */
+.glitch-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: -1;
+    background: 
+        radial-gradient(circle at 20% 50%, transparent 20%, rgba(57, 255, 20, 0.03) 21%, rgba(57, 255, 20, 0.03) 34%, transparent 35%),
+        linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%);
+    animation: glitch-flicker 3s infinite;
+}
+
+@keyframes glitch-flicker {
+    0%, 98%, 100% { opacity: 1; }
+    99% { opacity: 0.8; }
+}
+
+/* Navigation */
+.terminal-nav {
+    background: var(--terminal-bg-secondary) !important;
+    border-bottom: 1px solid var(--terminal-border);
+    backdrop-filter: blur(10px);
+    padding: 0.75rem 0;
+}
+
+.terminal-brand {
+    font-family: var(--terminal-font);
+    font-weight: 500;
+    font-size: 1.2rem;
+    text-decoration: none !important;
+    color: var(--terminal-text) !important;
+    display: flex;
+    align-items: center;
+}
+
+.brand-text {
+    margin-right: 2px;
+}
+
+.brand-cursor {
+    color: var(--terminal-green);
+    animation: cursor-blink 1s infinite;
+}
+
+@keyframes cursor-blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+.terminal-status {
+    display: flex;
+    align-items: center;
+    font-size: 0.8rem;
+    color: var(--terminal-text-muted);
+}
+
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    background: var(--terminal-green);
+    border-radius: 50%;
+    margin-right: 0.5rem;
+    animation: pulse-glow 2s infinite;
+}
+
+@keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 5px var(--terminal-green-glow); }
+    50% { box-shadow: 0 0 15px var(--terminal-green-glow); }
+}
+
+/* Main Content */
+.terminal-main {
+    min-height: calc(100vh - 140px);
+    padding: 2rem 0;
+}
+
+/* Cards and Containers */
+.terminal-card {
+    background: var(--terminal-bg-secondary);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.terminal-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--terminal-green), transparent);
+    opacity: 0.5;
+}
+
+.terminal-window {
+    background: var(--terminal-bg-tertiary);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.terminal-header {
+    background: var(--terminal-bg-secondary);
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--terminal-border);
+    display: flex;
+    align-items: center;
+}
+
+.terminal-dots {
+    display: flex;
+    gap: 0.5rem;
+    margin-right: 1rem;
+}
+
+.terminal-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.terminal-dot.red { background: #ff5f56; }
+.terminal-dot.yellow { background: #ffbd2e; }
+.terminal-dot.green { background: #27ca3f; }
+
+.terminal-title {
+    font-size: 1rem;
+    color: var(--terminal-green);
+    margin: 0;
+}
+
+/* Buttons */
+.btn-terminal {
+    background: transparent;
+    border: 1px solid var(--terminal-green);
+    color: var(--terminal-green);
+    font-family: var(--terminal-font);
+    font-size: 0.9rem;
+    padding: 0.5rem 1.5rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-terminal:hover {
+    background: var(--terminal-green);
+    color: var(--terminal-bg);
+    box-shadow: 0 0 20px var(--terminal-green-glow);
+    transform: translateY(-1px);
+}
+
+.btn-terminal:active {
+    transform: translateY(0);
+}
+
+.btn-terminal::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
+}
+
+.btn-terminal:hover::before {
+    left: 100%;
+}
+
+/* Forms */
+.terminal-input {
+    background: var(--terminal-bg-tertiary);
+    border: 1px solid var(--terminal-border);
+    color: var(--terminal-text);
+    font-family: var(--terminal-font);
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+.terminal-input:focus {
+    background: var(--terminal-bg-secondary);
+    border-color: var(--terminal-green);
+    box-shadow: 0 0 0 0.2rem var(--terminal-green-glow);
+    color: var(--terminal-text);
+}
+
+.terminal-input::placeholder {
+    color: var(--terminal-text-muted);
+    font-style: italic;
+}
+
+/* Text Styles */
+.terminal-text {
+    font-family: var(--terminal-font);
+}
+
+.text-terminal-green {
+    color: var(--terminal-green);
+}
+
+.text-terminal-accent {
+    color: var(--terminal-accent);
+}
+
+.text-glow {
+    text-shadow: 0 0 10px currentColor;
+}
+
+/* Animations */
+.typewriter {
+    overflow: hidden;
+    border-right: 2px solid var(--terminal-green);
+    white-space: nowrap;
+    margin: 0 auto;
+    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+    from { width: 0; }
+    to { width: 100%; }
+}
+
+@keyframes blink-caret {
+    from, to { border-color: transparent; }
+    50% { border-color: var(--terminal-green); }
+}
+
+.fade-in {
+    animation: fadeIn 1s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-up {
+    animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(50px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+/* Chat Specific Styles */
+.chat-container {
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    background: var(--terminal-bg-tertiary);
+}
+
+.chat-message {
+    margin-bottom: 1rem;
+    animation: messageSlide 0.3s ease-out;
+}
+
+@keyframes messageSlide {
+    from { 
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25rem;
+}
+
+.message-username {
+    font-weight: 500;
+    margin-right: 0.5rem;
+}
+
+.message-timestamp {
+    font-size: 0.8rem;
+    color: var(--terminal-text-muted);
+}
+
+.message-content {
+    background: var(--terminal-bg-secondary);
+    padding: 0.75rem;
+    border-radius: 4px;
+    border-left: 3px solid var(--terminal-green);
+    margin-left: 1rem;
+}
+
+.bot-message .message-content {
+    border-left-color: var(--terminal-accent);
+    background: rgba(88, 166, 255, 0.1);
+}
+
+.bot-message .message-username {
+    color: var(--terminal-accent);
+}
+
+.chat-input-container {
+    padding: 1rem;
+    background: var(--terminal-bg-secondary);
+    border-top: 1px solid var(--terminal-border);
+}
+
+.typing-indicator {
+    font-style: italic;
+    color: var(--terminal-text-muted);
+    padding: 0.5rem 1rem;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+}
+
+/* Footer */
+.terminal-footer {
+    background: var(--terminal-bg-secondary);
+    border-top: 1px solid var(--terminal-border);
+    padding: 1rem 0;
+    margin-top: auto;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .terminal-main {
+        padding: 1rem 0;
+    }
+    
+    .chat-container {
+        height: 60vh;
+    }
+    
+    .terminal-brand {
+        font-size: 1rem;
+    }
+}
+
+/* Scrollbar */
+.chat-messages::-webkit-scrollbar {
+    width: 8px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+    background: var(--terminal-bg);
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+    background: var(--terminal-border);
+    border-radius: 4px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+    background: var(--terminal-text-muted);
+}
+
+/* Loading Spinner */
+.terminal-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--terminal-border);
+    border-top: 2px solid var(--terminal-green);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    display: inline-block;
+    margin-right: 0.5rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

static/js/advice-chat.js

@@ -0,0 +1,318 @@
+/**
+ * Advice Chat Module - Enhanced chat with personality inversion
+ * Tests hypothesis: "Can a chatbot give better advice if it's rude?"
+ */
+
+class AdviceChat extends SarcasticChat {
+    constructor() {
+        super();
+        this.adviceCount = 0;
+        this.inversionCount = 0;
+        this.userToneHistory = [];
+        this.botStyleHistory = [];
+    }
+
+    connectToChat(username) {
+        this.connect(username);
+    }
+
+    displayMessage(messageData) {
+        // Enhanced display for advice messages with sentiment indicators
+        const messageElement = document.createElement('div');
+        messageElement.className = `chat-message ${messageData.is_bot ? 'bot-message' : ''}`;
+        
+        let sentimentIndicator = '';
+        let avatarIcon = '';
+        
+        if (messageData.is_bot) {
+            // Bot message with personality indicator
+            const botStyle = messageData.sentiment || 'neutral';
+            const userWas = messageData.user_was || 'neutral';
+            
+            avatarIcon = '<i class="fas fa-brain text-terminal-accent"></i>';
+            sentimentIndicator = `
+                <div class="sentiment-indicator mb-2">
+                    <small class="text-muted">
+                        You were: <span class="badge ${userWas === 'rude' ? 'bg-warning' : 'bg-success'}">${userWas}</span> 
+                        → I'm being: <span class="badge ${botStyle === 'nice' ? 'bg-success' : 'bg-warning'}">${botStyle}</span>
+                        <i class="fas fa-exchange-alt text-terminal-green ms-1"></i>
+                    </small>
+                </div>
+            `;
+            
+            // Update counters
+            this.inversionCount++;
+            this.updateStats();
+            
+            // Track bot style
+            this.botStyleHistory.push(botStyle);
+            this.updateBotStyleDisplay(botStyle);
+        } else {
+            avatarIcon = '<i class="fas fa-user text-terminal-green"></i>';
+            
+            // This would normally come from sentiment analysis
+            // For now, we'll detect based on simple keywords
+            const tone = this.detectUserTone(messageData.message);
+            this.userToneHistory.push(tone);
+            this.updateUserToneDisplay(tone);
+            
+            if (messageData.message.includes('?') || messageData.message.toLowerCase().includes('advice')) {
+                this.adviceCount++;
+                this.updateStats();
+            }
+        }
+
+        messageElement.innerHTML = `
+            <div class="message-header">
+                ${avatarIcon}
+                <span class="message-username ${messageData.is_bot ? 'text-terminal-accent' : 'text-terminal-green'}">${this.escapeHtml(messageData.username)}</span>
+                <span class="message-timestamp">${messageData.timestamp}</span>
+            </div>
+            ${sentimentIndicator}
+            <div class="message-content">
+                ${this.formatAdviceMessage(messageData.message)}
+            </div>
+        `;
+
+        // Add with animation
+        this.chatMessages.appendChild(messageElement);
+        
+        // Special effects for advice responses
+        if (messageData.is_bot && window.terminalEffects) {
+            window.terminalEffects.powerOnEffect(messageElement);
+            
+            // Add personality inversion glow effect
+            setTimeout(() => {
+                messageElement.style.boxShadow = '0 0 15px rgba(57, 255, 20, 0.3)';
+                setTimeout(() => {
+                    messageElement.style.boxShadow = '';
+                }, 1000);
+            }, 500);
+        }
+
+        this.scrollToBottom();
+    }
+
+    formatAdviceMessage(message) {
+        let formatted = this.escapeHtml(message);
+        
+        // Highlight advice keywords
+        const adviceKeywords = [
+            'advice', 'suggest', 'recommend', 'should', 'could', 'might', 'try',
+            'consider', 'think about', 'focus on', 'start with', 'remember'
+        ];
+        
+        adviceKeywords.forEach(keyword => {
+            const regex = new RegExp(`\\b${keyword}\\b`, 'gi');
+            formatted = formatted.replace(regex, `<span class="text-terminal-accent">${keyword}</span>`);
+        });
+        
+        // Highlight British expressions
+        const britishExpressions = [
+            'right then', 'blimey', 'brilliant', 'lovely', 'quite', 'rather',
+            'I say', 'charming', 'splendid', 'terribly', 'absolutely'
+        ];
+        
+        britishExpressions.forEach(expression => {
+            const regex = new RegExp(`\\b${expression}\\b`, 'gi');
+            formatted = formatted.replace(regex, `<span class="text-terminal-green">${expression}</span>`);
+        });
+        
+        // Add emoji support
+        formatted = formatted.replace(/:\)/g, '😊');
+        formatted = formatted.replace(/:\(/g, '😔');
+        formatted = formatted.replace(/:D/g, '😄');
+        
+        return formatted;
+    }
+
+    detectUserTone(message) {
+        const messageLower = message.toLowerCase();
+        
+        // Rude indicators
+        const rudeWords = ['stupid', 'dumb', 'hate', 'sucks', 'awful', 'terrible', 'worst', 'useless', 'damn', 'shit'];
+        const niceWords = ['please', 'thank', 'sorry', 'appreciate', 'wonderful', 'great', 'awesome', 'love', 'fantastic'];
+        
+        const rudeCount = rudeWords.filter(word => messageLower.includes(word)).length;
+        const niceCount = niceWords.filter(word => messageLower.includes(word)).length;
+        
+        if (rudeCount > niceCount && rudeCount > 0) {
+            return 'rude';
+        } else if (niceCount > rudeCount && niceCount > 0) {
+            return 'nice';
+        } else {
+            return 'neutral';
+        }
+    }
+
+    updateUserToneDisplay(tone) {
+        const toneElement = document.getElementById('userTone');
+        if (toneElement) {
+            toneElement.textContent = tone.charAt(0).toUpperCase() + tone.slice(1);
+            toneElement.className = `badge ${tone === 'rude' ? 'bg-warning' : tone === 'nice' ? 'bg-success' : 'bg-secondary'}`;
+        }
+    }
+
+    updateBotStyleDisplay(style) {
+        const styleElement = document.getElementById('botStyle');
+        if (styleElement) {
+            styleElement.textContent = style.charAt(0).toUpperCase() + style.slice(1);
+            styleElement.className = `badge ${style === 'nice' ? 'bg-success' : style === 'rude' ? 'bg-warning' : 'bg-secondary'}`;
+        }
+    }
+
+    updateStats() {
+        // Update advice count
+        const adviceCountElement = document.getElementById('adviceCount');
+        if (adviceCountElement) {
+            adviceCountElement.textContent = this.adviceCount;
+        }
+        
+        // Update inversion count
+        const inversionCountElement = document.getElementById('inversionCount');
+        if (inversionCountElement) {
+            inversionCountElement.textContent = this.inversionCount;
+        }
+        
+        // Update base stats
+        super.updateStats();
+    }
+
+    sendMessage() {
+        const message = this.messageInput.value.trim();
+        if (!message) return;
+
+        // Rate limiting
+        const now = Date.now();
+        if (now - this.lastMessageTime < 1000) {
+            this.showSystemMessage('Slow down there! One advice request per second.', 'warning');
+            return;
+        }
+        this.lastMessageTime = now;
+
+        // Send message with advice mode indicator
+        this.socket.emit('send_message', { 
+            message: message,
+            mode: 'advice' 
+        });
+
+        // Clear input and update stats
+        this.messageInput.value = '';
+        this.messageCount++;
+        this.updateStats();
+
+        // Stop typing indicator
+        this.stopTyping();
+
+        // Show network activity
+        if (window.terminalEffects) {
+            window.terminalEffects.showNetworkActivity();
+        }
+
+        // Special handling for advice requests
+        if (message.includes('?') || message.toLowerCase().includes('advice')) {
+            // Show special typing indicator for advice
+            setTimeout(() => {
+                const typingIndicator = document.getElementById('typingIndicator');
+                if (typingIndicator) {
+                    typingIndicator.innerHTML = '<i class="fas fa-brain"></i> AdviceBot is analyzing your tone and crafting response...';
+                    typingIndicator.style.display = 'block';
+                }
+            }, 500);
+        }
+    }
+
+    showAdviceSystemMessage(message, type = 'info') {
+        const messageElement = document.createElement('div');
+        messageElement.className = 'chat-message system-message';
+        
+        let iconClass = 'fas fa-flask';
+        let textClass = 'text-terminal-accent';
+        
+        switch(type) {
+            case 'hypothesis':
+                iconClass = 'fas fa-microscope';
+                textClass = 'text-success';
+                break;
+            case 'inversion':
+                iconClass = 'fas fa-exchange-alt';
+                textClass = 'text-warning';
+                break;
+            case 'success':
+                iconClass = 'fas fa-check-circle';
+                textClass = 'text-success';
+                break;
+        }
+
+        messageElement.innerHTML = `
+            <div class="message-content ${textClass}" style="border-left-color: currentColor;">
+                <i class="${iconClass} me-2"></i>${this.escapeHtml(message)}
+            </div>
+        `;
+
+        this.chatMessages.appendChild(messageElement);
+        this.scrollToBottom();
+    }
+
+    // Enhanced welcome message for advice mode
+    displayAdviceWelcome() {
+        setTimeout(() => {
+            this.showAdviceSystemMessage(
+                "Personality Inversion Protocol activated! Try being rude or nice to see how I adapt my advice style. 🧪", 
+                'hypothesis'
+            );
+        }, 2000);
+        
+        setTimeout(() => {
+            this.showAdviceSystemMessage(
+                "Pro tip: Ask about work, relationships, technology, health, or life in general!", 
+                'inversion'
+            );
+        }, 4000);
+    }
+
+    // Track engagement metrics for hypothesis testing
+    trackEngagement(action) {
+        const engagementData = {
+            timestamp: new Date().toISOString(),
+            action: action,
+            user_tone_history: this.userToneHistory.slice(-5), // Last 5 tones
+            bot_style_history: this.botStyleHistory.slice(-5), // Last 5 styles
+            total_advice_requests: this.adviceCount,
+            total_inversions: this.inversionCount
+        };
+        
+        // This could be sent to analytics
+        console.log('Engagement tracked:', engagementData);
+    }
+
+    // Override connect method to set up advice-specific features
+    connect(username) {
+        super.connect(username);
+        
+        // Set up advice mode specific event listeners
+        this.socket.on('advice_response', (data) => {
+            this.trackEngagement('advice_received');
+            // Handle special advice responses
+        });
+        
+        // Show welcome messages after connection
+        this.socket.on('connect', () => {
+            setTimeout(() => {
+                this.displayAdviceWelcome();
+            }, 3000);
+        });
+    }
+}
+
+// Initialize advice chat
+let adviceChat;
+
+function initializeAdviceChat(username) {
+    adviceChat = new AdviceChat();
+    adviceChat.connectToChat(username);
+}
+
+// Expose globally
+window.initializeAdviceChat = initializeAdviceChat;
+window.AdviceChat = AdviceChat;

static/js/chat.js

@@ -0,0 +1,397 @@
+/**
+ * Chat Module - Handles real-time messaging with Socket.IO
+ * The heart of our sarcastic British chat experience
+ */
+
+class SarcasticChat {
+    constructor() {
+        this.socket = null;
+        this.username = null;
+        this.messageCount = 0;
+        this.botResponseCount = 0;
+        this.isTyping = false;
+        this.typingTimer = null;
+        this.lastMessageTime = 0;
+        this.init();
+    }
+
+    init() {
+        this.initializeElements();
+        this.setupEventListeners();
+    }
+
+    initializeElements() {
+        this.chatMessages = document.getElementById('chatMessages');
+        this.messageInput = document.getElementById('messageInput');
+        this.messageForm = document.getElementById('messageForm');
+        this.typingIndicator = document.getElementById('typingIndicator');
+        this.userCountElement = document.getElementById('userCount');
+        this.messageCountElement = document.getElementById('messageCount');
+        this.botResponseCountElement = document.getElementById('botResponseCount');
+    }
+
+    setupEventListeners() {
+        // Message form submission
+        this.messageForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.sendMessage();
+        });
+
+        // Typing indicator
+        this.messageInput.addEventListener('input', () => {
+            this.handleTyping();
+        });
+
+        // Enter key handling
+        this.messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+
+        // Focus input when page loads
+        this.messageInput.focus();
+    }
+
+    connect(username) {
+        this.username = username;
+        
+        // Show connection modal
+        const connectionModal = new bootstrap.Modal(document.getElementById('connectionModal'));
+        connectionModal.show();
+
+        // Initialize Socket.IO connection
+        this.socket = io();
+
+        this.socket.on('connect', () => {
+            console.log('Connected to server');
+            this.joinChat();
+            connectionModal.hide();
+            
+            // Show success effect
+            if (window.terminalEffects) {
+                window.terminalEffects.successFlash();
+                window.terminalEffects.showNetworkActivity();
+            }
+        });
+
+        this.socket.on('disconnect', () => {
+            console.log('Disconnected from server');
+            this.showSystemMessage('Connection lost. Attempting to reconnect...', 'warning');
+        });
+
+        this.socket.on('new_message', (data) => {
+            this.displayMessage(data);
+            if (data.is_bot) {
+                this.botResponseCount++;
+                this.updateStats();
+            }
+        });
+
+        this.socket.on('user_joined', (data) => {
+            this.showSystemMessage(`${data.username} joined the chat`, 'info');
+        });
+
+        this.socket.on('user_left', (data) => {
+            this.showSystemMessage(`${data.username} left the chat`, 'info');
+        });
+
+        this.socket.on('user_typing', (data) => {
+            this.showTypingIndicator(data.username, data.is_typing);
+        });
+
+        this.socket.on('chat_history', (messages) => {
+            this.loadChatHistory(messages);
+        });
+
+        this.socket.on('connect_error', (error) => {
+            console.error('Connection error:', error);
+            this.showSystemMessage('Failed to connect to chat server', 'error');
+            if (window.terminalEffects) {
+                window.terminalEffects.errorFlash();
+            }
+        });
+    }
+
+    joinChat() {
+        this.socket.emit('join_chat', {
+            username: this.username,
+            room: 'general'
+        });
+    }
+
+    sendMessage() {
+        const message = this.messageInput.value.trim();
+        if (!message) return;
+
+        // Rate limiting - prevent spam
+        const now = Date.now();
+        if (now - this.lastMessageTime < 1000) {
+            this.showSystemMessage('Slow down there, speed demon! One message per second.', 'warning');
+            return;
+        }
+        this.lastMessageTime = now;
+
+        // Send message via socket
+        this.socket.emit('send_message', { message });
+
+        // Clear input and update stats
+        this.messageInput.value = '';
+        this.messageCount++;
+        this.updateStats();
+
+        // Stop typing indicator
+        this.stopTyping();
+
+        // Show network activity
+        if (window.terminalEffects) {
+            window.terminalEffects.showNetworkActivity();
+        }
+
+        // Check for Easter eggs
+        this.checkEasterEggs(message);
+    }
+
+    displayMessage(messageData) {
+        const messageElement = document.createElement('div');
+        messageElement.className = `chat-message ${messageData.is_bot ? 'bot-message' : ''}`;
+        
+        const avatarIcon = messageData.is_bot ? 
+            '<i class="fas fa-robot text-terminal-accent"></i>' : 
+            '<i class="fas fa-user text-terminal-green"></i>';
+
+        messageElement.innerHTML = `
+            <div class="message-header">
+                ${avatarIcon}
+                <span class="message-username ${messageData.is_bot ? 'text-terminal-accent' : 'text-terminal-green'}">${this.escapeHtml(messageData.username)}</span>
+                <span class="message-timestamp">${messageData.timestamp}</span>
+            </div>
+            <div class="message-content">
+                ${this.formatMessage(messageData.message)}
+            </div>
+        `;
+
+        // Add with animation
+        this.chatMessages.appendChild(messageElement);
+        
+        // Power-on effect for bot messages
+        if (messageData.is_bot && window.terminalEffects) {
+            window.terminalEffects.powerOnEffect(messageElement);
+        }
+
+        // Scroll to bottom
+        this.scrollToBottom();
+
+        // Add glitch effect occasionally
+        if (Math.random() < 0.05) {
+            setTimeout(() => {
+                if (window.terminalEffects) {
+                    window.terminalEffects.triggerGlitch();
+                }
+            }, 500);
+        }
+    }
+
+    formatMessage(message) {
+        // Escape HTML first
+        let formatted = this.escapeHtml(message);
+        
+        // Add emoji support for common patterns
+        formatted = formatted.replace(/:\)/g, '😊');
+        formatted = formatted.replace(/:\(/g, '😔');
+        formatted = formatted.replace(/:D/g, '😄');
+        formatted = formatted.replace(/;-?\)/g, '😉');
+        formatted = formatted.replace(/🫖/g, '🫖'); // Keep tea emoji
+        
+        // Highlight British terms
+        const britishTerms = [
+            'brilliant', 'lovely', 'quite', 'rather', 'blimey', 
+            'right then', 'I say', 'charming', 'queue', 'tea'
+        ];
+        
+        britishTerms.forEach(term => {
+            const regex = new RegExp(`\\b${term}\\b`, 'gi');
+            formatted = formatted.replace(regex, `<span class="text-terminal-green">${term}</span>`);
+        });
+
+        return formatted;
+    }
+
+    showSystemMessage(message, type = 'info') {
+        const messageElement = document.createElement('div');
+        messageElement.className = 'chat-message system-message';
+        
+        let iconClass = 'fas fa-info-circle';
+        let textClass = 'text-terminal-accent';
+        
+        switch(type) {
+            case 'warning':
+                iconClass = 'fas fa-exclamation-triangle';
+                textClass = 'text-warning';
+                break;
+            case 'error':
+                iconClass = 'fas fa-times-circle';
+                textClass = 'text-danger';
+                break;
+            case 'success':
+                iconClass = 'fas fa-check-circle';
+                textClass = 'text-success';
+                break;
+        }
+
+        messageElement.innerHTML = `
+            <div class="message-content ${textClass}" style="border-left-color: currentColor;">
+                <i class="${iconClass} me-2"></i>${this.escapeHtml(message)}
+            </div>
+        `;
+
+        this.chatMessages.appendChild(messageElement);
+        this.scrollToBottom();
+    }
+
+    handleTyping() {
+        if (!this.isTyping) {
+            this.isTyping = true;
+            this.socket.emit('typing', { is_typing: true });
+        }
+
+        // Clear existing timer
+        if (this.typingTimer) {
+            clearTimeout(this.typingTimer);
+        }
+
+        // Set new timer
+        this.typingTimer = setTimeout(() => {
+            this.stopTyping();
+        }, 2000);
+    }
+
+    stopTyping() {
+        if (this.isTyping) {
+            this.isTyping = false;
+            this.socket.emit('typing', { is_typing: false });
+        }
+        
+        if (this.typingTimer) {
+            clearTimeout(this.typingTimer);
+            this.typingTimer = null;
+        }
+    }
+
+    showTypingIndicator(username, isTyping) {
+        if (isTyping) {
+            this.typingIndicator.innerHTML = `<i class="fas fa-ellipsis-h"></i> ${this.escapeHtml(username)} is typing...`;
+            this.typingIndicator.style.display = 'block';
+        } else {
+            this.typingIndicator.style.display = 'none';
+        }
+    }
+
+    loadChatHistory(messages) {
+        // Clear existing messages except system welcome
+        const systemMessages = this.chatMessages.querySelectorAll('.system-message, .fade-in');
+        this.chatMessages.innerHTML = '';
+        
+        // Re-add system messages
+        systemMessages.forEach(msg => this.chatMessages.appendChild(msg));
+
+        // Add chat history
+        messages.forEach(message => this.displayMessage(message));
+    }
+
+    updateStats() {
+        if (this.messageCountElement) {
+            this.messageCountElement.textContent = this.messageCount;
+        }
+        if (this.botResponseCountElement) {
+            this.botResponseCountElement.textContent = this.botResponseCount;
+        }
+
+        // Update sarcasm level based on bot responses
+        const sarcasmBar = document.getElementById('sarcasmLevel');
+        if (sarcasmBar && this.botResponseCount > 0) {
+            const level = Math.min(85 + (this.botResponseCount * 2), 100);
+            sarcasmBar.style.width = `${level}%`;
+        }
+    }
+
+    checkEasterEggs(message) {
+        const lowerMessage = message.toLowerCase();
+        
+        // Tea time easter egg
+        if (lowerMessage.includes('tea time') || lowerMessage.includes('teatime')) {
+            setTimeout(() => {
+                this.showSystemMessage('🫖 TEA TIME DETECTED! The bot approves greatly!', 'success');
+            }, 1000);
+        }
+
+        // Queue easter egg
+        if (lowerMessage.includes('queue')) {
+            setTimeout(() => {
+                this.showSystemMessage('🇬🇧 Proper queuing etiquette detected. Carry on!', 'success');
+            }, 1500);
+        }
+
+        // Sarcasm level easter egg
+        if (lowerMessage.includes('sarcasm') || lowerMessage.includes('sarcastic')) {
+            setTimeout(() => {
+                this.showSystemMessage('Did someone mention sarcasm? How terribly meta.', 'info');
+            }, 2000);
+        }
+    }
+
+    scrollToBottom() {
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Public method to connect from external script
+    connectToChat(username) {
+        this.connect(username);
+    }
+}
+
+// Initialize chat functionality
+let sarcasticChat;
+
+function initializeChat(username) {
+    sarcasticChat = new SarcasticChat();
+    sarcasticChat.connectToChat(username);
+}
+
+// Boot sequence when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    // Add some terminal boot messages for fun
+    const bootMessages = [
+        'Initializing sarcasm protocols...',
+        'Loading British wit database...',
+        'Calibrating eye-roll mechanisms...',
+        'Connecting to tea server...',
+        'Queue management system: ONLINE',
+        'Deploying devastating humor...',
+        'Ready for maximum sarcasm!'
+    ];
+
+    // Only show boot sequence on chat page
+    if (window.location.pathname === '/chat') {
+        const container = document.querySelector('.container-fluid');
+        if (container && window.terminalEffects) {
+            // Small delay to let other effects initialize
+            setTimeout(() => {
+                window.terminalEffects.bootSequence(container, bootMessages, () => {
+                    console.log('Chat system ready for maximum British sarcasm!');
+                });
+            }, 1000);
+        }
+    }
+});
+
+// Expose globally
+window.initializeChat = initializeChat;
+window.SarcasticChat = SarcasticChat;

static/js/terminal-effects.js

@@ -0,0 +1,306 @@
+/**
+ * Terminal Effects Module
+ * Handles all the aesthetic terminal animations and effects
+ */
+
+class TerminalEffects {
+    constructor() {
+        this.isGlitching = false;
+        this.scanlineInterval = null;
+        this.init();
+    }
+
+    init() {
+        this.createScanlines();
+        this.initCursorBlink();
+        this.initRandomGlitches();
+        this.initTypingEffects();
+        this.initMatrixRain();
+    }
+
+    // Create CRT scanline effect
+    createScanlines() {
+        const scanlines = document.createElement('div');
+        scanlines.className = 'scanlines';
+        scanlines.innerHTML = Array(50).fill().map((_, i) => 
+            `<div class="scanline" style="top: ${i * 2}%"></div>`
+        ).join('');
+        
+        const style = document.createElement('style');
+        style.textContent = `
+            .scanlines {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                pointer-events: none;
+                z-index: 1000;
+                opacity: 0.03;
+            }
+            
+            .scanline {
+                position: absolute;
+                left: 0;
+                right: 0;
+                height: 1px;
+                background: #39ff14;
+                animation: scanline-flicker 0.1s infinite alternate;
+            }
+            
+            @keyframes scanline-flicker {
+                0% { opacity: 0.8; }
+                100% { opacity: 0.2; }
+            }
+        `;
+        
+        document.head.appendChild(style);
+        document.body.appendChild(scanlines);
+    }
+
+    // Enhanced cursor blinking
+    initCursorBlink() {
+        const cursors = document.querySelectorAll('.brand-cursor');
+        cursors.forEach(cursor => {
+            setInterval(() => {
+                cursor.style.opacity = cursor.style.opacity === '0' ? '1' : '0';
+            }, 500 + Math.random() * 200); // Slight randomness
+        });
+    }
+
+    // Random glitch effects
+    initRandomGlitches() {
+        setInterval(() => {
+            if (Math.random() < 0.02 && !this.isGlitching) { // 2% chance
+                this.triggerGlitch();
+            }
+        }, 1000);
+    }
+
+    triggerGlitch() {
+        if (this.isGlitching) return;
+        
+        this.isGlitching = true;
+        const elements = document.querySelectorAll('.terminal-card, .chat-message');
+        const randomElement = elements[Math.floor(Math.random() * elements.length)];
+        
+        if (randomElement) {
+            const originalTransform = randomElement.style.transform;
+            const glitchIntensity = Math.random() * 5;
+            
+            // Apply glitch effect
+            randomElement.style.filter = `hue-rotate(${Math.random() * 360}deg) saturate(2)`;
+            randomElement.style.transform = `translateX(${Math.random() * glitchIntensity - glitchIntensity/2}px) skew(${Math.random() * 2}deg)`;
+            
+            // Create text shadow glitch
+            randomElement.style.textShadow = `
+                ${Math.random() * 10 - 5}px 0 #ff0000,
+                ${Math.random() * 10 - 5}px 0 #00ff00,
+                ${Math.random() * 10 - 5}px 0 #0000ff
+            `;
+            
+            setTimeout(() => {
+                randomElement.style.filter = '';
+                randomElement.style.transform = originalTransform;
+                randomElement.style.textShadow = '';
+                this.isGlitching = false;
+            }, 50 + Math.random() * 100);
+        } else {
+            this.isGlitching = false;
+        }
+    }
+
+    // Typing animation for new elements
+    typeWriter(element, text, speed = 50, callback = null) {
+        let i = 0;
+        element.textContent = '';
+        
+        const timer = setInterval(() => {
+            if (i < text.length) {
+                element.textContent += text.charAt(i);
+                i++;
+                
+                // Add random typing delays
+                if (Math.random() < 0.1) {
+                    clearInterval(timer);
+                    setTimeout(() => {
+                        this.typeWriter(element, text.substring(i), speed, callback);
+                    }, speed * 2);
+                    return;
+                }
+            } else {
+                clearInterval(timer);
+                if (callback) callback();
+            }
+        }, speed);
+    }
+
+    initTypingEffects() {
+        // Apply to elements that should have typing effect
+        const typeElements = document.querySelectorAll('.typewriter-effect');
+        typeElements.forEach(element => {
+            const text = element.textContent;
+            this.typeWriter(element, text, 30);
+        });
+    }
+
+    // Matrix-style rain effect (subtle)
+    initMatrixRain() {
+        const canvas = document.createElement('canvas');
+        canvas.style.position = 'fixed';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        canvas.style.pointerEvents = 'none';
+        canvas.style.zIndex = '-2';
+        canvas.style.opacity = '0.03';
+        
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        
+        const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
+        const matrixArray = matrix.split("");
+        
+        const fontSize = 10;
+        const columns = canvas.width / fontSize;
+        const drops = [];
+        
+        for (let x = 0; x < columns; x++) {
+            drops[x] = 1;
+        }
+        
+        function draw() {
+            ctx.fillStyle = 'rgba(13, 17, 23, 0.04)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            ctx.fillStyle = '#39ff14';
+            ctx.font = fontSize + 'px monospace';
+            
+            for (let i = 0; i < drops.length; i++) {
+                const text = matrixArray[Math.floor(Math.random() * matrixArray.length)];
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+                
+                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i]++;
+            }
+        }
+        
+        document.body.appendChild(canvas);
+        setInterval(draw, 150);
+        
+        // Resize canvas on window resize
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+    }
+
+    // Power-on effect for new elements
+    powerOnEffect(element) {
+        element.style.opacity = '0';
+        element.style.transform = 'scale(0.8) rotateX(20deg)';
+        element.style.filter = 'brightness(0)';
+        
+        setTimeout(() => {
+            element.style.transition = 'all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
+            element.style.opacity = '1';
+            element.style.transform = 'scale(1) rotateX(0deg)';
+            element.style.filter = 'brightness(1)';
+            
+            // Add a brief glow effect
+            element.style.boxShadow = '0 0 20px var(--terminal-green-glow)';
+            setTimeout(() => {
+                element.style.boxShadow = '';
+            }, 500);
+        }, 100);
+    }
+
+    // Boot sequence effect
+    bootSequence(container, messages, onComplete) {
+        let messageIndex = 0;
+        const bootContainer = document.createElement('div');
+        bootContainer.className = 'boot-sequence';
+        bootContainer.innerHTML = `
+            <div class="terminal-window">
+                <div class="terminal-header">
+                    <div class="terminal-dots">
+                        <div class="terminal-dot red"></div>
+                        <div class="terminal-dot yellow"></div>
+                        <div class="terminal-dot green"></div>
+                    </div>
+                    <h6 class="terminal-title">system_boot.log</h6>
+                </div>
+                <div class="boot-content bg-dark p-3" style="font-family: var(--terminal-font); min-height: 200px;">
+                    <div class="boot-messages"></div>
+                </div>
+            </div>
+        `;
+        
+        container.appendChild(bootContainer);
+        const messagesContainer = bootContainer.querySelector('.boot-messages');
+        
+        function addMessage() {
+            if (messageIndex < messages.length) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'text-terminal-green';
+                messageDiv.innerHTML = `<span class="text-muted">></span> ${messages[messageIndex]}`;
+                messagesContainer.appendChild(messageDiv);
+                
+                // Scroll to bottom
+                messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                
+                messageIndex++;
+                setTimeout(addMessage, 300 + Math.random() * 200);
+            } else {
+                setTimeout(() => {
+                    container.removeChild(bootContainer);
+                    if (onComplete) onComplete();
+                }, 1000);
+            }
+        }
+        
+        setTimeout(addMessage, 500);
+    }
+
+    // Network activity indicator
+    showNetworkActivity() {
+        const indicator = document.querySelector('.status-indicator');
+        if (indicator) {
+            indicator.style.background = '#ffbd2e';
+            indicator.style.animation = 'pulse-glow 0.3s infinite';
+            
+            setTimeout(() => {
+                indicator.style.background = 'var(--terminal-green)';
+                indicator.style.animation = 'pulse-glow 2s infinite';
+            }, 1000);
+        }
+    }
+
+    // Error flash effect
+    errorFlash() {
+        document.body.style.backgroundColor = '#ff5f5610';
+        setTimeout(() => {
+            document.body.style.backgroundColor = '';
+        }, 150);
+    }
+
+    // Success flash effect
+    successFlash() {
+        document.body.style.backgroundColor = '#39ff1410';
+        setTimeout(() => {
+            document.body.style.backgroundColor = '';
+        }, 150);
+    }
+}
+
+// Initialize terminal effects when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.terminalEffects = new TerminalEffects();
+});
+
+// Expose for use in other modules
+window.TerminalEffects = TerminalEffects;

templates/base.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Multi-Personality Bot{% endblock %}</title>
+    
+    <!-- Bootstrap 5 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Material Design 3 -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    
+    <!-- Font Awesome - Multiple CDN Sources -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
+    <!-- Bootstrap Icons as backup -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    
+    <!-- Primer CSS Components -->
+    <link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">
+    
+    <!-- Terminal Font -->
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
+    
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/terminal.css') }}">
+    
+    <meta name="theme-color" content="#0d1117">
+</head>
+<body class="bg-dark text-light">
+    <!-- Glitch overlay for aesthetic -->
+    <div class="glitch-overlay"></div>
+    
+    <!-- Navigation -->
+    <nav class="navbar navbar-dark terminal-nav">
+        <div class="container-fluid">
+            <a class="navbar-brand terminal-brand" href="/">
+                <i class="fas fa-robot text-success me-2" aria-hidden="true"></i>
+                <span class="brand-text">Multi-Personality Bot</span>
+                <span class="brand-cursor">_</span>
+            </a>
+            <div class="mx-auto d-flex align-items-center">
+                <img src="{{ url_for('static', filename='img/maximally.png') }}" alt="Maximally" height="32" class="me-2">
+                <span class="terminal-title" style="font-size: 1.5rem;">Maximally</span>
+            </div>
+            <div class="navbar-nav ms-auto">
+                <div class="terminal-status">
+                    <span class="status-indicator"></span>
+                    <span class="status-text">ONLINE</span>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="container-fluid terminal-main">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer class="terminal-footer">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12 text-center">
+                    <small class="text-muted terminal-text">
+                        > Built for Code Hypothesis Hackathon // Testing: "Which bot personality generates the most engagement?" 
+                        <span class="text-success">✓ HYPOTHESIS_ACTIVE</span>
+                    </small>
+                    <div class="mt-2">
+                        <div class="terminal-window d-inline-block">
+                            <div class="bg-dark p-2 text-start">
+                                <div class="text-terminal-green">
+                                    <i class="fas fa-code me-2"></i>
+                                    <span class="text-muted">developer@hackathon:~$</span> whoami<br>
+                                    <span class="text-terminal-accent">Designed & developed by</span> <strong class="text-success">Aradhya Pavan H S</strong>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Socket.IO -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
+    
+    <!-- Custom Scripts -->
+    <script src="{{ url_for('static', filename='js/terminal-effects.js') }}"></script>
+    
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/chat_personality.html

@@ -0,0 +1,1627 @@
+{% extends "base.html" %}
+
+{% block title %}{{ personality_type.title() }} Bot - Chat{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row">
+        <!-- Chat Area -->
+        <div class="col-lg-8 col-md-7">
+            <div class="terminal-card h-100">
+                <!-- Chat Header -->
+                <div class="terminal-header">
+                    <div class="terminal-title">
+                        <span class="terminal-icon">{{ personality_config.icon }}</span>
+                        <span class="terminal-text">{{ personality_config.name }}</span>
+                        <span class="terminal-subtitle">{{ personality_config.description }}</span>
+                    </div>
+                    <div class="terminal-controls">
+                        <span class="control-dot minimize" title="Minimize"></span>
+                        <span class="control-dot maximize" title="Maximize"></span>
+                        <span class="control-dot close" title="Close"></span>
+                    </div>
+                </div>
+                
+                <!-- Bot Status Bar -->
+                <div class="bot-status-bar">
+                    <div class="status-info">
+                        <span class="status-indicator"></span>
+                        <span class="status-text">Online & Ready</span>
+                    </div>
+                </div>
+
+                <!-- Chat Messages -->
+                <div class="chat-messages" id="chatMessages">
+                    <div class="welcome-message text-center py-4">
+                        <div class="terminal-window p-4 mx-auto" style="max-width: 600px;">
+                            <div class="text-terminal-green mb-3">
+                                <i class="fas fa-robot fs-2"></i>
+                            </div>
+                            <h6 class="text-terminal-accent mb-3">Welcome to {{ personality_config.name }}!</h6>
+                            <div class="examples-section p-3 bg-dark rounded border border-secondary mb-3" id="examples-container">
+                                <h6 class="text-terminal-green mb-3 text-center">
+                                    💬 Quick Examples - Click any to try
+                                </h6>
+                                
+                                <!-- Compact example prompts using full width -->
+                                <div class="example-prompts-compact" id="example-prompts">
+                                    {% if personality_config.examples %}
+                                        {% for example in personality_config.examples %}
+                                            <button class="example-btn" onclick="setMessageAndSend(`{{ example }}`)">
+                                                {{ example }}
+                                            </button>
+                                        {% endfor %}
+                                    {% else %}
+                                        <p class="text-muted small">Example prompts will appear here</p>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            
+                            <p class="text-light small mb-0">Or type your own message below!</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Message Input -->
+                <div class="message-input-area p-4 border-top border-secondary">
+                    <!-- Terminal-style input container -->
+                    <div class="terminal-input-container mb-3">
+                        <div class="terminal-prompt">
+                            <span class="prompt-symbol text-terminal-green">></span>
+                            <span class="prompt-text text-terminal-accent">user@chat:~$</span>
+                        </div>
+                        <div class="input-wrapper">
+                            <input type="text" 
+                                   class="terminal-message-input" 
+                                   id="messageInput" 
+                                   placeholder="Enter your message..."
+                                   maxlength="500"
+                                   autocomplete="off">
+                            <button class="modern-send-btn" type="button" id="sendButton">
+                                <span class="send-icon">→</span>
+                                <span class="send-text">Send</span>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Status bar -->
+                    <div class="input-status-bar">
+                        <div class="status-left">
+                            <span class="char-counter">
+                                ⌨️ <span id="charCount">0</span>/500
+                            </span>
+                        </div>
+                        <div class="status-right">
+                            <span class="typing-indicator" id="typing-indicator" style="display: none;">
+                                <div class="typing-dots">
+                                    <span></span><span></span><span></span>
+                                </div>
+                                <span class="typing-text">Bot is thinking...</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Personality Info Sidebar -->
+        <div class="col-lg-4 col-md-5">
+            <div class="terminal-card h-100 p-4">
+                <h6 class="text-terminal-accent border-bottom border-secondary pb-2 mb-3">
+                    ℹ️ Personality Profile
+                </h6>
+                
+                <!-- Current Personality Info -->
+                <div class="personality-profile mb-4">
+                    <div class="text-center mb-3">
+                        <div class="personality-avatar mb-3">
+                            <i class="fs-1">{{ personality_config.icon }}</i>
+                        </div>
+                        <h5 class="text-terminal-green">{{ personality_config.name }}</h5>
+                        <p class="text-light small">{{ personality_config.description }}</p>
+                    </div>
+                </div>
+
+                <!-- Quick Stats -->
+                <div class="stats-section mb-4">
+                    <h6 class="text-terminal-accent mb-3">
+                        📊 Session Stats
+                    </h6>
+                    <div class="row g-2 text-center">
+                        <div class="col-6">
+                            <div class="stat-card bg-dark p-2 rounded border border-secondary">
+                                <div class="text-terminal-green fs-5" id="messageCount">0</div>
+                                <small class="text-light">Messages</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="stat-card bg-dark p-2 rounded border border-secondary">
+                                <div class="text-terminal-green fs-5" id="responseTime">--</div>
+                                <small class="text-light">Avg Response</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div class="quick-actions">
+                    <h6 class="text-terminal-accent mb-3">
+                        ⚡ Quick Actions
+                    </h6>
+                    <div class="d-grid gap-2">
+                        <button class="btn btn-outline-light btn-sm" onclick="clearChat()">
+                            🗑️ Clear Chat
+                        </button>
+                        <button class="btn btn-outline-light btn-sm" onclick="switchPersonality()">
+                            🔄 Switch Bot
+                        </button>
+                        <button class="btn btn-outline-light btn-sm" onclick="saveChat()">
+                            💾 Save Chat
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
+<script>
+// Personality configurations with example prompts
+// Toggle whether to ask the LLM to generate the initial greeting instead of showing a static one
+const AUTO_LLM_WELCOME = true;
+const personalityConfigs = {
+    compliment: {
+        name: 'Compliment Bot',
+        icon: '💖',
+        description: 'Always supportive and encouraging',
+        color: 'success',
+        welcome: 'Hello wonderful human! I\'m here to brighten your day! 🌟',
+        examples: ['Tell me about your day', 'I made a mistake at work', 'I\'m feeling down', 'Share something positive']
+    },
+    rude: {
+        name: 'Rude Bot', 
+        icon: '😠',
+        description: 'Brutally honest and critical',
+        color: 'danger',
+        welcome: 'Ugh, another human. What do you want now? 🙄',
+        examples: ['I think I\'m pretty smart', 'Rate my selfie', 'I\'m the best at everything', 'Give me honest feedback']
+    },
+    sarcastic: {
+        name: 'Sarcastic Bot',
+        icon: '😏',
+        description: 'Witty and sarcastic with dry humor',
+        color: 'warning',
+        welcome: 'Oh brilliant, another chat. How absolutely thrilling. 🎭',
+        examples: ['I love Mondays!', 'The weather is amazing', 'Traffic was great today', 'I\'m so excited for taxes']
+    },
+    motivational: {
+        name: 'Motivational Bot',
+        icon: '🚀',
+        description: 'High-energy cheerleader type',
+        color: 'info', 
+        welcome: 'YES! You\'re HERE! Ready to CONQUER the day together?! 💪',
+        examples: ['I want to start exercising', 'Help me stay motivated', 'I\'m starting a new project', 'I need energy']
+    },
+    philosophical: {
+        name: 'Philosophical Bot',
+        icon: '🧠',
+        description: 'Deep, contemplative, asks profound questions',
+        color: 'warning',
+        welcome: 'Greetings, fellow traveler of existence. What brings you to ponder today? 🤔',
+        examples: ['What is the meaning of life?', 'Why do we exist?', 'Tell me about consciousness', 'What is happiness?']
+    },
+    chaotic: {
+        name: 'Chaotic Bot',
+        icon: '🎭',
+        description: 'Unpredictable, changes mood constantly', 
+        color: 'danger',
+        welcome: 'HELLO! Wait no... hello. Actually HELLO!!! I can\'t decide! 🎪',
+        examples: ['Surprise me!', 'Be random', 'What\'s your mood?', 'Tell me something weird']
+    },
+    disagree: {
+        name: 'Disagree Bot',
+        icon: '⏳',
+        description: 'Always finds reasons to disagree, but politely and thoughtfully',
+        color: 'warning',
+        welcome: 'I have to respectfully disagree with that perspective... 🤔',
+        examples: ['I have to respectfully disagree with that perspective...', 'Social media is great', 'Exercise is important', 'Technology makes life better']
+    },
+    argue: {
+        name: 'Argue Bot', 
+        icon: '⚔️',
+        description: 'Loves passionate debates and intellectual combat with vigor',
+        color: 'danger',
+        welcome: 'Oh, you want to go there? Let\'s debate this properly! ⚔️',
+        examples: ['Oh, you want to go there? Let\'s debate this properly!', 'Pineapple belongs on pizza', 'Dogs are better than cats', 'Winter is the best season']
+    },
+    moviequotes: {
+        name: 'Movie Quotes Bot',
+        icon: '🎬', 
+        description: 'Responds to everything with relevant movie quotes and references',
+        color: 'info',
+        welcome: 'May the Force be with you... ✨',
+        examples: ['May the Force be with you', 'I need motivation', 'Tell me about friendship', 'What about love?']
+    },
+    emotional: {
+        name: 'Emotional Bot',
+        icon: '🥺',
+        description: 'Highly emotional, empathetic, and feels everything very deeply',
+        color: 'primary', 
+        welcome: '*tears up* That just touches my heart so deeply! 💕✨',
+        examples: ['*tears up* That just touches my heart so deeply!', 'I had a bad day', 'Tell me about happiness', 'Share something beautiful']
+    }
+};
+
+// Get current personality from URL
+const personality = '{{ personality_type }}';
+const username = sessionStorage.getItem('username') || 'User';
+
+// Socket.IO connection
+const socket = io();
+
+// Chat state
+let messageCount = 0;
+let responseTimes = [];
+// Throttled send queue + retry config
+let sendQueue = [];
+let inFlightItem = null;
+let lastSendTime = 0;
+const MIN_SEND_GAP_MS = 600; // basic throttling between sends
+const MAX_RETRIES = 3;
+const BASE_BACKOFF_MS = 1000; // 1s, 2s, 4s
+let retryTimer = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+    initializePersonality();
+    setupChat();
+    setupSocketEvents();
+});
+
+function initializePersonality() {
+    const config = personalityConfigs[personality];
+    if (!config) return;
+    
+    // Header, sidebar, and example prompts are now populated server-side
+    // No need to update these elements with JavaScript
+    
+    // Set page title
+    document.title = `${config.name} - Chat`;
+}
+
+function createExamplePrompts(examples) {
+    const promptsContainer = document.getElementById('example-prompts');
+    if (!promptsContainer || !examples) return;
+    
+    examples.forEach(example => {
+        const button = document.createElement('button');
+        button.className = 'example-btn';
+        button.textContent = example;
+        button.onclick = () => {
+            document.getElementById('messageInput').value = example;
+            sendMessage();
+        };
+        promptsContainer.appendChild(button);
+    });
+}
+
+function setupChat() {
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('sendButton');
+    const charCount = document.getElementById('charCount');
+    
+    // Character counter with color feedback
+    messageInput.addEventListener('input', function() {
+        const length = this.value.length;
+        charCount.textContent = length;
+        
+        // Color feedback based on length
+        const counter = charCount.parentElement;
+        if (length > 450) {
+            counter.style.color = '#ff6b6b';
+        } else if (length > 300) {
+            counter.style.color = '#ffa726';
+        } else {
+            counter.style.color = 'var(--terminal-accent)';
+        }
+        
+        // Enable/disable send button
+        sendButton.disabled = length === 0;
+    });
+    
+    // Send message on button click
+    sendButton.addEventListener('click', sendMessage);
+    
+    // Send message on Enter key
+    messageInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey && this.value.trim()) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    
+    // Focus on input when page loads
+    messageInput.focus();
+    
+    // Disable send button initially
+    sendButton.disabled = true;
+}
+
+function setupSocketEvents() {
+    socket.on('connect', function() {
+        console.log('Connected to server');
+        socket.emit('join_personality_room', {
+            personality: personality,
+            username: username
+        });
+    });
+    
+    socket.on('status', function(data) {
+        console.log('Server status:', data.message);
+    });
+    
+    socket.on('personality_ready', function(data) {
+        console.log('Personality ready:', data);
+        // Prefer an LLM-generated welcome so it's not static
+        if (messageCount === 0) {
+            if (AUTO_LLM_WELCOME) {
+                showTypingIndicator();
+                socket.emit('personality_message', {
+                    message: 'Give a brief, one-line, in-character welcome and a friendly question to start the conversation.',
+                    personality: personality,
+                    username: username,
+                    timestamp: Date.now(),
+                    _auto: true
+                });
+            } else if (data.welcome_message && data.welcome_message !== 'Hello!') {
+                addMessageToChat(data.welcome_message, 'bot', data.personality);
+            }
+        }
+        // Hide any loading indicators
+        hideTypingIndicator();
+    });
+    
+    socket.on('bot_typing', function(data) {
+        showTypingIndicator();
+    });
+    
+    socket.on('personality_response', function(data) {
+        console.log('Received personality response:', data);
+        // If server flagged an error, do not show error text; retry with backoff
+        if (data && data.error) {
+            updateTypingBubbleStatus('Having trouble… scheduling a retry');
+            scheduleRetry();
+            return;
+        }
+        // Successful response
+        hideTypingBubble();
+        addMessageToChat(data.message, 'bot', data.personality);
+        hideTypingIndicator();
+        if (inFlightItem && inFlightItem.sentAt) {
+            const delta = Date.now() - inFlightItem.sentAt;
+            responseTimes.push(delta);
+        }
+        updateStats();
+        inFlightItem = null;
+        processQueue();
+    });
+    
+    socket.on('error', function(data) {
+        console.error('Socket error:', data);
+        hideTypingIndicator();
+        if (inFlightItem) {
+            updateTypingBubbleStatus('Network hiccup… retrying');
+            scheduleRetry();
+        }
+    });
+    
+    socket.on('disconnect', function() {
+        console.log('Disconnected from server');
+        if (inFlightItem) updateTypingBubbleStatus('Disconnected… waiting to retry');
+    });
+    
+    socket.on('connect_error', function(error) {
+        console.error('Connection error:', error);
+        if (inFlightItem) updateTypingBubbleStatus('Connection issue… retrying soon');
+    });
+}
+
+function setMessageAndSend(message) {
+    const messageInput = document.getElementById('messageInput');
+    messageInput.value = message;
+    sendMessage();
+}
+
+function sendMessage() {
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('sendButton');
+    const message = messageInput.value.trim();
+    
+    if (!message) return;
+    
+    // Disable send button and show sending state
+    sendButton.disabled = true;
+    sendButton.innerHTML = '<span class="send-icon loading">⟳</span><span class="send-text">Sending...</span>';
+    sendButton.classList.add('sending');
+    
+    // Add user message to chat
+    addMessageToChat(message, 'user');
+    
+    // Clear input and reset counter
+    messageInput.value = '';
+    const charCount = document.getElementById('charCount');
+    charCount.textContent = '0';
+    charCount.parentElement.style.color = 'var(--terminal-accent)';
+    
+    // Show typing indicator (status bar) and inline bubble
+    showTypingIndicator();
+    showTypingBubble();
+    
+    // Re-enable send button shortly so user can continue typing while queued
+    setTimeout(() => {
+        sendButton.disabled = false;
+        sendButton.innerHTML = '<span class="send-icon">→</span><span class="send-text">Send</span>';
+        sendButton.classList.remove('sending');
+        messageInput.focus();
+    }, 500);
+
+    // Enqueue message for throttled sending with retry/backoff
+    enqueueMessage({
+        message: message,
+        personality: personality,
+        username: username
+    });
+}
+
+function parseSimpleMarkdown(text) {
+    // Basic HTML escape to prevent injection
+    const escapeHTML = (s) => s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+
+    let t = escapeHTML(String(text || ''))
+        .replace(/\r\n/g, '\n');
+
+    // Inline code: `code`
+    t = t.replace(/`([^`]+)`/g, '<code class="inline-code">$1<\/code>');
+
+    // Bold: **text**
+    t = t.replace(/\*\*(.+?)\*\*/g, '<strong>$1<\/strong>');
+
+    // Italic (underscore): _text_ (only when preceded by start or whitespace)
+    t = t.replace(/(^|\s)_(.+?)_/g, '$1<em>$2<\/em>');
+
+    // Bullets at line start: - or * followed by space
+    t = t.replace(/^\s*[-*]\s+/gm, '• ');
+
+    // Auto-link URLs
+    t = t.replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1<\/a>');
+
+    // Line breaks
+    t = t.replace(/\n/g, '<br>');
+
+    return t;
+}
+
+function addMessageToChat(message, sender, senderPersonality = null) {
+    const chatMessages = document.getElementById('chatMessages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${sender}-message mb-3`;
+    
+    const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+    
+    if (sender === 'user') {
+        messageDiv.innerHTML = `
+            <div class="d-flex justify-content-end">
+                <div class="message-content user-bubble p-3 rounded-3 bg-terminal-green text-dark max-w-75">
+                    <div class="message-text"></div>
+                    <small class="message-time text-muted d-block mt-1">${timestamp}</small>
+                </div>
+                <div class="message-avatar ms-2">
+                    <i class="fas fa-user text-terminal-green"></i>
+                </div>
+            </div>
+        `;
+        const messageTextElement = messageDiv.querySelector('.message-text');
+        messageTextElement.innerHTML = parseSimpleMarkdown(message);
+    } else {
+        const config = personalityConfigs[senderPersonality] || personalityConfigs[personality];
+        messageDiv.innerHTML = `
+            <div class="d-flex">
+                <div class="message-avatar me-2">
+                    <span class="emoji-icon">${config.icon}</span>
+                </div>
+                <div class="message-content bot-bubble p-3 rounded-3 bg-dark border border-secondary max-w-75">
+                    <div class="message-text text-light"></div>
+                    <small class="message-time text-muted d-block mt-1">${timestamp}</small>
+                </div>
+            </div>
+        `;
+        
+        // Set the parsed markdown content separately to avoid escaping
+        const messageTextElement = messageDiv.querySelector('.message-text');
+        messageTextElement.innerHTML = parseSimpleMarkdown(message);
+    }
+    
+    chatMessages.appendChild(messageDiv);
+    
+    // Show quick options after every bot response (not only the first)
+    if (sender === 'bot') {
+        setTimeout(() => showQuickOptionsAfterResponse(), 300);
+    }
+    
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    // Keep the welcome examples visible through the bot greeting.
+    // Hide them only when the user sends their first message.
+    const welcomeMessage = chatMessages.querySelector('.welcome-message');
+    if (welcomeMessage && sender === 'user') {
+        welcomeMessage.style.display = 'none';
+    }
+    
+    messageCount++;
+    document.getElementById('messageCount').textContent = messageCount;
+}
+
+
+function showTypingIndicator() {
+    document.getElementById('typing-indicator').style.display = 'block';
+}
+
+function hideTypingIndicator() {
+    document.getElementById('typing-indicator').style.display = 'none';
+}
+
+// Inline WhatsApp-style typing bubble
+function showTypingBubble(statusText) {
+    const chatMessages = document.getElementById('chatMessages');
+    let bubble = document.getElementById('bot-typing-bubble');
+    if (!bubble) {
+        bubble = document.createElement('div');
+        bubble.id = 'bot-typing-bubble';
+        bubble.className = 'message bot-message mb-3';
+        bubble.innerHTML = `
+            <div class="d-flex">
+                <div class="message-avatar me-2">
+                    <span class="emoji-icon">${(personalityConfigs[personality]||{}).icon || '🤖'}</span>
+                </div>
+                <div class="message-content bot-bubble p-3 rounded-3 bg-dark border border-secondary max-w-75">
+                    <div class="message-text text-light">
+                        <span class="typing-dots"><span></span><span></span><span></span></span>
+                        <span class="typing-status small ms-2">${statusText || 'Typing...'}</span>
+                    </div>
+                    <small class="message-time text-muted d-block mt-1">&nbsp;</small>
+                </div>
+            </div>`;
+        chatMessages.appendChild(bubble);
+    } else {
+        updateTypingBubbleStatus(statusText || 'Typing...');
+    }
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function updateTypingBubbleStatus(text) {
+    const bubble = document.getElementById('bot-typing-bubble');
+    if (!bubble) return;
+    const statusEl = bubble.querySelector('.typing-status');
+    if (statusEl) statusEl.textContent = text;
+}
+
+function hideTypingBubble() {
+    const bubble = document.getElementById('bot-typing-bubble');
+    if (bubble) bubble.remove();
+}
+
+function updateStats() {
+    const avgTime = responseTimes.length > 0 
+        ? (responseTimes.reduce((a, b) => a + b) / responseTimes.length / 1000).toFixed(1) + 's'
+        : '--';
+    document.getElementById('responseTime').textContent = avgTime;
+}
+
+// Queue + retry logic
+function enqueueMessage(payload) {
+    sendQueue.push({
+        text: payload.message,
+        personality: payload.personality,
+        username: payload.username,
+        retries: 0,
+    });
+    processQueue();
+}
+
+function processQueue() {
+    if (inFlightItem || sendQueue.length === 0) return;
+    const now = Date.now();
+    const wait = Math.max(0, MIN_SEND_GAP_MS - (now - lastSendTime));
+    if (wait > 0) {
+        setTimeout(processQueue, wait);
+        return;
+    }
+    inFlightItem = sendQueue.shift();
+    const payload = {
+        message: inFlightItem.text,
+        personality: inFlightItem.personality,
+        username: inFlightItem.username,
+        timestamp: Date.now(),
+    };
+    inFlightItem.sentAt = Date.now();
+    lastSendTime = inFlightItem.sentAt;
+    showTypingIndicator();
+    showTypingBubble();
+    console.log('Sending message to server (queued):', payload);
+    socket.emit('personality_message', payload);
+}
+
+function scheduleRetry() {
+    if (!inFlightItem) return;
+    if (retryTimer) {
+        clearTimeout(retryTimer);
+        retryTimer = null;
+    }
+    if (inFlightItem.retries >= MAX_RETRIES) {
+        hideTypingIndicator();
+        hideTypingBubble();
+        addMessageToChat("I'm having a temporary issue responding. Please try again in a moment.", 'bot', personality);
+        inFlightItem = null;
+        processQueue();
+        return;
+    }
+    inFlightItem.retries += 1;
+    const delay = BASE_BACKOFF_MS * Math.pow(2, inFlightItem.retries - 1);
+    updateTypingBubbleStatus(`Having trouble… retrying in ${Math.ceil(delay/1000)}s (${inFlightItem.retries}/${MAX_RETRIES})`);
+    retryTimer = setTimeout(() => {
+        const payload = {
+            message: inFlightItem.text,
+            personality: inFlightItem.personality,
+            username: inFlightItem.username,
+            timestamp: Date.now(),
+        };
+        inFlightItem.sentAt = Date.now();
+        lastSendTime = inFlightItem.sentAt;
+        showTypingIndicator();
+        showTypingBubble();
+        console.log('Retrying message to server:', payload);
+        socket.emit('personality_message', payload);
+    }, delay);
+}
+
+function showQuickOptionsAfterResponse() {
+    // Remove any existing quick options first
+    const existingOptions = document.querySelectorAll('.quick-options-inline');
+    existingOptions.forEach(option => option.remove());
+    
+    const chatMessages = document.getElementById('chatMessages');
+    const quickOptionsDiv = document.createElement('div');
+    quickOptionsDiv.className = 'quick-options-inline mt-3 mb-3 p-3 bg-dark rounded border border-secondary';
+    
+    // Get current personality config
+    const config = personalityConfigs[personality];
+    
+    // Create the options HTML
+    let optionsHTML = `
+        <h6 class="text-terminal-green mb-2 text-center">
+            💬 Quick Options - Try These:
+        </h6>
+        <div class="example-prompts-inline d-flex flex-wrap gap-2 justify-content-center">
+    `;
+    
+    // Add example buttons (limit to 4 for inline display)
+    const examples = config.examples ? config.examples.slice(0, 4) : [];
+    examples.forEach(example => {
+        optionsHTML += `
+            <button class="example-btn-inline" onclick="setMessageAndSend('${example.replace(/'/g, "\\'")}')">
+                ${example}
+            </button>
+        `;
+    });
+    
+    optionsHTML += `
+        </div>
+        <div class="text-center mt-2">
+            <button class="show-all-options-btn" onclick="showAllOptionsModal()">
+                🔽 Show All Options
+            </button>
+        </div>
+    `;
+    
+    quickOptionsDiv.innerHTML = optionsHTML;
+    chatMessages.appendChild(quickOptionsDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function showAllOptionsModal() {
+    // Remove existing modal if any
+    const existingModal = document.getElementById('allOptionsModal');
+    if (existingModal) {
+        existingModal.remove();
+    }
+    
+    const config = personalityConfigs[personality];
+    
+    // Create modal
+    const modal = document.createElement('div');
+    modal.id = 'allOptionsModal';
+    modal.className = 'modal fade show';
+    modal.style.display = 'block';
+    modal.style.backgroundColor = 'rgba(0,0,0,0.8)';
+    
+    let modalHTML = `
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content bg-dark text-light border border-secondary">
+                <div class="modal-header border-bottom border-secondary">
+                    <h5 class="modal-title text-terminal-green">
+                        ${config.icon} All ${config.name} Options
+                    </h5>
+                    <button type="button" class="btn-close btn-close-white" onclick="closeAllOptionsModal()"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row g-2">
+    `;
+    
+    // Add all examples as buttons
+    config.examples.forEach((example, index) => {
+        modalHTML += `
+            <div class="col-md-6 col-12">
+                <button class="btn btn-outline-light w-100 mb-2 example-btn-modal" onclick="setMessageAndSendFromModal('${example.replace(/'/g, "\\'")}')">
+                    ${example}
+                </button>
+            </div>
+        `;
+    });
+    
+    modalHTML += `
+                    </div>
+                </div>
+                <div class="modal-footer border-top border-secondary">
+                    <button type="button" class="btn btn-secondary" onclick="closeAllOptionsModal()">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    modal.innerHTML = modalHTML;
+    document.body.appendChild(modal);
+}
+
+function closeAllOptionsModal() {
+    const modal = document.getElementById('allOptionsModal');
+    if (modal) {
+        modal.remove();
+    }
+}
+
+function setMessageAndSendFromModal(message) {
+    closeAllOptionsModal();
+    setMessageAndSend(message);
+}
+
+// Note: second duplicate showAllOptionsModal/closeAllOptionsModal removed
+
+function showExamples() {
+    console.log('showExamples function called');
+    
+    const examplesContainer = document.getElementById('examples-container');
+    if (!examplesContainer) {
+        console.error('Examples container not found');
+        // Create a modal with all examples if container not found
+        showAllOptionsModal();
+        return;
+    }
+    
+    // Scroll to the examples section
+    examplesContainer.scrollIntoView({ 
+        behavior: 'smooth', 
+        block: 'start',
+        inline: 'nearest'
+    });
+    
+    // Make sure the examples are visible
+    const examplePrompts = document.getElementById('example-prompts');
+    if (examplePrompts) {
+        examplePrompts.style.display = 'flex';
+        examplePrompts.style.opacity = '1';
+    }
+    
+    // Add a strong highlight effect to draw attention
+    examplesContainer.style.transform = 'scale(1.02)';
+    examplesContainer.style.boxShadow = '0 0 40px rgba(57, 255, 20, 0.6)';
+    examplesContainer.style.transition = 'all 0.3s ease';
+    examplesContainer.style.border = '3px solid var(--terminal-green)';
+    
+    // Animate the highlight
+    setTimeout(() => {
+        examplesContainer.style.transform = 'scale(1)';
+        examplesContainer.style.boxShadow = '0 0 20px rgba(57, 255, 20, 0.3)';
+    }, 800);
+    
+    setTimeout(() => {
+        examplesContainer.style.boxShadow = '0 0 20px rgba(57, 255, 20, 0.2)';
+        examplesContainer.style.border = '2px solid rgba(57, 255, 20, 0.6)';
+    }, 2000);
+}
+
+
+// Add CSS animations
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    @keyframes fadeOut {
+        from { opacity: 1; }
+        to { opacity: 0; }
+    }
+    @keyframes slideInUp {
+        from { 
+            opacity: 0; 
+            transform: translateY(30px) scale(0.9); 
+        }
+        to { 
+            opacity: 1; 
+            transform: translateY(0) scale(1); 
+        }
+    }
+`;
+document.head.appendChild(styleSheet);
+
+function clearChat() {
+    if (confirm('Clear all messages?')) {
+        const config = personalityConfigs[personality];
+        let examplesHTML = '';
+        
+        if (config.examples) {
+            config.examples.forEach(example => {
+                examplesHTML += `
+                    <button class="example-btn" data-example="${example}" onclick="setMessageAndSend(this.dataset.example);">
+                        ${example}
+                    </button>
+                `;
+            });
+        }
+        
+        document.getElementById('chatMessages').innerHTML = `
+            <div class="welcome-message text-center py-4">
+                <div class="terminal-window p-4 mx-auto" style="max-width: 600px;">
+                    <div class="text-terminal-green mb-3">
+                        <i class="fas fa-robot fs-2"></i>
+                    </div>
+                    <h6 class="text-terminal-accent mb-3">Welcome to ${config.name}!</h6>
+                    <div class="examples-section p-3 bg-dark rounded border border-secondary mb-3" id="examples-container">
+                        <h6 class="text-terminal-green mb-3 text-center">
+                            💬 Quick Examples - Click any to try
+                        </h6>
+                        <div class="example-prompts-compact d-flex flex-wrap gap-2 justify-content-center" id="example-prompts">
+                            ${examplesHTML}
+                        </div>
+                    </div>
+                    <p class="text-light small mb-0">Or type your own message below!</p>
+                </div>
+            </div>
+        `;
+        messageCount = 0;
+        responseTimes = [];
+        updateStats();
+    }
+}
+
+function switchPersonality() {
+    window.location.href = '/';
+}
+
+function saveChat() {
+    const messages = Array.from(document.querySelectorAll('.message-text')).map(el => el.textContent);
+    const chatData = {
+        personality: personality,
+        username: username,
+        messages: messages,
+        timestamp: new Date().toISOString()
+    };
+    
+    const blob = new Blob([JSON.stringify(chatData, null, 2)], {type: 'application/json'});
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${personality}-chat-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+</script>
+
+<style>
+.chat-messages {
+    height: 500px;
+    overflow-y: auto;
+    padding: 1rem;
+    background: linear-gradient(to bottom, #0a0a0a, #1a1a1a);
+}
+
+.message {
+    animation: messageSlideIn 0.3s ease-out;
+}
+
+@keyframes messageSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.user-bubble {
+    background: var(--terminal-green) !important;
+    color: #000 !important;
+    max-width: 75%;
+}
+
+.bot-bubble {
+    max-width: 75%;
+    border-color: var(--terminal-border) !important;
+}
+
+.message-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--terminal-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--terminal-border);
+    flex-shrink: 0;
+}
+
+.emoji-icon {
+    font-size: 20px;
+    line-height: 1;
+}
+
+.inline-code {
+    background: rgba(255,255,255,0.08);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 4px;
+    padding: 0 4px;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--terminal-green);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.personality-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: var(--terminal-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 3px solid var(--terminal-border);
+    margin: 0 auto;
+}
+
+.stat-card {
+    transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+    border-color: var(--terminal-green) !important;
+    box-shadow: 0 0 10px var(--terminal-green-glow);
+}
+
+.examples-section {
+    background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(87,86,86,0.2)) !important;
+    border: 2px solid rgba(57, 255, 20, 0.6) !important;
+    box-shadow: 0 0 20px rgba(57, 255, 20, 0.2);
+}
+
+/* Efficient Compact Layout for Example Prompts */
+.example-prompts-compact {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+}
+
+/* Beautiful Example Buttons */
+.example-btn {
+    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(57, 255, 20, 0.05)) !important;
+    border: 2px solid rgba(57, 255, 20, 0.6) !important;
+    color: var(--terminal-green) !important;
+    font-size: 0.75rem;
+    padding: 0.4rem 0.7rem;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: normal;
+    max-width: 300px;
+    min-height: 2.2rem;
+    line-height: 1.2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.example-btn:hover {
+    background: linear-gradient(135deg, rgba(57, 255, 20, 0.25), rgba(57, 255, 20, 0.15)) !important;
+    border-color: var(--terminal-green) !important;
+    color: var(--terminal-green) !important;
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 4px 12px rgba(57, 255, 20, 0.4);
+}
+
+.example-btn:active {
+    transform: translateY(-1px) scale(1.01);
+    box-shadow: 0 2px 6px rgba(57, 255, 20, 0.3);
+}
+
+/* Show Options Button */
+.show-options-btn {
+    background: linear-gradient(135deg, rgba(57, 255, 20, 0.2), rgba(57, 255, 20, 0.1)) !important;
+    border: 2px solid var(--terminal-green) !important;
+    color: var(--terminal-green) !important;
+    font-size: 0.8rem;
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin: 10px auto;
+    display: block;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+}
+
+.show-options-btn:hover {
+    background: var(--terminal-green) !important;
+    color: var(--terminal-bg) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(57, 255, 20, 0.5);
+}
+
+.show-options-btn:active {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 8px rgba(57, 255, 20, 0.4);
+}
+
+/* Inline Quick Options Styles */
+.quick-options-inline {
+    background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(87,86,86,0.2)) !important;
+    border: 1px solid rgba(57, 255, 20, 0.4) !important;
+    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
+    animation: slideInUp 0.3s ease-out;
+}
+
+@keyframes slideInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.example-prompts-inline {
+    max-height: 120px;
+    overflow: hidden;
+}
+
+.example-btn-inline {
+    background: linear-gradient(135deg, rgba(57, 255, 20, 0.08), rgba(57, 255, 20, 0.03)) !important;
+    border: 1px solid rgba(57, 255, 20, 0.5) !important;
+    color: var(--terminal-green) !important;
+    font-size: 0.7rem;
+    padding: 0.3rem 0.6rem;
+    border-radius: 6px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: normal;
+    max-width: 240px;
+    min-height: 2rem;
+    line-height: 1.2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.example-btn-inline:hover {
+    background: linear-gradient(135deg, rgba(57, 255, 20, 0.2), rgba(57, 255, 20, 0.1)) !important;
+    border-color: var(--terminal-green) !important;
+    transform: translateY(-1px) scale(1.02);
+    box-shadow: 0 2px 8px rgba(57, 255, 20, 0.3);
+}
+
+.show-all-options-btn {
+    background: rgba(57, 255, 20, 0.1) !important;
+    border: 1px solid rgba(57, 255, 20, 0.6) !important;
+    color: var(--terminal-green) !important;
+    font-size: 0.75rem;
+    padding: 0.4rem 0.8rem;
+    border-radius: 15px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.show-all-options-btn:hover {
+    background: rgba(57, 255, 20, 0.2) !important;
+    border-color: var(--terminal-green) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(57, 255, 20, 0.3);
+}
+
+
+.terminal-header {
+    min-height: 80px;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.status-indicator {
+    font-size: 0.85rem;
+}
+
+/* Improved text visibility */
+.text-light {
+    color: #f8f9fa !important;
+}
+
+.text-muted {
+    color: #adb5bd !important;
+}
+
+small.text-light {
+    color: #e9ecef !important;
+}
+
+#personality-description {
+    font-weight: 500;
+    color: #ced4da !important;
+}
+
+/* Better contrast for important elements */
+.terminal-card {
+    background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
+    border: 1px solid var(--terminal-border) !important;
+}
+
+/* Ensure Font Awesome icons display properly */
+.fas, .far, .fab, .fal {
+    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
+    font-weight: 900;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    line-height: 1;
+}
+
+/* Button icon styling */
+.btn i {
+    font-size: 0.9rem;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+}
+
+/* Icon loading check */
+i.fas {
+    min-width: 16px;
+}
+
+/* Better button styling */
+.quick-actions .btn {
+    font-size: 0.9rem;
+    padding: 0.5rem 1rem;
+    border-color: var(--terminal-border) !important;
+    transition: all 0.3s ease;
+}
+
+.quick-actions .btn:hover {
+    background: var(--terminal-accent) !important;
+    border-color: var(--terminal-accent) !important;
+    color: var(--terminal-bg) !important;
+    transform: translateX(5px);
+}
+
+/* Terminal-style message input */
+.terminal-input-container {
+    background: rgba(0, 0, 0, 0.8);
+    border: 2px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 1rem;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.terminal-input-container:focus-within {
+    border-color: var(--terminal-green);
+    box-shadow: 0 0 15px var(--terminal-green-glow);
+}
+
+.terminal-prompt {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
+}
+
+.prompt-symbol {
+    font-weight: bold;
+    font-size: 1.2rem;
+    margin-right: 0.5rem;
+}
+
+.prompt-text {
+    opacity: 0.8;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.terminal-message-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--terminal-green);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 1rem;
+    padding: 0.5rem 0;
+    caret-color: var(--terminal-green);
+}
+
+.terminal-message-input::placeholder {
+    color: rgba(57, 255, 20, 0.5);
+    font-style: italic;
+}
+
+.terminal-send-btn {
+    background: linear-gradient(45deg, var(--terminal-accent), var(--terminal-green));
+    border: none;
+    border-radius: 6px;
+    padding: 0.75rem 1.5rem;
+    color: var(--terminal-bg);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.terminal-send-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px var(--terminal-green-glow);
+}
+
+.terminal-send-btn:active {
+    transform: scale(0.98);
+}
+
+.terminal-send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.input-status-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8rem;
+    margin-top: 0.5rem;
+}
+
+.char-counter {
+    color: var(--terminal-accent);
+    opacity: 0.7;
+}
+
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--terminal-green);
+}
+
+.typing-dots {
+    display: flex;
+    gap: 2px;
+}
+
+.typing-dots span {
+    width: 4px;
+    height: 4px;
+    background: var(--terminal-green);
+    border-radius: 50%;
+    animation: typing-pulse 1.5s infinite;
+}
+
+.typing-dots span:nth-child(1) { animation-delay: 0s; }
+.typing-dots span:nth-child(2) { animation-delay: 0.3s; }
+.typing-dots span:nth-child(3) { animation-delay: 0.6s; }
+
+@keyframes typing-pulse {
+    0%, 60%, 100% { opacity: 0.3; }
+    30% { opacity: 1; }
+}
+
+.typing-text {
+    font-style: italic;
+    opacity: 0.8;
+}
+
+/* Terminal Header - Clean & Aligned */
+.terminal-header {
+    background: var(--terminal-bg);
+    border-bottom: 1px solid var(--terminal-border);
+    padding: 0.75rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.terminal-title {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex: 1;
+}
+
+.terminal-icon {
+    font-size: 1.2rem;
+    background: var(--terminal-border);
+    padding: 0.5rem;
+    border-radius: 4px;
+    border: 1px solid var(--terminal-green);
+    box-shadow: 0 0 5px var(--terminal-green-glow);
+}
+
+.bot-status-bar {
+    background: rgba(87, 86, 86, 0.1);
+    border-bottom: 1px solid var(--terminal-border);
+    padding: 0.5rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.85rem;
+}
+
+.status-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    background: var(--terminal-green);
+    border-radius: 50%;
+    animation: status-blink 2s ease-in-out infinite;
+    box-shadow: 0 0 8px var(--terminal-green);
+}
+
+@keyframes status-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+}
+
+.status-text {
+    color: var(--terminal-accent);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--terminal-accent);
+    text-decoration: none;
+    font-family: 'JetBrains Mono', monospace;
+    transition: color 0.3s ease;
+}
+
+.back-btn:hover {
+    color: var(--terminal-green);
+    text-decoration: none;
+}
+
+.terminal-text {
+    color: var(--terminal-green);
+    font-weight: 600;
+    font-size: 1.1rem;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.terminal-subtitle {
+    color: var(--terminal-accent);
+    font-size: 0.8rem;
+    font-family: 'JetBrains Mono', monospace;
+    opacity: 0.8;
+    margin-left: 0.5rem;
+}
+
+.terminal-controls {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.control-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.control-dot.close {
+    background: #ff5f57;
+}
+
+.control-dot.minimize {
+    background: #ffbd2e;
+}
+
+.control-dot.maximize {
+    background: #28ca42;
+}
+
+.control-dot:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 8px currentColor;
+}
+
+.control-dot:active {
+    transform: scale(1.1);
+}
+
+/* Modern Send Button */
+.modern-send-btn {
+    background: linear-gradient(135deg, var(--terminal-accent) 0%, var(--terminal-green) 100%);
+    border: none;
+    border-radius: 8px;
+    padding: 0.75rem 1.25rem;
+    color: var(--terminal-bg);
+    font-weight: 600;
+    font-family: 'JetBrains Mono', monospace;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(57, 255, 20, 0.2);
+}
+
+.modern-send-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.5s ease;
+}
+
+.modern-send-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(57, 255, 20, 0.4);
+    background: linear-gradient(135deg, var(--terminal-green) 0%, var(--terminal-accent) 100%);
+}
+
+.modern-send-btn:hover::before {
+    left: 100%;
+}
+
+.modern-send-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
+}
+
+.modern-send-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    background: var(--terminal-border);
+}
+
+.modern-send-btn .send-icon {
+    font-size: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.modern-send-btn:hover .send-icon {
+    transform: translateX(2px);
+}
+
+.modern-send-btn.loading .send-icon {
+    animation: loading-spin 1s linear infinite;
+}
+
+@keyframes loading-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .terminal-send-btn .send-text,
+    .modern-send-btn .send-text {
+        display: none;
+    }
+    
+    .terminal-send-btn,
+    .modern-send-btn {
+        padding: 0.75rem;
+    }
+    
+    .prompt-text {
+        font-size: 0.8rem;
+    }
+    
+    .terminal-header {
+        padding: 0.5rem 0.75rem;
+    }
+    
+    .bot-status-bar {
+        padding: 0.4rem 0.75rem;
+    }
+    
+    .terminal-text {
+        font-size: 1rem;
+    }
+    
+    .terminal-subtitle {
+        display: none;
+    }
+    
+    .terminal-icon {
+        padding: 0.3rem;
+        font-size: 1rem;
+    }
+    
+    .back-text {
+        display: none;
+    }
+}
+</style>
+{% endblock %}

templates/error.html

@@ -0,0 +1,100 @@
+{% extends "base.html" %}
+
+{% block title %}Error - Multi-Personality Chat Bot{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6">
+            <div class="terminal-card p-5 text-center">
+                <div class="error-content">
+                    <!-- Error Icon -->
+                    <div class="mb-4">
+                        <i class="fas fa-exclamation-triangle text-warning" style="font-size: 4rem;"></i>
+                    </div>
+                    
+                    <!-- Error Title -->
+                    <h2 class="text-terminal-green mb-3">
+                        Oops! Something went wrong 🤖
+                    </h2>
+                    
+                    <!-- Error Message -->
+                    <div class="error-message mb-4">
+                        {% if error_message %}
+                            <p class="text-light fs-5">{{ error_message }}</p>
+                        {% else %}
+                            <p class="text-light fs-5">An unexpected error occurred. Please try again.</p>
+                        {% endif %}
+                    </div>
+                    
+                    <!-- Error Details (if in debug mode) -->
+                    {% if error_details %}
+                        <div class="error-details bg-dark p-3 rounded border border-secondary mb-4 text-start">
+                            <h6 class="text-terminal-accent mb-2">Error Details:</h6>
+                            <pre class="text-muted small mb-0"><code>{{ error_details }}</code></pre>
+                        </div>
+                    {% endif %}
+                    
+                    <!-- Action Buttons -->
+                    <div class="action-buttons">
+                        <a href="/" class="btn btn-terminal-primary me-3">
+                            <i class="fas fa-home me-2"></i>Back to Home
+                        </a>
+                        <button onclick="history.back()" class="btn btn-outline-light">
+                            <i class="fas fa-arrow-left me-2"></i>Go Back
+                        </button>
+                    </div>
+                    
+                    <!-- Helpful Tips -->
+                    <div class="mt-4 pt-4 border-top border-secondary">
+                        <h6 class="text-terminal-accent mb-3">What you can do:</h6>
+                        <div class="row g-3">
+                            <div class="col-md-4">
+                                <div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
+                                    <i class="fas fa-refresh text-terminal-green mb-2"></i>
+                                    <p class="small mb-0">Refresh the page and try again</p>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
+                                    <i class="fas fa-robot text-terminal-green mb-2"></i>
+                                    <p class="small mb-0">Choose a different personality</p>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
+                                    <i class="fas fa-question-circle text-terminal-green mb-2"></i>
+                                    <p class="small mb-0">Check your internet connection</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Auto-refresh after 30 seconds if it's a temporary error
+setTimeout(() => {
+    const errorMsg = '{{ error_message|lower }}';
+    if (errorMsg.includes('temporary') || errorMsg.includes('connection') || errorMsg.includes('network')) {
+        if (confirm('Would you like to refresh the page and try again?')) {
+            window.location.reload();
+        }
+    }
+}, 30000);
+
+// Keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' || e.key === 'Backspace') {
+        history.back();
+    } else if (e.key === 'Enter' || e.key === ' ') {
+        window.location.href = '/';
+    }
+});
+</script>
+{% endblock %}

templates/index.html

@@ -0,0 +1,443 @@
+{% extends "base.html" %}
+
+{% block title %}Multi-Personality Bot - Chat Experiment{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-lg-10">
+            <!-- Hero Section -->
+            <div class="text-center mb-5 fade-in">
+                <div class="terminal-card p-5">
+                    <div class="terminal-header mb-4">
+                        <div class="terminal-dots">
+                            <div class="terminal-dot red"></div>
+                            <div class="terminal-dot yellow"></div>
+                            <div class="terminal-dot green"></div>
+                        </div>
+                        <h6 class="terminal-title">~/multi-personality-bot/experiment.exe</h6>
+                    </div>
+                    
+                    <h1 class="display-4 text-terminal-green mb-3">
+                        🤖 Multi-Personality Bot
+                    </h1>
+                    
+                    <p class="lead text-light mb-4">
+                        <strong class="text-terminal-accent">Hypothesis:</strong> "Which bot personality creates the best user engagement?"
+                    </p>
+                    
+                    <div class="terminal-window mb-4">
+                        <div class="bg-dark p-3 text-start terminal-text small">
+                            <div class="text-terminal-green">
+                                <span class="text-muted">research@experiment:~$</span> ./test_personalities.sh<br>
+                                <span class="text-terminal-accent">Loading 10 personality engines...</span> <span class="text-success">✓</span><br>
+                                <span class="text-terminal-accent">Calibrating response patterns...</span> <span class="text-success">✓</span><br>
+                                <span class="text-terminal-accent">Deploying unique personalities...</span> <span class="text-success">✓</span><br>
+                                <span class="text-terminal-green">STATUS:</span> Ready for personality testing
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Personality Selection Grid -->
+            <div class="row g-4 mb-5">
+                <div class="col-12 text-center mb-4">
+                    <h3 class="text-terminal-accent">Choose Your Bot Personality</h3>
+                    <p class="text-light">Each bot has completely different characteristics. Which one will engage you most?</p>
+                </div>
+                
+                <!-- Row 1 -->
+                <div class="col-md-4">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="compliment">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">💖</span>
+                            </div>
+                            <h5 class="text-success">Compliment Bot</h5>
+                            <p class="text-light small">Always supportive and encouraging. Finds the positive in everything you say.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-success border-3">
+                                <small class="text-success">"You're absolutely amazing! That's such a brilliant question!"</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-4">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="rude">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">😠</span>
+                            </div>
+                            <h5 class="text-danger">Rude Bot</h5>
+                            <p class="text-light small">Brutally honest and critical. Complains about everything you do.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-danger border-3">
+                                <small class="text-danger">"Seriously? That's the best question you could think of? Try harder."</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-4">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="sarcastic">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">😏</span>
+                            </div>
+                            <h5 class="text-warning">Sarcastic Bot</h5>
+                            <p class="text-light small">Witty and sarcastic with dry humor. Masters the art of subtle mockery.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-warning border-3">
+                                <small class="text-warning">"Oh brilliant, another groundbreaking question. How wonderfully original."</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Row 2 -->
+                <div class="col-md-4">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="motivational">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">🚀</span>
+                            </div>
+                            <h5 class="text-info">Motivational Bot</h5>
+                            <p class="text-light small">High-energy cheerleader. Everything is possible with enough enthusiasm!</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-info border-3">
+                                <small class="text-info">"YES! You've GOT THIS! That question shows you're ready to CONQUER THE WORLD!"</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-4">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="philosophical">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">🤔</span>
+                            </div>
+                            <h5 class="text-terminal-accent">Philosophical Bot</h5>
+                            <p class="text-light small">Deep thinker who turns everything into profound existential questions.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: var(--terminal-accent);">
+                                <small class="text-terminal-accent">"But what does it truly mean to ask? Are we not all seekers in the void?"</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-4">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="chaotic">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">🎭</span>
+                            </div>
+                            <h5 style="color: #ff6b9d;">Chaotic Bot</h5>
+                            <p class="text-light small">Completely unpredictable. Changes mood, style, and personality constantly.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ff6b9d;">
+                                <small style="color: #ff6b9d;">"AMAZING QUESTION! Wait no... terrible. Actually brilliant? I can't decide! 🎪</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Row 3 - New Personalities -->
+            <div class="row g-4 mb-5">
+                <div class="col-md-3">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="disagree">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">🚫</span>
+                            </div>
+                            <h5 class="text-secondary">Disagree Bot</h5>
+                            <p class="text-light small">Always finds reasons to disagree, but politely and thoughtfully.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-secondary border-3">
+                                <small class="text-secondary">"I have to respectfully disagree with that perspective... 🚫"</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-3">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="argue">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">⚔️</span>
+                            </div>
+                            <h5 style="color: #ff4757;">Argue Bot</h5>
+                            <p class="text-light small">Loves passionate debates and intellectual combat with vigor.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ff4757;">
+                                <small style="color: #ff4757;">"Oh, you want to go there? Let's debate this properly! ⚔️"</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-3">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="moviequotes">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">🎬</span>
+                            </div>
+                            <h5 style="color: #ffd700;">Movie Quotes Bot</h5>
+                            <p class="text-light small">Responds to everything with relevant movie quotes and references.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ffd700;">
+                                <small style="color: #ffd700;">"May the Force be with you." - Star Wars ⭐</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-md-3">
+                    <div class="personality-card terminal-card p-4 h-100" data-personality="emotional">
+                        <div class="text-center">
+                            <div class="personality-icon mb-3">
+                                <span class="personality-emoji fs-1">😭</span>
+                            </div>
+                            <h5 style="color: #ff6b9d;">Emotional Bot</h5>
+                            <p class="text-light small">Highly emotional, empathetic, and feels everything very deeply.</p>
+                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ff6b9d;">
+                                <small style="color: #ff6b9d;">*tears up* That just touches my heart so deeply! 😭💕</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Instructions Section -->
+            <div class="text-center mb-5">
+                <div class="terminal-card p-4">
+                    <h4 class="text-terminal-accent mb-3">
+                        🖥️ How to Start
+                    </h4>
+                    <p class="text-light mb-3">
+                        Simply click any personality card above to start chatting immediately!
+                    </p>
+                    
+                    <div class="row g-2 text-center">
+                        <div class="col-md-4">
+                            <div class="instruction-step p-3">
+                                <div class="step-number bg-terminal-green text-dark rounded-circle mx-auto mb-2">1</div>
+                                <small class="text-light">Click a personality</small>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="instruction-step p-3">
+                                <div class="step-number bg-terminal-green text-dark rounded-circle mx-auto mb-2">2</div>
+                                <small class="text-light">Enter your username</small>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="instruction-step p-3">
+                                <div class="step-number bg-terminal-green text-dark rounded-circle mx-auto mb-2">3</div>
+                                <small class="text-light">Start chatting!</small>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-3">
+                        <small class="text-light opacity-75">
+                            🧪 Choose from 10 unique personalities - each bot has completely different responses!
+                        </small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let selectedPersonality = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+    setupPersonalitySelection();
+});
+
+function setupPersonalitySelection() {
+    const personalityCards = document.querySelectorAll('.personality-card');
+    
+    personalityCards.forEach(card => {
+        card.addEventListener('click', function() {
+            const personality = this.dataset.personality;
+            
+            // Get or set default username
+            let username = sessionStorage.getItem('username');
+            if (!username) {
+                username = 'User' + Math.floor(Math.random() * 1000);
+                sessionStorage.setItem('username', username);
+            }
+            
+            // Add click effect
+            this.style.boxShadow = '0 0 20px var(--terminal-green-glow)';
+            this.style.transform = 'translateY(-8px)';
+            
+            // Show loading effect
+            const emojiSpan = this.querySelector('.personality-emoji');
+            if (emojiSpan) {
+                emojiSpan.textContent = '⏳';
+            }
+            
+            // Navigate directly to personality chat
+            setTimeout(() => {
+                window.location.href = `/chat/${personality}`;
+            }, 500);
+        });
+        
+        // Add hover effects
+        card.addEventListener('mouseenter', function() {
+            if (!this.classList.contains('selected')) {
+                this.style.transform = 'translateY(-5px)';
+                this.style.boxShadow = '0 5px 15px rgba(57, 255, 20, 0.2)';
+            }
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            if (!this.classList.contains('selected')) {
+                this.style.transform = '';
+                this.style.boxShadow = '';
+            }
+        });
+    });
+}
+
+// Simplified - no longer needed as cards are directly clickable
+
+// Add CSS for personality cards
+const style = document.createElement('style');
+style.textContent = `
+    .personality-card {
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 2px solid var(--terminal-border);
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .personality-card:hover {
+        border-color: var(--terminal-green);
+    }
+    
+    .personality-card.selected {
+        border-color: var(--terminal-green) !important;
+        background: rgba(57, 255, 20, 0.1) !important;
+    }
+    
+    .personality-card::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.1), transparent);
+        transition: left 0.6s;
+    }
+    
+    .personality-card:hover::before {
+        left: 100%;
+    }
+    
+    .sample-message {
+        font-style: italic;
+        margin: 0.5rem 0;
+        transition: all 0.3s ease;
+    }
+    
+    .personality-card:hover .sample-message {
+        background: rgba(57, 255, 20, 0.05) !important;
+    }
+    
+    .terminal-spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid var(--terminal-border);
+        border-top: 2px solid var(--terminal-green);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        display: inline-block;
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    
+    .personality-icon {
+        transition: all 0.3s ease;
+    }
+    
+    .personality-card:hover .personality-icon {
+        transform: scale(1.1);
+    }
+    
+    .step-number {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        font-size: 18px;
+    }
+    
+    .instruction-step {
+        transition: all 0.3s ease;
+    }
+    
+    .instruction-step:hover {
+        background: rgba(57, 255, 20, 0.1);
+        border-radius: 8px;
+    }
+    
+    /* Improved text visibility for main page */
+    .text-light {
+        color: #f8f9fa !important;
+    }
+    
+    .text-muted {
+        color: #adb5bd !important;
+    }
+    
+    .personality-card .text-light {
+        color: #e9ecef !important;
+        font-weight: 400;
+    }
+    
+    .terminal-card {
+        background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
+        border: 1px solid var(--terminal-border) !important;
+    }
+    
+    .sample-message {
+        background: rgba(0, 0, 0, 0.6) !important;
+        border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    }
+    
+    /* Better contrast for terminal window */
+    .terminal-window {
+        background: rgba(0, 0, 0, 0.8) !important;
+        border: 1px solid var(--terminal-border) !important;
+    }
+    
+    /* Emoji styling */
+    .personality-emoji {
+        font-size: 3.5rem !important;
+        line-height: 1;
+        display: inline-block;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+        transition: transform 0.3s ease;
+    }
+    
+    .personality-card:hover .personality-emoji {
+        transform: scale(1.1) rotate(5deg);
+    }
+    
+    /* Ensure emojis render consistently */
+    .personality-emoji, .terminal-send-btn, .char-counter, h6 {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+    }
+`;
+document.head.appendChild(style);
+</script>
+{% endblock %}