Upload 78 files

.gitattributes

@@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/apps/static/2023050195.pdf filter=lfs diff=lfs merge=lfs -text
+src/apps/static/legal[[:space:]]writing.pdf filter=lfs diff=lfs merge=lfs -text
+src/apps/static/LegalTheory_CaseLawNotes.pdf filter=lfs diff=lfs merge=lfs -text
+src/apps/static/MootCourt_Advocacy.pdf filter=lfs diff=lfs merge=lfs -text
+src/apps/static/video.mp4 filter=lfs diff=lfs merge=lfs -text
+src/apps/static/wipo_guide_ipc_2019.pdf filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.10-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV KMP_DUPLICATE_LIB_OK=TRUE
+ENV FAISS_NO_OPENMP=1
+
+# Set work directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    libpq-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . .
+
+# Move to the apps directory
+WORKDIR /app/src/apps
+
+# Expose the port (Hugging Face Spaces uses 7860)
+EXPOSE 7860
+
+# Run the application
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

requirements.txt

@@ -0,0 +1,25 @@
+fastapi==0.104.1
+uvicorn==0.24.0
+sqlalchemy==2.0.23
+asyncpg==0.29.0
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+python-multipart==0.0.9
+pydantic==2.5.0
+pydantic-settings==2.1.0
+python-dotenv==1.0.0
+jinja2==3.1.2
+aiofiles==23.2.1
+requests==2.31.0
+openai==1.3.0
+langchain==0.1.0
+langchain-community==0.0.10
+chromadb==0.4.18
+fastapi-mail>=1.5.0
+httpx==0.25.1
+faiss-cpu==1.7.4
+transformers==4.35.2
+torch==2.1.1
+numpy>=1.24.0
+einops==0.7.0
+psycopg2-binary==2.9.9

src/apps/.env

@@ -0,0 +1,26 @@
+# Database Configuration
+DB_USER=postgres
+DB_PASSWORD=Vishwa12
+DB_HOST=localhost
+DB_PORT=5432
+DB_NAME=lawbot_db
+
+# Security
+SECRET_KEY=f1fda542576b459ee24bf2d459711a439576da2d804dcbb35de9e18261
+ALGORITHM=HS256
+ACCESS_TOKEN_EXPIRE_MINUTES=30
+
+# Email Configuration (Gmail)
+MAIL_USERNAME=vishwaroman04@gmail.com
+MAIL_PASSWORD=vowg uhgs uwwh qspj
+MAIL_FROM=vishwaroman04@gmail.com
+MAIL_PORT=587
+MAIL_SERVER=smtp.gmail.com
+
+# OpenRouter API Key (for chatbot - get from https://openrouter.ai/keys)
+# Use format: sk-or-v1-xxxxxxxx... (prefix only ONCE)
+OPENROUTER_API_KEY=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
+
+
+
+

src/apps/app.py

@@ -0,0 +1,520 @@
+import bcrypt
+# Robust monkeypatch for bcrypt-passlib compatibility 
+if not hasattr(bcrypt, "__about__"):
+    bcrypt.__about__ = type('About', (object,), {'__version__': bcrypt.__version__})
+
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, Request, Response, Depends, HTTPException, status
+from typing import Optional
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+import uvicorn
+import asyncio
+import os
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy.future import select
+from pydantic import BaseModel, EmailStr
+
+from utils.main import RAG
+from database import engine, Base, get_db
+from models import User
+from auth import get_password_hash, verify_password, create_access_token, ACCESS_TOKEN_EXPIRE_MINUTES, ALGORITHM, SECRET_KEY
+from email_utils import send_reset_email
+from datetime import timedelta
+from fastapi.security import OAuth2PasswordBearer
+from jose import JWTError, jwt
+import uuid
+
+# Initialize Database
+async def init_db():
+    async with engine.begin() as conn:
+        await conn.run_sync(Base.metadata.create_all)
+
+app = FastAPI(on_startup=[init_db])
+
+chat_history = []
+
+# Get the base directory
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+TEMPLATES_DIR = os.path.join(BASE_DIR, "templates")
+
+# Mount static directories
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+app.mount("/images", StaticFiles(directory=os.path.join(STATIC_DIR, "images")), name="images")
+
+# Initialize Jinja2 templates
+templates = Jinja2Templates(directory=TEMPLATES_DIR)
+
+
+# Pydantic Models for Auth
+class UserCreate(BaseModel):
+    username: str
+    email: EmailStr
+    password: str
+    role: str
+
+class UserLogin(BaseModel):
+    username: str
+    password: str
+    role: Optional[str] = None
+
+class ForgotPassword(BaseModel):
+    email: EmailStr
+
+class ResetPassword(BaseModel):
+    token: str
+    new_password: str
+
+class Interaction(BaseModel):
+    caseId: str
+    query: str
+    response: str
+    role: str  # Role context for this interaction
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="api/login")
+
+async def get_current_user(request: Request, db: AsyncSession = Depends(get_db)):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    
+    # Try to get token from Header first (for API calls), then Cookie (for Page navigation)
+    token = None
+    auth_header = request.headers.get("Authorization")
+    if auth_header and auth_header.startswith("Bearer "):
+        token = auth_header.split(" ")[1]
+    else:
+        token = request.cookies.get("access_token")
+        
+    if not token:
+        raise credentials_exception
+        
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        if username is None:
+            raise credentials_exception
+    except JWTError:
+        raise credentials_exception
+    
+    result = await db.execute(select(User).where(User.username == username))
+    user = result.scalars().first()
+    if user is None:
+        raise credentials_exception
+    return user
+
+def role_required(required_role: str):
+    async def role_checker(user: User = Depends(get_current_user)):
+        if user.role != required_role and user.role != "Admin":
+            raise HTTPException(
+                status_code=status.HTTP_403_FORBIDDEN,
+                detail=f"Access denied: Requires {required_role} role (or Admin)"
+            )
+        return user
+    return role_checker
+
+# Auth Routes
+@app.post("/api/register")
+async def register(user: UserCreate, db: AsyncSession = Depends(get_db)):
+    result = await db.execute(select(User).where((User.username == user.username) | (User.email == user.email)))
+    if result.scalars().first():
+        raise HTTPException(status_code=400, detail="Username or Email already registered")
+    
+    hashed_password = get_password_hash(user.password)
+    new_user = User(username=user.username, email=user.email, hashed_password=hashed_password, role=user.role)
+    db.add(new_user)
+    await db.commit()
+    return {"message": "User created successfully"}
+
+@app.post("/api/login")
+async def login(response: Response, user: UserLogin, db: AsyncSession = Depends(get_db)):
+    print(f"Login attempt for username: {user.username}")
+    result = await db.execute(select(User).where(User.username == user.username))
+    db_user = result.scalars().first()
+    
+    if not db_user:
+        print(f"User not found: {user.username}")
+        raise HTTPException(status_code=400, detail="Incorrect username or password")
+    
+    print(f"User found: {db_user.username}, checking password...")
+    password_valid = verify_password(user.password, db_user.hashed_password)
+    print(f"Password valid: {password_valid}")
+    
+    if not password_valid:
+        raise HTTPException(status_code=400, detail="Incorrect username or password")
+    
+    # Verify role if provided
+    if user.role and db_user.role != user.role and db_user.role != "Admin":
+        print(f"Role mismatch: user has {db_user.role}, but tried to login as {user.role}")
+        raise HTTPException(status_code=403, detail=f"Access denied: This account is registered as {db_user.role}, not {user.role}")
+
+    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    access_token = create_access_token(data={"sub": db_user.username, "role": db_user.role}, expires_delta=access_token_expires)
+    
+    # Set secure cookie
+    response.set_cookie(
+        key="access_token",
+        value=access_token,
+        httponly=True,
+        max_age=ACCESS_TOKEN_EXPIRE_MINUTES * 60,
+        samesite="lax",
+        secure=False  # Set to True in production with HTTPS
+    )
+    
+    print(f"Login successful for {db_user.username}, role: {db_user.role}")
+    return {
+        "access_token": access_token, 
+        "token_type": "bearer", 
+        "role": db_user.role,
+        "question_count": db_user.question_count,
+        "is_admin": db_user.role == "Admin"
+    }
+
+@app.post("/api/logout")
+async def logout(response: Response):
+    response.delete_cookie("access_token")
+    return {"message": "Logged out successfully"}
+
+@app.post("/api/forgot-password")
+async def forgot_password(request: ForgotPassword, db: AsyncSession = Depends(get_db)):
+    result = await db.execute(select(User).where(User.email == request.email))
+    user = result.scalars().first()
+    
+    if user:
+        token = str(uuid.uuid4())
+        user.reset_token = token
+        await db.commit()
+        try:
+            await send_reset_email(user.email, token)
+        except Exception as e:
+            print(f"Error sending email: {e}")
+            raise HTTPException(status_code=500, detail=f"Failed to send email: {str(e)}")
+        
+    return {"message": "If an account exists, a reset email has been sent"}
+
+@app.post("/api/reset-password")
+async def reset_password(request: ResetPassword, db: AsyncSession = Depends(get_db)):
+    result = await db.execute(select(User).where(User.reset_token == request.token))
+    user = result.scalars().first()
+    
+    if not user:
+        raise HTTPException(status_code=400, detail="Invalid or expired reset token")
+    
+    user.hashed_password = get_password_hash(request.new_password)
+    user.reset_token = None
+    await db.commit()
+    return {"message": "Password reset successful"}
+
+@app.post("/api/save-interaction")
+async def save_interaction(interaction: Interaction, db: AsyncSession = Depends(get_db), current_user: User = Depends(get_current_user)):
+    from models import ChatInteraction
+    
+    # Create new chat interaction record linked to user with role
+    new_interaction = ChatInteraction(
+        case_id=interaction.caseId,
+        query=interaction.query,
+        response=interaction.response,
+        role=interaction.role,
+        user_id=current_user.id
+    )
+    
+    db.add(new_interaction)
+    await db.commit()
+    await db.refresh(new_interaction)
+    
+    print(f"Saved interaction for user {current_user.username}: ID={new_interaction.id}, CaseID={interaction.caseId}")
+    return {"status": "success", "message": "Interaction saved", "id": new_interaction.id}
+
+@app.get("/api/interactions")
+async def get_interactions(role: Optional[str] = None, db: AsyncSession = Depends(get_db), current_user: User = Depends(get_current_user)):
+    from models import ChatInteraction
+    from sqlalchemy import func
+    
+    # Build base where clause
+    where_clause = ChatInteraction.user_id == current_user.id
+    if role:
+        where_clause = (ChatInteraction.user_id == current_user.id) & (ChatInteraction.role == role)
+    
+    # Subquery to find the latest interaction per case_id (filtered by role if specified)
+    subquery = (
+        select(
+            ChatInteraction.case_id,
+            func.max(ChatInteraction.created_at).label("max_created")
+        )
+        .where(where_clause)
+        .group_by(ChatInteraction.case_id)
+        .subquery()
+    )
+    
+    # Join to get query detail for the latest message in each case
+    result = await db.execute(
+        select(ChatInteraction)
+        .join(subquery, (ChatInteraction.case_id == subquery.c.case_id) & (ChatInteraction.created_at == subquery.c.max_created))
+        .order_by(ChatInteraction.created_at.desc())
+        .limit(20)
+    )
+    interactions = result.scalars().all()
+    return [{"id": i.id, "case_id": i.case_id, "query": i.query, "created_at": i.created_at} for i in interactions]
+
+@app.get("/api/interactions/{case_id}")
+async def get_conversation_thread(case_id: str, role: Optional[str] = None, db: AsyncSession = Depends(get_db), current_user: User = Depends(get_current_user)):
+    from models import ChatInteraction
+    
+    # Build where clause with optional role filtering
+    where_clause = (ChatInteraction.user_id == current_user.id) & (ChatInteraction.case_id == case_id)
+    if role:
+        where_clause = where_clause & (ChatInteraction.role == role)
+    
+    result = await db.execute(
+        select(ChatInteraction)
+        .where(where_clause)
+        .order_by(ChatInteraction.created_at.asc())
+    )
+    interactions = result.scalars().all()
+    if not interactions:
+        raise HTTPException(status_code=404, detail="Conversation not found")
+        
+    return [{"query": i.query, "response": i.response, "created_at": i.created_at} for i in interactions]
+
+@app.delete("/api/interactions/{case_id}")
+async def delete_conversation(case_id: str, db: AsyncSession = Depends(get_db), current_user: User = Depends(get_current_user)):
+    from models import ChatInteraction
+    from sqlalchemy import delete as sqlalchemy_delete
+    
+    await db.execute(
+        sqlalchemy_delete(ChatInteraction)
+        .where((ChatInteraction.user_id == current_user.id) & (ChatInteraction.case_id == case_id))
+    )
+    await db.commit()
+    return {"status": "success", "message": "Conversation deleted"}
+
+@app.get("/api/user-status")
+async def get_user_status(current_user: User = Depends(get_current_user)):
+    return {
+        "username": current_user.username,
+        "role": current_user.role,
+        "question_count": current_user.question_count,
+        "limit": 2 if current_user.role != "Admin" else None,
+        "is_admin": current_user.role == "Admin"
+    }
+
+# Frontend Routes for Auth
+@app.get("/login", response_class=HTMLResponse)
+async def login_page(request: Request):
+    return templates.TemplateResponse("login.html", {"request": request})
+
+@app.get("/register", response_class=HTMLResponse)
+async def register_page(request: Request):
+    return templates.TemplateResponse("register.html", {"request": request})
+
+@app.get("/forgot-password", response_class=HTMLResponse)
+async def forgot_password_page(request: Request):
+    return templates.TemplateResponse("forgot_password.html", {"request": request})
+
+@app.get("/reset-password", response_class=HTMLResponse)
+async def reset_password_page(request: Request):
+    return templates.TemplateResponse("reset_password.html", {"request": request})
+
+# Home and Role Selection
+@app.get("/", response_class=HTMLResponse)
+async def role_selection(request: Request):
+    return templates.TemplateResponse("roleselection.html", {"request": request})
+
+@app.get("/role", response_class=HTMLResponse)
+async def roleselection_page(request: Request):
+    return templates.TemplateResponse("roleselection.html", {"request": request})
+
+# Chatbot Pages
+@app.get("/judgechatbot.html", response_class=HTMLResponse)
+async def judge_chatbot(request: Request, user: User = Depends(role_required("Judge"))):
+    return templates.TemplateResponse("Judgechatbot.html", {"request": request})
+
+@app.get("/judgedashboard.html", response_class=HTMLResponse)
+async def judge_dashboard(request: Request, user: User = Depends(role_required("Judge"))):
+    return templates.TemplateResponse("judgedashboard.html", {"request": request})
+
+@app.get("/viewall.html", response_class=HTMLResponse)
+async def view_all(request: Request, user: User = Depends(role_required("Judge"))):
+    return templates.TemplateResponse("viewall.html", {"request": request})
+
+@app.get("/judgecalender.html", response_class=HTMLResponse)
+async def judge_calender(request: Request, user: User = Depends(role_required("Judge"))):
+    return templates.TemplateResponse("judgecalender.html", {"request": request})
+
+@app.get("/advocatedashboard.html", response_class=HTMLResponse)
+async def advocate_dashboard(request: Request, user: User = Depends(role_required("Advocate/Lawyer"))):
+    return templates.TemplateResponse("advocatedashboard.html", {"request": request})
+
+@app.get("/advocateresources.html", response_class=HTMLResponse)
+async def advocate_resources(request: Request, user: User = Depends(role_required("Advocate/Lawyer"))):
+    return templates.TemplateResponse("advocateresources.html", {"request": request})
+
+# ========== Other Role Pages ==========
+@app.get("/woman.html", response_class=HTMLResponse)
+async def woman_page(request: Request, user: User = Depends(role_required("Woman"))):
+    return templates.TemplateResponse("woman.html", {"request": request})
+
+@app.get("/citizen.html", response_class=HTMLResponse)
+async def citizen_page(request: Request, user: User = Depends(role_required("Citizen"))):
+    return templates.TemplateResponse("citizen.html", {"request": request})
+
+@app.get("/minor.html", response_class=HTMLResponse)
+async def minor_page(request: Request, user: User = Depends(role_required("Minor"))):
+    return templates.TemplateResponse("minor.html", {"request": request})
+
+# ========== Chatbot Pages ==========
+@app.get("/studentchatbot.html", response_class=HTMLResponse)
+async def student_page(request: Request, user: User = Depends(role_required("Student"))):
+    return templates.TemplateResponse("studentchatbot.html", {"request": request})
+
+@app.get("/advocatechatbot.html", response_class=HTMLResponse)
+async def advocatechatbot_page(request: Request):
+    return templates.TemplateResponse("advocatechatbot.html", {"request": request})
+
+@app.get("/womanchatbot.html", response_class=HTMLResponse)
+async def womanchatbot_page(request: Request):
+    return templates.TemplateResponse("womanchatbot.html", {"request": request})
+
+
+
+@app.get("/safetytips.html", response_class=HTMLResponse)
+async def safetytips_page(request: Request):
+    return templates.TemplateResponse("safetytips.html", {"request": request})
+
+@app.get("/resources.html", response_class=HTMLResponse)
+async def resources_page(request: Request):
+    return templates.TemplateResponse("resources.html", {"request": request})
+
+@app.get("/legalrights.html", response_class=HTMLResponse)
+async def legalrights_page(request: Request):
+    return templates.TemplateResponse("legalrights.html", {"request": request})
+
+@app.get("/FIR.html", response_class=HTMLResponse)
+async def fir_page(request: Request):
+    return templates.TemplateResponse("FIR.html", {"request": request})
+
+@app.get("/studentdashboard.html", response_class=HTMLResponse)
+async def student_page(request: Request):
+    return templates.TemplateResponse("studentdashboard.html", {"request": request})
+
+# WebSocket for Chatbot
+async def stream_text_conversational(websocket: WebSocket, query: str, role: str = "General"):
+    chat_limit = 10
+    temp_chat = {"user": "" ,"system":""}
+    temp_chat["user"] = query
+    # print(f"DEBUG: stream_text_conversational executing with role={role}")
+    model_response = ""
+    try:
+        if role == "Citizen":
+            completion = RAG(query, chat_history, role=role) 
+        else:
+            completion = RAG(query, chat_history, role=role)
+        for chunk in completion:
+            if chunk.choices[0].delta.content is not None:
+                await websocket.send_text(chunk.choices[0].delta.content)
+                await asyncio.sleep(0.01)
+                model_response += chunk.choices[0].delta.content
+        
+        # Signal completion to frontend
+        await websocket.send_text("[DONE]")
+        
+        # print(model_response)
+        temp_chat['system']=model_response
+        chat_history.append(temp_chat)
+        if len(chat_history)>chat_limit:
+            chat_history.pop(0)
+    except Exception as e:
+        error_message = f"Error: {str(e)}"
+        print(f"Chatbot error: {error_message}")
+        await websocket.send_text(f"\n\n⚠️ {error_message}\n\nPlease check your API key configuration.")
+        raise
+  
+@app.websocket("/conversational_chat")
+async def conversational_chat(websocket: WebSocket, role: Optional[str] = None):
+    await websocket.accept()
+    
+    # --- STRICT ROLE ENFORCEMENT ---
+    # 1. Get role from Token/Cookie (Source of Truth)
+    token = websocket.cookies.get("access_token")
+    token_role = "General"
+    user_id = None
+    question_count = 0
+    
+    if token:
+        try:
+            payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+            username = payload.get("sub")
+            if username:
+                async for db in get_db():
+                    result = await db.execute(select(User).where(User.username == username))
+                    user_obj = result.scalars().first()
+                    if user_obj:
+                        token_role = user_obj.role
+                        user_id = user_obj.id
+                        question_count = user_obj.question_count
+                    break
+        except JWTError:
+            pass
+
+    if user_id is None:
+        await websocket.send_text("\n\n⚠️ Authentication Required. Please sign in to use the chatbot.")
+        await websocket.close()
+        return
+    
+    # 2. Apply Logic based on Source of Truth
+    if token_role == "Admin":
+        if not role:
+            role = "Admin"
+    else:
+        role = token_role
+        
+    while True:
+        try:
+            query = await websocket.receive_text()
+            
+            # --- USAGE LIMIT CHECK ---
+            if token_role != "Admin" and question_count >= 2:
+                limit_message = (
+                    "### Free usage limit reached\n\n"
+                    "You’ve reached the free usage limit (2 questions).\n"
+                    "Further access is restricted.\n\n"
+                    "Please contact the administrator for extended access:\n"
+                    "LinkedIn: [https://www.linkedin.com/in/vishwanath77](https://www.linkedin.com/in/vishwanath77)"
+                )
+                await websocket.send_text(limit_message)
+                continue
+
+            print(f"Query ({role}): {query}")
+            await stream_text_conversational(websocket, query, role=role)
+            
+            # --- INCREMENT USAGE ---
+            if token_role != "Admin":
+                async for db in get_db():
+                    result = await db.execute(select(User).where(User.id == user_id))
+                    user_to_update = result.scalars().first()
+                    if user_to_update:
+                        user_to_update.question_count += 1
+                        question_count = user_to_update.question_count # Keep local sync
+                        await db.commit()
+                    break
+                    
+        except WebSocketDisconnect:
+            chat_history.clear()
+            break
+        except Exception as e:
+            print(f"WebSocket error: {e}")
+            try:
+                await websocket.send_text(f"\n\n❌ Connection error: {str(e)}\n\nPlease try again or contact support.")
+            except:
+                pass
+            break
+
+
+# Run the application
+if __name__ == "__main__":
+    print("Starting Law Bot Server...")
+    port = int(os.getenv("PORT", 8000))
+    uvicorn.run(app, host="0.0.0.0", port=port)

src/apps/auth.py

@@ -0,0 +1,42 @@
+from datetime import datetime, timedelta
+from typing import Optional
+import bcrypt
+
+# Monkeypatch bcrypt for passlib compatibility if needed
+if not hasattr(bcrypt, "__about__"):
+    bcrypt.__about__ = type('About', (object,), {'__version__': bcrypt.__version__})
+
+from jose import JWTError, jwt
+from passlib.context import CryptContext
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+SECRET_KEY = os.getenv("SECRET_KEY", "your_secret_key")
+ALGORITHM = os.getenv("ALGORITHM", "HS256")
+ACCESS_TOKEN_EXPIRE_MINUTES = int(os.getenv("ACCESS_TOKEN_EXPIRE_MINUTES", 30))
+
+_pwd_context = None
+
+def get_pwd_context():
+    global _pwd_context
+    if _pwd_context is None:
+        _pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+    return _pwd_context
+
+def verify_password(plain_password, hashed_password):
+    return get_pwd_context().verify(plain_password, hashed_password)
+
+def get_password_hash(password):
+    return get_pwd_context().hash(password)
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.utcnow() + expires_delta
+    else:
+        expire = datetime.utcnow() + timedelta(minutes=15)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt

src/apps/database.py

@@ -0,0 +1,40 @@
+from sqlalchemy.ext.asyncio import create_async_engine, AsyncSession
+from sqlalchemy.orm import sessionmaker, declarative_base
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# Support both DATABASE_URL (Supabase/production) and individual env vars (local dev)
+DATABASE_URL = os.getenv("DATABASE_URL")
+
+if DATABASE_URL:
+    # Use DATABASE_URL if provided (Supabase/Vercel)
+    # Convert postgres:// to postgresql+asyncpg:// if needed
+    if DATABASE_URL.startswith("postgres://"):
+        DATABASE_URL = DATABASE_URL.replace("postgres://", "postgresql+asyncpg://", 1)
+    elif DATABASE_URL.startswith("postgresql://"):
+        DATABASE_URL = DATABASE_URL.replace("postgresql://", "postgresql+asyncpg://", 1)
+else:
+    # Fall back to individual environment variables (local development)
+    DB_USER = os.getenv("DB_USER", "postgres")
+    DB_PASSWORD = os.getenv("DB_PASSWORD", "password")
+    DB_HOST = os.getenv("DB_HOST", "localhost")
+    DB_PORT = os.getenv("DB_PORT", "5432")
+    DB_NAME = os.getenv("DB_NAME", "lawbot_db")
+    DATABASE_URL = f"postgresql+asyncpg://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}"
+
+
+engine = create_async_engine(DATABASE_URL, echo=True)
+
+AsyncSessionLocal = sessionmaker(
+    bind=engine,
+    class_=AsyncSession,
+    expire_on_commit=False,
+)
+
+Base = declarative_base()
+
+async def get_db():
+    async with AsyncSessionLocal() as session:
+        yield session

src/apps/email_utils.py

@@ -0,0 +1,65 @@
+from fastapi_mail import FastMail, MessageSchema, ConnectionConfig, MessageType
+from pydantic import EmailStr
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+BASE_URL = os.getenv("BASE_URL", "http://localhost:8000")
+
+# Support both SMTP_* and MAIL_* environment variable naming conventions
+MAIL_USERNAME = os.getenv("MAIL_USERNAME") or os.getenv("SMTP_USERNAME", "")
+MAIL_PASSWORD = os.getenv("MAIL_PASSWORD") or os.getenv("SMTP_PASSWORD", "")
+MAIL_FROM = os.getenv("MAIL_FROM") or os.getenv("FROM_EMAIL", "")
+MAIL_PORT = int(os.getenv("MAIL_PORT") or os.getenv("SMTP_PORT", "587"))
+MAIL_SERVER = os.getenv("MAIL_SERVER") or os.getenv("SMTP_SERVER", "smtp.gmail.com")
+
+conf = ConnectionConfig(
+    MAIL_USERNAME=MAIL_USERNAME,
+    MAIL_PASSWORD=MAIL_PASSWORD,
+    MAIL_FROM=MAIL_FROM,
+    MAIL_PORT=MAIL_PORT,
+    MAIL_SERVER=MAIL_SERVER,
+    MAIL_STARTTLS=True,
+    MAIL_SSL_TLS=False,
+    USE_CREDENTIALS=True,
+    VALIDATE_CERTS=True
+)
+
+async def send_reset_email(email: EmailStr, token: str):
+    # Validate email configuration before attempting to send
+    if not MAIL_USERNAME or not MAIL_PASSWORD or not MAIL_FROM:
+        missing_vars = []
+        if not MAIL_USERNAME:
+            missing_vars.append("MAIL_USERNAME or SMTP_USERNAME")
+        if not MAIL_PASSWORD:
+            missing_vars.append("MAIL_PASSWORD or SMTP_PASSWORD")
+        if not MAIL_FROM:
+            missing_vars.append("MAIL_FROM or FROM_EMAIL")
+        raise ValueError(f"Email configuration missing: {', '.join(missing_vars)}. Please set these environment variables.")
+    
+    reset_link = f"{BASE_URL}/reset-password?token={token}"
+    html_body = f"""
+    <html>
+        <body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4;">
+            <div style="max-width: 600px; margin: 0 auto; background-color: white; padding: 30px; border-radius: 10px;">
+                <h2 style="color: #9b87f5;">Password Reset Request</h2>
+                <p>Hello,</p>
+                <p>We received a request to reset your password for your Law Bot account.</p>
+                <p>Click the button below to reset your password:</p>
+                <a href="{reset_link}" style="display: inline-block; padding: 12px 24px; background-color: #9b87f5; color: white; text-decoration: none; border-radius: 6px; margin: 20px 0;">Reset Password</a>
+                <p>Or copy and paste this link into your browser:</p>
+                <p style="color: #666; word-break: break-all;">{reset_link}</p>
+                <p style="color: #999; font-size: 12px; margin-top: 30px;">If you didn't request this, you can safely ignore this email.</p>
+            </div>
+        </body>
+    </html>
+    """
+    message = MessageSchema(
+        subject="Password Reset Request - Law Bot",
+        recipients=[email],
+        body=html_body,
+        subtype=MessageType.html
+    )
+    fm = FastMail(conf)
+    await fm.send_message(message)

src/apps/models.py

@@ -0,0 +1,32 @@
+from sqlalchemy import Column, Integer, String, Text, DateTime, ForeignKey
+from sqlalchemy.orm import relationship
+from datetime import datetime
+from database import Base
+
+class User(Base):
+    __tablename__ = "users"
+
+    id = Column(Integer, primary_key=True, index=True)
+    username = Column(String, unique=True, index=True)
+    email = Column(String, unique=True, index=True)
+    hashed_password = Column(String)
+    role = Column(String)
+    reset_token = Column(String, nullable=True)
+    question_count = Column(Integer, default=0)
+    
+    # Relationship to chat interactions
+    interactions = relationship("ChatInteraction", back_populates="user")
+
+class ChatInteraction(Base):
+    __tablename__ = "chat_interactions"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"), nullable=True)
+    case_id = Column(String, nullable=True)
+    role = Column(String, index=True, nullable=False)  # Role context for this interaction
+    query = Column(Text)
+    response = Column(Text)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    
+    # Relationship to user
+    user = relationship("User", back_populates="interactions")

