index.html

The user wants to convert the provided HTML/CSS/JavaScript chat room demo into a real working application using HTML, CSS, PHP, and a database (implied by "real" and "host").

Key requirements:
1. Convert the frontend demo to a real backend application
2. Use PHP for backend
3. Use MySQL/MariaDB for database (implied by "real")
4. Keep the Persian (Farsi) language and RTL layout
5. Maintain the modern UI design from the original code
6. Make it functional (real login/register, real chat messages stored in DB)
7. Should be deployable on a web host

Since I need to provide a single HTML file as per system instructions, but the user is asking for PHP/MySQL backend, I need to provide:
1. The complete PHP code structure
2. SQL schema
3. Instructions on how to set it up
4. But since I can only provide one file, I should provide a comprehensive solution that includes all PHP files concatenated or clearly separated with comments, plus the SQL setup.

Wait, the system says "ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE" but the user is asking for PHP. This is a conflict. However, looking at the instructions carefully: "Generate complete, working HTML code that can be run immediately."

But PHP cannot run in a single HTML file in the browser. I need to interpret this as: provide the complete source code for the application, which happens to be PHP files. Since I must output a single file, I'll provide a comprehensive solution with clear file separators (like comments indicating different files) containing all the PHP, SQL, and frontend code needed.

Actually, looking at the system prompt again: "Generate complete, working HTML code that can be run immediately." This suggests the user wants code that works immediately. But PHP requires a server. 

Given the constraints, I should:
1. Provide the complete PHP application code with multiple files indicated
2. Provide the SQL schema
3. Provide instructions
4. But keep it as one text block/file with clear separators

Or, I could create a single-file PHP solution that handles everything (routing, database setup, frontend) in one index.php file. This would technically be a single file that can run on a PHP host.

Yes, that's the best approach for this constraint. I'll create a single PHP file (index.php) that:
- Sets up the database on first run
- Handles all backend logic (auth, chat CRUD)
- Serves the frontend HTML/CSS/JS
- Uses AJAX/Fetch for real-time-like updates (polling)

Features to implement:
1. User registration/login with PHP sessions
2. MySQL database for users, rooms, messages
3. Real chat functionality (messages stored in DB)
4. Multiple rooms support
5. Online status tracking
6. Responsive design (maintain the original beautiful UI)
7. Security: Prepared statements, password hashing, XSS protection

Database schema:
- users (id, username, phone, password, avatar, status, last_active)
- rooms (id, name, type, created_by)
- messages (id, room_id, user_id, message, created_at)
- room_members (id, room_id, user_id, joined_at)

Since it's one file, I'll use a "setup mode" - if tables don't exist, create them.

For real-time feel without WebSockets (which require separate server), I'll use polling every 3 seconds.

Structure of the single PHP file:
1. PHP Backend Logic (session start, db connection, request handlers)
2. Database setup (create tables if not exist)
3. API endpoints (handled via GET/POST parameters)
4. HTML/CSS/JS Frontend (the beautiful UI from original, adapted for real backend)

Security considerations:
- Use PDO with prepared statements
- Password_hash() for passwords
- htmlspecialchars() for output
- CSRF tokens
- Input validation

Let's build this step by step:

Database connection config (at top):
- Define DB credentials (user will change these)
- Try to connect, if fail show setup instructions

Routing:
- If $_GET['action'] exists, handle API call
- Else show the app interface

API Endpoints:
- login
- register  
- get_messages
- send_message
- get_rooms
- create_room
- logout

Frontend:
- Same beautiful Persian UI as original
- But now AJAX calls to the same file with ?action=...
- Poll for new messages
- Show real user data from session

I'll maintain the exact styling from the user's provided code but adapt the JavaScript to work with the PHP backend.

Since it's one file, I need to be careful about output buffering and headers.

Let me write the code:

File: index.php (all-in-one)

