update full

api/auth.py

@@ -16,8 +16,9 @@ from typing import Optional, Dict
 import os
 import logging
 import secrets
+from fastapi.responses import RedirectResponse
 
-from api.database import User, OAuthAccount, CustomSQLAlchemyUserDatabase, get_user_db  # استيراد من database.py
+from api.database import User, OAuthAccount, CustomSQLAlchemyUserDatabase, get_user_db
 from api.models import UserRead, UserCreate, UserUpdate
 
 # إعداد اللوقينج
@@ -151,7 +152,7 @@ google_oauth_router = get_oauth_router(
     get_user_manager,
     state_secret=SECRET,
     associate_by_email=True,
-    redirect_url=GOOGLE_REDIRECT_URL,
+    redirect_url="https://mgzon-mgzon-app.hf.space/chat",  # تعديل الـ redirect_url ليحوّل مباشرة إلى /chat
 )
 
 github_oauth_client._access_token_url = "https://github.com/login/oauth/access_token"
@@ -162,7 +163,7 @@ github_oauth_router = get_oauth_router(
     get_user_manager,
     state_secret=SECRET,
     associate_by_email=True,
-    redirect_url=GITHUB_REDIRECT_URL,
+    redirect_url="https://mgzon-mgzon-app.hf.space/chat",  # تعديل الـ redirect_url ليحوّل مباشرة إلى /chat
 )
 
 fastapi_users = FastAPIUsers[User, int](
@@ -180,4 +181,4 @@ def get_auth_router(app: FastAPI):
     app.include_router(fastapi_users.get_register_router(UserRead, UserCreate), prefix="/auth", tags=["auth"])
     app.include_router(fastapi_users.get_reset_password_router(), prefix="/auth", tags=["auth"])
     app.include_router(fastapi_users.get_verify_router(UserRead), prefix="/auth", tags=["auth"])
-    app.include_router(fastapi_users.get_users_router(UserRead, UserUpdate), prefix="/users", tags=["users"])
+    app.include_router(fastapi_users.get_users_router(UserRead, UserUpdate), prefix="/users", tags=["users"])

api/database.py

@@ -1,146 +1,94 @@
-# api/database.py
+# init_db.py
 # SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
 # SPDX-License-License: Apache-2.0
 
 import os
 import logging
-from datetime import datetime
-from typing import AsyncGenerator, Optional, Dict, Any
-
-from sqlalchemy import Column, String, Integer, ForeignKey, DateTime, Boolean, Text, select
-from sqlalchemy.ext.asyncio import create_async_engine, async_sessionmaker, AsyncSession
-from sqlalchemy.ext.declarative import declarative_base
-from sqlalchemy.orm import relationship
-from fastapi import Depends
-from fastapi_users.db import SQLAlchemyBaseUserTable, SQLAlchemyUserDatabase
-import aiosqlite
+import asyncio
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import select, delete
+from api.database import async_engine, Base, User, OAuthAccount, Conversation, Message, AsyncSessionLocal
+from passlib.context import CryptContext
 
 # إعداد اللوج
+logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# استخدم القيمة مباشرة إذا لم يكن هناك متغير بيئة
-SQLALCHEMY_DATABASE_URL = os.environ.get(
-    "SQLALCHEMY_DATABASE_URL"
-) or "sqlite+aiosqlite:///./data/mgzon_users.db"
-
-# تأكد أن الدرايفر async
-if "aiosqlite" not in SQLALCHEMY_DATABASE_URL:
-    raise ValueError("Database URL must use 'sqlite+aiosqlite' for async support")
-
-# إنشاء محرك async
-async_engine = create_async_engine(
-    SQLALCHEMY_DATABASE_URL,
-    echo=True,
-    connect_args={"check_same_thread": False}
-)
-
-# إعداد الجلسة async
-AsyncSessionLocal = async_sessionmaker(
-    async_engine,
-    expire_on_commit=False,
-    class_=AsyncSession
-)
-
-# القاعدة الأساسية للنماذج
-Base = declarative_base()
-
-# النماذج (Models)
-class OAuthAccount(Base):
-    __tablename__ = "oauth_account"
-    id = Column(Integer, primary_key=True, index=True)
-    user_id = Column(Integer, ForeignKey("user.id"), nullable=False)
-    oauth_name = Column(String, nullable=False)
-    access_token = Column(String, nullable=False)
-    expires_at = Column(Integer, nullable=True)
-    refresh_token = Column(String, nullable=True)
-    account_id = Column(String, index=True, nullable=False)
-    account_email = Column(String, nullable=False)
-
-    user = relationship("User", back_populates="oauth_accounts", lazy="selectin")
-
-class User(SQLAlchemyBaseUserTable[int], Base):
-    __tablename__ = "user"
-    id = Column(Integer, primary_key=True, index=True)
-    email = Column(String, unique=True, index=True, nullable=False)
-    hashed_password = Column(String, nullable=False)
-    is_active = Column(Boolean, default=True)
-    is_superuser = Column(Boolean, default=False)
-    is_verified = Column(Boolean, default=False)
-    display_name = Column(String, nullable=True)
-    preferred_model = Column(String, nullable=True)
-    job_title = Column(String, nullable=True)
-    education = Column(String, nullable=True)
-    interests = Column(String, nullable=True)
-    additional_info = Column(Text, nullable=True)
-    conversation_style = Column(String, nullable=True)
-
-    oauth_accounts = relationship("OAuthAccount", back_populates="user", cascade="all, delete-orphan")
-    conversations = relationship("Conversation", back_populates="user", cascade="all, delete-orphan")
-
-class Conversation(Base):
-    __tablename__ = "conversation"
-    id = Column(Integer, primary_key=True, index=True)
-    conversation_id = Column(String, unique=True, index=True, nullable=False)
-    user_id = Column(Integer, ForeignKey("user.id"), nullable=False)
-    title = Column(String, nullable=False)
-    created_at = Column(DateTime, default=datetime.utcnow)
-    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-
-    user = relationship("User", back_populates="conversations")
-    messages = relationship("Message", back_populates="conversation", cascade="all, delete-orphan")
-
-class Message(Base):
-    __tablename__ = "message"
-    id = Column(Integer, primary_key=True, index=True)
-    conversation_id = Column(Integer, ForeignKey("conversation.id"), nullable=False)
-    role = Column(String, nullable=False)
-    content = Column(Text, nullable=False)
-    created_at = Column(DateTime, default=datetime.utcnow)
-
-    conversation = relationship("Conversation", back_populates="messages")
+# إعداد تشفير كلمة المرور
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
 
-# قاعدة بيانات المستخدم المخصصة (نقلناها من user_db.py)
-class CustomSQLAlchemyUserDatabase(SQLAlchemyUserDatabase[User, int]):
-    """
-    قاعدة بيانات مخصَّصة لمكتبة fastapi-users.
-    تضيف طريقة parse_id التي تُحوِّل الـ ID من str → int.
-    """
-    def parse_id(self, value: Any) -> int:
-        logger.debug(f"Parsing user id: {value} (type={type(value)})")
-        return int(value) if isinstance(value, str) else value
-
-    async def get_by_email(self, email: str) -> Optional[User]:
-        logger.info(f"Looking for user with email: {email}")
-        stmt = select(self.user_table).where(self.user_table.email == email)
-        result = await self.session.execute(stmt)
-        return result.scalar_one_or_none()
+async def init_db():
+    logger.info("Starting database initialization...")
 
-    async def create(self, create_dict: Dict[str, Any]) -> User:
-        logger.info(f"Creating new user: {create_dict.get('email')}")
-        user = self.user_table(**create_dict)
-        self.session.add(user)
-        await self.session.commit()
-        await self.session.refresh(user)
-        return user
+    # إنشاء الجداول
+    try:
+        async with async_engine.begin() as conn:
+            await conn.run_sync(Base.metadata.create_all)
+        logger.info("Database tables created successfully.")
+    except Exception as e:
+        logger.error(f"Error creating database tables: {e}")
+        raise
 
-# دالة لجلب الجلسة async
-async def get_db() -> AsyncGenerator[AsyncSession, None]:
+    # تنظيف البيانات غير المتسقة
     async with AsyncSessionLocal() as session:
         try:
-            yield session
+            # حذف سجلات oauth_accounts اللي مش مرتبطة بمستخدم موجود
+            stmt = delete(OAuthAccount).where(
+                OAuthAccount.user_id.notin_(select(User.id))
+            )
+            result = await session.execute(stmt)
+            deleted_count = result.rowcount
+            await session.commit()
+            logger.info(f"Deleted {deleted_count} orphaned OAuth accounts.")
+
+            # التأكد من إن كل المستخدمين ليهم is_active=True
+            users = (await session.execute(select(User))).scalars().all()
+            for user in users:
+                if not user.is_active:
+                    user.is_active = True
+                    logger.info(f"Updated user {user.email} to is_active=True")
+            await session.commit()
+
+            # اختبار إنشاء مستخدم ومحادثة (اختياري)
+            test_user = (await session.execute(
+                select(User).filter_by(email="test@example.com")
+            )).scalar_one_or_none()
+            if not test_user:
+                test_user = User(
+                    email="test@example.com",
+                    hashed_password=pwd_context.hash("testpassword123"),
+                    is_active=True,
+                    display_name="Test User"
+                )
+                session.add(test_user)
+                await session.commit()
+                logger.info("Test user created successfully.")
+
+            test_conversation = (await session.execute(
+                select(Conversation).filter_by(user_id=test_user.id)
+            )).scalar_one_or_none()
+            if not test_conversation:
+                test_conversation = Conversation(
+                    conversation_id="test-conversation-1",
+                    user_id=test_user.id,
+                    title="Test Conversation"
+                )
+                session.add(test_conversation)
+                await session.commit()
+                logger.info("Test conversation created successfully.")
+
+        except Exception as e:
+            await session.rollback()
+            logger.error(f"Error during initialization: {e}")
+            raise
         finally:
             await session.close()
 
-# دالة لجلب قاعدة بيانات المستخدمين لـ fastapi-users
-async def get_user_db(session: AsyncSession = Depends(get_db)) -> AsyncGenerator[CustomSQLAlchemyUserDatabase, None]:
-    yield CustomSQLAlchemyUserDatabase(session, User, OAuthAccount)
+    logger.info("Database initialization completed.")
 
-# دالة لإنشاء الجداول
-async def init_db():
+if __name__ == "__main__":
     try:
-        async with async_engine.begin() as conn:
-            await conn.run_sync(Base.metadata.create_all)
-        logger.info("Database tables created successfully")
+        asyncio.run(init_db())
     except Exception as e:
-        logger.error(f"Error creating database tables: {e}")
+        logger.error(f"Failed to initialize database: {e}")
         raise

create_dummy_user.py

@@ -0,0 +1,30 @@
+# create_dummy_user.py
+
+import asyncio
+from api.database import get_db, User
+from passlib.hash import bcrypt
+
+async def create_dummy_user():
+    async for session in get_db():
+        existing = await session.execute(
+            User.__table__.select().where(User.email == "admin@example.com")
+        )
+        if existing.scalar():
+            print("⚠️ User already exists.")
+            return
+
+        user = User(
+            email="admin@example.com",
+            hashed_password=bcrypt.hash("00000000"),
+            is_active=True,
+            is_superuser=True,
+            is_verified=True,
+            display_name="Admin"
+        )
+        session.add(user)
+        await session.commit()
+        await session.refresh(user)
+        print(f"✅ User created: {user.email}")
+
+if __name__ == "__main__":
+    asyncio.run(create_dummy_user())

requirements.txt

@@ -1,5 +1,13 @@
-fastapi==0.115.2
-packaging>=23.0
+fastapi==0.95.2
+fastapi-users[sqlalchemy,oauth2]==10.4.2
+pydantic==1.10.13
+email-validator==1.3.1
+aiosqlite==0.21.0
+sqlalchemy==2.0.43
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+httpx-oauth==0.16.1
+python-multipart==0.0.6
 uvicorn==0.30.6
 openai==1.51.2
 httpx==0.27.0
@@ -22,17 +30,9 @@ webrtcvad==2.0.10
 Pillow==10.4.0
 urllib3==2.2.3
 itsdangerous==2.2.0
-protobuf==3.19.6  # عدلنا من 4.25.5 عشان يتوافق مع descript-audiotools
-fastapi-users[sqlalchemy,oauth2]==14.0.0
-sqlalchemy==2.0.35
-python-jose[cryptography]==3.3.0
-passlib[bcrypt]==1.7.4
-httpx-oauth==0.16.1
-python-multipart==0.0.17
+protobuf==3.19.6
 aiofiles==24.1.0
 motor==3.7.0
-aiosqlite
-
 redis==5.0.0
 markdown2==2.5.0
 pymongo==4.10.1
@@ -44,4 +44,4 @@ wsproto>=1.2.0
 descript-audiotools>=0.7.2
 scipy>=1.15.0
 librosa>=0.10.0
-matplotlib>=3.10.0
+matplotlib>=3.10.0

static/js/sw.js

@@ -2,43 +2,102 @@
 // SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
 // SPDX-License-Identifier: Apache-2.0
 
+const CACHE_NAME = 'ChatMG-v2'; // غيّر الإصدار عشان يجبر الـ cache يتحدّث
+const urlsToCache = [
+  '/',
+  '/chat',
+  '/static/css/style.css',
+  '/static/css/chat/style.css',
+  '/static/css/sidebar.css',
+  '/static/js/chat.js',
+  '/static/images/mg.svg',
+  '/static/images/icons/mg-48.png',
+  '/static/images/icons/mg-72.png',
+  '/static/images/icons/mg-96.png',
+  '/static/images/icons/mg-128.png',
+  '/static/images/icons/mg-192.png',
+  '/static/images/icons/mg-256.png',
+  '/static/images/icons/mg-384.png',
+  '/static/images/icons/mg-512.png',
+  '/static/images/splash-screen.png',
+  '/static/images/splash-screen-750x1334.png',
+  '/static/images/settings-icon.svg',
+  '/static/images/swipe-hint.svg'
+];
+
+// Install event
 self.addEventListener('install', (event) => {
   event.waitUntil(
-    caches.open('ChatMG-v1').then((cache) => {
-      return cache.addAll([
-        '/',
-        '/chat',
-        '/static/css/style.css',
-        '/static/css/chat/style.css',
-        '/static/css/sidebar.css',
-        '/static/js/chat.js',
-        '/static/images/mg.svg',
-        '/static/images/icons/mg-48.png',
-        '/static/images/icons/mg-72.png',
-        '/static/images/icons/mg-96.png',
-        '/static/images/icons/mg-128.png',
-        '/static/images/icons/mg-192.png',
-        '/static/images/icons/mg-256.png',
-        '/static/images/icons/mg-384.png',
-        '/static/images/icons/mg-512.png'
-      ]);
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log('Opened cache for install');
+      return cache.addAll(urlsToCache);
     })
   );
 });
+
+// Activate event
 self.addEventListener('activate', (event) => {
   event.waitUntil(
     caches.keys().then((cacheNames) => {
       return Promise.all(
-        cacheNames.filter((name) => name !== 'ChatMG-v1').map((name) => caches.delete(name))
+        cacheNames.filter((name) => name !== CACHE_NAME).map((name) => caches.delete(name))
       );
     })
   );
 });
 
+// Fetch event with dynamic caching and stale-while-revalidate
 self.addEventListener('fetch', (event) => {
-  event.respondWith(
-    caches.match(event.request).then((response) => {
-      return response || fetch(event.request);
-    })
-  );
+  const { url } = event.request;
+  const isAPI = url.includes('/api/');
+  const isStatic = url.includes('/static/');
+
+  if (isStatic || isAPI) {
+    event.respondWith(
+      caches.match(event.request).then((response) => {
+        if (response) {
+          // Return cached version immediately (stale)
+          event.waitUntil(updateCache(event.request));
+          return response;
+        }
+        return fetch(event.request).then((fetchResponse) => {
+          // Cache the new response
+          if (fetchResponse.ok) {
+            return caches.open(CACHE_NAME).then((cache) => {
+              cache.put(event.request, fetchResponse.clone());
+              return fetchResponse;
+            });
+          }
+          return fetchResponse;
+        });
+      }).catch(() => {
+        // Offline fallback for API
+        if (isAPI) {
+          return new Response(JSON.stringify({ error: 'Offline mode - Please check your connection' }), {
+            status: 503,
+            headers: { 'Content-Type': 'application/json' }
+          });
+        }
+        return caches.match(event.request);
+      })
+    );
+  } else {
+    // For other requests, use network-first
+    event.respondWith(
+      fetch(event.request).catch(() => caches.match(event.request))
+    );
+  }
 });
+
+// Function to update cache in background
+async function updateCache(request) {
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      const cache = await caches.open(CACHE_NAME);
+      await cache.put(request, response.clone());
+    }
+  } catch (error) {
+    console.log('Cache update failed:', error);
+  }
+}