src/apps/static/2023050195.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4699ff98cece2142f96ce0dba62539e8219e658ba6b595efcb666caf2fcea26d
+size 2078473

src/apps/static/LegalTheory_CaseLawNotes.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c80a22cffea38344f6b40125a5da25fc1ec66a73979424db9cce082b0807f2b0
+size 777565

src/apps/static/MootCourt_Advocacy.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2dfae09ecdc3fc4d2ef2b6a6402db53289a50e028db4749e13920a7451722606
+size 115883

src/apps/static/css/entrance.css

@@ -0,0 +1,125 @@
+/* Entrance Animations */
+.animate-entrance {
+    opacity: 0;
+    animation-fill-mode: forwards;
+}
+
+@keyframes entrance-slide-in-left {
+    from {
+        transform: translateX(-40px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes entrance-slide-in-down {
+    from {
+        transform: translateY(-40px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes entrance-slide-in-up {
+    from {
+        transform: translateY(40px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.entrance-sidebar {
+    animation: entrance-slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.entrance-header {
+    animation: entrance-slide-in-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
+}
+
+.entrance-card {
+    animation: entrance-slide-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.entrance-chatbot {
+    animation: entrance-slide-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
+}
+
+/* --- PROFESSIONAL LOGOUT: Terminal Shutdown --- */
+
+@keyframes component-disassemble {
+    from {
+        transform: scale(1);
+        filter: blur(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: scale(0.95);
+        filter: blur(10px);
+        opacity: 0;
+    }
+}
+
+.exit-disassemble {
+    animation: component-disassemble 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
+}
+
+
+
+/* Logout Portal Overlay */
+.logout-portal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(5, 5, 10, 0.98);
+    backdrop-filter: blur(25px);
+    z-index: 99999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: white;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+}
+
+.logout-portal-overlay.show {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.logout-portal-message {
+    font-size: 1.2rem;
+    font-weight: 500;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    margin-bottom: 20px;
+    animation: text-flicker 2s infinite;
+}
+
+@keyframes text-flicker {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.7;
+    }
+}

src/apps/static/css/modern-chat.css

@@ -0,0 +1,609 @@
+/* Modern Chat Enhancements */
+:root {
+    --judge-color: #D4AF37;
+    /* Gold */
+    --advocate-color: #2c3e50;
+    /* Navy */
+    --woman-color: #ff7eb3;
+    /* Soft Pink */
+    --minor-color: #4ade80;
+    /* Fresh Green */
+    --student-color: #3498db;
+    /* Academic Blue */
+    --primary-purple: #9b87f5;
+    --light-purple: #D6BCFA;
+    --neutral-gray: #8E9196;
+    --light-gray: #C8C8C9;
+    --off-white: #eee;
+
+    /* Dark Theme (Default) */
+    --bg-main: #1A1F2C;
+    --sidebar-bg: rgba(0, 0, 0, 0.4);
+    --sidebar-border: rgba(255, 255, 255, 0.05);
+    --text-main: #eee;
+    --text-dim: rgba(255, 255, 255, 0.6);
+    --input-bg: #1A1F2C;
+    --item-bg: rgba(255, 255, 255, 0.02);
+    --footer-bg: #0d0d0d;
+}
+
+body.light {
+    --bg-main: #ffffff;
+    --sidebar-bg: #f8f9fa;
+    --sidebar-border: #e9ecef;
+    --text-main: #1A1F2C;
+    --text-dim: #495057;
+    --input-bg: #ffffff;
+    --item-bg: #ffffff;
+    --footer-bg: #f1f3f5;
+}
+
+body {
+    background-color: var(--bg-main) !important;
+    color: var(--text-main) !important;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+/* Role Specific Body Themes */
+body.role-judge {
+    --role-primary: var(--judge-color);
+}
+
+body.role-advocate {
+    --role-primary: var(--advocate-color);
+}
+
+body.role-woman {
+    --role-primary: var(--woman-color);
+}
+
+body.role-minor {
+    --role-primary: var(--minor-color);
+}
+
+body.role-student {
+    --role-primary: var(--student-color);
+}
+
+/* Evidence Box (Citations) */
+.evidence-box {
+    margin-top: 1rem;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-left: 3px solid var(--role-primary, var(--primary-purple));
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+.evidence-title {
+    font-weight: 600;
+    color: var(--role-primary, var(--primary-purple));
+    margin-bottom: 0.4rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.evidence-item {
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 0.2rem;
+}
+
+/* Loading Animation: Gavel or Pulse */
+.typing-indicator {
+    display: none;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 15px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    width: fit-content;
+}
+
+.gavel-icon {
+    width: 20px;
+    height: 20px;
+    animation: hammer 0.8s infinite ease-in-out alternate;
+}
+
+@keyframes hammer {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(-45deg);
+    }
+}
+
+/* Legal Disclaimer */
+.legal-footer {
+    text-align: center;
+    padding: 1rem;
+    font-size: 0.7rem;
+    color: var(--neutral-gray);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--bg-dark);
+}
+
+
+/* Sidebar Layout */
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 260px;
+    background: var(--sidebar-bg);
+    border-right: 1px solid var(--sidebar-border);
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    backdrop-filter: blur(15px);
+}
+
+.sidebar-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--neutral-gray);
+    margin-bottom: 1.5rem;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    opacity: 0.6;
+}
+
+.history-list {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+    padding-right: 0.5rem;
+}
+
+.history-list::-webkit-scrollbar {
+    width: 4px;
+}
+
+.history-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+.history-item {
+    padding: 0.85rem;
+    border-radius: 8px;
+    background: var(--item-bg);
+    margin-bottom: 0.75rem;
+    font-size: 0.85rem;
+    color: var(--text-dim);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid var(--sidebar-border);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.history-item svg {
+    flex-shrink: 0;
+    opacity: 0.5;
+}
+
+.history-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: var(--role-primary, var(--primary-purple));
+    color: white;
+}
+
+.history-item:hover svg {
+    opacity: 1;
+    color: var(--role-primary, var(--primary-purple));
+}
+
+.sidebar-footer {
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    margin-top: auto;
+}
+
+/* Fix for Back to Dashboard */
+.sidebar .role-selection-link {
+    position: static !important;
+    display: flex !important;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--role-primary, var(--primary-purple)) !important;
+    text-decoration: none;
+    transition: transform 0.2s ease;
+}
+
+.sidebar .role-selection-link:hover {
+    transform: translateX(5px);
+}
+
+/* Adjust main container to give room for sidebar */
+.container {
+    margin-left: 260px !important;
+    max-width: calc(100% - 260px) !important;
+}
+
+/* AI Message Styling Enhancements */
+.ai-message {
+    border-left: 4px solid var(--role-primary, var(--primary-purple)) !important;
+}
+
+/* --- SIDEBAR ENHANCEMENTS (Functional Only) --- */
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.new-chat-btn {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    border: 1px solid var(--sidebar-border);
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-main);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.new-chat-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--role-primary, var(--primary-purple));
+}
+
+.collapse-toggle {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+}
+
+.collapse-toggle:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: white;
+}
+
+/* Sidebar Toggle (Floating button when collapsed) */
+.sidebar-floating-toggle {
+    position: fixed;
+    left: 15px;
+    top: 15px;
+    z-index: 1100;
+    background: #1e2229;
+    /* Deep dark to match theme */
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    color: white;
+    cursor: pointer;
+    display: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+body.sidebar-collapsed .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+}
+
+body.sidebar-collapsed .container {
+    margin-left: 0 !important;
+    max-width: 100% !important;
+    padding-left: 60px;
+    /* Space for the floating toggle */
+}
+
+body.sidebar-collapsed .sidebar-floating-toggle {
+    display: flex;
+}
+
+.sidebar {
+    transition: transform 0.3s ease;
+}
+
+/* Delete Icon per Chat Item */
+.history-item {
+    position: relative;
+    padding-right: 2.5rem;
+}
+
+.delete-chat-item {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.3);
+    padding: 4px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s, color 0.2s;
+}
+
+.history-item:hover .delete-chat-item {
+    opacity: 1;
+}
+
+.delete-chat-item:hover {
+    color: #ff4757;
+}
+
+/* Answer Perspective Section */
+.perspective-container {
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.perspective-option {
+    padding: 0.6rem 0.8rem;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.perspective-option:hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: white;
+}
+
+.perspective-option.active {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--role-primary, var(--primary-purple));
+    font-weight: 600;
+}
+
+/* Fixed/Sticky Footer Fix */
+.sidebar-footer {
+    position: sticky;
+    bottom: 0px;
+    background: var(--footer-bg);
+    padding: 1.5rem 0;
+    margin-top: auto;
+    z-index: 10;
+}
+
+/* --- MISSING LAYOUT STYLES --- */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.chat-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin-bottom: 2rem;
+    padding: 1rem;
+}
+
+.input-container {
+    position: fixed;
+    bottom: 0;
+    left: 260px;
+    /* Offset for sidebar */
+    right: 0;
+    padding: 1rem;
+    background-color: var(--input-bg);
+    border-top: 1px solid var(--sidebar-border);
+    z-index: 900;
+}
+
+body.sidebar-collapsed .input-container {
+    left: 0;
+}
+
+.input-wrapper {
+    max-width: 800px;
+    margin: 0 auto;
+    position: relative;
+}
+
+#messageInput {
+    width: 100%;
+    padding: 1rem;
+    padding-right: 3rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.3s;
+    background-color: transparent;
+    color: inherit;
+}
+
+#messageInput:focus {
+    border-color: var(--role-primary, var(--primary-purple));
+}
+
+#sendButton {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    color: var(--role-primary, var(--primary-purple));
+    opacity: 0.8;
+    transition: opacity 0.3s;
+}
+
+#sendButton:hover {
+    opacity: 1;
+}
+
+.message {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    border-radius: 8px;
+    animation: fadeIn 0.3s ease-in;
+}
+
+.user-message {
+    background-color: rgba(155, 135, 245, 0.1);
+}
+
+.ai-message {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(200, 200, 201, 0.2);
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.user-icon,
+.ai-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+}
+
+.user-icon {
+    background-color: var(--primary-purple);
+    color: white;
+}
+
+.ai-icon {
+    background-color: var(--light-purple);
+    color: var(--dark-purple);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* --- USER PROFILE DROPDOWN --- */
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.user-profile-menu {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.profile-icon-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary-purple), var(--light-purple));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.2rem;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.2s;
+}
+
+.profile-icon-btn:hover {
+    transform: scale(1.05);
+    border-color: var(--primary-purple);
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 120%;
+    right: 0;
+    width: 200px;
+    background: var(--bg-main);
+    border: 1px solid var(--sidebar-border);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    display: none;
+    z-index: 2000;
+    flex-direction: column;
+}
+
+.dropdown-menu.show {
+    display: flex;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.dropdown-item {
+    padding: 0.8rem 1rem;
+    font-size: 0.9rem;
+    color: var(--text-main);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    transition: background 0.2s;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.dropdown-item:last-child {
+    border-bottom: none;
+}
+
+.dropdown-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.dropdown-item.role-info {
+    font-weight: 600;
+    color: var(--text-dim);
+    background: rgba(0, 0, 0, 0.2);
+    cursor: default;
+}
+
+.logout-action {
+    color: #ff4757;
+}
+
+.logout-action:hover {
+    background: rgba(255, 71, 87, 0.1);
+}

src/apps/static/css/styles.css

@@ -0,0 +1,87 @@
+ /* Import Google Font */
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
+
+ /* Reset and base styles */
+ body, html {
+     margin: 0;
+     padding: 0;
+     height: 100%;
+     font-family: 'Roboto', sans-serif;
+     background: url('/images/lawbackground.jpg') no-repeat center center fixed;
+     background-size: cover;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+ }
+
+ /* Overlay to darken the background image */
+ .overlay {
+     position: fixed;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     background: rgba(0, 0, 0, 0.6);
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     animation: fadeIn 1s ease-out;
+ }
+
+ /* Modal container */
+ .role-selection {
+     background: #fff;
+     padding: 40px;
+     border-radius: 12px;
+     text-align: center;
+     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+     transform: translateY(-20px);
+     animation: slideUp 0.5s ease-out forwards;
+ }
+
+ /* Heading styles */
+ .role-selection h2 {
+     margin-bottom: 10px;
+     font-weight: 500;
+     color: #333;
+ }
+
+ .role-selection p {
+     margin-bottom: 20px;
+     color: #666;
+ }
+
+ /* Roles container */
+ .roles {
+     display: flex;
+     flex-direction: column;
+     gap: 15px;
+ }
+
+ /* Role buttons */
+ .role {
+     background: #007bff;
+     color: #fff;
+     border: none;
+     padding: 12px 20px;
+     border-radius: 6px;
+     cursor: pointer;
+     font-size: 16px;
+     transition: background 0.3s, transform 0.2s;
+ }
+
+ .role:hover {
+     background: #0056b3;
+     transform: translateY(-3px);
+ }
+
+ /* Keyframe animations */
+ @keyframes fadeIn {
+     from { opacity: 0; }
+     to { opacity: 1; }
+ }
+
+ @keyframes slideUp {
+     from { transform: translateY(20px); opacity: 0; }
+     to { transform: translateY(0); opacity: 1; }
+ }

src/apps/static/js/entrance.js

@@ -0,0 +1,132 @@
+/**
+ * Dashboard Entrance Controller
+ * Handles the "Chime" sound, staggered arrival animations,
+ * and the "Security Wipe" high-tech logout transition.
+ */
+
+class DashboardEntrance {
+    constructor() {
+        this.audioCtx = null;
+        this.initialized = false;
+    }
+
+    // Arrival Chime (High Crystal)
+    playChime() {
+        try {
+            if (!this.audioCtx) {
+                this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            }
+            if (this.audioCtx.state === 'suspended') this.audioCtx.resume();
+            const now = this.audioCtx.currentTime;
+
+            const osc1 = this.audioCtx.createOscillator();
+            const gain1 = this.audioCtx.createGain();
+            osc1.type = 'sine';
+            osc1.frequency.setValueAtTime(1320, now);
+            osc1.frequency.exponentialRampToValueAtTime(1567.98, now + 0.1);
+            gain1.gain.setValueAtTime(0, now);
+            gain1.gain.linearRampToValueAtTime(0.08, now + 0.05);
+            gain1.gain.exponentialRampToValueAtTime(0.0001, now + 0.5);
+            osc1.connect(gain1); gain1.connect(this.audioCtx.destination);
+            osc1.start(now); osc1.stop(now + 0.6);
+
+            const osc2 = this.audioCtx.createOscillator();
+            const gain2 = this.audioCtx.createGain();
+            osc2.type = 'sine';
+            osc2.frequency.setValueAtTime(659.25, now);
+            gain2.gain.setValueAtTime(0, now);
+            gain2.gain.linearRampToValueAtTime(0.04, now + 0.1);
+            gain2.gain.exponentialRampToValueAtTime(0.0001, now + 0.8);
+            osc2.connect(gain2); gain2.connect(this.audioCtx.destination);
+            osc2.start(now); osc2.stop(now + 0.8);
+        } catch (e) { }
+    }
+
+    // Logout "De-Init" Sound (Descending)
+    playLogoutSound() {
+        try {
+            if (!this.audioCtx) this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            if (this.audioCtx.state === 'suspended') this.audioCtx.resume();
+            const now = this.audioCtx.currentTime;
+
+            const osc = this.audioCtx.createOscillator();
+            const gain = this.audioCtx.createGain();
+            osc.type = 'sine';
+            osc.frequency.setValueAtTime(880, now); // A5
+            osc.frequency.exponentialRampToValueAtTime(220, now + 0.6); // A3
+            gain.gain.setValueAtTime(0.1, now);
+            gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.6);
+            osc.connect(gain); gain.connect(this.audioCtx.destination);
+            osc.start(now); osc.stop(now + 0.6);
+        } catch (e) { }
+    }
+
+    init() {
+        if (this.initialized) return;
+        this.initialized = true;
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.triggerAnimations());
+        } else {
+            this.triggerAnimations();
+        }
+
+        const listener = () => { this.playChime(); window.removeEventListener('click', listener); };
+        window.addEventListener('click', listener);
+        setTimeout(() => this.playChime(), 100);
+    }
+
+    triggerAnimations() {
+        const sidebar = document.querySelector('.sidebar');
+        const header = document.querySelector('.header');
+        const cards = document.querySelectorAll('.card, .stat-card, .case-card, .feature-card, .case-item');
+        const chatbotBtn = document.querySelector('.chatbot-btn');
+
+        if (sidebar) sidebar.classList.add('animate-entrance', 'entrance-sidebar');
+        if (header) header.classList.add('animate-entrance', 'entrance-header');
+        if (chatbotBtn) chatbotBtn.classList.add('animate-entrance', 'entrance-chatbot');
+
+        cards.forEach((card, index) => {
+            card.classList.add('animate-entrance', 'entrance-card');
+            card.style.animationDelay = `${0.3 + (index * 0.08)}s`;
+        });
+    }
+
+    /**
+     * Professional Security Wipe Logout
+     */
+    async logout() {
+        // 1. Create overlay and wipe line if they don't exist
+        let overlay = document.querySelector('.logout-portal-overlay');
+        if (!overlay) {
+            overlay = document.createElement('div');
+            overlay.className = 'logout-portal-overlay';
+            overlay.innerHTML = `
+                <div class="logout-portal-message">Session Security: ACTIVE</div>
+                <div style="font-family: monospace; opacity: 0.5;">DE-INITIALIZING DATA PACKETS...</div>
+            `;
+            document.body.appendChild(overlay);
+        }
+
+        // 2. Play Sound
+        this.playLogoutSound();
+
+        // 3. Disassemble components
+        const elements = document.querySelectorAll('.sidebar, .header, .main, .cards, .card, .stat-card, .case-card, .feature-card, .chatbot-btn, .container');
+        elements.forEach(el => el.classList.add('exit-disassemble'));
+
+        // 4. Trigger Overlay
+        setTimeout(() => {
+            overlay.classList.add('show');
+        }, 100);
+
+        // 5. Cleanup and Redirect
+        setTimeout(() => {
+            localStorage.removeItem('token');
+            window.location.href = '/role';
+        }, 1200);
+    }
+}
+
+window.dashboardEntrance = new DashboardEntrance();
+window.dashboardEntrance.init();

src/apps/static/js/roleselection.js

@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const rolePages = {
+        'Judge': 'judgedashboard.html',
+        'Advocate/Lawyer': 'advocatedashboard.html',
+        'Woman': 'woman.html',
+        'Citizen': 'citizen.html',
+        'Student': 'studentdashboard.html',
+        'Minor': 'minor.html'
+    };
+
+    function selectRole(role) {
+        if (!role || !rolePages[role]) {
+            console.error("❌ Invalid role selected:", role);
+            return;
+        }
+
+        console.log("✅ Role selected:", role);
+        // Redirect to login page with role parameter
+        window.location.href = `/login?role=${encodeURIComponent(role)}`;
+    }
+
+    document.querySelectorAll(".role").forEach(button => {
+        button.addEventListener("click", function () {
+            const role = this.getAttribute("data-role");
+            selectRole(role);
+        });
+    });
+
+    // Modified logout button (simple navigation)
+    document.getElementById("logoutBtn")?.addEventListener("click", function (e) {
+        e.preventDefault();
+        window.location.href = "/roleselection.html"; // Direct navigation back
+    });
+});

src/apps/static/legal writing.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:69e1691a2b6f8ef3cdc1793310c4a353544de60b82ca497d82a4b7bfd246183e
+size 53848545

src/apps/static/video.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e48220dd2284bffd5364162287dd3041fcaaf85cc7947a06f0708583dc1206b9
+size 3114915

src/apps/static/wipo_guide_ipc_2019.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa56e392f573553eefd4f0a7277190e0ff20b87949ce1c922fee802e15dc44ac
+size 360729