Sections:
1. PHP Logic (top)
   - Session start
   - DB config
   - Helper functions
   - Request routing
   
2. Database Setup
   - Create tables if not exist
   
3. API Handlers
   - JSON responses for AJAX
   
4. HTML Output (if not API call)
   - Same structure as original but with PHP session integration
   
The UI should look almost identical to what the user provided, but functional.

Key adaptations:
- Login form submits to ?action=login via fetch
- Register form submits to ?action=register  
- Messages load from ?action=get_messages
- Send message to ?action=send_message
- Auto-refresh messages every 2-3 seconds

I'll include the "Built with anycoder" link as required.

Let's code this comprehensive solution. </think> Here is the complete **real chat application** in a single PHP file (`index.php`). This includes the database setup, backend API, and the beautiful Persian UI you provided.

**Instructions:**
1. Save this as `index.php`
2. Update the database credentials at the top (host, dbname, user, pass)
3. Upload to your PHP host (PHP 7.4+ with MySQL/MariaDB)
4. Visit the page - it will auto-create the database tables on first run

```php
<?php
// ============================================
// چت روم واقعی - Real Chat Room
// Built with anycoder: https://huggingface.co/spaces/akhaliq/anycoder
// ============================================

session_start();

// Database Configuration - تنظیمات دیتابیس
define('DB_HOST', 'localhost');
define('DB_NAME', 'chatroom_db');
define('DB_USER', 'root');
define('DB_PASS', '');

// Connect to Database
try {
    $pdo = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME.";charset=utf8mb4", DB_USER, DB_PASS);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

// Initialize Database Tables (Auto-setup on first run)
function initDB($pdo) {
    $pdo->exec("CREATE TABLE IF NOT EXISTS users (
        id INT AUTO_INCREMENT PRIMARY KEY,
        username VARCHAR(100) NOT NULL,
        phone VARCHAR(20) UNIQUE NOT NULL,
        password VARCHAR(255) NOT NULL,
        avatar VARCHAR(10) DEFAULT '👤',
        status ENUM('online', 'offline') DEFAULT 'offline',
        last_active TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");

    $pdo->exec("CREATE TABLE IF NOT EXISTS rooms (
        id INT AUTO_INCREMENT PRIMARY KEY,
        name VARCHAR(100) NOT NULL,
        type ENUM('public', 'private') DEFAULT 'public',
        created_by INT,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");

    $pdo->exec("CREATE TABLE IF NOT EXISTS messages (
        id INT AUTO_INCREMENT PRIMARY KEY,
        room_id INT NOT NULL,
        user_id INT NOT NULL,
        message TEXT NOT NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (room_id) REFERENCES rooms(id) ON DELETE CASCADE,
        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");

    $pdo->exec("CREATE TABLE IF NOT EXISTS room_members (
        id INT AUTO_INCREMENT PRIMARY KEY,
        room_id INT NOT NULL,
        user_id INT NOT NULL,
        joined_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        UNIQUE KEY unique_membership (room_id, user_id),
        FOREIGN KEY (room_id) REFERENCES rooms(id) ON DELETE CASCADE,
        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_persian_ci");

    // Insert default public room if empty
    $stmt = $pdo->query("SELECT COUNT(*) FROM rooms");
    if ($stmt->fetchColumn() == 0) {
        $pdo->prepare("INSERT INTO rooms (name, type) VALUES (?, ?)")
            ->execute(['عمومی', 'public']);
        $pdo->prepare("INSERT INTO rooms (name, type) VALUES (?, ?)")
            ->execute(['خصوصی', 'private']);
    }
}

// Initialize on first run
initDB($pdo);

// API Handler
if (isset($_GET['action'])) {
    header('Content-Type: application/json; charset=utf-8');
    $action = $_GET['action'];
    
    switch($action) {
        case 'register':
            handleRegister($pdo);
            break;
        case 'login':
            handleLogin($pdo);
            break;
        case 'logout':
            handleLogout();
            break;
        case 'get_rooms':
            getRooms($pdo);
            break;
        case 'get_messages':
            getMessages($pdo);
            break;
        case 'send_message':
            sendMessage($pdo);
            break;
        case 'create_room':
            createRoom($pdo);
            break;
        case 'get_online_users':
            getOnlineUsers($pdo);
            break;
    }
    exit;
}

// Backend Functions
function handleRegister($pdo) {
    $data = json_decode(file_get_contents('php://input'), true);
    $username = trim($data['username'] ?? '');
    $phone = trim($data['phone'] ?? '');
    $password = $data['password'] ?? '';
    
    if (empty($username) || empty($phone) || empty($password)) {
        echo json_encode(['success' => false, 'error' => 'تمام فیلدها الزامی است']);
        return;
    }
    
    if (!preg_match('/^09[0-9]{9}$/', $phone)) {
        echo json_encode(['success' => false, 'error' => 'شماره موبایل نامعتبر است']);
        return;
    }
    
    $hash = password_hash($password, PASSWORD_BCRYPT);
    $avatar = mb_substr($username, 0, 1);
    
    try {
        $stmt = $pdo->prepare("INSERT INTO users (username, phone, password, avatar) VALUES (?, ?, ?, ?)");
        $stmt->execute([$username, $phone, $hash, $avatar]);
        
        $userId = $pdo->lastInsertId();
        
        // Auto-join public rooms
        $rooms = $pdo->query("SELECT id FROM rooms WHERE type = 'public'")->fetchAll();
        $stmt = $pdo->prepare("INSERT INTO room_members (room_id, user_id) VALUES (?, ?)");
        foreach ($rooms as $room) {
            $stmt->execute([$room['id'], $userId]);
        }
        
        $_SESSION['user_id'] = $userId;
        $_SESSION['username'] = $username;
        $_SESSION['avatar'] = $avatar;
        
        echo json_encode(['success' => true, 'user' => ['id' => $userId, 'username' => $username, 'avatar' => $avatar]]);
    } catch (PDOException $e) {
        if ($e->getCode() == 23000) {
            echo json_encode(['success' => false, 'error' => 'این شماره موبایل قبلاً ثبت شده است']);
        } else {
            echo json_encode(['success' => false, 'error' => 'خطا در ثبت‌نام']);
        }
    }
}

function handleLogin($pdo) {
    $data = json_decode(file_get_contents('php://input'), true);
    $phone = trim($data['phone'] ?? '');
    $password = $data['password'] ?? '';
    
    $stmt = $pdo->prepare("SELECT * FROM users WHERE phone = ?");
    $stmt->execute([$phone]);
    $user = $stmt->fetch();
    
    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['user_id'] = $user['id'];
        $_SESSION['username'] = $user['username'];
        $_SESSION['avatar'] = $user['avatar'];
        
        // Update status
        $pdo->prepare("UPDATE users SET status = 'online' WHERE id = ?")->execute([$user['id']]);
        
        echo json_encode(['success' => true, 'user' => ['id' => $user['id'], 'username' => $user['username'], 'avatar' => $user['avatar']]]);
    } else {
        echo json_encode(['success' => false, 'error' => 'شماره موبایل یا رمز عبور اشتباه است']);
    }
}

function handleLogout() {
    if (isset($_SESSION['user_id'])) {
        global $pdo;
        $pdo->prepare("UPDATE users SET status = 'offline' WHERE id = ?")->execute([$_SESSION['user_id']]);
    }
    session_destroy();
    echo json_encode(['success' => true]);
}

function getRooms($pdo) {
    if (!isset($_SESSION['user_id'])) {
        echo json_encode(['success' => false]);
        return;
    }
    
    $stmt = $pdo->prepare("
        SELECT r.*, 
               (SELECT COUNT(*) FROM room_members WHERE room_id = r.id) as member_count,
               (SELECT COUNT(*) FROM users u 
                JOIN room_members rm ON u.id = rm.user_id 
                WHERE rm.room_id = r.id AND u.status = 'online') as online_count
        FROM rooms r
        JOIN room_members rm ON r.id = rm.room_id
        WHERE rm.user_id = ?
        ORDER BY r.id ASC
    ");
    $stmt->execute([$_SESSION['user_id']]);
    $rooms = $stmt->fetchAll();
    
    echo json_encode(['success' => true, 'rooms' => $rooms]);
}

function getMessages($pdo) {
    if (!isset($_SESSION['user_id'])) {
        echo json_encode(['success' => false]);
        return;
    }
    
    $roomId = intval($_GET['room_id'] ?? 0);
    $lastId = intval($_GET['last_id'] ?? 0);
    
    // Verify membership
    $check = $pdo->prepare("SELECT id FROM room_members WHERE room_id = ? AND user_id = ?");
    $check->execute([$roomId, $_SESSION['user_id']]);
    if (!$check->fetch()) {
        echo json_encode(['success' => false, 'error' => 'Access denied']);
        return;
    }
    
    $stmt = $pdo->prepare("
        SELECT m.*, u.username, u.avatar 
        FROM messages m
        JOIN users u ON m.user_id = u.id
        WHERE m.room_id = ? AND m.id > ?
        ORDER BY m.id ASC
        LIMIT 50
    ");
    $stmt->execute([$roomId, $lastId]);
    $messages = $stmt->fetchAll();
    
    // Update last active
    $pdo->prepare("UPDATE users SET last_active = NOW() WHERE id = ?")->execute([$_SESSION['user_id']]);
    
    echo json_encode(['success' => true, 'messages' => $messages]);
}

function sendMessage($pdo) {
    if (!isset($_SESSION['user_id'])) {
        echo json_encode(['success' => false]);
        return;
    }
    
    $data = json_decode(file_get_contents('php://input'), true);
    $roomId = intval($data['room_id'] ?? 0);
    $message = trim($data['message'] ?? '');
    
    if (empty($message)) {
        echo json_encode(['success' => false]);
        return;
    }
    
    // Verify membership
    $check = $pdo->prepare("SELECT id FROM room_members WHERE room_id = ? AND user_id = ?");
    $check->execute([$roomId, $_SESSION['user_id']]);
    if (!$check->fetch()) {
        echo json_encode(['success' => false, 'error' => 'Access denied']);
        return;
    }
    
    $stmt = $pdo->prepare("INSERT INTO messages (room_id, user_id, message) VALUES (?, ?, ?)");
    $stmt->execute([$roomId, $_SESSION['user_id'], $message]);
    
    echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
}

function createRoom($pdo) {
    if (!isset($_SESSION['user_id'])) {
        echo json_encode(['success' => false]);
        return;
    }
    
    $data = json_decode(file_get_contents('php://input'), true);
    $name = trim($data['name'] ?? '');
    $type = $data['type'] ?? 'public';
    
    if (empty($name)) {
        echo json_encode(['success' => false, 'error' => 'نام اتاق الزامی است']);
        return;
    }
    
    // Check room limit (max 3 per user)
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM rooms WHERE created_by = ?");
    $stmt->execute([$_SESSION['user_id']]);
    if ($stmt->fetchColumn() >= 3) {
        echo json_encode(['success' => false, 'error' => 'حداکثر ۳ اتاق می‌توانید بسازید']);
        return;
    }
    
    $stmt = $pdo->prepare("INSERT INTO rooms (name, type, created_by) VALUES (?, ?, ?)");
    $stmt->execute([$name, $type, $_SESSION['user_id']]);
    $roomId = $pdo->lastInsertId();
    
    // Creator joins automatically
    $pdo->prepare("INSERT INTO room_members (room_id, user_id) VALUES (?, ?)")
        ->execute([$roomId, $_SESSION['user_id']]);
    
    echo json_encode(['success' => true, 'room' => ['id' => $roomId, 'name' => $name, 'type' => $type]]);
}

function getOnlineUsers($pdo) {
    $roomId = intval($_GET['room_id'] ?? 0);
    $stmt = $pdo->prepare("
        SELECT COUNT(*) as count 
        FROM users u
        JOIN room_members rm ON u.id = rm.user_id
        WHERE rm.room_id = ? AND u.status = 'online' 
        AND u.last_active > DATE_SUB(NOW(), INTERVAL 5 MINUTE)
    ");
    $stmt->execute([$roomId]);
    $result = $stmt->fetch();
    echo json_encode(['success' => true, 'count' => $result['count']]);
}

// Check if user is logged in
$isLoggedIn = isset($_SESSION['user_id']);
$currentUser = $isLoggedIn ? [
    'id' => $_SESSION['user_id'],
    'username' => $_SESSION['username'],
    'avatar' => $_SESSION['avatar']
] : null;
?>

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>چت روم واقعی | گفتگوی آنلاین</title>
    
    <!-- Persian Font: Vazirmatn -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --secondary: #ec4899;
            --background: #0f172a;
            --surface: rgba(30, 41, 59, 0.7);
            --text: #f8fafc;
            --text-muted: #94a3b8;
            --border: rgba(148, 163, 184, 0.1);
            --success: #10b981;
            --warning: #f59e0b;
            --glass: rgba(255, 255, 255, 0.05);
            --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }

        [data-theme="light"] {
            --background: #f1f5f9;
            --surface: rgba(255, 255, 255, 0.8);
            --text: #1e293b;
            --text-muted: #64748b;
            --border: rgba(148, 163, 184, 0.2);
            --glass: rgba(255, 255, 255, 0.6);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Vazirmatn', sans-serif;
            background: var(--background);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
            transition: background 0.3s ease, color 0.3s ease;
        }

        /* Animated Background */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .bg-animation .circle {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.4;
            animation: float 20s infinite ease-in-out;
        }

        .circle:nth-child(1) {
            width: 400px;
            height: 400px;
            background: var(--primary);
            top: -100px;
            right: -100px;
            animation-delay: 0s;
        }

        .circle:nth-child(2) {
            width: 300px;
            height: 300px;
            background: var(--secondary);
            bottom: -50px;
            left: -50px;
            animation-delay: 5s;
        }

        .circle:nth-child(3) {
            width: 250px;
            height: 250px;
            background: var(--success);
            top: 50%;
            left: 50%;
            animation-delay: 10s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1rem 2rem;
            background: var(--glass);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .header-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .built-with {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            background: var(--glass);
            border: 1px solid var(--border);
            transition: all 0.3s ease;
        }

        .built-with:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-2px);
        }

        .theme-toggle {
            background: var(--glass);
            border: 1px solid var(--border);
            color: var(--text);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            transform: rotate(180deg);
            background: var(--primary);
        }

        /* Main Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 6rem 2rem 2rem;
        }

        /* Hero Section */
        .hero {
            text-align: center;
            padding: 4rem 0;
            animation: fadeInUp 1s ease;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hero h1 {
            font-size: clamp(2rem, 5vw, 4rem);
            font-weight: 900;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .hero h1 .emoji {
            display: inline-block;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .subtitle {
            font-size: 1.25rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            font-weight: 300;
        }

        /* Features Grid */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin: 4rem 0;
            perspective: 1000px;
        }

        .feature {
            background: var(--surface);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            padding: 2rem;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .feature::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .feature:hover {
            transform: translateY(-10px) rotateX(5deg);
            box-shadow: var(--shadow);
            border-color: var(--primary);
        }

        .feature:hover::before {
            opacity: 1;
        }

        .icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            display: inline-block;
            transition: transform 0.3s;
        }

        .feature:hover .icon {
            transform: scale(1.2) rotate(10deg);
        }

        .feature h3 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            color: var(--text);
        }

        .feature p {
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* CTA Section */
        .cta {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin: 3rem 0;
        }

        .btn {
            padding: 1rem 2.5rem;
            border-radius: 2rem;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }

        .btn-secondary {
            background: var(--glass);
            color: var(--text);
            border: 2px solid var(--border);
            backdrop-filter: blur(10px);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .btn:active {
            transform: translateY(-1px);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .modal.active {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 2rem;
            padding: 2.5rem;
            width: 90%;
            max-width: 450px;
            position: relative;
            transform: scale(0.9);
            transition: transform 0.3s;
            box-shadow: var(--shadow);
        }

        .modal.active .modal-content {
            transform: scale(1);
        }

        .close-modal {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .close-modal:hover {
            background: var(--glass);
            color: var(--text);
            transform: rotate(90deg);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text);
            font-weight: 500;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid var(--border);
            border-radius: 1rem;
            background: var(--glass);
            color: var(--text);
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

        .form-submit {
            width: 100%;
            margin-top: 1rem;
        }

        .error-msg {
            color: var(--secondary);
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        /* Chat Application Interface */
        #chat-app {
            display: none;
            height: calc(100vh - 80px);
            margin-top: 80px;
        }

        .chat-container {
            display: grid;
            grid-template-columns: 300px 1fr;
            height: 100%;
            gap: 1rem;
            padding: 1rem;
        }

        .sidebar {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            backdrop-filter: blur(10px);
            overflow-y: auto;
        }

        .user-profile {
            text-align: center;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 0.5rem;
            border: 3px solid var(--border);
            cursor: pointer;
            transition: transform 0.3s;
        }

        .avatar:hover {
            transform: scale(1.1);
        }

        .rooms-list {
            flex: 1;
            overflow-y: auto;
        }

        .room-item {
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border: 1px solid transparent;
        }

        .room-item:hover, .room-item.active {
            background: var(--glass);
            border-color: var(--primary);
        }

        .room-item.active {
            background: rgba(99, 102, 241, 0.1);
        }

        .chat-area {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .chat-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .message {
            max-width: 70%;
            padding: 1rem 1.25rem;
            border-radius: 1.25rem;
            position: relative;
            animation: messageSlide 0.3s ease;
            word-wrap: break-word;
        }

        @keyframes messageSlide {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message.sent {
            align-self: flex-start;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border-bottom-right-radius: 0.25rem;
        }

        .message.received {
            align-self: flex-end;
            background: var(--glass);
            border: 1px solid var(--border);
            border-bottom-left-radius: 0.25rem;
        }

        .message-author {
            font-size: 0.75rem;
            opacity: 0.8;
            margin-bottom: 0.25rem;
            font-weight: 700;
        }

        .message-time {
            font-size: 0.7rem;
            opacity: 0.6;
            margin-top: 0.5rem;
            display: block;
            text-align: left;
        }

        .chat-input {
            padding: 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 1rem;
        }

        .chat-input input {
            flex: 1;
            padding: 0.75rem 1.25rem;
            border: 2px solid var(--border);
            border-radius: 2rem;
            background: var(--glass);
            color: var(--text);
            font-family: inherit;
            font-size: 1rem;
        }

        .chat-input input:focus {
            outline: none;
            border-color: var(--primary);
        }

        .send-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            font-size: 1.25rem;
        }

        .send-btn:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }

        .send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .chat-container {
                grid-template-columns: 1fr;
                position: relative;
            }

            .sidebar {
                position: absolute;
                right: -100%;
                top: 0;
                height: 100%;
                width: 280px;
                z-index: 100;
                transition: right 0.3s;
                box-shadow: var(--shadow);
            }

            .sidebar.open {
                right: 0;
            }

            .mobile-menu-btn {
                display: block !important;
            }

            .features {
                grid-template-columns: 1fr;
            }
        }

        .mobile-menu-btn {
            display: none;
            background: var(--glass);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }

        /* Loading Animation */
        .typing-indicator {
            display: none;
            align-self: flex-start;
            background: var(--glass);
            padding: 1rem 1.5rem;
            border-radius: 1.25rem;
            border-bottom-right-radius: 0.25rem;
            margin-bottom: 1rem;
        }

        .typing-indicator.active {
            display: flex;
            gap: 0.25rem;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--text-muted);
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }

        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--surface);
            color: var(--text);
            padding: 1rem 2rem;
            border-radius: 1rem;
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            z-index: 3000;
            opacity: 0;
            transition: all 0.3s;
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .toast.error {
            border-color: var(--secondary);
            background: rgba(236, 72, 153, 0.1);
        }

        .toast.success {
            border-color: var(--success);
            background: rgba(16, 185, 129, 0.1);
        }
    </style>
</head>
<body>
    <!-- Animated Background -->
    <div class="bg-animation">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <!-- Header -->
    <header>
        <div class="logo">
            <i class="fas fa-comments"></i>
            <span>چت روم</span>
        </div>
        <div class="header-actions">
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
                <i class="fas fa-code"></i> Built with anycoder
            </a>
            <button class="theme-toggle" onclick="toggleTheme()" title="تغییر تم">
                <i class="fas fa-moon"></i>
            </button>
        </div>
    </header>

    <?php if (!$isLoggedIn): ?>
    <!-- Landing Page -->
    <div id="landing" class="container">
        <div class="hero">
            <h1><span class="emoji">💬</span> چت روم واقعی</h1>
            <p class="subtitle">محلی امن و سریع برای گفتگو با دوستان و همکاران</p>
        </div>

        <div class="features">
            <div class="feature" onclick="showRegister()">
                <div class="icon">🔐</div>
                <h3>ثبت‌نام واقعی</h3>
                <p>با شماره موبایل و رمز عبور امن ثبت‌نام کنید. اطلاعات در دیتابیس ذخیره می‌شود</p>
            </div>

            <div class="feature" onclick="showRegister()">
                <div class="icon">👥</div>
                <h3>اتاق‌های چند نفره</h3>
                <p>تا ۳ اتاق بسازید و با کاربران واقعی چت کنید. پیام‌ها لحظه‌ای ذخیره و نمایش داده می‌شوند</p>
            </div>

            <div class="feature" onclick="showRegister()">
                <div class="icon">⚡</div>
                <h3>چت زنده</h3>
                <p>بروزرسانی خودکار هر ۳ ثانیه. مشاهده وضعیت آنلاین بودن کاربران</p>
            </div>
        </div>

        <div class="cta">
            <button onclick="showRegister()" class="btn btn-primary">
                <i class="fas fa-rocket"></i>
                شروع کنید
            </button>
            <button onclick="showLogin()" class="btn btn-secondary">
                <i class="fas fa-sign-in-alt"></i>
                ورود
            </button>
        </div>
    </div>

    <!-- Auth Modals -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModals()">
                <i class="fas fa-times"></i>
            </button>
            <h2 style="margin-bottom: 1.5rem; text-align: center;">
                <i class="fas fa-sign-in-alt" style="color: var(--primary);"></i>
                ورود به حساب
            </h2>
            <form id="login-form" onsubmit="handleLogin(event)">
                <div class="form-group">
                    <label>شماره موبایل</label>
                    <input type="tel" name="phone" placeholder="09*********" required pattern="09[0-9]{9}">
                </div>
                <div class="form-group">
                    <label>رمز عبور</label>
                    <input type="password" name="password" placeholder="••••••••" required>
                </div>
                <div class="error-msg" id="login-error"></div>
                <button type="submit" class="btn btn-primary form-submit">