static/manifest.json

@@ -7,51 +7,105 @@
   "background_color": "#1a202c",
   "theme_color": "#2d3748",
   "scope": "/",
+  "lang": "en",
+  "dir": "ltr",
+  "categories": ["productivity", "utilities", "business"],
+  "shortcuts": [
+    {
+      "name": "New Chat",
+      "short_name": "Chat",
+      "description": "Start a new conversation",
+      "url": "/chat",
+      "icons": [
+        {
+          "src": "/static/images/mg.svg",
+          "sizes": "96x96"
+        }
+      ]
+    },
+    {
+      "name": "Settings",
+      "short_name": "Settings",
+      "description": "Open settings",
+      "url": "/chat?settings=open",
+      "icons": [
+        {
+          "src": "/static/images/settings-icon.svg",
+          "sizes": "96x96"
+        }
+      ]
+    }
+  ],
+  "splash_screens": [
+    {
+      "src": "/static/images/splash-screen.png",
+      "sizes": "1080x1920",
+      "type": "image/png",
+      "background_color": "#1a202c",
+      "position": "center"
+    },
+    {
+      "src": "/static/images/splash-screen-750x1334.png",
+      "sizes": "750x1334",
+      "type": "image/png",
+      "background_color": "#1a202c",
+      "position": "center"
+    }
+  ],
   "icons": [
     {
       "src": "/static/images/mg.svg",
       "sizes": "192x192",
-      "type": "image/svg+xml"
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-48.png",
       "sizes": "48x48",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-72.png",
       "sizes": "72x72",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-96.png",
       "sizes": "96x96",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-128.png",
       "sizes": "128x128",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-256.png",
       "sizes": "256x256",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-384.png",
       "sizes": "384x384",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
       "src": "/static/images/icons/mg-512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
-}
+}