src/apps/templates/FIR.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>FIR Generator - Women's Safety</title>
+    <style>
+        /* Keep existing CSS styles */
+        .fir-container {
+            max-width: 800px;
+            margin: 2rem auto;
+            font-family: 'Arial', sans-serif;
+        }
+        .form-section {
+            background: #fff5f7;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+        label {
+            display: block;
+            margin: 10px 0 5px;
+            color: #c2185b;
+            font-weight: bold;
+        }
+        input, textarea, select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ff80ab;
+            border-radius: 4px;
+        }
+        .legal-warning {
+            color: #d32f2f;
+            border-left: 4px solid #d32f2f;
+            padding: 10px;
+            margin: 15px 0;
+        }
+        button {
+            background: #c2185b;
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        #firPreview {
+            white-space: pre-wrap;
+            font-family: 'Courier New', monospace;
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Keep existing HTML structure -->
+    <div class="fir-container">
+        <h1>Women's Safety FIR Generator</h1>
+        
+        <div class="form-section">
+            <h2>Complainant Details</h2>
+            <label>Full Name:</label>
+            <input type="text" id="complainantName" required>
+            
+            <label>Age:</label>
+            <input type="number" id="complainantAge" required>
+            
+            <label>Address:</label>
+            <textarea id="complainantAddress" required></textarea>
+        </div>
+
+        <div class="form-section">
+            <h2>Incident Details</h2>
+            <label>Date & Time of Incident:</label>
+            <input type="datetime-local" id="incidentTime" required>
+            
+            <label>Location:</label>
+            <input type="text" id="incidentLocation" required>
+            
+            <label>Description (Include exact words used):</label>
+            <textarea id="incidentDescription" rows="5" required></textarea>
+            
+            <label>Applicable Laws:</label>
+            <select id="applicableLaws" multiple>
+                <option value="IPC 354">IPC 354 (Outraging modesty)</option>
+                <option value="IPC 498A">IPC 498A (Dowry harassment)</option>
+                <option value="PWDVA 2005">PWDVA 2005 (Domestic Violence)</option>
+                <option value="IT Act 66E">IT Act 66E (Privacy violation)</option>
+            </select>
+        </div>
+
+        <div class="legal-warning">
+            ⚠️ Warning: False FIR filing is punishable under IPC 177 & 211
+        </div>
+
+        <button onclick="generateFIR()">Generate FIR Draft</button>
+        <button onclick="downloadDOCX()" style="display:none;" id="downloadBtn">
+            Download FIR (DOCX)
+        </button>
+
+        <div id="firPreview"></div>
+    </div>
+
+    <script src="https://unpkg.com/docxtemplater@latest/build/docxtemplater.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+    <script>
+        function generateFIR() {
+            // Existing generateFIR code
+            const data = {
+                name: document.getElementById('complainantName').value,
+                age: document.getElementById('complainantAge').value,
+                address: document.getElementById('complainantAddress').value,
+                datetime: document.getElementById('incidentTime').value,
+                location: document.getElementById('incidentLocation').value,
+                description: document.getElementById('incidentDescription').value,
+                laws: Array.from(document.getElementById('applicableLaws').selectedOptions)
+                          .map(option => option.value)
+            };
+
+            const firTemplate = `
+FIR No: ______________
+Police Station: ${/* Auto-fill using geolocation API */ ''}
+
+Date: ${new Date().toLocaleDateString('en-IN')}
+
+To,
+The Station House Officer
+${/* Dynamic PS name */ '____________________ Police Station'}
+
+Subject: FIR under ${data.laws.join(', ')} - Women's Safety Complaint
+
+I, ${data.name}, aged ${data.age} years, residing at:
+${data.address}
+
+solemnly declare that on ${new Date(data.datetime).toLocaleString('en-IN')} at 
+${data.location}, the following incident occurred:
+
+"${data.description}"
+
+The incident constitutes offenses under:
+${data.laws.map(law => `- ${law}`).join('\n')}
+
+I request that necessary action be taken under the relevant provisions of law.
+
+Declared this ${new Date().getDate()} day of ${new Date().toLocaleString('en-IN', {month: 'long'})} ${new Date().getFullYear()}.
+
+Signature: ____________________
+Name: ${data.name}
+Contact: ____________________
+            `;
+
+            document.getElementById('firPreview').textContent = firTemplate;
+            document.getElementById('downloadBtn').style.display = 'inline-block';
+        }
+
+        function downloadDOCX() {
+            const firContent = document.getElementById('firPreview').textContent;
+            
+            // Create Blob with FIR content
+            const blob = new Blob([firContent], { type: 'text/plain' });
+            
+            // Create temporary download link
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `FIR_${Date.now()}.txt`;
+            
+            // Trigger download
+            document.body.appendChild(link);
+            link.click();
+            
+            // Cleanup
+            document.body.removeChild(link);
+            URL.revokeObjectURL(link.href);
+
+            // Clear all data
+            document.getElementById('complainantName').value = '';
+            document.getElementById('complainantAge').value = '';
+            document.getElementById('complainantAddress').value = '';
+            document.getElementById('incidentTime').value = '';
+            document.getElementById('incidentLocation').value = '';
+            document.getElementById('incidentDescription').value = '';
+            document.getElementById('applicableLaws').selectedIndex = -1;
+            document.getElementById('firPreview').textContent = '';
+            document.getElementById('downloadBtn').style.display = 'none';
+
+            // Security confirmation
+            alert('FIR downloaded successfully. All data has been wiped from system.');
+        }
+
+
+    </script>
+</body>
+</html>

src/apps/templates/Judgechatbot.html

@@ -0,0 +1,875 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Law bot</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/modern-chat.css">
+    <style>
+        :root {
+            --primary-purple: #9b87f5;
+            --dark-purple: #1A1F2C;
+            --light-purple: #D6BCFA;
+            --neutral-gray: #8E9196;
+            --light-gray: #C8C8C9;
+            --off-white: #eee;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.dark {
+            color: var(--off-white);
+        }
+
+        body.light {
+            color: var(--dark-purple);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+
+        .app-title {
+            margin-left: 40px;
+            font-size: 2rem;
+            font-weight: 600;
+            background: linear-gradient(135deg, var(--primary-purple), var(--light-purple));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+
+        .theme-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            transition: opacity 0.3s;
+        }
+
+        .theme-toggle:hover {
+            opacity: 0.8;
+        }
+
+        .theme-toggle svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        .chat-container {
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-bottom: 2rem;
+            padding: 1rem;
+        }
+
+        .message {
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            border-radius: 8px;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .user-message {
+            background-color: rgba(155, 135, 245, 0.1);
+        }
+
+        .ai-message {
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(200, 200, 201, 0.2);
+        }
+
+        body.light .user-message {
+            background-color: var(--off-white);
+        }
+
+        body.light .ai-message {
+            background-color: #ffffff;
+            border: 1px solid var(--light-gray);
+        }
+
+        .message-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+
+        .sidebar-welcome {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(200, 200, 201, 0.15);
+            margin-bottom: 1.5rem;
+        }
+
+        .user-icon,
+        .ai-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin-right: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+
+        .user-icon {
+            background-color: var(--primary-purple);
+            color: white;
+        }
+
+        .ai-icon {
+            background-color: var(--light-purple);
+            color: var(--dark-purple);
+        }
+
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem;
+            background-color: var(--input-bg);
+            border-top: 1px solid var(--sidebar-border);
+        }
+
+        body.light .input-container {
+            background-color: #ffffff;
+            border-top: 1px solid var(--light-gray);
+        }
+
+        .input-wrapper {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        #messageInput {
+            width: 100%;
+            padding: 1rem;
+            padding-right: 3rem;
+            border: 1px solid rgba(200, 200, 201, 0.3);
+            border-radius: 8px;
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s;
+            background-color: transparent;
+            color: inherit;
+        }
+
+        body.light #messageInput {
+            border: 1px solid var(--light-gray);
+        }
+
+        #messageInput:focus {
+            border-color: var(--primary-purple);
+        }
+
+        #sendButton {
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            opacity: 0.8;
+            transition: opacity 0.3s;
+        }
+
+        #sendButton:hover {
+            opacity: 1;
+        }
+
+        .typing-indicator {
+            display: none;
+            color: #888;
+            font-style: italic;
+            margin-top: 10px;
+            padding: 8px 12px;
+            background-color: #f1f1f1;
+            border-radius: 12px;
+            max-width: fit-content;
+            margin-left: 10px;
+            font-size: 14px;
+            animation: pulse 1.2s infinite;
+        }
+
+        /* Optional: soft pulse animation for effect */
+        @keyframes pulse {
+            0% {
+                opacity: 0.4;
+            }
+
+            50% {
+                opacity: 1;
+            }
+
+            100% {
+                opacity: 0.4;
+            }
+        }
+
+        .welcome-title {
+            margin: 6rem 0 0.5rem 0;
+            text-align: center;
+            color: var(--neutral-gray);
+            padding: 1rem;
+            font-size: 1.24rem;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .welcome-subtitle {
+            line-height: 1.6;
+            font-size: 1.1rem;
+            color: var(--neutral-gray);
+            max-width: 900px;
+            margin: 0 auto;
+            font-weight: 800;
+
+
+        }
+
+        .sidebar-welcome {
+            margin-bottom: 2rem;
+            padding: 0 1rem;
+            border-bottom: none;
+        }
+
+        .role-selection-link {
+            display: inline-flex;
+            align-items: center;
+            gap: initial;
+            color: var(--light-purple);
+            text-decoration: none;
+            margin-top: auto;
+            padding: auto;
+            transition: opacity 0.3s ease;
+            position: absolute;
+            top: 550px;
+            left: 30px;
+
+        }
+
+        .role-selection-link:hover {
+            opacity: 0.8;
+        }
+
+        .role-selection-link svg {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+        }
+
+        /* Add this media query for mobile responsiveness */
+        @media (max-width: 480px) {
+            .welcome-message p {
+                font-size: 1rem;
+                padding: 0 1rem;
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .connection-status {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            display: none;
+        }
+
+        .connection-status.connected {
+            background-color: #4ade80;
+            color: white;
+        }
+
+        .connection-status.disconnected {
+            background-color: #ef4444;
+            color: white;
+        }
+
+        /* Styling for formatted text */
+        .message-content {
+            line-height: 1.5;
+        }
+
+        .message-content h1,
+        .message-content h2,
+        .message-content h3 {
+            margin: 1rem 0 0.5rem;
+            font-weight: 600;
+        }
+
+        .message-content h1 {
+            font-size: 1.5rem;
+        }
+
+        .message-content h2 {
+            font-size: 1.25rem;
+        }
+
+        .message-content h3 {
+            font-size: 1.1rem;
+        }
+
+        .message-content ul,
+        .message-content ol {
+            margin-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .message-content a {
+            color: var(--primary-purple);
+            text-decoration: none;
+        }
+
+        .message-content a:hover {
+            text-decoration: underline;
+        }
+
+        .usage-indicator {
+            padding: 4px 12px;
+            background: rgba(155, 135, 245, 0.1);
+            border: 1px solid rgba(155, 135, 245, 0.3);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            color: var(--primary-purple);
+            font-weight: 500;
+            display: none;
+            /* Hidden by default for Admins */
+        }
+    </style>
+</head>
+
+<button class="sidebar-floating-toggle" id="floatingToggle">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 12h18M3 6h18M3 18h18" />
+    </svg>
+</button>
+
+<aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+        <button class="new-chat-btn" id="newChatBtn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 5v14M5 12h14" />
+            </svg>
+            New Chat
+        </button>
+        <button class="collapse-toggle" id="collapseSidebar" title="Collapse sidebar">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M15 18l-6-6 6-6" />
+            </svg>
+        </button>
+    </div>
+    <div class="sidebar-title">Recent Deliberations</div>
+    <div class="history-list" id="historyList">
+        <!-- Recent prompts will appear here -->
+    </div>
+
+    <div class="perspective-container" style="display: none;">
+        <div class="sidebar-title">Answer Perspective</div>
+        <div class="perspective-list">
+            <div class="perspective-option active" data-role="Judge">⚖️ Judge</div>
+        </div>
+    </div>
+
+    <div class="sidebar-footer">
+        <a href="judgedashboard.html" class="role-selection-link">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to Dashboard
+        </a>
+    </div>
+</aside>
+
+<!-- Existing messages will be added here dynamically -->
+<div class="container">
+    <header class="header">
+        <h1 class="app-title">Law Bot (Judge)</h1>
+        <div class="header-right">
+            <div class="usage-indicator" id="usageIndicator">
+                Questions Remaining: <span id="remainingCount">--</span>
+            </div>
+            <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                <!-- Icon injected by JS -->
+            </button>
+        </div>
+    </header>
+    <div class="welcome-title">Welcome, Your Honor! ⚖️</div>
+    <div class="welcome-subtitle">It's a privilege to support your judicial wisdom with precise legal resources.
+    </div>
+    <div class="welcome-subtitle">How may I respectfully aid your deliberations today?</div>
+
+    <div class="chat-container" id="chatContainer">
+        <div class="typing-indicator" id="typingIndicator">
+            <svg class="gavel-icon" viewBox="0 0 24 24" fill="none" stroke="var(--judge-color)" stroke-width="2">
+                <path d="M14.5 2L3.5 13L11 20.5L22 9.5L14.5 2Z" />
+                <path d="M7 16.5L2 21.5" />
+            </svg>
+            <span>His Honor is deliberating...</span>
+        </div>
+    </div>
+    <div class="input-container">
+        <div class="input-wrapper">
+            <input type="text" id="messageInput" placeholder="Ask anything..." autocomplete="off">
+            <button id="sendButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="22" y1="2" x2="11" y2="13"></line>
+                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                </svg>
+            </button>
+        </div>
+    </div>
+    <footer class="professional-footer">
+        &copy; 2026 Law Bot AI. All Rights Reserved.
+        <br>
+        Developed & Managed by <a href="https://www.linkedin.com/in/vishwanath77" target="_blank">Vishwanath</a>
+    </footer>
+</div>
+<div class="connection-status" id="connectionStatus"></div>
+
+<script>
+    let ws;
+    const chatContainer = document.getElementById('chatContainer');
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('sendButton');
+    const typingIndicator = document.getElementById('typingIndicator');
+    const connectionStatus = document.getElementById('connectionStatus');
+    const sidebar = document.getElementById('sidebar');
+
+    let currentUserMessage = '';
+    let currentAiMessage = '';
+    let currentAiMessageElement = null;
+    let currentCaseId = crypto.randomUUID();
+    const activeRole = 'Judge'; // LOCKED ROLE
+    let userLimitReached = false;
+
+    async function checkUserStatus() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch('/api/user-status', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const status = await response.json();
+
+            const indicator = document.getElementById('usageIndicator');
+            if (status.is_admin) {
+                indicator.style.display = 'none';
+            } else {
+                indicator.style.display = 'block';
+                const remaining = Math.max(0, 2 - status.question_count);
+                document.getElementById('remainingCount').innerText = remaining;
+                if (remaining <= 0) {
+                    userLimitReached = true;
+                }
+            }
+        } catch (err) {
+            console.error('Failed to fetch user status:', err);
+        }
+    }
+
+    function formatText(text) {
+        // Extract references for Evidence Box
+        const references = [];
+        const refRegex = /\*\*Title\*\*:\s*([^\n]+)\s*\*\*Page Numbers\*\*:\s*([^\n]+)/gi;
+        let match;
+        while ((match = refRegex.exec(text)) !== null) {
+            references.push({ title: match[1], pages: match[2] });
+        }
+
+        let formatted = text
+            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+            .replace(/\*(.*?)\*/g, "<em>$1</em>")
+            .replace(/### (.*?)\n/g, "<h3>$1</h3>")
+            .replace(/## (.*?)\n/g, "<h2>$1</h2>")
+            .replace(/# (.*?)\n/g, "<h1>$1</h1>")
+            .replace(/\n/g, "<br>")
+            .replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>")
+            .replace(/<li>(.*?)<\/li>(?!<li>)/g, "<ul><li>$1</li></ul>")
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, `<a href="$2" target="_blank">$1</a>`);
+
+        // Add Evidence Box if references found
+        if (references.length > 0) {
+            let evidenceHtml = `<div class="evidence-box">
+                    <div class="evidence-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                        Legal Evidence
+                    </div>`;
+            references.forEach(ref => {
+                evidenceHtml += `<div class="evidence-item"><strong>${ref.title}</strong> (Page: ${ref.pages})</div>`;
+            });
+            evidenceHtml += `</div>`;
+            formatted += evidenceHtml;
+        }
+        return formatted;
+    }
+
+    function connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${protocol}//${window.location.host}/conversational_chat?role=${activeRole}`);
+
+        ws.onopen = () => {
+            console.log('Connected to WebSocket');
+            connectionStatus.textContent = 'Connected';
+            connectionStatus.className = 'connection-status connected';
+            connectionStatus.style.display = 'block';
+            setTimeout(() => {
+                connectionStatus.style.display = 'none';
+            }, 3000);
+        };
+
+        ws.onclose = () => {
+            console.log('Disconnected from WebSocket');
+            connectionStatus.textContent = 'Reconnecting...';
+            connectionStatus.className = 'connection-status disconnected';
+            connectionStatus.style.display = 'block';
+
+            // Exponential backoff for reconnection
+            const backoff = Math.min(30000, (window._reconnectCount || 0) * 2000 + 1000);
+            window._reconnectCount = (window._reconnectCount || 0) + 1;
+
+            setTimeout(() => {
+                reconnectWebSocket();
+                loadHistory();
+            }, backoff);
+        };
+
+        ws.onerror = (error) => {
+            console.error('WebSocket Error:', error);
+        };
+
+
+        ws.onmessage = (event) => {
+            console.log('Received message:', event.data);
+
+            // ✅ Hide typing indicator on response
+            typingIndicator.style.display = 'none';
+
+            if (event.data === '[DONE]') {
+                // Save complete chat interaction
+                saveChatInteraction(currentCaseId, currentUserMessage, currentAiMessage);
+                checkUserStatus(); // Update remaining count
+                return;
+            }
+
+            // Handle usage limit blocks from backend
+            if (event.data.includes("Free usage limit reached")) {
+                typingIndicator.style.display = 'none';
+                userLimitReached = true;
+                checkUserStatus();
+            }
+
+            if (!currentAiMessageElement) {
+                currentAiMessage = event.data;
+                addMessage(currentAiMessage, 'ai');
+            } else {
+                currentAiMessage += event.data;
+                const formattedMessage = formatText(currentAiMessage);
+                currentAiMessageElement.querySelector('.message-content').innerHTML = formattedMessage;
+            }
+        };
+
+        // ✅ Scroll fix (move into sendMessage function if needed)
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    function reconnectWebSocket() {
+        console.log('Attempting to reconnect...');
+        connectWebSocket();
+        loadHistory();
+    }
+
+    function addMessage(content, type) {
+        if (type === 'user') {
+            currentUserMessage = content;
+            currentAiMessage = '';
+            currentAiMessageElement = null;
+        }
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${type}-message`;
+
+        const header = document.createElement('div');
+        header.className = 'message-header';
+
+        const icon = document.createElement('div');
+        icon.className = `${type}-icon`;
+        icon.textContent = type === 'user' ? 'U' : 'L';
+
+        const name = document.createElement('span');
+        name.textContent = type === 'user' ? 'You' : 'Law Bot';
+
+        header.appendChild(icon);
+        header.appendChild(name);
+
+        const text = document.createElement('div');
+        text.className = 'message-content';
+        text.innerHTML = type === 'ai' ? formatText(content) : content;
+
+        messageDiv.appendChild(header);
+        messageDiv.appendChild(text);
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+
+        if (type === 'ai') {
+            currentAiMessageElement = messageDiv;
+        }
+    }
+
+    function sendMessage() {
+        const message = messageInput.value.trim();
+        if (!message) return;
+
+        if (userLimitReached) {
+            addMessage("### Free usage limit reached\n\nYou’ve reached the free usage limit (2 questions).\nFurther access is restricted.\n\nPlease contact the administrator for extended access:\nLinkedIn: [https://www.linkedin.com/in/vishwanath77](https://www.linkedin.com/in/vishwanath77)", 'ai');
+            return;
+        }
+
+        if (!activeRole) {
+            addMessage("⚠️ Please select an Answer Perspective in the sidebar to proceed.", 'ai');
+            return;
+        }
+
+        if (ws.readyState === WebSocket.OPEN) {
+            addMessage(message, 'user');
+            ws.send(message);
+            messageInput.value = '';
+
+            // ✅ Show typing indicator after sending
+            typingIndicator.style.display = 'block';
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }
+    const isAtBottom = chatContainer.scrollHeight - chatContainer.scrollTop === chatContainer.clientHeight;
+    if (isAtBottom) {
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+
+    const historyList = document.getElementById('historyList');
+
+    async function loadHistory() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch(`/api/interactions?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const interactions = await response.json();
+            historyList.innerHTML = '';
+            interactions.forEach(item => {
+                const div = document.createElement('div');
+                div.className = 'history-item';
+
+                // Readable preview: first sentence or truncated query
+                const preview = item.query.split('.')[0].substring(0, 40) + (item.query.length > 40 ? '...' : '');
+
+                div.innerHTML = `
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"></path></svg>
+                        <span>${preview}</span>
+                        <button class="delete-chat-item" onclick="event.stopPropagation(); deleteConversation('${item.case_id}')">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>
+                        </button>
+                    `;
+                div.onclick = () => loadConversation(item.case_id);
+                historyList.appendChild(div);
+            });
+        } catch (err) {
+            console.error('Failed to load history:', err);
+        }
+    }
+
+    async function loadConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            const response = await fetch(`/api/interactions/${caseId}?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const thread = await response.json();
+
+            currentCaseId = caseId;
+            chatContainer.innerHTML = ''; // Clear window
+
+            thread.forEach(msg => {
+                addMessage(msg.query, 'user');
+                // Render AI Response immediately
+                const aiMsgDiv = document.createElement('div');
+                aiMsgDiv.className = 'message ai-message';
+                aiMsgDiv.innerHTML = `
+                        <div class="message-header">
+                            <div class="ai-icon">L</div>
+                            <span>Law Bot</span>
+                        </div>
+                        <div class="message-content">${formatText(msg.response)}</div>
+                    `;
+                chatContainer.appendChild(aiMsgDiv);
+            });
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        } catch (err) {
+            console.error('Failed to load thread:', err);
+        }
+    }
+
+    async function deleteConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            await fetch(`/api/interactions/${caseId}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (currentCaseId === caseId) {
+                newChat();
+            } else {
+                loadHistory();
+            }
+        } catch (err) {
+            console.error('Failed to delete:', err);
+        }
+    }
+
+    function newChat() {
+        currentCaseId = crypto.randomUUID();
+        chatContainer.innerHTML = '';
+        messageInput.value = '';
+        messageInput.focus();
+        loadHistory();
+    }
+
+    // ✅ Modified: Uses Bearer token
+    const saveChatInteraction = async (caseId, query, response) => {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            await fetch('/api/save-interaction', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ caseId, query, response, role: activeRole })
+            });
+            loadHistory(); // Refresh sidebar history
+        } catch (error) {
+            console.error('Error saving chat:', error);
+        }
+    };
+
+    sendButton.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+
+
+
+    // Init
+    const themeToggle = document.getElementById('themeToggle');
+    const body = document.body;
+    const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>`;
+    const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>`;
+
+    function updateTheme(isDark) {
+        if (isDark) {
+            body.classList.add('dark');
+            body.classList.remove('light');
+            themeToggle.innerHTML = moonIcon;
+            localStorage.setItem('theme', 'dark');
+        } else {
+            body.classList.add('light');
+            body.classList.remove('dark');
+            themeToggle.innerHTML = sunIcon;
+            localStorage.setItem('theme', 'light');
+        }
+    }
+
+    themeToggle.addEventListener('click', () => {
+        const isNowDark = !body.classList.contains('dark');
+        updateTheme(isNowDark);
+    });
+
+    // Initialize Theme
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    updateTheme(savedTheme === 'dark');
+
+    // Sidebar Collapse Logic
+    document.getElementById('collapseSidebar').onclick = () => {
+        document.body.classList.add('sidebar-collapsed');
+    };
+    document.getElementById('floatingToggle').onclick = () => {
+        document.body.classList.remove('sidebar-collapsed');
+    };
+    document.getElementById('newChatBtn').onclick = newChat;
+
+    // Perspective Selection
+    document.querySelectorAll('.perspective-option').forEach(opt => {
+        opt.onclick = () => {
+            document.querySelectorAll('.perspective-option').forEach(o => o.classList.remove('active'));
+            opt.classList.add('active');
+            activeRole = opt.dataset.role;
+            localStorage.setItem('activeRole', activeRole);
+            // No session reset needed, just role update for next message
+        };
+    });
+
+    checkUserStatus();
+    connectWebSocket();
+    loadHistory();
+
+</script>
+</body>
+
+</html>

src/apps/templates/advocatechatbot.html

@@ -0,0 +1,894 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Law bot</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/modern-chat.css">
+    <style>
+        :root {
+            --primary-purple: #9b87f5;
+            --dark-purple: #1A1F2C;
+            --light-purple: #D6BCFA;
+            --neutral-gray: #8E9196;
+            --light-gray: #C8C8C9;
+            --off-white: #eee;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.dark {
+            color: var(--off-white);
+        }
+
+        body.light {
+            color: var(--dark-purple);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+
+        .app-title {
+            margin-left: 40px;
+            font-size: 2rem;
+            font-weight: 600;
+            background: linear-gradient(135deg, var(--primary-purple), var(--light-purple));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+
+        .theme-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            transition: opacity 0.3s;
+        }
+
+        .theme-toggle:hover {
+            opacity: 0.8;
+        }
+
+        .theme-toggle svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        .chat-container {
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-bottom: 2rem;
+            padding: 1rem;
+        }
+
+        .message {
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            border-radius: 8px;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .user-message {
+            background-color: rgba(155, 135, 245, 0.1);
+        }
+
+        .ai-message {
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(200, 200, 201, 0.2);
+        }
+
+        body.light .user-message {
+            background-color: var(--off-white);
+        }
+
+        body.light .ai-message {
+            background-color: #ffffff;
+            border: 1px solid var(--light-gray);
+        }
+
+        .message-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+
+        .sidebar-welcome {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(200, 200, 201, 0.15);
+            margin-bottom: 1.5rem;
+        }
+
+        .user-icon,
+        .ai-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin-right: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+
+        .user-icon {
+            background-color: var(--primary-purple);
+            color: white;
+        }
+
+        .ai-icon {
+            background-color: var(--light-purple);
+            color: var(--dark-purple);
+        }
+
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem;
+            background-color: var(--input-bg);
+            border-top: 1px solid var(--sidebar-border);
+        }
+
+        body.light .input-container {
+            background-color: #ffffff;
+            border-top: 1px solid var(--light-gray);
+        }
+
+        .input-wrapper {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        #messageInput {
+            width: 100%;
+            padding: 1rem;
+            padding-right: 3rem;
+            border: 1px solid rgba(200, 200, 201, 0.3);
+            border-radius: 8px;
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s;
+            background-color: transparent;
+            color: inherit;
+        }
+
+        body.light #messageInput {
+            border: 1px solid var(--light-gray);
+        }
+
+        #messageInput:focus {
+            border-color: var(--primary-purple);
+        }
+
+        #sendButton {
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            opacity: 0.8;
+            transition: opacity 0.3s;
+        }
+
+        #sendButton:hover {
+            opacity: 1;
+        }
+
+        .typing-indicator {
+            padding: 1rem;
+            color: var(--neutral-gray);
+            font-style: italic;
+            display: none;
+        }
+
+        .welcome-title {
+            margin: 6rem 0 0.5rem 0;
+            text-align: center;
+            color: var(--neutral-gray);
+            padding: 1rem;
+            font-size: 1.24rem;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .welcome-subtitle {
+            line-height: 1.6;
+            font-size: 1.24rem;
+            color: var(--neutral-gray);
+            max-width: 600px;
+            margin: 0 auto;
+            font-weight: 600;
+            color: var(--primary-purple);
+        }
+
+        .sidebar-welcome {
+            margin-bottom: 2rem;
+            padding: 0 1rem;
+            border-bottom: none;
+        }
+
+        .role-selection-link {
+            display: inline-flex;
+            align-items: center;
+            gap: initial;
+            color: var(--light-purple);
+            text-decoration: none;
+            margin-top: auto;
+            padding: auto;
+            transition: opacity 0.3s ease;
+            position: absolute;
+            top: 550px;
+            left: 30px;
+
+        }
+
+        .role-selection-link:hover {
+            opacity: 0.8;
+        }
+
+        .role-selection-link svg {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+        }
+
+        /* Add this media query for mobile responsiveness */
+        @media (max-width: 480px) {
+            .welcome-message p {
+                font-size: 1rem;
+                padding: 0 1rem;
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .connection-status {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            display: none;
+        }
+
+        .connection-status.connected {
+            background-color: #4ade80;
+            color: white;
+        }
+
+        .connection-status.disconnected {
+            background-color: #ef4444;
+            color: white;
+        }
+
+        /* Styling for formatted text */
+        .message-content {
+            line-height: 1.5;
+        }
+
+        .message-content h1,
+        .message-content h2,
+        .message-content h3 {
+            margin: 1rem 0 0.5rem;
+            font-weight: 600;
+        }
+
+        .message-content h1 {
+            font-size: 1.5rem;
+        }
+
+        .message-content h2 {
+            font-size: 1.25rem;
+        }
+
+        .message-content h3 {
+            font-size: 1.1rem;
+        }
+
+        .message-content ul,
+        .message-content ol {
+            margin-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .message-content a {
+            color: var(--primary-purple);
+            text-decoration: none;
+        }
+
+        .message-content a:hover {
+            text-decoration: underline;
+        }
+
+        .usage-indicator {
+            padding: 4px 12px;
+            background: rgba(155, 135, 245, 0.1);
+            border: 1px solid rgba(155, 135, 245, 0.3);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            color: var(--primary-purple);
+            font-weight: 500;
+            display: none;
+            /* Hidden by default for Admins */
+        }
+    </style>
+</head>
+
+<button class="sidebar-floating-toggle" id="floatingToggle">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 12h18M3 6h18M3 18h18" />
+    </svg>
+</button>
+
+<aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+        <button class="new-chat-btn" id="newChatBtn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 5v14M5 12h14" />
+            </svg>
+            New Chat
+        </button>
+        <button class="collapse-toggle" id="collapseSidebar" title="Collapse sidebar">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M15 18l-6-6 6-6" />
+            </svg>
+        </button>
+    </div>
+    <div class="sidebar-title">Recent Cases</div>
+    <div class="history-list" id="historyList">
+        <!-- Recent prompts will appear here -->
+    </div>
+
+    <div class="perspective-container" style="display: none;">
+        <div class="sidebar-title">Answer Perspective</div>
+        <div class="perspective-list">
+            <div class="perspective-option active" data-role="Advocate">🛡️ Advocate</div>
+        </div>
+    </div>
+
+    <div class="sidebar-footer">
+        <a href="/advocatedashboard.html" class="role-selection-link">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to Dashboard
+        </a>
+    </div>
+</aside>
+
+<!-- Existing messages will be added here dynamically -->
+<div class="container">
+    <header class="header">
+        <h1 class="app-title">Law Bot (Advocate)</h1>
+        <div class="header-right">
+            <div class="usage-indicator" id="usageIndicator">
+                Questions Remaining: <span id="remainingCount">--</span>
+            </div>
+            <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                <!-- Icon injected by JS -->
+            </button>
+            <div class="user-profile-menu" id="userProfileMenu">
+                <div class="profile-icon-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="12" cy="7" r="4"></circle>
+                    </svg>
+                </div>
+                <div class="dropdown-menu" id="dropdownMenu">
+                    <div class="dropdown-item role-info">
+                        Role: Advocate
+                    </div>
+                    <a href="#" class="dropdown-item logout-action" id="headerLogoutBtn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                            <polyline points="16 17 21 12 16 7"></polyline>
+                            <line x1="21" y1="12" x2="9" y2="12"></line>
+                        </svg>
+                        Logout
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <div class="welcome-title">Welcome, Advocate! 🎓</div>
+    <div class="welcome-subtitle">How can I help you with legal references and case laws?</div>
+
+
+    <div class="chat-container" id="chatContainer">
+        <div class="typing-indicator" id="typingIndicator">
+            <svg class="gavel-icon" viewBox="0 0 24 24" fill="none" stroke="var(--advocate-color)" stroke-width="2">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="8" y1="12" x2="16" y2="12" />
+                <line x1="12" y1="8" x2="12" y2="16" />
+            </svg>
+            <span>Analyzing case law...</span>
+        </div>
+    </div>
+    <div class="input-container">
+        <div class="input-wrapper">
+            <input type="text" id="messageInput" placeholder="Ask anything..." autocomplete="off">
+            <button id="sendButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="22" y1="2" x2="11" y2="13"></line>
+                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                </svg>
+            </button>
+        </div>
+    </div>
+    <footer class="professional-footer">
+        &copy; 2026 Law Bot AI. All Rights Reserved.
+        <br>
+        Developed & Managed by <a href="https://www.linkedin.com/in/vishwanath77" target="_blank">Vishwanath</a>
+    </footer>
+</div>
+<div class="connection-status" id="connectionStatus"></div>
+
+<script>
+    let ws;
+    const chatContainer = document.getElementById('chatContainer');
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('sendButton');
+    const typingIndicator = document.getElementById('typingIndicator');
+    const connectionStatus = document.getElementById('connectionStatus');
+    const sidebar = document.getElementById('sidebar');
+
+    let currentUserMessage = '';
+    let currentAiMessage = '';
+    let currentAiMessageElement = null;
+    let currentCaseId = crypto.randomUUID();
+    const activeRole = 'Advocate'; // LOCKED ROLE
+    let userLimitReached = false;
+
+    async function checkUserStatus() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch('/api/user-status', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const status = await response.json();
+
+            const indicator = document.getElementById('usageIndicator');
+            if (status.is_admin) {
+                indicator.style.display = 'none';
+            } else {
+                indicator.style.display = 'block';
+                const remaining = Math.max(0, 2 - status.question_count);
+                document.getElementById('remainingCount').innerText = remaining;
+                if (remaining <= 0) {
+                    userLimitReached = true;
+                }
+            }
+        } catch (err) {
+            console.error('Failed to fetch user status:', err);
+        }
+    }
+
+    function formatText(text) {
+        // Extract references for Evidence Box
+        const references = [];
+        const refRegex = /\*\*Title\*\*:\s*([^\n]+)\s*\*\*Page Numbers\*\*:\s*([^\n]+)/gi;
+        let match;
+        while ((match = refRegex.exec(text)) !== null) {
+            references.push({ title: match[1], pages: match[2] });
+        }
+
+        let formatted = text
+            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+            .replace(/\*(.*?)\*/g, "<em>$1</em>")
+            .replace(/### (.*?)\n/g, "<h3>$1</h3>")
+            .replace(/## (.*?)\n/g, "<h2>$1</h2>")
+            .replace(/# (.*?)\n/g, "<h1>$1</h1>")
+            .replace(/\n/g, "<br>")
+            .replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>")
+            .replace(/<li>(.*?)<\/li>(?!<li>)/g, "<ul><li>$1</li></ul>")
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, `<a href="$2" target="_blank">$1</a>`);
+
+        // Add Evidence Box if references found
+        if (references.length > 0) {
+            let evidenceHtml = `<div class="evidence-box">
+                    <div class="evidence-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                        Legal Evidence
+                    </div>`;
+            references.forEach(ref => {
+                evidenceHtml += `<div class="evidence-item"><strong>${ref.title}</strong> (Page: ${ref.pages})</div>`;
+            });
+            evidenceHtml += `</div>`;
+            formatted += evidenceHtml;
+        }
+        return formatted;
+    }
+
+    function connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${protocol}//${window.location.host}/conversational_chat?role=${activeRole}`);
+
+        ws.onopen = () => {
+            console.log('Connected to WebSocket');
+            connectionStatus.textContent = 'Connected';
+            connectionStatus.className = 'connection-status connected';
+            connectionStatus.style.display = 'block';
+            setTimeout(() => {
+                connectionStatus.style.display = 'none';
+            }, 3000);
+        };
+
+        ws.onclose = () => {
+            console.log('Disconnected from WebSocket');
+            connectionStatus.textContent = 'Reconnecting...';
+            connectionStatus.className = 'connection-status disconnected';
+            connectionStatus.style.display = 'block';
+
+            // Exponential backoff for reconnection
+            const backoff = Math.min(30000, (window._reconnectCount || 0) * 2000 + 1000);
+            window._reconnectCount = (window._reconnectCount || 0) + 1;
+
+            setTimeout(() => {
+                reconnectWebSocket();
+                loadHistory();
+            }, backoff);
+        };
+
+        ws.onerror = (error) => {
+            console.error('WebSocket Error:', error);
+        };
+
+
+        ws.onmessage = (event) => {
+            console.log('Received message:', event.data);
+
+            // ✅ Hide typing indicator on response
+            typingIndicator.style.display = 'none';
+
+            if (event.data === '[DONE]') {
+                // Save complete chat interaction
+                saveChatInteraction(currentCaseId, currentUserMessage, currentAiMessage);
+                checkUserStatus(); // Update remaining count
+                return;
+            }
+
+            // Handle usage limit blocks from backend
+            if (event.data.includes("Free usage limit reached")) {
+                typingIndicator.style.display = 'none';
+                userLimitReached = true;
+                checkUserStatus();
+            }
+
+            if (!currentAiMessageElement) {
+                currentAiMessage = event.data;
+                addMessage(currentAiMessage, 'ai');
+            } else {
+                currentAiMessage += event.data;
+                const formattedMessage = formatText(currentAiMessage);
+                currentAiMessageElement.querySelector('.message-content').innerHTML = formattedMessage;
+            }
+        };
+
+        // ✅ Scroll fix (move into sendMessage function if needed)
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    function reconnectWebSocket() {
+        console.log('Attempting to reconnect...');
+        connectWebSocket();
+        loadHistory();
+    }
+
+    function addMessage(content, type) {
+        if (type === 'user') {
+            currentUserMessage = content;
+            currentAiMessage = '';
+            currentAiMessageElement = null;
+        }
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${type}-message`;
+
+        const header = document.createElement('div');
+        header.className = 'message-header';
+
+        const icon = document.createElement('div');
+        icon.className = `${type}-icon`;
+        icon.textContent = type === 'user' ? 'U' : 'L';
+
+        const name = document.createElement('span');
+        name.textContent = type === 'user' ? 'You' : 'Law Bot';
+
+        header.appendChild(icon);
+        header.appendChild(name);
+
+        const text = document.createElement('div');
+        text.className = 'message-content';
+        text.innerHTML = type === 'ai' ? formatText(content) : content;
+
+        messageDiv.appendChild(header);
+        messageDiv.appendChild(text);
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+
+        if (type === 'ai') {
+            currentAiMessageElement = messageDiv;
+        }
+    }
+
+    function sendMessage() {
+        const message = messageInput.value.trim();
+        if (!message) return;
+
+        if (userLimitReached) {
+            addMessage("### Free usage limit reached\n\nYou’ve reached the free usage limit (2 questions).\nFurther access is restricted.\n\nPlease contact the administrator for extended access:\nLinkedIn: [https://www.linkedin.com/in/vishwanath77](https://www.linkedin.com/in/vishwanath77)", 'ai');
+            return;
+        }
+
+        if (!activeRole) {
+            addMessage("⚠️ Please select an Answer Perspective in the sidebar to proceed.", 'ai');
+            return;
+        }
+
+        if (ws.readyState === WebSocket.OPEN) {
+            addMessage(message, 'user');
+            ws.send(message);
+            messageInput.value = '';
+
+            // ✅ Show typing indicator after sending
+            typingIndicator.style.display = 'block';
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }
+    const isAtBottom = chatContainer.scrollHeight - chatContainer.scrollTop === chatContainer.clientHeight;
+    if (isAtBottom) {
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+
+    const historyList = document.getElementById('historyList');
+
+    async function loadHistory() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch(`/api/interactions?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const interactions = await response.json();
+            historyList.innerHTML = '';
+            interactions.forEach(item => {
+                const div = document.createElement('div');
+                div.className = 'history-item';
+
+                // Readable preview: first sentence or truncated query
+                const preview = item.query.split('.')[0].substring(0, 40) + (item.query.length > 40 ? '...' : '');
+
+                div.innerHTML = `
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"></path></svg>
+                        <span>${preview}</span>
+                        <button class="delete-chat-item" onclick="event.stopPropagation(); deleteConversation('${item.case_id}')">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>
+                        </button>
+                    `;
+                div.onclick = () => loadConversation(item.case_id);
+                historyList.appendChild(div);
+            });
+        } catch (err) {
+            console.error('Failed to load history:', err);
+        }
+    }
+
+    async function loadConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            const response = await fetch(`/api/interactions/${caseId}?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const thread = await response.json();
+
+            currentCaseId = caseId;
+            chatContainer.innerHTML = ''; // Clear window
+
+            thread.forEach(msg => {
+                addMessage(msg.query, 'user');
+                // Render AI Response immediately
+                const aiMsgDiv = document.createElement('div');
+                aiMsgDiv.className = 'message ai-message';
+                aiMsgDiv.innerHTML = `
+                        <div class="message-header">
+                            <div class="ai-icon">L</div>
+                            <span>Law Bot</span>
+                        </div>
+                        <div class="message-content">${formatText(msg.response)}</div>
+                    `;
+                chatContainer.appendChild(aiMsgDiv);
+            });
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        } catch (err) {
+            console.error('Failed to load thread:', err);
+        }
+    }
+
+    async function deleteConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            await fetch(`/api/interactions/${caseId}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (currentCaseId === caseId) {
+                newChat();
+            } else {
+                loadHistory();
+            }
+        } catch (err) {
+            console.error('Failed to delete:', err);
+        }
+    }
+
+    function newChat() {
+        currentCaseId = crypto.randomUUID();
+        chatContainer.innerHTML = '';
+        messageInput.value = '';
+        messageInput.focus();
+        loadHistory();
+    }
+
+    // ✅ Modified: Uses Bearer token
+    const saveChatInteraction = async (caseId, query, response) => {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            await fetch('/api/save-interaction', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ caseId, query, response, role: activeRole })
+            });
+            loadHistory(); // Refresh sidebar history
+        } catch (error) {
+            console.error('Error saving chat:', error);
+        }
+    };
+
+    sendButton.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+
+    // Theme toggle
+    // --- User Profile Dropdown ---
+    const userProfileMenu = document.getElementById('userProfileMenu');
+    const dropdownMenu = document.getElementById('dropdownMenu');
+    const headerLogoutBtn = document.getElementById('headerLogoutBtn');
+
+    userProfileMenu.addEventListener('click', (e) => {
+        e.stopPropagation();
+        dropdownMenu.classList.toggle('show');
+    });
+
+    document.addEventListener('click', () => {
+        if (dropdownMenu.classList.contains('show')) {
+            dropdownMenu.classList.remove('show');
+        }
+    });
+
+    headerLogoutBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        localStorage.removeItem('token');
+        window.location.href = '/role';
+    });
+
+    const themeToggle = document.getElementById('themeToggle');
+    const body = document.body;
+    const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>`;
+    const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>`;
+
+    function updateTheme(isDark) {
+        if (isDark) {
+            body.classList.add('dark');
+            body.classList.remove('light');
+            themeToggle.innerHTML = moonIcon;
+            localStorage.setItem('theme', 'dark');
+        } else {
+            body.classList.add('light');
+            body.classList.remove('dark');
+            themeToggle.innerHTML = sunIcon;
+            localStorage.setItem('theme', 'light');
+        }
+    }
+
+    themeToggle.addEventListener('click', () => {
+        const isNowDark = !body.classList.contains('dark');
+        updateTheme(isNowDark);
+    });
+
+    // Initialize Theme
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    updateTheme(savedTheme === 'dark');
+
+    // Sidebar Collapse Logic
+    document.getElementById('collapseSidebar').onclick = () => {
+        document.body.classList.add('sidebar-collapsed');
+    };
+    document.getElementById('floatingToggle').onclick = () => {
+        document.body.classList.remove('sidebar-collapsed');
+    };
+    document.getElementById('newChatBtn').onclick = newChat;
+
+    // Perspective Selection
+    document.querySelectorAll('.perspective-option').forEach(opt => {
+        opt.onclick = () => {
+            document.querySelectorAll('.perspective-option').forEach(o => o.classList.remove('active'));
+            opt.classList.add('active');
+            activeRole = opt.dataset.role;
+            localStorage.setItem('activeRole', activeRole);
+            // No session reset needed, just role update for next message
+        };
+    });
+
+    checkUserStatus();
+    connectWebSocket();
+    loadHistory();
+
+</script>
+</body>
+
+</html>

src/apps/templates/advocatedashboard.html

@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advocate Dashboard</title>
+    <link rel="stylesheet" href="/static/css/entrance.css">
+    <script src="/static/js/entrance.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #2a5298;
+            --secondary: #1e3c72;
+            --accent: #e67e22;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            background: #f5f7fa;
+        }
+
+        .header {
+            background: linear-gradient(135deg, var(--secondary), var(--primary));
+            color: white;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+            z-index: 1000;
+        }
+
+        .profile {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .profile img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .container {
+            display: grid;
+            grid-template-columns: 250px 1fr;
+            min-height: calc(100vh - 70px);
+        }
+
+        .sidebar {
+            background: white;
+            padding: 1.5rem;
+            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .sidebar a {
+            display: block;
+            padding: 10px;
+            color: #555;
+            text-decoration: none;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+
+        .sidebar a:hover,
+        .sidebar a.active {
+            background: #e6f0ff;
+            color: var(--primary);
+        }
+
+        .main-content {
+            padding: 2rem;
+        }
+
+        .card {
+            background: white;
+            border-radius: 8px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        }
+
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+
+        .stat-item {
+            text-align: center;
+            padding: 1rem;
+            border-radius: 8px;
+            background: #f8f9fa;
+        }
+
+        .stat-item h3 {
+            color: var(--primary);
+            margin: 0;
+        }
+
+        .case-list {
+            display: grid;
+            gap: 1rem;
+        }
+
+        .case-item {
+            padding: 1rem;
+            border-left: 4px solid var(--accent);
+            background: white;
+            border-radius: 4px;
+        }
+
+        .case-item h4 {
+            margin: 0;
+            color: var(--secondary);
+        }
+
+        .case-meta {
+            display: flex;
+            gap: 1rem;
+            color: #666;
+            font-size: 0.9rem;
+        }
+
+        .resources-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1rem;
+        }
+
+        .resource-card {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 1rem;
+            transition: all 0.3s;
+        }
+
+        .resource-card:hover {
+            border-color: var(--primary);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Chatbot button */
+        .chatbot-btn {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 4px 20px rgba(30, 60, 114, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 90;
+        }
+
+        .chatbot-btn:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 25px rgba(30, 60, 114, 0.4);
+        }
+
+        .chatbot-btn i {
+            font-size: 1.5rem;
+        }
+
+        /* --- USER DROPDOWN --- */
+        .user-profile-menu {
+            position: relative;
+            cursor: pointer;
+        }
+
+        .profile {
+            cursor: pointer;
+            transition: opacity 0.3s;
+        }
+
+        .profile:hover {
+            opacity: 0.9;
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: 100%;
+            right: 0;
+            width: 220px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+            display: none;
+            flex-direction: column !important;
+            overflow: hidden;
+            z-index: 2000;
+            margin-top: 10px;
+            border: 1px solid #e0e4e8;
+        }
+
+        .dropdown-menu.show {
+            display: flex !important;
+            animation: fadeIn 0.2s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .dropdown-item {
+            padding: 1rem;
+            color: #333;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: background 0.2s;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom: none;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+            color: #2a5298;
+        }
+
+        .dropdown-item.role-info {
+            background: #f1f4f8;
+            font-weight: 500;
+            color: #4a5568;
+            cursor: default;
+        }
+
+        .dropdown-item.usage-info {
+            background: #fff5f5;
+            font-size: 0.85rem;
+            color: #e53e3e;
+            font-weight: 600;
+            display: none;
+        }
+
+        .logout-action {
+            color: #e53e3e !important;
+            font-weight: 500;
+        }
+
+        .logout-action i {
+            margin-right: 8px;
+        }
+
+        .logout-action:hover {
+            background: #fff5f5;
+        }
+    </style>
+</head>
+
+<body>
+    <header class="header">
+        <h1>Advocate Dashboard</h1>
+        <div class="user-profile-menu" id="userProfileMenu">
+            <div class="profile">
+                <span>Adv. Rahul Sharma</span>
+                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile">
+                <i class="fas fa-chevron-down" style="font-size: 0.8rem; margin-left: 10px; opacity: 0.8;"></i>
+            </div>
+            <div class="dropdown-menu" id="dropdownMenu">
+                <div class="dropdown-item role-info">
+                    Role: Advocate
+                </div>
+                <div class="dropdown-item usage-info" id="usageInfo">
+                    Questions Remaining: <span id="remainingCount">--</span>
+                </div>
+                <div class="dropdown-item logout-action" id="headerLogoutBtn" style="cursor: pointer;">
+                    <i class="fas fa-sign-out-alt"></i> Logout
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="container">
+        <aside class="sidebar">
+            <a href="advocatedashboard.html" class="active"><i class="fas fa-home"></i> Dashboard</a>
+            <a href="advocateresources.html" id="resources"><i class="fas fa-book"></i> Legal Resources</a>
+
+        </aside>
+
+        <main class="main-content">
+            <div class="card">
+                <h2>Today's Overview</h2>
+                <div class="stats">
+                    <div class="stat-item">
+                        <h3>12</h3>
+                        <p>Active Cases</p>
+                    </div>
+                    <div class="stat-item">
+                        <h3>3</h3>
+                        <p>Today's Hearings</p>
+                    </div>
+                    <div class="stat-item">
+                        <h3>5</h3>
+                        <p>Pending Filings</p>
+                    </div>
+                    <div class="stat-item">
+                        <h3>2</h3>
+                        <p>Urgent Matters</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Upcoming Hearings</h2>
+                <div class="case-list">
+                    <div class="case-item">
+                        <h4>State vs. Kumar - Bail Hearing</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> CR-2024-0785</span>
+                            <span><i class="fas fa-clock"></i> Today, 11:30 AM</span>
+                            <span><i class="fas fa-map-marker-alt"></i> Courtroom 3</span>
+                        </div>
+                    </div>
+                    <div class="case-item">
+                        <h4>M/s. ABC Corp vs. XYZ Ltd</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> CS-2024-0456</span>
+                            <span><i class="fas fa-clock"></i> Tomorrow, 2:15 PM</span>
+                            <span><i class="fas fa-map-marker-alt"></i> Courtroom 5</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Recent Case Updates</h2>
+                <div class="case-list">
+                    <div class="case-item">
+                        <h4>Patel vs. State - Judgment Reserved</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> CR-2024-0123</span>
+                            <span>Hon'ble Justice Verma</span>
+                        </div>
+                        <p>Final arguments completed. Judgment expected within 15 days.</p>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <!-- Chatbot Button -->
+    <div class="chatbot-btn" id="chatbotButton">
+        <i class="fas fa-robot"></i>
+    </div>
+
+    <script>
+        // --- User Profile Dropdown Logic ---
+        const userProfileMenu = document.getElementById('userProfileMenu');
+        const dropdownMenu = document.getElementById('dropdownMenu');
+        const sidebarLogoutBtn = document.getElementById('logoutBtn');
+        const headerLogoutBtn = document.getElementById('headerLogoutBtn');
+
+        async function checkUserStatus() {
+            const token = localStorage.getItem('token');
+            if (!token) return;
+
+            try {
+                const response = await fetch('/api/user-status', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                const status = await response.json();
+
+                const usageInfo = document.getElementById('usageInfo');
+                if (status.is_admin) {
+                    usageInfo.style.display = 'none';
+                } else {
+                    usageInfo.style.display = 'flex';
+                    const remaining = Math.max(0, 2 - status.question_count);
+                    document.getElementById('remainingCount').innerText = remaining;
+                }
+            } catch (err) {
+                console.error('Failed to fetch user status:', err);
+            }
+        }
+
+        checkUserStatus();
+
+        userProfileMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+            dropdownMenu.classList.toggle('show');
+        });
+
+        document.addEventListener('click', () => {
+            if (dropdownMenu.classList.contains('show')) {
+                dropdownMenu.classList.remove('show');
+            }
+        });
+
+        function performLogout() {
+            if (window.dashboardEntrance) {
+                window.dashboardEntrance.logout();
+            } else {
+                localStorage.removeItem('token');
+                window.location.href = "/role";
+            }
+        }
+
+        headerLogoutBtn.addEventListener('click', performLogout);
+
+        if (sidebarLogoutBtn) {
+            sidebarLogoutBtn.addEventListener("click", function (e) {
+                e.preventDefault();
+                performLogout();
+            });
+        }
+
+        document.getElementById('resources').addEventListener('click', function () {
+            window.location.href = 'advocateresources.html';
+        });
+        document.getElementById("chatbotButton").addEventListener("click", function () {
+            // Here you would typically open a chatbot modal or redirect to a chatbot page
+            alert("Advocate Assistant Chatbot is opening...");
+            window.location.href = "/advocatechatbot.html";
+        });
+    </script>
+</body>
+
+</html>

src/apps/templates/advocateresources.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advocate Resources</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #2a5298;
+            --secondary: #1e3c72;
+            --accent: #e67e22;
+            --light-bg: #f8f9fa;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            background: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+        }
+        .header {
+            background: linear-gradient(135deg, var(--secondary), var(--primary));
+            color: white;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .back-btn {
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 0 1.5rem;
+        }
+        .page-title {
+            color: var(--secondary);
+            border-bottom: 2px solid var(--light-bg);
+            padding-bottom: 1rem;
+            margin-bottom: 2rem;
+        }
+        .resources-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1.5rem;
+        }
+        .resource-card {
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            border-top: 4px solid var(--accent);
+        }
+        .resource-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .card-header {
+            background: var(--light-bg);
+            padding: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .card-header i {
+            font-size: 1.5rem;
+            color: var(--primary);
+            width: 40px;
+            height: 40px;
+            background: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .card-header h3 {
+            margin: 0;
+            color: var(--secondary);
+            font-size: 1.1rem;
+        }
+        .card-body {
+            padding: 1.5rem;
+        }
+        .resource-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .resource-item {
+            margin-bottom: 1rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px dashed #eee;
+        }
+        .resource-item:last-child {
+            margin-bottom: 0;
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+        .resource-link {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            color: #444;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .resource-link:hover {
+            color: var(--primary);
+        }
+        .resource-link i {
+            color: var(--accent);
+            margin-top: 3px;
+            font-size: 0.9rem;
+        }
+        .resource-desc {
+            font-size: 0.85rem;
+            color: #666;
+            margin-top: 0.3rem;
+            margin-left: 24px;
+        }
+        .tag {
+            display: inline-block;
+            background: var(--light-bg);
+            color: var(--primary);
+            font-size: 0.7rem;
+            padding: 0.2rem 0.5rem;
+            border-radius: 4px;
+            margin-top: 0.5rem;
+        }
+        @media (max-width: 768px) {
+            .resources-container {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>Legal Resources</h1>
+        <a href="advocatedashboard.html" class="back-btn">
+            <i class="fas fa-arrow-left"></i> Back to Dashboard
+        </a>
+    </header>
+
+    <div class="container">
+        <h2 class="page-title">Essential Legal Tools & References</h2>
+        
+        <div class="resources-container">
+            <!-- AI Research Tools -->
+        
+
+            <!-- Case Law Databases -->
+            <div class="resource-card">
+                <div class="card-header">
+                    <i class="fas fa-gavel"></i>
+                    <h3>Case Law Databases</h3>
+                </div>
+                <div class="card-body">
+                    <ul class="resource-list">
+                        <li class="resource-item">
+                            <a href="https://indiankanoon.org/" target="_blank" class="resource-link">
+                                <i class="fas fa-external-link-alt"></i>
+                                <div>
+                                    <strong>Indian Kanoon</strong>
+                                    <div class="resource-desc">Free Indian case law database with comprehensive search</div>
+                                    <span class="tag">Free</span>
+                                </div>
+                            </a>
+                        </li>
+                        <li class="resource-item">
+                            <a href="https://www.scconline.com/" target="_blank" class="resource-link">
+                                <i class="fas fa-external-link-alt"></i>
+                                <div>
+                                    <strong>SCC Online</strong>
+                                    <div class="resource-desc">Premium case law database with editorial enhancements</div>
+                                    <span class="tag">Premium</span>
+                                </div>
+                            </a>
+                        </li>
+                        <li class="resource-item">
+                            <a href="https://www.manupatrafast.com/" target="_blank" class="resource-link">
+                                <i class="fas fa-external-link-alt"></i>
+                                <div>
+                                    <strong>Manupatra</strong>
+                                    <div class="resource-desc">Indian legal research with statutes and case law</div>
+                                    <span class="tag">Subscription</span>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Practice Management -->
+            <div class="resource-card">
+                <div class="card-header">
+                    <i class="fas fa-tools"></i>
+                    <h3>Practice Management</h3>
+                </div>
+                <div class="card-body">
+                    <ul class="resource-list">
+                        <li class="resource-item">
+                            <a href="https://clio.com/" target="_blank" class="resource-link">
+                                <i class="fas fa-external-link-alt"></i>
+                                <div>
+                                    <strong>Clio</strong>
+                                    <div class="resource-desc">Cloud-based legal practice management software</div>
+                                    <span class="tag">Cloud</span>
+                                </div>
+                            </a>
+                        </li>
+                        <li class="resource-item">
+                            <a href="https://www.lexisnexis.com/" target="_blank" class="resource-link">
+                                <i class="fas fa-external-link-alt"></i>
+                                <div>
+                                    <strong>LexisNexis</strong>
+                                    <div class="resource-desc">Legal research and business analytics solutions</div>
+                                    <span class="tag">Enterprise</span>
+                                </div>
+                            </a>
+                        </li>
+                        <li class="resource-item">
+                            <a href="https://www.lawpay.com/" target="_blank" class="resource-link">
+                                <i class="fas fa-external-link-alt"></i>
+                                <div>
+                                    <strong>LawPay</strong>
+                                    <div class="resource-desc">Payment processing designed for legal professionals</div>
+                                    <span class="tag">Payments</span>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Recent Amendments -->
+            <div class="resource-card">
+                <div class="card-header">
+                    <i class="fas fa-newspaper"></i>
+                    <h3>2024 Legal Updates</h3>
+                </div>
+                <div class="card-body">
+                    <ul class="resource-list">
+                        <li class="resource-item">
+                            <div class="resource-link">
+                                <i class="fas fa-file-alt"></i>
+                                <div>
+                                    <strong>BNSS (Bharatiya Nagarik Suraksha Sanhita)</strong>
+                                    <div class="resource-desc">Replaces CrPC with 533 sections, 160+ changes</div>
+                                    <span class="tag">Criminal Law</span>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="resource-item">
+                            <div class="resource-link">
+                                <i class="fas fa-file-alt"></i>
+                                <div>
+                                    <strong>BSS (Bharatiya Sakshya Adhiniyam)</strong>
+                                    <div class="resource-desc">New evidence law replacing Indian Evidence Act</div>
+                                    <span class="tag">Evidence</span>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="resource-item">
+                            <div class="resource-link">
+                                <i class="fas fa-file-alt"></i>
+                                <div>
+                                    <strong>DPDP Act 2023</strong>
+                                    <div class="resource-desc">Digital Personal Data Protection framework</div>
+                                    <span class="tag">Data Privacy</span>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Simple token verification
+        document.getElementById("chatbotButton").addEventListener("click", function() {
+            window.location.href = "advocatechatbot.html";
+        });
+    </script>
+</body>
+</html>

src/apps/templates/citizen.html

@@ -0,0 +1,791 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Law bot</title>
+    <link rel="stylesheet" href="/static/css/entrance.css">
+    <script src="/static/js/entrance.js" defer></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/modern-chat.css">
+    <style>
+        :root {
+            --primary-purple: #9b87f5;
+            --dark-purple: #1A1F2C;
+            --light-purple: #D6BCFA;
+            --neutral-gray: #8E9196;
+            --light-gray: #C8C8C9;
+            --off-white: #eee;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.dark {
+            color: var(--off-white);
+        }
+
+        body.light {
+            color: var(--dark-purple);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .app-title {
+            margin-left: 40px;
+            font-size: 2rem;
+            font-weight: 600;
+            background: linear-gradient(135deg, var(--primary-purple), var(--light-purple));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+
+        .theme-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            transition: opacity 0.3s;
+        }
+
+        .theme-toggle:hover {
+            opacity: 0.8;
+        }
+
+        .theme-toggle svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        .input-wrapper {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        #messageInput {
+            width: 100%;
+            padding: 1rem;
+            padding-right: 3rem;
+            border: 1px solid rgba(200, 200, 201, 0.3);
+            border-radius: 8px;
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s;
+            background-color: transparent;
+            color: inherit;
+        }
+
+        body.light #messageInput {
+            border: 1px solid var(--light-gray);
+        }
+
+        #messageInput:focus {
+            border-color: var(--primary-purple);
+        }
+
+        #sendButton {
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            opacity: 0.8;
+            transition: opacity 0.3s;
+        }
+
+        #sendButton:hover {
+            opacity: 1;
+        }
+
+        .typing-indicator {
+            padding: 1rem;
+            color: var(--neutral-gray);
+            font-style: italic;
+            display: none;
+        }
+
+        .welcome-title {
+            margin: 6rem 0 0.5rem 0;
+            text-align: center;
+            color: var(--neutral-gray);
+            padding: 1rem;
+            font-size: 1.24rem;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .welcome-subtitle {
+            line-height: 1.6;
+            font-size: 1.1rem;
+            color: var(--neutral-gray);
+            max-width: 800px;
+            margin: 0 auto;
+            font-weight: 400;
+            color: var(--primary-purple);
+        }
+
+        .sidebar-welcome {
+            margin-bottom: 2rem;
+            padding: 0 1rem;
+            border-bottom: none;
+        }
+
+        .role-selection-link {
+            display: inline-flex;
+            align-items: center;
+            gap: initial;
+            color: var(--light-purple);
+            text-decoration: none;
+            margin-top: auto;
+            padding: auto;
+            transition: opacity 0.3s ease;
+            position: absolute;
+            top: 550px;
+            left: 30px;
+        }
+
+        .role-selection-link:hover {
+            opacity: 0.8;
+        }
+
+        .role-selection-link svg {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+        }
+
+        @media (max-width: 480px) {
+            .welcome-message p {
+                font-size: 1rem;
+                padding: 0 1rem;
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .connection-status {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            display: none;
+        }
+
+        .connection-status.connected {
+            background-color: #4ade80;
+            color: white;
+        }
+
+        .connection-status.disconnected {
+            background-color: #ef4444;
+            color: white;
+        }
+
+        .message-content {
+            line-height: 1.5;
+        }
+
+        .message-content h1,
+        .message-content h2,
+        .message-content h3 {
+            margin: 1rem 0 0.5rem;
+            font-weight: 600;
+        }
+
+        .message-content h1 {
+            font-size: 1.5rem;
+        }
+
+        .message-content h2 {
+            font-size: 1.25rem;
+        }
+
+        .message-content h3 {
+            font-size: 1.1rem;
+        }
+
+        .message-content ul,
+        .message-content ol {
+            margin-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .message-content a {
+            color: var(--primary-purple);
+            text-decoration: none;
+        }
+
+        .message-content a:hover {
+            text-decoration: underline;
+        }
+
+        .usage-indicator {
+            padding: 4px 12px;
+            background: rgba(155, 135, 245, 0.1);
+            border: 1px solid rgba(155, 135, 245, 0.3);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            color: var(--primary-purple);
+            font-weight: 500;
+            display: none;
+            /* Hidden by default for Admins */
+        }
+    </style>
+</head>
+
+<body>
+
+
+
+    <button class="sidebar-floating-toggle" id="floatingToggle">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 12h18M3 6h18M3 18h18" />
+        </svg>
+    </button>
+
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <button class="new-chat-btn" id="newChatBtn">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 5v14M5 12h14" />
+                </svg>
+                New Chat
+            </button>
+            <button class="collapse-toggle" id="collapseSidebar" title="Collapse sidebar">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M15 18l-6-6 6-6" />
+                </svg>
+            </button>
+        </div>
+        <div class="sidebar-title">Recent Chats</div>
+        <div class="history-list" id="historyList">
+            <!-- Recent prompts will appear here -->
+        </div>
+
+        <!-- HIDDEN Answer Perspective for Citizen Role (Strict Isolation) -->
+        <div class="perspective-container" style="display: none;">
+            <div class="sidebar-title">Answer Perspective</div>
+            <div class="perspective-list">
+                <div class="perspective-option active" data-role="Citizen">👨‍⚖️ Citizen</div>
+            </div>
+        </div>
+
+
+    </aside>
+
+    <!-- Existing messages will be added here dynamically -->
+    <div class="container">
+        <header class="header">
+            <h1 class="app-title">Law Bot (Citizen)</h1>
+            <div class="header-right">
+                <div class="usage-indicator" id="usageIndicator">
+                    Questions Remaining: <span id="remainingCount">--</span>
+                </div>
+                <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                    <!-- Icon injected by JS -->
+                </button>
+                <div class="user-profile-menu" id="userProfileMenu">
+                    <div class="profile-icon-btn">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="12" cy="7" r="4"></circle>
+                        </svg>
+                    </div>
+                    <div class="dropdown-menu" id="dropdownMenu">
+                        <div class="dropdown-item role-info">
+                            Role: Citizen
+                        </div>
+                        <a href="#" class="dropdown-item logout-action" id="headerLogoutBtn">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                                <polyline points="16 17 21 12 16 7"></polyline>
+                                <line x1="21" y1="12" x2="9" y2="12"></line>
+                            </svg>
+                            Logout
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <div class="welcome-title">Welcome, Responsible Citizen! 👨‍⚖️</div>
+        <div class="welcome-subtitle">Let’s simplify legal processes together. How can I help clarify the laws for
+            you?
+        </div>
+
+
+        <div class="chat-container" id="chatContainer">
+            <div class="typing-indicator" id="typingIndicator">
+                <svg class="gavel-icon" viewBox="0 0 24 24" fill="none" stroke="var(--primary-purple)" stroke-width="2">
+                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+                </svg>
+                <span>Law Bot is thinking...</span>
+            </div>
+        </div>
+        <div class="input-container">
+            <div class="input-wrapper">
+                <input type="text" id="messageInput" placeholder="Ask anything..." autocomplete="off">
+                <button id="sendButton">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="22" y1="2" x2="11" y2="13"></line>
+                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <footer class="legal-footer">
+            &copy; 2026 Law Bot AI. Professional Legal Assistant for Citizens.
+            <br>Disclaimer: This AI system provides information for educational/assisting purposes and does not
+            constitute formal legal advice.
+        </footer>
+    </div>
+    <div class="connection-status" id="connectionStatus"></div>
+
+    <script>
+        let ws;
+        const chatContainer = document.getElementById('chatContainer');
+        const messageInput = document.getElementById('messageInput');
+        const sendButton = document.getElementById('sendButton');
+        const typingIndicator = document.getElementById('typingIndicator');
+        const connectionStatus = document.getElementById('connectionStatus');
+        const sidebar = document.getElementById('sidebar');
+
+        let currentUserMessage = '';
+        let currentAiMessage = '';
+        let currentAiMessageElement = null;
+        let currentCaseId = crypto.randomUUID();
+        const activeRole = 'Citizen'; // LOCKED ROLE
+        let userLimitReached = false;
+
+        async function checkUserStatus() {
+            const token = localStorage.getItem('token');
+            if (!token) return;
+
+            try {
+                const response = await fetch('/api/user-status', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                const status = await response.json();
+
+                const indicator = document.getElementById('usageIndicator');
+                if (status.is_admin) {
+                    indicator.style.display = 'none';
+                } else {
+                    indicator.style.display = 'block';
+                    const remaining = Math.max(0, 2 - status.question_count);
+                    document.getElementById('remainingCount').innerText = remaining;
+                    if (remaining <= 0) {
+                        userLimitReached = true;
+                    }
+                }
+            } catch (err) {
+                console.error('Failed to fetch user status:', err);
+            }
+        }
+
+        function formatText(text) {
+            // Extract references for Evidence Box
+            const references = [];
+            const refRegex = /\*\*Title\*\*:\s*([^\n]+)\s*\*\*Page Numbers\*\*:\s*([^\n]+)/gi;
+            let match;
+            while ((match = refRegex.exec(text)) !== null) {
+                references.push({ title: match[1], pages: match[2] });
+            }
+
+            let formatted = text
+                .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+                .replace(/\*(.*?)\*/g, "<em>$1</em>")
+                .replace(/### (.*?)\n/g, "<h3>$1</h3>")
+                .replace(/## (.*?)\n/g, "<h2>$1</h2>")
+                .replace(/# (.*?)\n/g, "<h1>$1</h1>")
+                .replace(/\n/g, "<br>")
+                .replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>")
+                .replace(/<li>(.*?)<\/li>(?!<li>)/g, "<ul><li>$1</li></ul>")
+                .replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, `<a href="$2" target="_blank">$1</a>`);
+
+            // Add Evidence Box if references found
+            if (references.length > 0) {
+                let evidenceHtml = `<div class="evidence-box">
+                    <div class="evidence-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                        Study Evidence
+                    </div>`;
+                references.forEach(ref => {
+                    evidenceHtml += `<div class="evidence-item"><strong>${ref.title}</strong> (Page: ${ref.pages})</div>`;
+                });
+                evidenceHtml += `</div>`;
+                formatted += evidenceHtml;
+            }
+            return formatted;
+        }
+
+        function connectWebSocket() {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            ws = new WebSocket(`${protocol}//${window.location.host}/conversational_chat?role=${activeRole}`);
+
+            ws.onopen = () => {
+                console.log('Connected to WebSocket');
+                connectionStatus.textContent = 'Connected';
+                connectionStatus.className = 'connection-status connected';
+                connectionStatus.style.display = 'block';
+                setTimeout(() => {
+                    connectionStatus.style.display = 'none';
+                }, 3000);
+            };
+
+            ws.onclose = () => {
+                // ...
+                setTimeout(() => {
+                    reconnectWebSocket();
+                }, 5000);
+            };
+
+            ws.onmessage = (event) => {
+                console.log('Received message:', event.data);
+
+                // ✅ Hide typing indicator on response
+                typingIndicator.style.display = 'none';
+
+                if (event.data === '[DONE]') {
+                    // Save complete chat interaction with Role
+                    saveChatInteraction(currentCaseId, currentUserMessage, currentAiMessage);
+                    checkUserStatus(); // Update remaining count
+                    return;
+                }
+
+                // Handle usage limit blocks from backend
+                if (event.data.includes("Free usage limit reached")) {
+                    typingIndicator.style.display = 'none';
+                    userLimitReached = true;
+                    checkUserStatus();
+                }
+
+                if (!currentAiMessageElement) {
+                    currentAiMessage = event.data;
+                    addMessage(currentAiMessage, 'ai');
+                } else {
+                    currentAiMessage += event.data;
+                    const formattedMessage = formatText(currentAiMessage);
+                    currentAiMessageElement.querySelector('.message-content').innerHTML = formattedMessage;
+                }
+            };
+
+            // ... (existing scroll logic) ...
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+
+        function reconnectWebSocket() {
+            console.log('Attempting to reconnect...');
+            connectWebSocket();
+            loadHistory();
+        }
+
+        function addMessage(content, type) {
+            if (type === 'user') {
+                currentUserMessage = content;
+                currentAiMessage = '';
+                currentAiMessageElement = null;
+            }
+
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${type}-message`;
+
+            const header = document.createElement('div');
+            header.className = 'message-header';
+
+            const icon = document.createElement('div');
+            icon.className = `${type}-icon`;
+            icon.textContent = type === 'user' ? 'U' : 'L';
+
+            const name = document.createElement('span');
+            name.textContent = type === 'user' ? 'You' : 'Law Bot';
+
+            header.appendChild(icon);
+            header.appendChild(name);
+
+            const text = document.createElement('div');
+            text.className = 'message-content';
+            text.innerHTML = type === 'ai' ? formatText(content) : content;
+
+            messageDiv.appendChild(header);
+            messageDiv.appendChild(text);
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+
+            if (type === 'ai') {
+                currentAiMessageElement = messageDiv;
+            }
+        }
+
+        function sendMessage() {
+            const message = messageInput.value.trim();
+            if (!message) return;
+
+            if (userLimitReached) {
+                addMessage("### Free usage limit reached\n\nYou’ve reached the free usage limit (2 questions).\nFurther access is restricted.\n\nPlease contact the administrator for extended access:\nLinkedIn: [https://www.linkedin.com/in/vishwanath77](https://www.linkedin.com/in/vishwanath77)", 'ai');
+                return;
+            }
+
+            if (ws.readyState === WebSocket.OPEN) {
+                addMessage(message, 'user');
+                ws.send(message);
+                messageInput.value = '';
+
+                // ✅ Show typing indicator after sending
+                typingIndicator.style.display = 'block';
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+        }
+        const isAtBottom = chatContainer.scrollHeight - chatContainer.scrollTop === chatContainer.clientHeight;
+        if (isAtBottom) {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+
+        const historyList = document.getElementById('historyList');
+
+        async function loadHistory() {
+            const token = localStorage.getItem('token');
+            if (!token) return;
+
+            try {
+                // Role-locked: fetch filtered history
+                const response = await fetch(`/api/interactions?role=${activeRole}`, {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                const interactions = await response.json();
+                historyList.innerHTML = '';
+                interactions.forEach(item => {
+                    const div = document.createElement('div');
+                    div.className = 'history-item';
+
+                    // Readable preview
+                    const preview = item.query.split('.')[0].substring(0, 40) + (item.query.length > 40 ? '...' : '');
+
+                    div.innerHTML = `
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"></path></svg>
+                        <span>${preview}</span>
+                        <button class="delete-chat-item" onclick="event.stopPropagation(); deleteConversation('${item.case_id}')">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>
+                        </button>
+                    `;
+                    div.onclick = () => loadConversation(item.case_id);
+                    historyList.appendChild(div);
+                });
+            } catch (err) {
+                console.error('Failed to load history:', err);
+            }
+        }
+
+        async function loadConversation(caseId) {
+            const token = localStorage.getItem('token');
+            try {
+                // Role-locked conversation fetching
+                const response = await fetch(`/api/interactions/${caseId}?role=${activeRole}`, {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                const thread = await response.json();
+
+                currentCaseId = caseId;
+                chatContainer.innerHTML = ''; // Clear window
+
+                thread.forEach(msg => {
+                    addMessage(msg.query, 'user');
+                    // Render AI Response immediately
+                    const aiMsgDiv = document.createElement('div');
+                    aiMsgDiv.className = 'message ai-message';
+                    aiMsgDiv.innerHTML = `
+                        <div class="message-header">
+                            <div class="ai-icon">L</div>
+                            <span>Law Bot</span>
+                        </div>
+                        <div class="message-content">${formatText(msg.response)}</div>
+                    `;
+                    chatContainer.appendChild(aiMsgDiv);
+                });
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            } catch (err) {
+                console.error('Failed to load thread:', err);
+            }
+        }
+
+        async function deleteConversation(caseId) {
+            const token = localStorage.getItem('token');
+            try {
+                await fetch(`/api/interactions/${caseId}`, {
+                    method: 'DELETE',
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                if (currentCaseId === caseId) {
+                    newChat();
+                } else {
+                    loadHistory();
+                }
+            } catch (err) {
+                console.error('Failed to delete:', err);
+            }
+        }
+
+        function newChat() {
+            currentCaseId = crypto.randomUUID();
+            chatContainer.innerHTML = '';
+            messageInput.value = '';
+            messageInput.focus();
+            loadHistory();
+        }
+
+        // ✅ Modified: Uses Bearer token AND Role
+        const saveChatInteraction = async (caseId, query, response) => {
+            const token = localStorage.getItem('token');
+            if (!token) return;
+
+            try {
+                await fetch('/api/save-interaction', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${token}`
+                    },
+                    body: JSON.stringify({ caseId, query, response, role: activeRole })
+                });
+                loadHistory(); // Refresh sidebar history
+            } catch (error) {
+                console.error('Error saving chat:', error);
+            }
+        };
+
+        sendButton.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+
+        // Role Switching
+        document.querySelectorAll('.perspective-option').forEach(opt => {
+            opt.onclick = () => {
+                document.querySelectorAll('.perspective-option').forEach(o => o.classList.remove('active'));
+                opt.classList.add('active');
+                activeRole = opt.dataset.role;
+
+                // Refresh Context
+                newChat();
+                connectWebSocket(); // Reconnect with new role param
+            };
+        });
+
+        // --- User Profile Dropdown ---
+        const userProfileMenu = document.getElementById('userProfileMenu');
+        const dropdownMenu = document.getElementById('dropdownMenu');
+        const headerLogoutBtn = document.getElementById('headerLogoutBtn');
+
+        userProfileMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+            dropdownMenu.classList.toggle('show');
+        });
+
+        document.addEventListener('click', () => {
+            if (dropdownMenu.classList.contains('show')) {
+                dropdownMenu.classList.remove('show');
+            }
+        });
+
+        headerLogoutBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (window.dashboardEntrance) {
+                window.dashboardEntrance.logout();
+            } else {
+                localStorage.removeItem('token');
+                window.location.href = '/role';
+            }
+        });
+
+        // Init
+        const themeToggle = document.getElementById('themeToggle');
+        const body = document.body;
+        const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>`;
+        const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>`;
+
+        function updateTheme(isDark) {
+            if (isDark) {
+                body.classList.add('dark');
+                body.classList.remove('light');
+                themeToggle.innerHTML = moonIcon;
+                localStorage.setItem('theme', 'dark');
+            } else {
+                body.classList.add('light');
+                body.classList.remove('dark');
+                themeToggle.innerHTML = sunIcon;
+                localStorage.setItem('theme', 'light');
+            }
+        }
+
+        themeToggle.addEventListener('click', () => {
+            const isNowDark = !body.classList.contains('dark');
+            updateTheme(isNowDark);
+        });
+
+        // Initialize Theme
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        updateTheme(savedTheme === 'dark');
+
+        // Sidebar Collapse Logic
+        document.getElementById('collapseSidebar').onclick = () => {
+            document.body.classList.add('sidebar-collapsed');
+        };
+        document.getElementById('floatingToggle').onclick = () => {
+            document.body.classList.remove('sidebar-collapsed');
+        };
+        document.getElementById('newChatBtn').onclick = newChat;
+
+        checkUserStatus();
+        connectWebSocket();
+        loadHistory();
+
+    </script>
+</body>
+
+</html>

src/apps/templates/forgot_password.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forgot Password - Law Bot</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <style>
+        /* Reuse styles */
+        .auth-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+
+        .auth-container h2 {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 6px;
+            background: rgba(0, 0, 0, 0.2);
+            color: white;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 0.75rem;
+            background: #9b87f5;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background 0.3s;
+        }
+
+        .btn:hover {
+            background: #7e69d6;
+        }
+
+        .links {
+            margin-top: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .links a {
+            color: #D6BCFA;
+            text-decoration: none;
+        }
+
+        .links a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+
+<body class="dark">
+    <div class="auth-container">
+        <h2>Forgot Password</h2>
+        <form id="forgotPasswordForm">
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" required>
+            </div>
+            <button type="submit" class="btn">Send Reset Link</button>
+        </form>
+        <div class="links">
+            <a href="/login">Back to Login</a>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('forgotPasswordForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+
+            try {
+                const response = await fetch('/api/forgot-password', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email })
+                });
+
+                const data = await response.json();
+                if (response.ok) {
+                    alert('If an account exists with this email, a reset link has been sent.');
+                } else {
+                    alert(data.detail || 'Request failed');
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                alert('An error occurred');
+            }
+        });
+    </script>
+</body>
+
+</html>

src/apps/templates/judgecalender.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Court Calendar</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f5f7fa;
+        }
+        .header {
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: white;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+        }
+        .calendar-container {
+            padding: 1rem;
+        }
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .calendar-nav button {
+            background: #1e3c72;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 5px;
+        }
+        .calendar-day-header {
+            text-align: center;
+            font-weight: bold;
+            padding: 10px;
+            background: #e6f0ff;
+        }
+        .calendar-day {
+            border: 1px solid #ddd;
+            min-height: 100px;
+            padding: 5px;
+        }
+        .event {
+            background: #e6f0ff;
+            padding: 2px 5px;
+            margin: 2px 0;
+            border-radius: 3px;
+            font-size: 0.8rem;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>Court Calendar</h1>
+        <a href="judgedashboard.html" style="color: white;">← Back to Dashboard</a>
+    </header>
+
+    <div class="calendar-container">
+        <div class="calendar-header">
+            <h2 id="month-year">April 2024</h2>
+            <div class="calendar-nav">
+                <button id="prev-month"><i class="fas fa-chevron-left"></i></button>
+                <button id="next-month"><i class="fas fa-chevron-right"></i></button>
+            </div>
+        </div>
+        
+        <div class="calendar-grid" id="day-headers">
+            <div class="calendar-day-header">Sun</div>
+            <div class="calendar-day-header">Mon</div>
+            <div class="calendar-day-header">Tue</div>
+            <div class="calendar-day-header">Wed</div>
+            <div class="calendar-day-header">Thu</div>
+            <div class="calendar-day-header">Fri</div>
+            <div class="calendar-day-header">Sat</div>
+        </div>
+        
+        <div class="calendar-grid" id="calendar-days">
+            <!-- Days will be filled by JavaScript -->
+        </div>
+    </div>
+
+    <script>
+        // Calendar functionality
+        let currentDate = new Date();
+        
+        function renderCalendar() {
+            const monthYear = document.getElementById('month-year');
+            const calendarDays = document.getElementById('calendar-days');
+            
+            // Set month/year header
+            monthYear.textContent = new Intl.DateTimeFormat('en-US', { 
+                month: 'long', 
+                year: 'numeric' 
+            }).format(currentDate);
+            
+            // Clear previous days
+            calendarDays.innerHTML = '';
+            
+            // Get first day of month and total days
+            const firstDay = new Date(
+                currentDate.getFullYear(), 
+                currentDate.getMonth(), 
+                1
+            ).getDay();
+            
+            const daysInMonth = new Date(
+                currentDate.getFullYear(), 
+                currentDate.getMonth() + 1, 
+                0
+            ).getDate();
+            
+            // Add empty cells for days before first day
+            for(let i = 0; i < firstDay; i++) {
+                const emptyDay = document.createElement('div');
+                emptyDay.className = 'calendar-day';
+                calendarDays.appendChild(emptyDay);
+            }
+            
+            // Add days of the month
+            for(let day = 1; day <= daysInMonth; day++) {
+                const dayElement = document.createElement('div');
+                dayElement.className = 'calendar-day';
+                dayElement.textContent = day;
+                
+                // Add sample events (replace with real data)
+                if(day === 5) {
+                    const event = document.createElement('div');
+                    event.className = 'event';
+                    event.textContent = '10:00 AM - State vs. Johnson';
+                    dayElement.appendChild(event);
+                }
+                
+                calendarDays.appendChild(dayElement);
+            }
+        }
+        
+        // Navigation
+        document.getElementById('prev-month').addEventListener('click', () => {
+            currentDate.setMonth(currentDate.getMonth() - 1);
+            renderCalendar();
+        });
+        
+        document.getElementById('next-month').addEventListener('click', () => {
+            currentDate.setMonth(currentDate.getMonth() + 1);
+            renderCalendar();
+        });
+        
+        // Initial render
+        renderCalendar();
+    </script>
+</body>
+</html>

src/apps/templates/judgedashboard.html

@@ -0,0 +1,697 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Judge Dashboard</title>
+    <link rel="stylesheet" href="/static/css/entrance.css">
+    <script src="/static/js/entrance.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Reset and base styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        /* Header styles */
+        .header {
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: white;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .header h1 {
+            font-size: 1.8rem;
+            font-weight: 600;
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .user-info img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+
+        /* Main container */
+        .container {
+            display: grid;
+            grid-template-columns: 250px 1fr;
+            min-height: calc(100vh - 70px);
+        }
+
+        /* Sidebar styles */
+        .sidebar {
+            background: white;
+            padding: 1.5rem 1rem;
+            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
+            height: 100%;
+        }
+
+        .sidebar-menu {
+            list-style: none;
+            margin-top: 2rem;
+        }
+
+        .sidebar-menu li {
+            margin-bottom: 1rem;
+        }
+
+        .sidebar-menu a {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            padding: 0.8rem 1rem;
+            border-radius: 8px;
+            color: #555;
+            text-decoration: none;
+            transition: all 0.3s ease;
+
+        }
+
+        .sidebar-menu a:hover,
+        .sidebar-menu a.active {
+            background-color: #e6f0ff;
+            color: #1e3c72;
+        }
+
+        .sidebar-menu i {
+            font-size: 1.2rem;
+        }
+
+        /* Main content */
+        .main-content {
+            padding: 2rem;
+        }
+
+        .dashboard-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .dashboard-header h2 {
+            font-size: 1.5rem;
+            color: #1e3c72;
+        }
+
+        .stats-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .stat-card {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s ease;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .stat-card h3 {
+            font-size: 0.9rem;
+            color: #666;
+            margin-bottom: 0.5rem;
+        }
+
+        .stat-card p {
+            font-size: 1.8rem;
+            font-weight: 600;
+            color: #1e3c72;
+        }
+
+        /* Cases section */
+        .cases-section {
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .section-header h3 {
+            font-size: 1.3rem;
+            color: #1e3c72;
+        }
+
+        .view-all {
+            color: #1e3c72;
+            text-decoration: none;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .cases-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .case-card {
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 1.2rem;
+            transition: all 0.3s ease;
+        }
+
+        .case-card:hover {
+            border-color: #1e3c72;
+            box-shadow: 0 4px 12px rgba(30, 60, 114, 0.1);
+        }
+
+        .case-card h4 {
+            font-size: 1.1rem;
+            margin-bottom: 0.8rem;
+            color: #333;
+        }
+
+        .case-meta {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            font-size: 0.85rem;
+            color: #666;
+        }
+
+        .case-meta span {
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+        }
+
+        .case-meta i {
+            font-size: 0.9rem;
+        }
+
+        .case-status {
+            display: inline-block;
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            margin-bottom: 1rem;
+        }
+
+        .status-pending {
+            background-color: #fff3cd;
+            color: #856404;
+        }
+
+        .status-in-progress {
+            background-color: #cce5ff;
+            color: #004085;
+        }
+
+        .status-completed {
+            background-color: #d4edda;
+            color: #155724;
+        }
+
+        .case-actions {
+            display: flex;
+            gap: 0.8rem;
+            margin-top: 1rem;
+        }
+
+        .btn {
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            border: none;
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .btn-primary {
+            background-color: #1e3c72;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: #2a5298;
+        }
+
+        .btn-outline {
+            background: transparent;
+            border: 1px solid #1e3c72;
+            color: #1e3c72;
+        }
+
+        .btn-outline:hover {
+            background-color: #f0f5ff;
+        }
+
+        /* Chatbot button */
+        .chatbot-btn {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 4px 20px rgba(30, 60, 114, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 90;
+        }
+
+        .chatbot-btn:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 25px rgba(30, 60, 114, 0.4);
+        }
+
+        .chatbot-btn i {
+            font-size: 1.5rem;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 992px) {
+            .container {
+                grid-template-columns: 1fr;
+            }
+
+            .sidebar {
+                display: none;
+            }
+
+            .stats-container {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .stats-container {
+                grid-template-columns: 1fr;
+            }
+
+            .cases-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .header h1 {
+                font-size: 1.4rem;
+            }
+        }
+
+        /* Animation for case cards */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .case-card {
+            animation: fadeInUp 0.5s ease-out forwards;
+            opacity: 0;
+        }
+
+        .case-card:nth-child(1) {
+            animation-delay: 0.1s;
+        }
+
+        .case-card:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .case-card:nth-child(3) {
+            animation-delay: 0.3s;
+        }
+
+        .case-card:nth-child(4) {
+            animation-delay: 0.4s;
+        }
+
+        .case-card:nth-child(4) {
+            animation-delay: 0.4s;
+        }
+
+        /* --- USER DROPDOWN --- */
+        .user-profile-menu {
+            position: relative;
+            cursor: pointer;
+        }
+
+        .user-info {
+            cursor: pointer;
+            transition: opacity 0.3s;
+        }
+
+        .user-info:hover {
+            opacity: 0.9;
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: 150%;
+            right: 0;
+            width: 200px;
+            background: white;
+            /* Adapted for Judge Light theme */
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            display: none;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 1000;
+        }
+
+        .dropdown-menu.show {
+            display: flex;
+            animation: fadeIn 0.2s ease-out;
+        }
+
+        .dropdown-item {
+            padding: 1rem;
+            color: #333;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: background 0.2s;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .dropdown-item:last-child {
+            border-bottom: none;
+        }
+
+        .dropdown-item:hover {
+            background: #f8f9fa;
+            color: #1e3c72;
+        }
+
+        .dropdown-item.role-info {
+            background: #eef2f7;
+            font-weight: 600;
+            color: #1e3c72;
+            cursor: default;
+        }
+
+        .logout-action {
+            color: #dc3545;
+        }
+
+        .logout-action:hover {
+            background: #fff5f5;
+        }
+
+        .dropdown-item.usage-info {
+            background: #fff5f5;
+            font-size: 0.85rem;
+            color: #e53e3e;
+            font-weight: 600;
+            display: none;
+            padding: 1rem;
+            border-bottom: 1px solid #f0f0f0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Header -->
+    <header class="header">
+        <h1>Judge Dashboard</h1>
+        <div class="user-profile-menu" id="userProfileMenu">
+            <div class="user-info">
+                <span>Honorable Judge Smith</span>
+                <img src="/static/images/judge.jpg" alt="Judge Profile Picture">
+                <i class="fas fa-chevron-down" style="font-size: 0.8rem; margin-left: 0.5rem; opacity: 0.8;"></i>
+            </div>
+            <div class="dropdown-menu" id="dropdownMenu">
+                <div class="dropdown-item role-info">
+                    <i class="fas fa-user-shield"></i> Role: Judge
+                </div>
+                <div class="dropdown-item usage-info" id="usageInfo">
+                    <i class="fas fa-info-circle"></i> Questions Remaining: <span id="remainingCount">--</span>
+                </div>
+                <div class="dropdown-item logout-action" id="headerLogoutBtn">
+                    <i class="fas fa-sign-out-alt"></i> Logout
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Container -->
+    <div class="container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <div class="dashboard-header">
+                <h2>Today's Overview</h2>
+                <div class="date-display">Friday, April 5, 2024</div>
+            </div>
+
+            <!-- Stats Cards -->
+            <div class="stats-container">
+                <div class="stat-card">
+                    <h3>Pending Cases</h3>
+                    <p>24</p>
+                </div>
+                <div class="stat-card">
+                    <h3>Today's Hearings</h3>
+                    <p>5</p>
+                </div>
+                <div class="stat-card">
+                    <h3>Judgments Due</h3>
+                    <p>3</p>
+                </div>
+                <div class="stat-card">
+                    <h3>Urgent Matters</h3>
+                    <p>2</p>
+                </div>
+            </div>
+
+            <!-- Recent Cases Section -->
+            <section class="cases-section">
+                <div class="section-header">
+                    <h3>Recent Cases</h3>
+                    <a href="viewall.html" class="view-all">View All <i class="fas fa-chevron-right"></i></a>
+                </div>
+                <div class="cases-grid">
+                    <!-- Case Card 1 -->
+                    <div class="case-card">
+                        <h4>State vs. Johnson</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> CR-2024-0456</span>
+                            <span><i class="fas fa-clock"></i> 10:30 AM</span>
+                        </div>
+                        <span class="case-status status-pending">Pending Judgment</span>
+                        <p>Criminal case involving charges of fraud and embezzlement. Defense has filed motion to
+                            suppress.</p>
+
+                    </div>
+
+                    <!-- Case Card 2 -->
+                    <div class="case-card">
+                        <h4>Doe vs. Smith Corporation</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> CV-2024-0789</span>
+                            <span><i class="fas fa-clock"></i> 02:15 PM</span>
+                        </div>
+                        <span class="case-status status-in-progress">In Progress</span>
+                        <p>Civil lawsuit regarding wrongful termination. Plaintiff seeking damages of $2.5 million.</p>
+
+                    </div>
+
+                    <!-- Case Card 3 -->
+                    <div class="case-card">
+                        <h4>In re: Peterson Estate</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> PR-2024-0123</span>
+                            <span><i class="fas fa-clock"></i> 11:00 AM</span>
+                        </div>
+                        <span class="case-status status-completed">Completed</span>
+                        <p>Probate matter with dispute among heirs regarding distribution of assets.</p>
+
+                    </div>
+
+
+                </div>
+            </section>
+
+            <!-- Upcoming Hearings Section -->
+            <section class="cases-section">
+                <div class="section-header">
+                    <h3>Upcoming Hearings</h3>
+                    <a href="judgecalender.html" class="view-all">View Calendar <i class="fas fa-chevron-right"></i></a>
+                </div>
+                <div class="cases-grid">
+                    <!-- Hearing Card 1 -->
+                    <div class="case-card">
+                        <h4>Bail Hearing: State vs. Rodriguez</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> CR-2024-0678</span>
+                            <span><i class="fas fa-clock"></i> Tomorrow, 09:00 AM</span>
+                        </div>
+                        <span class="case-status status-pending">Bail Determination</span>
+                        <p>Defendant charged with aggravated assault. Prosecution opposing bail.</p>
+
+                    </div>
+
+                    <!-- Hearing Card 2 -->
+                    <div class="case-card">
+                        <h4>Motion Hearing: Williams vs. County</h4>
+                        <div class="case-meta">
+                            <span><i class="fas fa-hashtag"></i> CV-2024-0345</span>
+                            <span><i class="fas fa-clock"></i> Monday, 10:30 AM</span>
+                        </div>
+                        <span class="case-status status-in-progress">Motion to Dismiss</span>
+                        <p>Civil rights case. Defendant has filed motion to dismiss for failure to state a claim.</p>
+
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Chatbot Button -->
+    <div class="chatbot-btn" id="chatbotButton">
+        <i class="fas fa-robot"></i>
+    </div>
+
+    <script>
+        // --- User Profile Dropdown Logic ---
+        const userProfileMenu = document.getElementById('userProfileMenu');
+        const dropdownMenu = document.getElementById('dropdownMenu');
+        const headerLogoutBtn = document.getElementById('headerLogoutBtn');
+        const sidebarLogoutBtn = document.getElementById('logoutBtn'); // Keep existing backup
+
+        async function checkUserStatus() {
+            const token = localStorage.getItem('token');
+            if (!token) return;
+
+            try {
+                const response = await fetch('/api/user-status', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                const status = await response.json();
+
+                const usageInfo = document.getElementById('usageInfo');
+                if (status.is_admin) {
+                    usageInfo.style.display = 'none';
+                } else {
+                    usageInfo.style.display = 'flex';
+                    const remaining = Math.max(0, 2 - status.question_count);
+                    document.getElementById('remainingCount').innerText = remaining;
+                }
+            } catch (err) {
+                console.error('Failed to fetch user status:', err);
+            }
+        }
+
+        checkUserStatus();
+
+        userProfileMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+            dropdownMenu.classList.toggle('show');
+        });
+
+        document.addEventListener('click', () => {
+            if (dropdownMenu.classList.contains('show')) {
+                dropdownMenu.classList.remove('show');
+            }
+        });
+
+        function performLogout() {
+            if (window.dashboardEntrance) {
+                window.dashboardEntrance.logout();
+            } else {
+                localStorage.removeItem('token');
+                window.location.href = "/role";
+            }
+        }
+
+        headerLogoutBtn.addEventListener('click', performLogout);
+
+        // Keep existing sidebar logout functional
+        if (sidebarLogoutBtn) {
+            sidebarLogoutBtn.addEventListener("click", function (e) {
+                e.preventDefault();
+                performLogout();
+            });
+        }
+
+        // Simplified chatbot functionality
+        document.getElementById("chatbotButton").addEventListener("click", function () {
+            // Direct navigation without alert
+            window.location.href = "/judgechatbot.html";
+        });
+
+        // Real-time updates (unchanged)
+        setInterval(function () {
+            const urgentMatters = document.querySelector('.stat-card:nth-child(4) p');
+            const randomUpdate = Math.floor(Math.random() * 3);
+            if (randomUpdate === 1) {
+                const current = parseInt(urgentMatters.textContent);
+                urgentMatters.textContent = current + 1;
+                urgentMatters.parentElement.style.animation = "pulse 0.5s";
+                setTimeout(() => {
+                    urgentMatters.parentElement.style.animation = "";
+                }, 500);
+            }
+        }, 10000);
+    </script>
+</body>
+
+</html>

src/apps/templates/legalrights.html

@@ -0,0 +1,186 @@
+<!-- Add this section below the Safety Section in your existing code -->
+<section class="safety-tips" id="safety">
+    <div class="grid-container">
+        <div class="feature-card">
+            <h3>⚖️ Fundamental Legal Rights</h3>
+            <ul>
+                <li><i class="fas fa-balance-scale"></i> Right to equality (Article 14-18 of the Constitution)</li>
+                <li><i class="fas fa-university"></i> Right to education (Article 21A - Free and compulsory education)</li>
+                <li><i class="fas fa-gavel"></i> Right to legal aid under Article 39A</li>
+                <li><i class="fas fa-user-shield"></i> Protection from arrest in certain cases (Section 41A CrPC)</li>
+            </ul>
+        </div>
+
+        <div class="feature-card">
+            <h3>👩‍⚖️ Women's Legal Rights</h3>
+            <ul>
+                <li><i class="fas fa-venus"></i> Right to free legal aid under the Legal Services Authorities Act</li>
+                <li><i class="fas fa-home"></i> Right to residence (Protection of Women from Domestic Violence Act, 2005)</li>
+                <li><i class="fas fa-shield-alt"></i> Protection against sexual harassment at workplace (POSH Act, 2013)</li>
+                <li><i class="fas fa-exclamation-triangle"></i> Right to immediate police assistance under Zero FIR (CrPC 154)</li>
+            </ul>
+        </div>
+
+        <div class="feature-card">
+            <h3>🛑 Consumer Rights</h3>
+            <ul>
+                <li><i class="fas fa-receipt"></i> Right to be informed about products/services before purchase</li>
+                <li><i class="fas fa-shield-alt"></i> Right to seek redressal for unfair trade practices</li>
+                <li><i class="fas fa-handshake"></i> Right to consumer education and awareness</li>
+                <li><i class="fas fa-money-bill-wave"></i> Right to claim compensation for defective goods</li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Legal Resources Section -->
+    <div class="law-section">
+        <h2>Know Your Rights</h2>
+        <div class="quick-links">
+            <div class="safety-kit">
+                <p>✅ Keep a copy of important legal documents (Aadhaar, PAN, Passport)</p>
+                <p>✅ Know your rights under IPC, CrPC, and the Constitution</p>
+                <p>✅ Contact the National Legal Services Authority (NALSA) for legal aid</p>
+                <p>✅ Save helpline numbers: 1091 (Women), 14400 (Consumer complaints)</p>
+            </div>
+            <button class="safety-button" onclick="downloadLegalGuide()">
+                <i class="fas fa-download"></i>
+                Download Legal Rights Guide
+            </button>
+        </div>
+    </div>
+    <button class="back-button" onclick="goBack()">
+        <i class="fas fa-arrow-left"></i>
+        Back to Previous Page
+    </button>
+</section>
+
+<!-- CSS for Safety Section -->
+<style>
+.safety-tips {
+    position: relative;
+    padding: 8rem 5%;
+    background: #f9f9f9;
+}
+
+.safety-tips .grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 3rem;
+}
+
+.safety-tips .feature-card {
+    background: white;
+    border: 1px solid #ddd;
+    padding: 2.5rem;
+    border-radius: 12px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.safety-tips .feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.safety-tips h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: #333;
+}
+
+.safety-tips ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.safety-tips li {
+    padding: 1rem 0;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.safety-tips li:last-child {
+    border-bottom: none;
+}
+
+.safety-tips li:hover {
+    transform: translateX(8px);
+}
+
+.safety-tips i {
+    font-size: 1.1rem;
+    width: auto;
+    height: auto;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #e91e63;
+    color: white;
+    flex-shrink: 0;
+    transition: all 0.3s ease;
+}
+
+.safety-kit {
+    background: white;
+    border-radius: 12px;
+    padding: 2.5rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin: 4rem 0;
+}
+
+.safety-button {
+    background: #e91e63;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+}
+
+.safety-button:hover {
+    background: #d81b60;
+}
+.back-button {
+    background: #555;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+    .safety-tips {
+        padding: 4rem 5%;
+    }
+    .safety-tips .feature-card {
+        padding: 1.75rem;
+    }
+    .safety-kit {
+        padding: 1.5rem;
+    }
+}
+</style>
+
+<script>
+function downloadLegalGuide() {
+    alert("Downloading Legal Rights Handbook...");
+}
+function goBack() {
+    window.history.back();
+}
+</script>

src/apps/templates/login.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Law Bot</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <style>
+        .auth-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+
+        .auth-container h2 {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 6px;
+            background: rgba(0, 0, 0, 0.2);
+            color: white;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 0.75rem;
+            background: #9b87f5;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background 0.3s;
+        }
+
+        .btn:hover {
+            background: #7e69d6;
+        }
+
+        .links {
+            margin-top: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .links a {
+            color: #D6BCFA;
+            text-decoration: none;
+        }
+
+        .links a:hover {
+            text-decoration: underline;
+        }
+
+        /* Phase 2: Portal Overlay */
+        #portalOverlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(10, 10, 15, 0.95);
+            backdrop-filter: blur(20px);
+            z-index: 9999;
+            display: none;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            color: white;
+            opacity: 0;
+            transition: opacity 0.5s ease;
+        }
+
+        #portalOverlay.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .portal-pulse {
+            width: 80px;
+            height: 80px;
+            background: #9b87f5;
+            border-radius: 50%;
+            margin-bottom: 20px;
+            animation: portalPulse 2s infinite;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 0 30px rgba(155, 135, 245, 0.5);
+        }
+
+        .portal-pulse svg {
+            width: 40px;
+            height: 40px;
+            color: white;
+        }
+
+        @keyframes portalPulse {
+            0% {
+                transform: scale(0.95);
+                box-shadow: 0 0 0 0 rgba(155, 135, 245, 0.7);
+            }
+
+            70% {
+                transform: scale(1.1);
+                box-shadow: 0 0 0 20px rgba(155, 135, 245, 0);
+            }
+
+            100% {
+                transform: scale(0.95);
+                box-shadow: 0 0 0 0 rgba(155, 135, 245, 0);
+            }
+        }
+
+        .portal-message {
+            font-size: 1.5rem;
+            font-weight: 500;
+            letter-spacing: 1px;
+            text-align: center;
+        }
+
+        .portal-sub {
+            font-size: 0.9rem;
+            opacity: 0.6;
+            margin-top: 10px;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+        }
+
+        .btn:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+            background: #64748b;
+        }
+
+        .professional-footer {
+            margin-top: 2rem;
+            padding: 1.5rem 0;
+            text-align: center;
+            border-top: 1px solid rgba(155, 135, 245, 0.1);
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 0.85rem;
+            width: 100%;
+        }
+
+        .professional-footer a {
+            color: #9b87f5;
+            text-decoration: none;
+            font-weight: 500;
+        }
+
+        .professional-footer a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+
+<body class="dark">
+    <div id="portalOverlay">
+        <div class="portal-pulse">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+        </div>
+        <div class="portal-message" id="portalMessage">INITIALIZING TERMINAL</div>
+        <div class="portal-sub">Secure Professional Access</div>
+    </div>
+
+    <div class="auth-container">
+        <h2>Login</h2>
+        <form id="loginForm">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" required>
+            </div>
+            <button type="submit" class="btn">Login</button>
+        </form>
+        <div class="links">
+            <a href="/register" id="registerLink">Don't have an account? Register</a><br>
+            <a href="/forgot-password">Forgot Password?</a>
+        </div>
+        <footer class="professional-footer">
+            &copy; 2026 Law Bot AI. All Rights Reserved.
+            <br>
+            Developed & Managed by <a href="https://www.linkedin.com/in/vishwanath77" target="_blank">Vishwanath</a>
+        </footer>
+    </div>
+
+    <script>
+        const urlParams = new URLSearchParams(window.location.search);
+        const role = urlParams.get('role');
+
+        if (role) {
+            document.getElementById('registerLink').href = `/register?role=${role}`;
+        }
+
+        document.getElementById('loginForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+
+            try {
+                const response = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password, role })
+                });
+
+                const loginBtn = document.querySelector('.btn');
+                const originalBtnText = loginBtn.innerText;
+                loginBtn.disabled = true;
+                loginBtn.innerText = 'Verifying...';
+
+                const data = await response.json();
+                if (response.ok) {
+                    localStorage.setItem('token', data.access_token);
+
+                    const rolePages = {
+                        'Judge': 'judgedashboard.html',
+                        'Advocate/Lawyer': 'advocatedashboard.html',
+                        'Woman': 'woman.html',
+                        'Citizen': 'citizen.html',
+                        'Student': 'studentdashboard.html',
+                        'Minor': 'minor.html'
+                    };
+
+                    const roleMessages = {
+                        'Judge': 'Initializing Judicial Terminal...',
+                        'Advocate/Lawyer': 'Welcome back, Counselor. Securing portal...',
+                        'Woman': 'Welcome to Shakti Empowerment Hub...',
+                        'Citizen': 'Accessing Law Bot Public Terminal...',
+                        'Student': 'Setting up your legal study environment...',
+                        'Minor': 'Hello! Getting Law Bot ready for you...'
+                    };
+
+                    let userRole = data.role;
+                    if (data.role === 'Admin' && role) {
+                        userRole = role;
+                    } else if (!userRole && role) {
+                        userRole = role;
+                    }
+
+                    // Show professional portal overlay
+                    const overlay = document.getElementById('portalOverlay');
+                    const msgEl = document.getElementById('portalMessage');
+                    msgEl.innerText = roleMessages[userRole] || 'Access Granted. Entering Portal...';
+                    overlay.classList.add('show');
+
+                    // Brief delay for the aesthetic "Secure Entry" feel before redirect
+                    setTimeout(() => {
+                        if (userRole && rolePages[userRole]) {
+                            window.location.href = rolePages[userRole];
+                        } else {
+                            window.location.href = '/';
+                        }
+                    }, 1200);
+
+                } else {
+                    loginBtn.disabled = false;
+                    loginBtn.innerText = originalBtnText;
+                    alert(data.detail || 'Login failed');
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                alert('An error occurred');
+            }
+        });
+    </script>
+</body>
+
+</html>

src/apps/templates/minor.html

@@ -0,0 +1,897 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Law bot</title>
+    <link rel="stylesheet" href="/static/css/entrance.css">
+    <script src="/static/js/entrance.js" defer></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/modern-chat.css">
+    <style>
+        :root {
+            --primary-purple: #9b87f5;
+            --dark-purple: #1A1F2C;
+            --light-purple: #D6BCFA;
+            --neutral-gray: #8E9196;
+            --light-gray: #C8C8C9;
+            --off-white: #eee;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.dark {
+            color: var(--off-white);
+        }
+
+        body.light {
+            color: var(--dark-purple);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+
+        .app-title {
+            margin-left: 40px;
+            font-size: 2rem;
+            font-weight: 600;
+            background: linear-gradient(135deg, var(--primary-purple), var(--light-purple));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+
+        .theme-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            transition: opacity 0.3s;
+        }
+
+        .theme-toggle:hover {
+            opacity: 0.8;
+        }
+
+        .theme-toggle svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        .chat-container {
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-bottom: 2rem;
+            padding: 1rem;
+        }
+
+        .message {
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            border-radius: 8px;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .user-message {
+            background-color: rgba(155, 135, 245, 0.1);
+        }
+
+        .ai-message {
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(200, 200, 201, 0.2);
+        }
+
+        body.light .user-message {
+            background-color: var(--off-white);
+        }
+
+        body.light .ai-message {
+            background-color: #ffffff;
+            border: 1px solid var(--light-gray);
+        }
+
+        .message-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+
+        .sidebar-welcome {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(200, 200, 201, 0.15);
+            margin-bottom: 1.5rem;
+        }
+
+        .user-icon,
+        .ai-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin-right: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+
+        .user-icon {
+            background-color: var(--primary-purple);
+            color: white;
+        }
+
+        .ai-icon {
+            background-color: var(--light-purple);
+            color: var(--dark-purple);
+        }
+
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem;
+            background-color: var(--input-bg);
+            border-top: 1px solid var(--sidebar-border);
+        }
+
+        body.light .input-container {
+            background-color: #ffffff;
+            border-top: 1px solid var(--light-gray);
+        }
+
+        .input-wrapper {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        #messageInput {
+            width: 100%;
+            padding: 1rem;
+            padding-right: 3rem;
+            border: 1px solid rgba(200, 200, 201, 0.3);
+            border-radius: 8px;
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s;
+            background-color: transparent;
+            color: inherit;
+        }
+
+        body.light #messageInput {
+            border: 1px solid var(--light-gray);
+        }
+
+        #messageInput:focus {
+            border-color: var(--primary-purple);
+        }
+
+        #sendButton {
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            opacity: 0.8;
+            transition: opacity 0.3s;
+        }
+
+        #sendButton:hover {
+            opacity: 1;
+        }
+
+        .typing-indicator {
+            padding: 1rem;
+            color: var(--neutral-gray);
+            font-style: italic;
+            display: none;
+        }
+
+        .welcome-title {
+            margin: 6rem 0 0.5rem 0;
+            text-align: center;
+            color: var(--neutral-gray);
+            padding: 1rem;
+            font-size: 1.24rem;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .welcome-subtitle {
+            line-height: 1.6;
+            font-size: 1.1rem;
+            color: var(--neutral-gray);
+            max-width: 900px;
+            margin: 0 auto;
+            font-weight: 800;
+            color: var(--primary-purple);
+
+        }
+
+        .sidebar-welcome {
+            margin-bottom: 2rem;
+            padding: 0 1rem;
+            border-bottom: none;
+        }
+
+        .role-selection-link {
+            display: inline-flex;
+            align-items: center;
+            gap: initial;
+            color: var(--light-purple);
+            text-decoration: none;
+            margin-top: auto;
+            padding: auto;
+            transition: opacity 0.3s ease;
+            position: absolute;
+            top: 550px;
+            left: 30px;
+
+        }
+
+        .role-selection-link:hover {
+            opacity: 0.8;
+        }
+
+        .role-selection-link svg {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+        }
+
+        /* Add this media query for mobile responsiveness */
+        @media (max-width: 480px) {
+            .welcome-message p {
+                font-size: 1rem;
+                padding: 0 1rem;
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .connection-status {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            display: none;
+        }
+
+        .connection-status.connected {
+            background-color: #4ade80;
+            color: white;
+        }
+
+        .connection-status.disconnected {
+            background-color: #ef4444;
+            color: white;
+        }
+
+        /* Styling for formatted text */
+        .message-content {
+            line-height: 1.5;
+        }
+
+        .message-content h1,
+        .message-content h2,
+        .message-content h3 {
+            margin: 1rem 0 0.5rem;
+            font-weight: 600;
+        }
+
+        .message-content h1 {
+            font-size: 1.5rem;
+        }
+
+        .message-content h2 {
+            font-size: 1.25rem;
+        }
+
+        .message-content h3 {
+            font-size: 1.1rem;
+        }
+
+        .message-content ul,
+        .message-content ol {
+            margin-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .message-content a {
+            color: var(--primary-purple);
+            text-decoration: none;
+        }
+
+        .message-content a:hover {
+            text-decoration: underline;
+        }
+
+        .usage-indicator {
+            padding: 4px 12px;
+            background: rgba(155, 135, 245, 0.1);
+            border: 1px solid rgba(155, 135, 245, 0.3);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            color: var(--primary-purple);
+            font-weight: 500;
+            display: none;
+            /* Hidden by default for Admins */
+        }
+    </style>
+</head>
+
+<button class="sidebar-floating-toggle" id="floatingToggle">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 12h18M3 6h18M3 18h18" />
+    </svg>
+</button>
+
+<aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+        <button class="new-chat-btn" id="newChatBtn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 5v14M5 12h14" />
+            </svg>
+            New Chat
+        </button>
+        <button class="collapse-toggle" id="collapseSidebar" title="Collapse sidebar">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M15 18l-6-6 6-6" />
+            </svg>
+        </button>
+    </div>
+    <div class="sidebar-title">Recent Learning</div>
+    <div class="history-list" id="historyList">
+        <!-- Recent prompts will appear here -->
+    </div>
+
+    <div class="perspective-container" style="display: none;">
+        <div class="sidebar-title">Answer Perspective</div>
+        <div class="perspective-list">
+            <div class="perspective-option active" data-role="Minor">🧒 Minor</div>
+        </div>
+    </div>
+
+
+</aside>
+
+<!-- Existing messages will be added here dynamically -->
+<div class="container">
+    <header class="header">
+        <h1 class="app-title">Law Bot (Minor)</h1>
+        <div class="header-right">
+            <div class="usage-indicator" id="usageIndicator">
+                Questions Remaining: <span id="remainingCount">--</span>
+            </div>
+            <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                <!-- Icon injected by JS -->
+            </button>
+            <div class="user-profile-menu" id="userProfileMenu">
+                <div class="profile-icon-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="12" cy="7" r="4"></circle>
+                    </svg>
+                </div>
+                <div class="dropdown-menu" id="dropdownMenu">
+                    <div class="dropdown-item role-info">
+                        Role: Minor
+                    </div>
+                    <a href="#" class="dropdown-item logout-action" id="headerLogoutBtn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                            <polyline points="16 17 21 12 16 7"></polyline>
+                            <line x1="21" y1="12" x2="9" y2="12"></line>
+                        </svg>
+                        Logout
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <div class="welcome-title">Welcome, Future Leader! 👦 </div>
+    <div class="welcome-subtitle">Let’s learn about laws in a fun, easy way! What would you like to understand
+        today?</div>
+
+
+
+    <div class="chat-container" id="chatContainer">
+        <div class="typing-indicator" id="typingIndicator">
+            <svg class="gavel-icon" viewBox="0 0 24 24" fill="none" stroke="var(--minor-color)" stroke-width="2">
+                <circle cx="12" cy="12" r="10" />
+                <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+                <line x1="9" y1="9" x2="9.01" y2="9" />
+                <line x1="15" y1="9" x2="15.01" y2="9" />
+            </svg>
+            <span>Searching simple answers for you...</span>
+        </div>
+    </div>
+    <div class="input-container">
+        <div class="input-wrapper">
+            <input type="text" id="messageInput" placeholder="Ask anything..." autocomplete="off">
+            <button id="sendButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="22" y1="2" x2="11" y2="13"></line>
+                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                </svg>
+            </button>
+        </div>
+    </div>
+    <footer class="professional-footer">
+        &copy; 2026 Law Bot AI. All Rights Reserved.
+        <br>
+        Developed & Managed by <a href="https://www.linkedin.com/in/vishwanath77" target="_blank">Vishwanath</a>
+    </footer>
+</div>
+<div class="connection-status" id="connectionStatus"></div>
+
+<script>
+    let ws;
+    const chatContainer = document.getElementById('chatContainer');
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('sendButton');
+    const typingIndicator = document.getElementById('typingIndicator');
+    const connectionStatus = document.getElementById('connectionStatus');
+    const sidebar = document.getElementById('sidebar');
+
+    let currentUserMessage = '';
+    let currentAiMessage = '';
+    let currentAiMessageElement = null;
+    let currentCaseId = crypto.randomUUID();
+    const activeRole = 'Minor'; // LOCKED ROLE
+    let userLimitReached = false;
+
+    async function checkUserStatus() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch('/api/user-status', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const status = await response.json();
+
+            const indicator = document.getElementById('usageIndicator');
+            if (status.is_admin) {
+                indicator.style.display = 'none';
+            } else {
+                indicator.style.display = 'block';
+                const remaining = Math.max(0, 2 - status.question_count);
+                document.getElementById('remainingCount').innerText = remaining;
+                if (remaining <= 0) {
+                    userLimitReached = true;
+                }
+            }
+        } catch (err) {
+            console.error('Failed to fetch user status:', err);
+        }
+    }
+
+    function formatText(text) {
+        // Extract references for Evidence Box
+        const references = [];
+        const refRegex = /\*\*Title\*\*:\s*([^\n]+)\s*\*\*Page Numbers\*\*:\s*([^\n]+)/gi;
+        let match;
+        while ((match = refRegex.exec(text)) !== null) {
+            references.push({ title: match[1], pages: match[2] });
+        }
+
+        let formatted = text
+            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+            .replace(/\*(.*?)\*/g, "<em>$1</em>")
+            .replace(/### (.*?)\n/g, "<h3>$1</h3>")
+            .replace(/## (.*?)\n/g, "<h2>$1</h2>")
+            .replace(/# (.*?)\n/g, "<h1>$1</h1>")
+            .replace(/\n/g, "<br>")
+            .replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>")
+            .replace(/<li>(.*?)<\/li>(?!<li>)/g, "<ul><li>$1</li></ul>")
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, `<a href="$2" target="_blank">$1</a>`);
+
+        // Add Evidence Box if references found
+        if (references.length > 0) {
+            let evidenceHtml = `<div class="evidence-box">
+                    <div class="evidence-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                        Where I found this
+                    </div>`;
+            references.forEach(ref => {
+                evidenceHtml += `<div class="evidence-item"><strong>${ref.title}</strong> (Page: ${ref.pages})</div>`;
+            });
+            evidenceHtml += `</div>`;
+            formatted += evidenceHtml;
+        }
+        return formatted;
+    }
+
+    function connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${protocol}//${window.location.host}/conversational_chat?role=${activeRole}`);
+
+        ws.onopen = () => {
+            console.log('Connected to WebSocket');
+            connectionStatus.textContent = 'Connected';
+            connectionStatus.className = 'connection-status connected';
+            connectionStatus.style.display = 'block';
+            setTimeout(() => {
+                connectionStatus.style.display = 'none';
+            }, 3000);
+        };
+
+        ws.onclose = () => {
+            console.log('Disconnected from WebSocket');
+            connectionStatus.textContent = 'Trying to reconnect...';
+            connectionStatus.className = 'connection-status disconnected';
+            connectionStatus.style.display = 'block';
+
+            // Exponential backoff for reconnection
+            const backoff = Math.min(30000, (window._reconnectCount || 0) * 2000 + 1000);
+            window._reconnectCount = (window._reconnectCount || 0) + 1;
+
+            setTimeout(() => {
+                reconnectWebSocket();
+                loadHistory();
+            }, backoff);
+        };
+
+        ws.onerror = (error) => {
+            console.error('WebSocket Error:', error);
+        };
+
+
+        ws.onmessage = (event) => {
+            console.log('Received message:', event.data);
+
+            // ✅ Hide typing indicator on response
+            typingIndicator.style.display = 'none';
+
+            if (event.data === '[DONE]') {
+                // Save complete chat interaction
+                saveChatInteraction(currentCaseId, currentUserMessage, currentAiMessage);
+                checkUserStatus(); // Update remaining count
+                return;
+            }
+
+            // Handle usage limit blocks from backend
+            if (event.data.includes("Free usage limit reached")) {
+                typingIndicator.style.display = 'none';
+                userLimitReached = true;
+                checkUserStatus();
+            }
+
+            if (!currentAiMessageElement) {
+                currentAiMessage = event.data;
+                addMessage(currentAiMessage, 'ai');
+            } else {
+                currentAiMessage += event.data;
+                const formattedMessage = formatText(currentAiMessage);
+                currentAiMessageElement.querySelector('.message-content').innerHTML = formattedMessage;
+            }
+        };
+
+        // ✅ Scroll fix (move into sendMessage function if needed)
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    function reconnectWebSocket() {
+        console.log('Attempting to reconnect...');
+        connectWebSocket();
+        loadHistory();
+    }
+
+    function addMessage(content, type) {
+        if (type === 'user') {
+            currentUserMessage = content;
+            currentAiMessage = '';
+            currentAiMessageElement = null;
+        }
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${type}-message`;
+
+        const header = document.createElement('div');
+        header.className = 'message-header';
+
+        const icon = document.createElement('div');
+        icon.className = `${type}-icon`;
+        icon.textContent = type === 'user' ? 'U' : 'L';
+
+        const name = document.createElement('span');
+        name.textContent = type === 'user' ? 'You' : 'Law Bot';
+
+        header.appendChild(icon);
+        header.appendChild(name);
+
+        const text = document.createElement('div');
+        text.className = 'message-content';
+        text.innerHTML = type === 'ai' ? formatText(content) : content;
+
+        messageDiv.appendChild(header);
+        messageDiv.appendChild(text);
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+
+        if (type === 'ai') {
+            currentAiMessageElement = messageDiv;
+        }
+    }
+
+    function sendMessage() {
+        const message = messageInput.value.trim();
+        if (!message) return;
+
+        if (userLimitReached) {
+            addMessage("### Free usage limit reached\n\nYou’ve reached the free usage limit (2 questions).\nFurther access is restricted.\n\nPlease contact the administrator for extended access:\nLinkedIn: [https://www.linkedin.com/in/vishwanath77](https://www.linkedin.com/in/vishwanath77)", 'ai');
+            return;
+        }
+
+        if (!activeRole) {
+            addMessage("⚠️ Please select an Answer Perspective in the sidebar to proceed.", 'ai');
+            return;
+        }
+
+        if (ws.readyState === WebSocket.OPEN) {
+            addMessage(message, 'user');
+            ws.send(message);
+            messageInput.value = '';
+
+            // ✅ Show typing indicator after sending
+            typingIndicator.style.display = 'block';
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }
+    const isAtBottom = chatContainer.scrollHeight - chatContainer.scrollTop === chatContainer.clientHeight;
+    if (isAtBottom) {
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+
+    const historyList = document.getElementById('historyList');
+
+    async function loadHistory() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch(`/api/interactions?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const interactions = await response.json();
+            historyList.innerHTML = '';
+            interactions.forEach(item => {
+                const div = document.createElement('div');
+                div.className = 'history-item';
+
+                // Readable preview: first sentence or truncated query
+                const preview = item.query.split('.')[0].substring(0, 40) + (item.query.length > 40 ? '...' : '');
+
+                div.innerHTML = `
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"></path></svg>
+                        <span>${preview}</span>
+                        <button class="delete-chat-item" onclick="event.stopPropagation(); deleteConversation('${item.case_id}')">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>
+                        </button>
+                    `;
+                div.onclick = () => loadConversation(item.case_id);
+                historyList.appendChild(div);
+            });
+        } catch (err) {
+            console.error('Failed to load history:', err);
+        }
+    }
+
+    async function loadConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            const response = await fetch(`/api/interactions/${caseId}?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const thread = await response.json();
+
+            currentCaseId = caseId;
+            chatContainer.innerHTML = ''; // Clear window
+
+            thread.forEach(msg => {
+                addMessage(msg.query, 'user');
+                // Render AI Response immediately
+                const aiMsgDiv = document.createElement('div');
+                aiMsgDiv.className = 'message ai-message';
+                aiMsgDiv.innerHTML = `
+                        <div class="message-header">
+                            <div class="ai-icon">L</div>
+                            <span>Law Bot</span>
+                        </div>
+                        <div class="message-content">${formatText(msg.response)}</div>
+                    `;
+                chatContainer.appendChild(aiMsgDiv);
+            });
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        } catch (err) {
+            console.error('Failed to load thread:', err);
+        }
+    }
+
+    async function deleteConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            await fetch(`/api/interactions/${caseId}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (currentCaseId === caseId) {
+                newChat();
+            } else {
+                loadHistory();
+            }
+        } catch (err) {
+            console.error('Failed to delete:', err);
+        }
+    }
+
+    function newChat() {
+        currentCaseId = crypto.randomUUID();
+        chatContainer.innerHTML = '';
+        messageInput.value = '';
+        messageInput.focus();
+        loadHistory();
+    }
+
+    // ✅ Modified: Uses Bearer token
+    const saveChatInteraction = async (caseId, query, response) => {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            await fetch('/api/save-interaction', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ caseId, query, response, role: activeRole })
+            });
+            loadHistory(); // Refresh sidebar history
+        } catch (error) {
+            console.error('Error saving chat:', error);
+        }
+    };
+
+    sendButton.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+
+    // --- User Profile Dropdown ---
+    const userProfileMenu = document.getElementById('userProfileMenu');
+    const dropdownMenu = document.getElementById('dropdownMenu');
+    const headerLogoutBtn = document.getElementById('headerLogoutBtn');
+
+    userProfileMenu.addEventListener('click', (e) => {
+        e.stopPropagation();
+        dropdownMenu.classList.toggle('show');
+    });
+
+    document.addEventListener('click', () => {
+        if (dropdownMenu.classList.contains('show')) {
+            dropdownMenu.classList.remove('show');
+        }
+    });
+
+    headerLogoutBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (window.dashboardEntrance) {
+            window.dashboardEntrance.logout();
+        } else {
+            localStorage.removeItem('token');
+            window.location.href = '/role';
+        }
+    });
+
+    // Theme toggle
+    const themeToggle = document.getElementById('themeToggle');
+    const body = document.body;
+    const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>`;
+    const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>`;
+
+    function updateTheme(isDark) {
+        if (isDark) {
+            body.classList.add('dark');
+            body.classList.remove('light');
+            themeToggle.innerHTML = moonIcon;
+            localStorage.setItem('theme', 'dark');
+        } else {
+            body.classList.add('light');
+            body.classList.remove('dark');
+            themeToggle.innerHTML = sunIcon;
+            localStorage.setItem('theme', 'light');
+        }
+    }
+
+    themeToggle.addEventListener('click', () => {
+        const isNowDark = !body.classList.contains('dark');
+        updateTheme(isNowDark);
+    });
+
+    // Initialize Theme
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    updateTheme(savedTheme === 'dark');
+
+    // Sidebar Collapse Logic
+    document.getElementById('collapseSidebar').onclick = () => {
+        document.body.classList.add('sidebar-collapsed');
+    };
+    document.getElementById('floatingToggle').onclick = () => {
+        document.body.classList.remove('sidebar-collapsed');
+    };
+    document.getElementById('newChatBtn').onclick = newChat;
+
+    // Perspective Selection
+    document.querySelectorAll('.perspective-option').forEach(opt => {
+        opt.onclick = () => {
+            document.querySelectorAll('.perspective-option').forEach(o => o.classList.remove('active'));
+            opt.classList.add('active');
+            activeRole = opt.dataset.role;
+            localStorage.setItem('activeRole', activeRole);
+            // No session reset needed, just role update for next message
+        };
+    });
+
+    checkUserStatus();
+    connectWebSocket();
+    loadHistory();
+
+</script>
+</body>
+
+</html>