templates/chat.html

@@ -95,6 +95,11 @@
   <link rel="stylesheet" href="/static/css/style.css" />
   <link rel="stylesheet" href="/static/css/webkit.css" />
   <link rel="stylesheet" href="/static/css/sidebar.css" />
+  <!-- Preload Resources -->
+  <link rel="preload" href="/static/js/chat.js" as="script">
+  <link rel="preload" href="/static/css/chat/style.css" as="style">
+  <link rel="preload" href="/static/images/mg.svg" as="image">
+  <link rel="preload" href="/static/images/splash-screen.png" as="image">
 </head>
 
 <body class="min-h-screen flex flex-col bg-gradient-to-br from-gray-900 via-teal-900 to-emerald-900">
@@ -400,10 +405,16 @@
     <div class="text-center text-xs text-gray-400 py-2">
       © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
     </div>
+    <!-- Install Button -->
     <button id="installAppBtn" style="display: none;"
       class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
       📲 Install MG Chat
     </button>
+    <!-- PWA Install Instructions -->
+    <div id="pwa-instructions" class="fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg z-50 hidden">
+      <p><strong>Add to Home Screen:</strong> Tap the share button in your browser, then "Add to Home Screen" for a native-like experience!</p>
+      <button onclick="document.getElementById('pwa-instructions').classList.add('hidden')" class="ml-2 text-sm">Close</button>
+    </div>
   </div>
 
   <!-- Scripts -->