src/apps/templates/register.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - Law Bot</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <style>
+        /* Reuse styles from login.html */
+        .auth-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+
+        .auth-container h2 {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 6px;
+            background: rgba(0, 0, 0, 0.2);
+            color: white;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 0.75rem;
+            background: #9b87f5;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background 0.3s;
+        }
+
+        .btn:hover {
+            background: #7e69d6;
+        }
+
+        .links {
+            margin-top: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .links a {
+            color: #D6BCFA;
+            text-decoration: none;
+        }
+
+        .links a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+
+<body class="dark">
+    <div class="auth-container">
+        <h2>Register</h2>
+        <form id="registerForm">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" required>
+            </div>
+            <input type="hidden" id="role">
+            <button type="submit" class="btn">Register</button>
+        </form>
+        <div class="links">
+            <a href="/login" id="loginLink">Already have an account? Login</a>
+        </div>
+    </div>
+
+    <script>
+        const urlParams = new URLSearchParams(window.location.search);
+        const role = urlParams.get('role');
+        if (role) {
+            document.getElementById('role').value = role;
+            document.getElementById('loginLink').href = `/login?role=${role}`;
+        }
+
+        document.getElementById('registerForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const username = document.getElementById('username').value;
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            const roleValue = document.getElementById('role').value;
+
+            try {
+                const response = await fetch('/api/register', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, email, password, role: roleValue })
+                });
+
+                const data = await response.json();
+                if (response.ok) {
+                    alert('Registration successful! Please login.');
+                    window.location.href = `/login?role=${roleValue}`;
+                } else {
+                    alert(data.detail || 'Registration failed');
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                alert('An error occurred');
+            }
+        });
+    </script>
+</body>
+
+</html>

src/apps/templates/reset_password.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reset Password - Law Bot</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <style>
+        .auth-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            color: white;
+        }
+
+        .auth-container h2 {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 6px;
+            background: rgba(0, 0, 0, 0.2);
+            color: white;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 0.75rem;
+            background: #9b87f5;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background 0.3s;
+        }
+
+        .btn:hover {
+            background: #7e69d6;
+        }
+
+        .links {
+            margin-top: 1rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .links a {
+            color: #D6BCFA;
+            text-decoration: none;
+        }
+
+        .links a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+
+<body class="dark">
+    <div class="auth-container">
+        <h2>Reset Password</h2>
+        <form id="resetPasswordForm">
+            <div class="form-group">
+                <label for="newPassword">New Password</label>
+                <input type="password" id="newPassword" required>
+            </div>
+            <div class="form-group">
+                <label for="confirmPassword">Confirm Password</label>
+                <input type="password" id="confirmPassword" required>
+            </div>
+            <button type="submit" class="btn">Reset Password</button>
+        </form>
+        <div class="links">
+            <a href="/login">Back to Login</a>
+        </div>
+    </div>
+
+    <script>
+        const urlParams = new URLSearchParams(window.location.search);
+        const token = urlParams.get('token');
+
+        if (!token) {
+            alert('Invalid reset link');
+            window.location.href = '/login';
+        }
+
+        document.getElementById('resetPasswordForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const newPassword = document.getElementById('newPassword').value;
+            const confirmPassword = document.getElementById('confirmPassword').value;
+
+            if (newPassword !== confirmPassword) {
+                alert('Passwords do not match');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/reset-password', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ token, new_password: newPassword })
+                });
+
+                const data = await response.json();
+                if (response.ok) {
+                    alert('Password reset successful! Please login with your new password.');
+                    window.location.href = '/login';
+                } else {
+                    alert(data.detail || 'Password reset failed');
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                alert('An error occurred');
+            }
+        });
+    </script>
+</body>
+
+</html>