@@ -441,7 +452,6 @@
       const installBtn = document.getElementById('installAppBtn');
       if (installBtn) {
         installBtn.style.display = 'block';
-
         installBtn.addEventListener('click', () => {
           deferredPrompt.prompt();
           deferredPrompt.userChoice.then(choice => {
@@ -455,8 +465,100 @@
         });
       }
     });
+
+    // Show PWA instructions on first visit
+    if (localStorage.getItem('pwa-instructions-shown') !== 'true') {
+      document.getElementById('pwa-instructions').classList.remove('hidden');
+      localStorage.setItem('pwa-instructions-shown', 'true');
+    }
+
+    // Enhance touch gestures for sidebar
+    const sidebar = document.getElementById('sidebar');
+    const hammer = new Hammer(sidebar);
+    hammer.on('swipeleft', () => {
+      sidebar.classList.remove('open');
+    });
+    hammer.on('swiperight', () => {
+      sidebar.classList.add('open');
+    });
   </script>
 
+  <style>
+    /* Mobile Native Feel */
+    @media (max-width: 768px) {
+      body {
+        padding: 0;
+        margin: 0;
+        overflow: hidden; /* Prevent scrolling outside app */
+      }
+      .min-h-screen {
+        height: 100vh;
+        max-height: 100vh;
+      }
+      .flex-1 {
+        flex: 1;
+        overflow-y: auto;
+      }
+      #chatBox {
+        padding: 10px;
+        font-size: 16px; /* Prevent zoom on iOS */
+      }
+      textarea, input, select, button {
+        font-size: 16px; /* Prevent zoom on iOS */
+        touch-action: manipulation; /* Improve touch responsiveness */
+      }
+      .chat-header {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        background: rgba(31, 41, 55, 0.9); /* Match bg-gray-800 */
+        backdrop-filter: blur(10px);
+      }
+      /* Hide scrollbar for native look */
+      #chatBox::-webkit-scrollbar, #conversationList::-webkit-scrollbar {
+        display: none;
+      }
+      #chatBox, #conversationList {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+      }
+      #sidebar {
+        width: 80%; /* Slightly narrower for better UX */
+      }
+      #swipeHint {
+        animation: pulse 2s infinite;
+      }
+    }
+
+    /* Prevent zoom on iOS */
+    input, textarea, select, button {
+      font-size: 16px;
+      touch-action: manipulation;
+    }
+
+    /* Full-screen for PWA */
+    @media (display-mode: standalone) {
+      body {
+        margin: 0;
+        padding: 0;
+        overscroll-behavior: none; /* Prevent pull-to-refresh */
+      }
+      .chat-header {
+        padding-top: env(safe-area-inset-top); /* Respect iOS notch */
+      }
+      #footerForm {
+        padding-bottom: env(safe-area-inset-bottom); /* Respect iOS bottom bar */
+      }
+    }
+
+    /* Smooth transitions for sidebar */
+    #sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    #sidebar.open {
+      transform: translateX(0);
+    }
+  </style>
 </body>
 
 </html>