src/apps/templates/resources.html

@@ -0,0 +1,213 @@
+<!-- Add this section below the Safety Section in your existing code -->
+<section class="safety-tips" id="safety">
+    <div class="grid-container">
+        <div class="feature-card">
+    <h3>🧠 Mental Health</h3>
+    <ul>
+        <li><i class="fas fa-phone-alt"></i> NIMHANS helpline: 080-4611 0007</li>
+        
+        <!-- Yoga & Meditation Section -->
+        <li class="nested-item">
+            <div class="expandable-section">
+                <i class="fas fa-spa"></i> Yoga & Meditation Centers in Chennai
+                <i class="fas fa-chevron-down toggle-icon"></i>
+            </div>
+            <ul class="nested-list">
+                <li class="nested-list"  onclick="window.open('https://www.ishayoga.org', '_blank')">
+                    <strong>Isha Yoga Center</strong><br>
+                    <small>Velliangiri Foothills | +91 83000 83111</small>
+                </li>
+                <li class="nested-list" onclick="window.open('https://aurosociety.org/', '_blank')">
+                    <strong>Sri Aurobindo Society</strong><br>
+                    <small>Alwarpet | +91 44 2499 6284</small>
+                </li>
+                <li class="nested-list" onclick="window.open('https://www.artofliving.org', '_blank')">
+                    <strong>Art of Living Center</strong><br>
+                    <small>Teynampet | +91 96000 96000</small>
+                </li>
+                <li class="nested-list" onclick="window.open('https://www.sivananda.org.in', '_blank')">
+                    <strong>Sivananda Yoga Vedanta</strong><br>
+                    <small>Mylapore | +91 44 2491 7726</small>
+                </li>
+            
+            </ul>
+        </li>
+        
+        <!-- Additional mental health resources can go here -->
+    
+    </ul>
+</div>
+
+        <div class="feature-card">
+            <h3>⚖️ Legal Remedies</h3>
+            <ul>
+                <li><i class="fas fa-clipboard-check"></i> Right to Constitutional Remedies (Article 32)</li>
+                <li><i class="fas fa-user-shield"></i> Right to Legal Aid</li>
+                <li><i class="fas fa-scale-balanced"></i> File Public Interest Litigation (PIL)</li>
+                <li><i class="fas fa-landmark"></i> Seek Protection Under Special Laws</li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Emergency Legal Assistance Section -->
+    <div class="law-section">
+        <h2>Immediate Health Assistance</h2>
+        <div class="quick-links">
+            <div class="safety-kit">
+                <p>✅ Dial 108 for ambulance services</p>
+                <p>✅ Telemedicine - eSanjeevani: World's largest telemedicine service</p>
+                <p>✅ Approach Lok Adalats for quick settlements</p>
+                <p>✅ Jan Aushadhi generic medicine stores locato</p>
+            </div>
+            <button class="safety-button" onclick="downloadLegalGuide()">
+                <i class="fas fa-download"></i>
+                Download Legal Rights Guide
+            </button>
+        </div>
+    </div>
+    
+    <button class="back-button" onclick="goBack()">
+        <i class="fas fa-arrow-left"></i>
+        Back to Previous Page
+    </button>
+</section>
+
+<!-- Existing CSS for Safety Section -->
+<style>
+.nested-list {
+        cursor: pointer;
+    }
+.safety-tips {
+    position: relative;
+    padding: 8rem 5%;
+    background: #f9f9f9;
+}
+
+.safety-tips .grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 3rem;
+}
+
+.safety-tips .feature-card {
+    background: white;
+    border: 1px solid #ddd;
+    padding: 2.5rem;
+    border-radius: 12px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.safety-tips .feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.safety-tips h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: #333;
+}
+
+.safety-tips ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.safety-tips li {
+    padding: 1rem 0;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.safety-tips li:last-child {
+    border-bottom: none;
+}
+
+.safety-tips li:hover {
+    transform: translateX(8px);
+}
+
+.safety-tips i {
+    font-size: 1.1rem;
+    width: auto;
+    height: auto;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #e91e63;
+    color: white;
+    flex-shrink: 0;
+    transition: all 0.3s ease;
+}
+
+.safety-kit {
+    background: white;
+    border-radius: 12px;
+    padding: 2.5rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin: 4rem 0;
+}
+
+.safety-button {
+    background: #e91e63;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+}
+
+.safety-button:hover {
+    background: #d81b60;
+}
+
+.back-button {
+    background: #555;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    margin-top: 2rem;
+}
+
+.back-button:hover {
+    background: #333;
+}
+
+@media (max-width: 768px) {
+    .safety-tips {
+        padding: 4rem 5%;
+    }
+    .safety-tips .feature-card {
+        padding: 1.75rem;
+    }
+    .safety-kit {
+        padding: 1.5rem;
+    }
+}
+</style>
+
+<script>
+function downloadLegalGuide() {
+    alert("Downloading Legal Rights Guide...");
+}
+
+function goBack() {
+    window.history.back();
+}
+</script>

src/apps/templates/roleselection.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Select Your Role</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <style>
+        .professional-footer {
+            margin-top: 2rem;
+            padding: 1rem 0;
+            text-align: center;
+            border-top: 1px solid rgba(155, 135, 245, 0.1);
+            color: rgb(19 18 18 / 50%);
+            font-size: 0.8rem;
+            width: 100%;
+        }
+
+        .professional-footer a {
+            color: #9b87f5;
+            text-decoration: none;
+            font-weight: 500;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="overlay">
+        <div class="role-selection">
+            <h2>Who are you?</h2>
+            <p>Please select your role to continue:</p>
+            <div class="roles">
+                <button class="role" data-role="Judge">👨⚖️ Judge</button>
+                <button class="role" data-role="Advocate/Lawyer">👩⚖️ Advocate</button>
+                <button class="role" data-role="Woman">🛡️ Woman (Special Provisions)</button>
+                <button class="role" data-role="Citizen">👤 Citizen</button>
+                <button class="role" data-role="Student">🎓 Student</button>
+                <button class="role" data-role="Minor">👦 Minor</button>
+            </div>
+            <footer class="professional-footer">
+                &copy; 2026 Law Bot AI | Managed by <a href="https://www.linkedin.com/in/vishwanath77"
+                    target="_blank">Vishwanath</a>
+            </footer>
+        </div>
+    </div>
+
+    <script src="/static/js/roleselection.js?v=3"></script>
+</body>
+
+</html>

src/apps/templates/safetytips.html

@@ -0,0 +1,186 @@
+<!-- Add this section below the Safety Section in your existing code -->
+<section class="safety-tips" id="safety">
+    <div class="grid-container">
+        <div class="feature-card">
+            <h3>🛡️ General Safety Tips</h3>
+            <ul>
+                <li><i class="fas fa-map-marker-alt"></i> Always share live location with trusted contacts</li>
+                <li><i class="fas fa-phone-volume"></i> Keep emergency numbers on speed dial (112, 1091)</li>
+                <li><i class="fas fa-car"></i> Verify cab details before boarding (Check number plate)</li>
+                <li><i class="fas fa-lock"></i> Avoid isolated ATMs/restrooms at night</li>
+            </ul>
+        </div>
+
+        <div class="feature-card">
+            <h3>🚆 Public Transport Safety</h3>
+            <ul>
+                <li><i class="fas fa-subway"></i> Use women-only coaches in metros/trains</li>
+                <li><i class="fas fa-bus"></i> Prefer front seats in buses</li>
+                <li><i class="fas fa-phone"></i> Download RailMadad app (152 for railway emergencies)</li>
+                <li><i class="fas fa-road"></i> Avoid empty bus stops at night</li>
+            </ul>
+        </div>
+
+        <div class="feature-card">
+            <h3>🏢 Workplace Safety</h3>
+            <ul>
+                <li><i class="fas fa-gavel"></i> Know POSH Act 2013 provisions</li>
+                <li><i class="fas fa-file-alt"></i> Document all incidents formally</li>
+                <li><i class="fas fa-users"></i> Use company transport for late hours</li>
+                <li><i class="fas fa-exclamation-triangle"></i> Report inappropriate behavior immediately</li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Emergency Preparedness Section -->
+    <div class="law-section">
+        <h2>Emergency Preparedness Kit</h2>
+        <div class="quick-links">
+            <div class="safety-kit">
+                <p>✅ Keep pepper spray in easy-to-reach pocket</p>
+                <p>✅ Save ICE (In Case of Emergency) contacts. (Settings > Safety & Emergency > Emergency Contacts)
+                <p>✅ Create code word with family for danger situations</p>
+                <p>✅ Keep ₹100 cash separate for emergencies</p>
+            </div>
+            <button class="safety-button" onclick="downloadSafetyGuide()">
+                <i class="fas fa-download"></i>
+                Download Safety Guide
+            </button>
+        </div>
+    </div>
+    <button class="back-button" onclick="goBack()">
+        <i class="fas fa-arrow-left"></i>
+        Back to Previous Page
+    </button>
+</section>
+
+<!-- CSS for Safety Section -->
+<style>
+.safety-tips {
+    position: relative;
+    padding: 8rem 5%;
+    background: #f9f9f9;
+}
+
+.safety-tips .grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 3rem;
+}
+
+.safety-tips .feature-card {
+    background: white;
+    border: 1px solid #ddd;
+    padding: 2.5rem;
+    border-radius: 12px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.safety-tips .feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.safety-tips h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: #333;
+}
+
+.safety-tips ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.safety-tips li {
+    padding: 1rem 0;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.safety-tips li:last-child {
+    border-bottom: none;
+}
+
+.safety-tips li:hover {
+    transform: translateX(8px);
+}
+
+.safety-tips i {
+    font-size: 1.1rem;
+    width: auto;
+    height: auto;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #e91e63;
+    color: white;
+    flex-shrink: 0;
+    transition: all 0.3s ease;
+}
+
+.safety-kit {
+    background: white;
+    border-radius: 12px;
+    padding: 2.5rem;
+    border: 1px solid #ddd;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin: 4rem 0;
+}
+
+.safety-button {
+    background: #e91e63;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+}
+
+.safety-button:hover {
+    background: #d81b60;
+}
+.back-button {
+    background: #555;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+    .safety-tips {
+        padding: 4rem 5%;
+    }
+    .safety-tips .feature-card {
+        padding: 1.75rem;
+    }
+    .safety-kit {
+        padding: 1.5rem;
+    }
+}
+</style>
+
+<script>
+function downloadSafetyGuide() {
+    alert("Downloading Women's Safety Handbook...");
+}
+function goBack() {
+    window.history.back();
+}
+</script>

src/apps/templates/script.js

@@ -0,0 +1,42 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("registerForm");
+    if (!form) return;
+
+    form.addEventListener("submit", handleSubmit);
+
+    async function handleSubmit(e) {
+        e.preventDefault();
+
+        const getValue = id => document.getElementById(id)?.value.trim();
+
+        const user = {
+            name: getValue("name"),
+            email: getValue("email"),
+            password: getValue("password")
+        };
+
+        if (!user.name || !user.email || !user.password) {
+            alert("Please fill all fields");
+            return;
+        }
+
+        try {
+            const response = await fetch("/api/register", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(user)
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) throw new Error(data.message || "Registration failed");
+
+            alert("Success! Redirecting...");
+            setTimeout(() => window.location.href = "login.html", 500);
+
+        } catch (error) {
+            console.error("Error:", error);
+            alert(error.message);
+        }
+    }
+});

src/apps/templates/studentchatbot.html

@@ -0,0 +1,855 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Law bot</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/modern-chat.css">
+    <style>
+        :root {
+            --primary-purple: #9b87f5;
+            --dark-purple: #1A1F2C;
+            --light-purple: #D6BCFA;
+            --neutral-gray: #8E9196;
+            --light-gray: #C8C8C9;
+            --off-white: #eee;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.dark {
+            color: var(--off-white);
+        }
+
+        body.light {
+            color: var(--dark-purple);
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+
+        .app-title {
+            margin-left: 40px;
+            font-size: 2rem;
+            font-weight: 600;
+            background: linear-gradient(135deg, var(--primary-purple), var(--light-purple));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+
+        .theme-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            transition: opacity 0.3s;
+        }
+
+        .theme-toggle:hover {
+            opacity: 0.8;
+        }
+
+        .theme-toggle svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        .chat-container {
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-bottom: 2rem;
+            padding: 1rem;
+        }
+
+        .message {
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            border-radius: 8px;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .user-message {
+            background-color: rgba(155, 135, 245, 0.1);
+        }
+
+        .ai-message {
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(200, 200, 201, 0.2);
+        }
+
+        body.light .user-message {
+            background-color: var(--off-white);
+        }
+
+        body.light .ai-message {
+            background-color: #ffffff;
+            border: 1px solid var(--light-gray);
+        }
+
+        .message-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+
+        .sidebar-welcome {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(200, 200, 201, 0.15);
+            margin-bottom: 1.5rem;
+        }
+
+        .user-icon,
+        .ai-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin-right: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+
+        .user-icon {
+            background-color: var(--primary-purple);
+            color: white;
+        }
+
+        .ai-icon {
+            background-color: var(--light-purple);
+            color: var(--dark-purple);
+        }
+
+        .input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem;
+            background-color: var(--input-bg);
+            border-top: 1px solid var(--sidebar-border);
+        }
+
+        body.light .input-container {
+            background-color: #ffffff;
+            border-top: 1px solid var(--light-gray);
+        }
+
+        .input-wrapper {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        #messageInput {
+            width: 100%;
+            padding: 1rem;
+            padding-right: 3rem;
+            border: 1px solid rgba(200, 200, 201, 0.3);
+            border-radius: 8px;
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s;
+            background-color: transparent;
+            color: inherit;
+        }
+
+        body.light #messageInput {
+            border: 1px solid var(--light-gray);
+        }
+
+        #messageInput:focus {
+            border-color: var(--primary-purple);
+        }
+
+        #sendButton {
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0.5rem;
+            color: var(--primary-purple);
+            opacity: 0.8;
+            transition: opacity 0.3s;
+        }
+
+        #sendButton:hover {
+            opacity: 1;
+        }
+
+        .typing-indicator {
+            padding: 1rem;
+            color: var(--neutral-gray);
+            font-style: italic;
+            display: none;
+        }
+
+        .welcome-title {
+            margin: 6rem 0 0.5rem 0;
+            text-align: center;
+            color: var(--neutral-gray);
+            padding: 1rem;
+            font-size: 1.24rem;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        .welcome-subtitle {
+            line-height: 1.6;
+            font-size: 1.1rem;
+            color: var(--neutral-gray);
+            max-width: 800px;
+            margin: 0 auto;
+            font-weight: 400;
+            color: var(--primary-purple);
+        }
+
+        .sidebar-welcome {
+            margin-bottom: 2rem;
+            padding: 0 1rem;
+            border-bottom: none;
+        }
+
+        .role-selection-link {
+            display: inline-flex;
+            align-items: center;
+            gap: initial;
+            color: var(--light-purple);
+            text-decoration: none;
+            margin-top: auto;
+            padding: auto;
+            transition: opacity 0.3s ease;
+            position: absolute;
+            top: 550px;
+            left: 30px;
+
+        }
+
+        .role-selection-link:hover {
+            opacity: 0.8;
+        }
+
+        .role-selection-link svg {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+        }
+
+        /* Add this media query for mobile responsiveness */
+        @media (max-width: 480px) {
+            .welcome-message p {
+                font-size: 1rem;
+                padding: 0 1rem;
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .connection-status {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            display: none;
+        }
+
+        .connection-status.connected {
+            background-color: #4ade80;
+            color: white;
+        }
+
+        .connection-status.disconnected {
+            background-color: #ef4444;
+            color: white;
+        }
+
+        /* Styling for formatted text */
+        .message-content {
+            line-height: 1.5;
+        }
+
+        .message-content h1,
+        .message-content h2,
+        .message-content h3 {
+            margin: 1rem 0 0.5rem;
+            font-weight: 600;
+        }
+
+        .message-content h1 {
+            font-size: 1.5rem;
+        }
+
+        .message-content h2 {
+            font-size: 1.25rem;
+        }
+
+        .message-content h3 {
+            font-size: 1.1rem;
+        }
+
+        .message-content ul,
+        .message-content ol {
+            margin-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .message-content a {
+            color: var(--primary-purple);
+            text-decoration: none;
+        }
+
+        .message-content a:hover {
+            text-decoration: underline;
+        }
+
+        .usage-indicator {
+            padding: 4px 12px;
+            background: rgba(155, 135, 245, 0.1);
+            border: 1px solid rgba(155, 135, 245, 0.3);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            color: var(--primary-purple);
+            font-weight: 500;
+            display: none;
+            /* Hidden by default for Admins */
+        }
+    </style>
+</head>
+
+<button class="sidebar-floating-toggle" id="floatingToggle">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 12h18M3 6h18M3 18h18" />
+    </svg>
+</button>
+
+<aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+        <button class="new-chat-btn" id="newChatBtn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 5v14M5 12h14" />
+            </svg>
+            New Chat
+        </button>
+        <button class="collapse-toggle" id="collapseSidebar" title="Collapse sidebar">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M15 18l-6-6 6-6" />
+            </svg>
+        </button>
+    </div>
+    <div class="sidebar-title">Recent Research</div>
+    <div class="history-list" id="historyList">
+        <!-- Recent prompts will appear here -->
+    </div>
+
+    <div class="perspective-container" style="display: none;">
+        <div class="sidebar-title">Answer Perspective</div>
+        <div class="perspective-list">
+            <div class="perspective-option active" data-role="Student">🎓 Student</div>
+        </div>
+    </div>
+
+
+</aside>
+
+<!-- Existing messages will be added here dynamically -->
+<div class="container">
+    <header class="header">
+        <h1 class="app-title">Law Bot (Student)</h1>
+        <div class="header-right">
+            <div class="usage-indicator" id="usageIndicator">
+                Questions Remaining: <span id="remainingCount">--</span>
+            </div>
+            <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                <!-- Icon injected by JS -->
+            </button>
+
+            <a href="/studentdashboard.html" class="dashboard-link" title="Back to Dashboard">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="14" width="7" height="7"></rect>
+                    <rect x="3" y="14" width="7" height="7"></rect>
+                </svg>
+            </a>
+        </div>
+    </header>
+    <div class="welcome-title">Welcome, Future Advocate! 👨‍🎓</div>
+    <div class="welcome-subtitle">Ready to sharpen your legal reasoning? How can I assist your preparations today?
+    </div>
+
+
+    <div class="chat-container" id="chatContainer">
+        <div class="typing-indicator" id="typingIndicator">
+            <svg class="gavel-icon" viewBox="0 0 24 24" fill="none" stroke="var(--student-color)" stroke-width="2">
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+            </svg>
+            <span>Researching for your studies...</span>
+        </div>
+    </div>
+    <div class="input-container">
+        <div class="input-wrapper">
+            <input type="text" id="messageInput" placeholder="Ask anything..." autocomplete="off">
+            <button id="sendButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="22" y1="2" x2="11" y2="13"></line>
+                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                </svg>
+            </button>
+        </div>
+    </div>
+    <footer class="professional-footer">
+        &copy; 2026 Law Bot AI. All Rights Reserved.
+        <br>
+        Developed & Managed by <a href="https://www.linkedin.com/in/vishwanath77" target="_blank">Vishwanath</a>
+    </footer>
+</div>
+<div class="connection-status" id="connectionStatus"></div>
+
+<script>
+    let ws;
+    const chatContainer = document.getElementById('chatContainer');
+    const messageInput = document.getElementById('messageInput');
+    const sendButton = document.getElementById('sendButton');
+    const typingIndicator = document.getElementById('typingIndicator');
+    const connectionStatus = document.getElementById('connectionStatus');
+    const sidebar = document.getElementById('sidebar');
+
+    let currentUserMessage = '';
+    let currentAiMessage = '';
+    let currentAiMessageElement = null;
+    let currentCaseId = crypto.randomUUID();
+    const activeRole = 'Student'; // LOCKED ROLE
+    let userLimitReached = false;
+
+    async function checkUserStatus() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch('/api/user-status', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const status = await response.json();
+
+            const indicator = document.getElementById('usageIndicator');
+            if (status.is_admin) {
+                indicator.style.display = 'none';
+            } else {
+                indicator.style.display = 'block';
+                const remaining = Math.max(0, 2 - status.question_count);
+                document.getElementById('remainingCount').innerText = remaining;
+                if (remaining <= 0) {
+                    userLimitReached = true;
+                }
+            }
+        } catch (err) {
+            console.error('Failed to fetch user status:', err);
+        }
+    }
+
+    function formatText(text) {
+        // Extract references for Evidence Box
+        const references = [];
+        const refRegex = /\*\*Title\*\*:\s*([^\n]+)\s*\*\*Page Numbers\*\*:\s*([^\n]+)/gi;
+        let match;
+        while ((match = refRegex.exec(text)) !== null) {
+            references.push({ title: match[1], pages: match[2] });
+        }
+
+        let formatted = text
+            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+            .replace(/\*(.*?)\*/g, "<em>$1</em>")
+            .replace(/### (.*?)\n/g, "<h3>$1</h3>")
+            .replace(/## (.*?)\n/g, "<h2>$1</h2>")
+            .replace(/# (.*?)\n/g, "<h1>$1</h1>")
+            .replace(/\n/g, "<br>")
+            .replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>")
+            .replace(/<li>(.*?)<\/li>(?!<li>)/g, "<ul><li>$1</li></ul>")
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, `<a href="$2" target="_blank">$1</a>`);
+
+        // Add Evidence Box if references found
+        if (references.length > 0) {
+            let evidenceHtml = `<div class="evidence-box">
+                    <div class="evidence-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                        Study Evidence
+                    </div>`;
+            references.forEach(ref => {
+                evidenceHtml += `<div class="evidence-item"><strong>${ref.title}</strong> (Page: ${ref.pages})</div>`;
+            });
+            evidenceHtml += `</div>`;
+            formatted += evidenceHtml;
+        }
+        return formatted;
+    }
+
+    function connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${protocol}//${window.location.host}/conversational_chat?role=${activeRole}`);
+
+        ws.onopen = () => {
+            console.log('Connected to WebSocket');
+            connectionStatus.textContent = 'Connected';
+            connectionStatus.className = 'connection-status connected';
+            connectionStatus.style.display = 'block';
+            setTimeout(() => {
+                connectionStatus.style.display = 'none';
+            }, 3000);
+        };
+
+        ws.onclose = () => {
+            console.log('Disconnected from WebSocket');
+            connectionStatus.textContent = 'Reconnecting...';
+            connectionStatus.className = 'connection-status disconnected';
+            connectionStatus.style.display = 'block';
+
+            // Exponential backoff for reconnection
+            const backoff = Math.min(30000, (window._reconnectCount || 0) * 2000 + 1000);
+            window._reconnectCount = (window._reconnectCount || 0) + 1;
+
+            setTimeout(() => {
+                reconnectWebSocket();
+                loadHistory();
+            }, backoff);
+        };
+
+        ws.onerror = (error) => {
+            console.error('WebSocket Error:', error);
+        };
+
+
+        ws.onmessage = (event) => {
+            console.log('Received message:', event.data);
+
+            // ✅ Hide typing indicator on response
+            typingIndicator.style.display = 'none';
+
+            if (event.data === '[DONE]') {
+                // Save complete chat interaction
+                saveChatInteraction(currentCaseId, currentUserMessage, currentAiMessage);
+                checkUserStatus(); // Update remaining count
+                return;
+            }
+
+            // Handle usage limit blocks from backend
+            if (event.data.includes("Free usage limit reached")) {
+                typingIndicator.style.display = 'none';
+                userLimitReached = true;
+                checkUserStatus();
+            }
+
+            if (!currentAiMessageElement) {
+                currentAiMessage = event.data;
+                addMessage(currentAiMessage, 'ai');
+            } else {
+                currentAiMessage += event.data;
+                const formattedMessage = formatText(currentAiMessage);
+                currentAiMessageElement.querySelector('.message-content').innerHTML = formattedMessage;
+            }
+        };
+
+        // ✅ Scroll fix (move into sendMessage function if needed)
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    function reconnectWebSocket() {
+        console.log('Attempting to reconnect...');
+        connectWebSocket();
+        loadHistory();
+    }
+
+    function addMessage(content, type) {
+        if (type === 'user') {
+            currentUserMessage = content;
+            currentAiMessage = '';
+            currentAiMessageElement = null;
+        }
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${type}-message`;
+
+        const header = document.createElement('div');
+        header.className = 'message-header';
+
+        const icon = document.createElement('div');
+        icon.className = `${type}-icon`;
+        icon.textContent = type === 'user' ? 'U' : 'L';
+
+        const name = document.createElement('span');
+        name.textContent = type === 'user' ? 'You' : 'Law Bot';
+
+        header.appendChild(icon);
+        header.appendChild(name);
+
+        const text = document.createElement('div');
+        text.className = 'message-content';
+        text.innerHTML = type === 'ai' ? formatText(content) : content;
+
+        messageDiv.appendChild(header);
+        messageDiv.appendChild(text);
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+
+        if (type === 'ai') {
+            currentAiMessageElement = messageDiv;
+        }
+    }
+
+    function sendMessage() {
+        const message = messageInput.value.trim();
+        if (!message) return;
+
+        if (userLimitReached) {
+            addMessage("### Free usage limit reached\n\nYou’ve reached the free usage limit (2 questions).\nFurther access is restricted.\n\nPlease contact the administrator for extended access:\nLinkedIn: [https://www.linkedin.com/in/vishwanath77](https://www.linkedin.com/in/vishwanath77)", 'ai');
+            return;
+        }
+
+        if (!activeRole) {
+            addMessage("⚠️ Please select an Answer Perspective in the sidebar to proceed.", 'ai');
+            return;
+        }
+
+        if (ws.readyState === WebSocket.OPEN) {
+            addMessage(message, 'user');
+            ws.send(message);
+            messageInput.value = '';
+
+            // ✅ Show typing indicator after sending
+            typingIndicator.style.display = 'block';
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    }
+    const isAtBottom = chatContainer.scrollHeight - chatContainer.scrollTop === chatContainer.clientHeight;
+    if (isAtBottom) {
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+
+    const historyList = document.getElementById('historyList');
+
+    async function loadHistory() {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            const response = await fetch(`/api/interactions?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const interactions = await response.json();
+            historyList.innerHTML = '';
+            interactions.forEach(item => {
+                const div = document.createElement('div');
+                div.className = 'history-item';
+
+                // Readable preview: first sentence or truncated query
+                const preview = item.query.split('.')[0].substring(0, 40) + (item.query.length > 40 ? '...' : '');
+
+                div.innerHTML = `
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"></path></svg>
+                        <span>${preview}</span>
+                        <button class="delete-chat-item" onclick="event.stopPropagation(); deleteConversation('${item.case_id}')">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>
+                        </button>
+                    `;
+                div.onclick = () => loadConversation(item.case_id);
+                historyList.appendChild(div);
+            });
+        } catch (err) {
+            console.error('Failed to load history:', err);
+        }
+    }
+
+    async function loadConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            const response = await fetch(`/api/interactions/${caseId}?role=${activeRole}`, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            const thread = await response.json();
+
+            currentCaseId = caseId;
+            chatContainer.innerHTML = ''; // Clear window
+
+            thread.forEach(msg => {
+                addMessage(msg.query, 'user');
+                // Render AI Response immediately
+                const aiMsgDiv = document.createElement('div');
+                aiMsgDiv.className = 'message ai-message';
+                aiMsgDiv.innerHTML = `
+                        <div class="message-header">
+                            <div class="ai-icon">L</div>
+                            <span>Law Bot</span>
+                        </div>
+                        <div class="message-content">${formatText(msg.response)}</div>
+                    `;
+                chatContainer.appendChild(aiMsgDiv);
+            });
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        } catch (err) {
+            console.error('Failed to load thread:', err);
+        }
+    }
+
+    async function deleteConversation(caseId) {
+        const token = localStorage.getItem('token');
+        try {
+            await fetch(`/api/interactions/${caseId}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (currentCaseId === caseId) {
+                newChat();
+            } else {
+                loadHistory();
+            }
+        } catch (err) {
+            console.error('Failed to delete:', err);
+        }
+    }
+
+    function newChat() {
+        currentCaseId = crypto.randomUUID();
+        chatContainer.innerHTML = '';
+        messageInput.value = '';
+        messageInput.focus();
+        loadHistory();
+    }
+
+    // ✅ Modified: Uses Bearer token
+    const saveChatInteraction = async (caseId, query, response) => {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        try {
+            await fetch('/api/save-interaction', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ caseId, query, response, role: activeRole })
+            });
+            loadHistory(); // Refresh sidebar history
+        } catch (error) {
+            console.error('Error saving chat:', error);
+        }
+    };
+
+    sendButton.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+
+
+
+
+    // Theme toggle
+    const themeToggle = document.getElementById('themeToggle');
+    const body = document.body;
+    const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>`;
+    const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>`;
+
+    function updateTheme(isDark) {
+        if (isDark) {
+            body.classList.add('dark');
+            body.classList.remove('light');
+            themeToggle.innerHTML = moonIcon;
+            localStorage.setItem('theme', 'dark');
+        } else {
+            body.classList.add('light');
+            body.classList.remove('dark');
+            themeToggle.innerHTML = sunIcon;
+            localStorage.setItem('theme', 'light');
+        }
+    }
+
+    themeToggle.addEventListener('click', () => {
+        const isNowDark = !body.classList.contains('dark');
+        updateTheme(isNowDark);
+    });
+
+    // Initialize Theme
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    updateTheme(savedTheme === 'dark');
+
+    // Sidebar Collapse Logic
+    document.getElementById('collapseSidebar').onclick = () => {
+        document.body.classList.add('sidebar-collapsed');
+    };
+    document.getElementById('floatingToggle').onclick = () => {
+        document.body.classList.remove('sidebar-collapsed');
+    };
+    document.getElementById('newChatBtn').onclick = newChat;
+
+    // Perspective Selection
+    document.querySelectorAll('.perspective-option').forEach(opt => {
+        opt.onclick = () => {
+            document.querySelectorAll('.perspective-option').forEach(o => o.classList.remove('active'));
+            opt.classList.add('active');
+            activeRole = opt.dataset.role;
+            localStorage.setItem('activeRole', activeRole);
+            // No session reset needed, just role update for next message
+        };
+    });
+
+    checkUserStatus();
+    connectWebSocket();
+    loadHistory();
+
+</script>
+</body>
+
+</html>

src/apps/templates/studentdashboard.html

@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Law Student Dashboard</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/static/css/entrance.css">
+  <script src="/static/js/entrance.js" defer></script>
+  <style>
+    /* Reset */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: "Segoe UI", sans-serif;
+    }
+
+    body {
+      background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+      min-height: 100vh;
+      display: flex;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: 250px;
+      background: #0f172a;
+      color: white;
+      padding: 20px;
+      position: fixed;
+      height: 100vh;
+      overflow-y: auto;
+      transition: all 0.3s;
+    }
+
+    .sidebar h2 {
+      text-align: center;
+      margin-bottom: 30px;
+      font-size: 24px;
+      border-bottom: 2px solid #64748b;
+      padding-bottom: 10px;
+    }
+
+    .sidebar a {
+      display: block;
+      color: #e2e8f0;
+      padding: 12px 15px;
+      margin: 10px 0;
+      border-radius: 8px;
+      transition: 0.3s ease;
+      text-decoration: none;
+    }
+
+    .sidebar a:hover {
+      background: #1e293b;
+    }
+
+    /* Main Content */
+    .main {
+      margin-left: 270px;
+      padding: 30px;
+      flex: 1;
+    }
+
+    .header {
+      font-size: 28px;
+      font-weight: bold;
+      color: #1e293b;
+      margin-bottom: 25px;
+    }
+
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+      gap: 20px;
+    }
+
+    .card {
+      background: white;
+      padding: 20px;
+      border-radius: 15px;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .card:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    .card::before {
+      content: '';
+      position: absolute;
+      width: 150%;
+      height: 150%;
+      background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), transparent);
+      top: -50%;
+      left: -50%;
+      transition: all 0.5s ease;
+    }
+
+    .card:hover::before {
+      top: -30%;
+      left: -30%;
+    }
+
+    .card h3 {
+      margin-bottom: 10px;
+      color: #0f172a;
+    }
+
+    .card p {
+      color: #475569;
+    }
+
+    /* Chatbot Button */
+    .chatbot-btn {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      background: #2563eb;
+      color: white;
+      border: none;
+      padding: 15px 20px;
+      border-radius: 50px;
+      font-size: 16px;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+      cursor: pointer;
+      transition: 0.3s ease;
+    }
+
+    .chatbot-btn:hover {
+      background: #1e40af;
+    }
+
+    @media(max-width: 768px) {
+      .sidebar {
+        width: 100%;
+        height: auto;
+        position: relative;
+      }
+
+      .main {
+        margin-left: 0;
+      }
+    }
+
+    #content-area {
+      margin-top: 40px;
+      padding: 25px;
+      background: #ffffff;
+      border-radius: 15px;
+      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+      display: none;
+    }
+
+    #content-area h2 {
+      color: #0f172a;
+      margin-bottom: 15px;
+    }
+
+    #content-area ul {
+      list-style: disc;
+      padding-left: 20px;
+    }
+
+    #content-area li {
+      margin-bottom: 10px;
+      color: #334155;
+    }
+
+    #content-area a {
+      text-decoration: none;
+      color: #2563eb;
+    }
+
+    #content-area a:hover {
+      text-decoration: underline;
+    }
+
+    #content-area {
+      animation: fadeIn 0.3s ease-in-out;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .back-video {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      min-height: 100%;
+      min-width: 100%;
+      z-index: -1;
+    }
+
+    @media (min-aspect-ratio:16/9) {
+      .back-video {
+        width: auto;
+        height: auto;
+      }
+    }
+
+    @media (max-aspect-ratio:16/9) {
+      .back-video {
+        width: auto;
+        height: 100%;
+      }
+    }
+
+    /* User Profile Dropdown Styles */
+    .user-profile-menu {
+      position: fixed;
+      top: 20px;
+      right: 30px;
+      z-index: 1001;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .profile-icon-btn {
+      width: 42px;
+      height: 42px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #2563eb, #1e40af);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 1.2rem;
+      border: 2px solid rgba(255, 255, 255, 0.4);
+      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+    }
+
+    .profile-icon-btn:hover {
+      transform: scale(1.1);
+      border-color: white;
+      box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
+    }
+
+    .dropdown-menu {
+      position: absolute;
+      top: 120%;
+      right: 0;
+      width: 200px;
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      display: none;
+      flex-direction: column;
+      border: 1px solid rgba(37, 99, 235, 0.1);
+      animation: dropdownFade 0.3s ease;
+    }
+
+    @keyframes dropdownFade {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .dropdown-menu.show {
+      display: flex;
+    }
+
+    .dropdown-item {
+      padding: 12px 20px;
+      font-size: 0.95rem;
+      color: #1e293b;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      transition: background 0.2s;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    .dropdown-item:last-child {
+      border-bottom: none;
+    }
+
+    .dropdown-item:hover {
+      background: rgba(37, 99, 235, 0.05);
+    }
+
+    .dropdown-item.role-info {
+      font-weight: 600;
+      color: #2563eb;
+      background: rgba(37, 99, 235, 0.05);
+      cursor: default;
+    }
+
+    .logout-action {
+      color: #dc2626;
+      font-weight: 500;
+    }
+
+    .logout-action:hover {
+      background: rgba(220, 38, 38, 0.05);
+    }
+  </style>
+</head>
+
+<body>
+  <div class="sidebar">
+    <h2>Law Student</h2>
+    <a href="#" onclick="showSidebarContent('laws')">📜 Indian Laws</a>
+    <a href="#" onclick="showSidebarContent('materials')">📚 Study Materials</a>
+    <a href="#" onclick="showSidebarContent('cases')">🧠 Case Studies</a>
+    <a href="#" onclick="showSidebarContent('events')">📅 Legal Events</a>
+    <a href="#" onclick="showSidebarContent('chatbot')">⚖️ Legal Chatbot</a>
+
+
+
+  </div>
+  <video autoplay loop muted plays-inline class="back-video">
+    <source src="/static/video.mp4" type="video/mp4">
+  </video>
+
+  <div class="user-profile-menu" id="userProfileMenu">
+    <div class="profile-icon-btn">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+        <circle cx="12" cy="7" r="4"></circle>
+      </svg>
+    </div>
+    <div class="dropdown-menu" id="dropdownMenu">
+      <div class="dropdown-item role-info">
+        Role: Law Student
+      </div>
+      <a href="#" class="dropdown-item logout-action" onclick="logout()">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+          <polyline points="16 17 21 12 16 7"></polyline>
+          <line x1="21" y1="12" x2="9" y2="12"></line>
+        </svg>
+        Logout
+      </a>
+    </div>
+  </div>
+
+  <div class="main">
+    <div class="header">Welcome to Your Legal Learning Dashboard</div>
+
+    <div class="cards">
+      <div class="card" onmouseover="showContent('fundamental')">
+        <h3>Fundamental Rights</h3>
+        <p>Explore key constitutional rights every citizen and law student must know.</p>
+      </div>
+      <div class="card" onmouseover="showContent('ipc')">
+        <h3>IPC Essentials</h3>
+        <p>Learn major sections of the Indian Penal Code through visual explanations.</p>
+      </div>
+      <div class="card" onmouseover="showContent('judgments')">
+        <h3>Recent Judgments</h3>
+        <p>Stay updated with landmark verdicts and their implications.</p>
+      </div>
+      <div class="card" onmouseover="showContent('notes')">
+        <h3>Downloadable Notes</h3>
+        <p>Access law subject notes, PDF guides, and court practice tips.</p>
+      </div>
+    </div>
+
+    <div id="content-area"></div>
+  </div>
+
+  <button class="chatbot-btn" onclick="openChatbot()">💬 Ask Legal Bot</button>
+
+
+
+  <script>
+    // User Profile Dropdown
+    const userProfileMenu = document.getElementById('userProfileMenu');
+    const dropdownMenu = document.getElementById('dropdownMenu');
+
+    userProfileMenu.addEventListener('click', (e) => {
+      e.stopPropagation();
+      dropdownMenu.classList.toggle('show');
+    });
+
+    document.addEventListener('click', () => {
+      if (dropdownMenu.classList.contains('show')) {
+        dropdownMenu.classList.remove('show');
+      }
+    });
+
+    function openChatbot() {
+      alert(" Launching the chatbot... just a sec!.");
+      window.open("studentchatbot.html", "_blank");
+    }
+
+    function logout() {
+      if (window.dashboardEntrance) {
+        window.dashboardEntrance.logout();
+      } else {
+        localStorage.removeItem('token');
+        window.location.href = '/role';
+      }
+    }
+
+    function goBack() {
+      window.history.back();
+    }
+    function hideContent() {
+      document.getElementById("content-area").style.display = "none";
+    }
+
+
+    function showContent(type) {
+      const contentArea = document.getElementById("content-area");
+      contentArea.style.display = "block";
+      let content = '';
+
+      if (type === 'fundamental') {
+        content = `
+              <h2>Fundamental Rights in India</h2>
+              <ul>
+                <li><strong>Right to Equality:</strong> Article 14–18</li>
+                <li><strong>Right to Freedom:</strong> Article 19–22</li>
+                <li><strong>Right against Exploitation:</strong> Article 23–24</li>
+                <li><strong>Right to Freedom of Religion:</strong> Article 25–28</li>
+                <li><strong>Cultural and Educational Rights:</strong> Article 29–30</li>
+                <li><strong>Right to Constitutional Remedies:</strong> Article 32</li>
+              </ul>
+            `;
+      } else if (type === 'ipc') {
+        content = `
+              <h2>Important IPC Sections</h2>
+              <ul>
+                <li><strong>Section 302:</strong> Punishment for murder</li>
+                <li><strong>Section 375–376:</strong> Rape and related offences</li>
+                <li><strong>Section 420:</strong> Cheating and dishonestly inducing delivery of property</li>
+                <li><strong>Section 498A:</strong> Cruelty by husband or relatives</li>
+              </ul>
+            `;
+      } else if (type === 'judgments') {
+        content = `
+              <h2>Landmark Judgments</h2>
+              <ul>
+                <li><strong>Kesavananda Bharati v. State of Kerala:</strong> Introduced Basic Structure Doctrine.</li>
+                <li><strong>Maneka Gandhi v. Union of India:</strong> Expanded interpretation of Article 21.</li>
+                <li><strong>Navtej Singh Johar v. Union of India:</strong> Decriminalized Section 377.</li>
+              </ul>
+            `;
+      } else if (type === 'notes') {
+        content = `
+              <h2>Downloadable Law Notes</h2>
+              <ul>
+                <li><a href="static/2023050195.pdf">📄 Constitutional Law - PDF</a></li>
+                <li><a href="static/wipo_guide_ipc_2019.pdf">📄 IPC Visual Guide - PDF</a></li>
+                <li><a href="static/legal writing.pdf">📄 Legal Writing Tips - PDF</a></li>
+              </ul>
+            `;
+      }
+
+      contentArea.innerHTML = content;
+    }
+
+    function showSidebarContent(type) {
+      const contentArea = document.getElementById("content-area");
+      contentArea.style.display = "block";
+
+      let content = "";
+
+      if (type === "laws") {
+        content = `
+              <h2>Indian Laws Overview</h2>
+              <ul>
+                <li>📘 <strong>Constitution of India</strong> - Framework for governance and fundamental rights</li>
+                <li>🔍 <strong>IPC (Indian Penal Code)</strong> - Defines criminal offenses and punishments</li>
+                <li>📜 <strong>Civil Procedure Code</strong> - Procedure for civil litigation</li>
+              </ul>
+            `;
+      } else if (type === "materials") {
+        content = `
+              <h2>Study Materials</h2>
+              <ul>
+                <li><a href="https://www.lawhousekolkata.com/indian-law/" target="_blank">📝 Bare Acts of Major Laws</a></li>
+                <li><a href="static/LegalTheory_CaseLawNotes.pdf" target="_blank">📚 Legal Theory & Case Law Notes</a></li>
+                <li><a href="static/MootCourt_Advocacy.pdf" target="_blank">📁 Moot Court & Advocacy Skills</a></li>
+              </ul>
+            `;
+      } else if (type === "cases") {
+        content = `
+              <h2>Case Studies</h2>
+              <ul>
+                <li>📌 <strong>Vishaka v. State of Rajasthan</strong> - Sexual harassment guidelines</li>
+                <li>📌 <strong>Shreya Singhal v. Union of India</strong> - Freedom of speech online</li>
+              </ul>
+            `;
+      } else if (type === "events") {
+        content = `
+              <h2>Upcoming Legal Events</h2>
+              <ul>
+                <li>🗓️ National Moot Court Competition - May 2025</li>
+                <li>🗓️ Guest Lecture: Cyber Law - April 30, 2025</li>
+                <li>🗓️ Internship Fair - June 2025</li>
+              </ul>
+            `;
+      } else if (type === "chatbot") {
+        content = `
+              <h2>Legal Chatbot Assistant</h2>
+              <p>Interact with the AI legal assistant to clear your doubts regarding:</p>
+              <ul>
+                <li>⚖️ Fundamental Rights</li>
+                <li>⚖️ IPC/CrPC/Constitutional Law</li>
+                <li>⚖️ Landmark Judgments</li>
+              </ul>
+              <p>Click the "Ask Legal Bot" button below to get started.</p>
+            `;
+      }
+
+      contentArea.innerHTML = content;
+    }
+  </script>
+
+</body>
+
+</html>

src/apps/templates/viewall.html

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>All Cases</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+        }
+        .header {
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: white;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .back-btn {
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+        .case-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+        .questions, .answers {
+            background: white;
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .case-header {
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: 1rem;
+            margin-bottom: 1rem;
+        }
+        .case-header h2 {
+            color: #1e3c72;
+            margin-bottom: 0.5rem;
+        }
+        .case-meta {
+            display: flex;
+            gap: 1rem;
+            color: #666;
+            font-size: 0.9rem;
+        }
+        .case-status {
+            display: inline-block;
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            margin-bottom: 1rem;
+        }
+        .status-pending {
+            background-color: #fff3cd;
+            color: #856404;
+        }
+        .status-in-progress {
+            background-color: #cce5ff;
+            color: #004085;
+        }
+        .status-completed {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        .qa-item {
+            margin-bottom: 1.5rem;
+        }
+        .question {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #1e3c72;
+        }
+        .answer {
+            color: #555;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>All Cases - Detailed View</h1>
+        <a href="judgedashboard.html" class="back-btn">
+            <i class="fas fa-arrow-left"></i> Back to Dashboard
+        </a>
+    </header>
+
+    <div class="container">
+        <!-- Case 1 -->
+        <div class="case-container">
+            <div class="questions">
+                <div class="case-header">
+                    <h2>State vs. Johnson</h2>
+                    <div class="case-meta">
+                        <span># CR-2024-0456</span>
+                        <span>10:30 AM</span>
+                    </div>
+                    <span class="case-status status-pending">Pending Judgment</span>
+                    <p>Criminal case involving charges of fraud and embezzlement. Defense has filed motion to suppress.</p>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What is the main argument for the motion to suppress?</div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What precedent cases are relevant here?</div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: When is the next hearing scheduled?</div>
+                </div>
+            </div>
+            
+            <div class="answers">
+                <div class="case-header">
+                    <h2>Case Responses</h2>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What is the main argument for the motion to suppress?</div>
+                    <div class="answer">A: The defense argues the evidence was obtained without proper warrant authorization and cites violation of the defendant's Fourth Amendment rights.</div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What precedent cases are relevant here?</div>
+                    <div class="answer">A: Key precedents include:<br>
+                        - Smith v. Maryland (1979)<br>
+                        - United States v. Jones (2012)<br>
+                        - Carpenter v. United States (2018)
+                    </div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: When is the next hearing scheduled?</div>
+                    <div class="answer">A: The motion hearing is scheduled for April 15, 2024 at 9:30 AM in Courtroom 4B.</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Case 2 -->
+        <div class="case-container">
+            <div class="questions">
+                <div class="case-header">
+                    <h2>Doe vs. Smith Corporation</h2>
+                    <div class="case-meta">
+                        <span># CV-2024-0789</span>
+                        <span>02:15 PM</span>
+                    </div>
+                    <span class="case-status status-in-progress">In Progress</span>
+                    <p>Civil lawsuit regarding wrongful termination. Plaintiff seeking damages of $2.5 million.</p>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What are the plaintiff's main allegations?</div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What evidence supports the wrongful termination claim?</div>
+                </div>
+            </div>
+            
+            <div class="answers">
+                <div class="case-header">
+                    <h2>Case Responses</h2>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What are the plaintiff's main allegations?</div>
+                    <div class="answer">A: The plaintiff alleges:<br>
+                        - Termination without cause after 12 years of service<br>
+                        - Age discrimination (plaintiff was 58 at termination)<br>
+                        - Retaliation for whistleblowing on safety violations
+                    </div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What evidence supports the wrongful termination claim?</div>
+                    <div class="answer">A: Key evidence includes:<br>
+                        - Performance reviews showing consistent "exceeds expectations" ratings<br>
+                        - Emails discussing the plaintiff's age and "need for fresh blood"<br>
+                        - DOL complaint filed 3 months prior to termination
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Case 3 -->
+        <div class="case-container">
+            <div class="questions">
+                <div class="case-header">
+                    <h2>In re: Peterson Estate</h2>
+                    <div class="case-meta">
+                        <span># PR-2024-0123</span>
+                        <span>11:00 AM</span>
+                    </div>
+                    <span class="case-status status-completed">Completed</span>
+                    <p>Probate matter with dispute among heirs regarding distribution of assets.</p>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What was the final distribution ruling?</div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: Were there any contested items?</div>
+                </div>
+            </div>
+            
+            <div class="answers">
+                <div class="case-header">
+                    <h2>Case Responses</h2>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: What was the final distribution ruling?</div>
+                    <div class="answer">A: The estate was distributed as follows:<br>
+                        - 50% to surviving spouse<br>
+                        - 25% to daughter from first marriage<br>
+                        - 25% to son from first marriage<br>
+                        Special bequest of family heirlooms as specified in addendum
+                    </div>
+                </div>
+                
+                <div class="qa-item">
+                    <div class="question">Q: Were there any contested items?</div>
+                    <div class="answer">A: The vacation property was initially contested but was awarded to the surviving spouse with right of first refusal given to the children if sold.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Font Awesome for icons -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
+</body>
+</html>