Spaces:

Legal-Assistant
/

LawBot

Sleeping

App Files Files Community

Vishwanath77 commited on Jun 28

Commit

4418e26

verified ·

1 Parent(s): f3a484a

Upload 13 files

Browse files

Files changed (13) hide show

src/apps/templates/Judgechatbot.html +501 -61
src/apps/templates/advocatechatbot.html +494 -49
src/apps/templates/advocatedashboard.html +22 -0
src/apps/templates/citizen.html +254 -37
src/apps/templates/judgedashboard.html +4 -0
src/apps/templates/legalrights.html +320 -186
src/apps/templates/minor.html +490 -48
src/apps/templates/roleselection.html +172 -35
src/apps/templates/safetytips.html +326 -186
src/apps/templates/studentchatbot.html +473 -57
src/apps/templates/studentdashboard.html +4 -0
src/apps/templates/woman.html +32 -6
src/apps/templates/womanchatbot.html +255 -28

src/apps/templates/Judgechatbot.html CHANGED Viewed

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Judicial Deliberation System</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
@@ -18,7 +20,9 @@
         }
         * {
-            margin: 0; padding: 0; box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
         }
@@ -35,64 +39,253 @@
             width: 300px;
             background: var(--sidebar-bg);
             border-right: 1px solid var(--glass-border);
-            display: flex; flex-direction: column;
             z-index: 100;
         }
-        .sidebar-header { padding: 40px 25px; }
         .new-chat-btn {
-            width: 100%; padding: 16px;
             background: linear-gradient(135deg, var(--accent-gold), #d97706);
-            border: none; border-radius: 12px;
-            color: #030617; font-weight: 700;
-            display: flex; align-items: center; justify-content: center; gap: 10px;
-            cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             box-shadow: 0 10px 20px rgba(251, 191, 36, 0.15);
         }
-        .new-chat-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(251, 191, 36, 0.25); }
-        .history-label { padding: 0 25px 10px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2.5px; color: var(--text-dim); font-weight: 700; opacity: 0.8; }
-        .history-list { flex: 1; overflow-y: auto; padding: 15px; }
         .history-item {
-            padding: 14px 18px; border-radius: 10px; margin-bottom: 8px;
-            cursor: pointer; transition: 0.2s; font-size: 0.9rem; color: var(--text-dim);
-            display: flex; align-items: center; gap: 12px; border: 1px solid transparent;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         }
-        .history-item:hover { background: rgba(251, 191, 36, 0.05); color: var(--accent-gold); border-color: rgba(251, 191, 36, 0.2); }
-        .sidebar-footer { padding: 25px; border-top: 1px solid var(--glass-border); }
-        .user-badge { display: flex; align-items: center; gap: 15px; padding: 12px; background: rgba(251, 191, 36, 0.05); border-radius: 14px; border: 1px solid rgba(251, 191, 36, 0.1); }
-        .user-avatar { width: 36px; height: 36px; background: var(--accent-gold); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #030617; font-size: 0.9rem; }
         /* MAIN AREA */
-        .main-chat { flex: 1; display: flex; flex-direction: column; position: relative; background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.02), transparent); }
         .top-bar {
-            height: 80px; background: rgba(3, 6, 23, 0.85); backdrop-filter: blur(25px);
             border-bottom: 1px solid var(--glass-border);
-            display: flex; align-items: center; justify-content: space-between; padding: 0 45px; z-index: 50;
         }
-        .branding-title { font-weight: 700; color: white; letter-spacing: -0.5px; font-size: 1.1rem; }
-        .status-pill { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; background: rgba(251, 191, 36, 0.1); color: var(--accent-gold); padding: 5px 15px; border-radius: 20px; font-weight: 700; border: 1px solid rgba(251, 191, 36, 0.2); }
-        .status-dot { width: 7px; height: 7px; background: var(--accent-gold); border-radius: 50%; animation: pulse-dot 2s infinite; }
-        @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.3; } }
-        .messages-container { flex: 1; overflow-y: auto; padding: 50px 12%; display: flex; flex-direction: column; gap: 40px; scroll-behavior: smooth; }
-        .message { max-width: 900px; animation: message-slide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
-        @keyframes message-slide { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
-        .user-msg { align-self: flex-end; background: linear-gradient(135deg, var(--accent-gold), #d97706); padding: 18px 26px; border-radius: 22px 22px 4px 22px; color: #030617; font-weight: 500; max-width: 70%; box-shadow: 0 10px 30px rgba(251, 191, 36, 0.2); }
-        .ai-msg { align-self: flex-start; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-border); padding: 35px; border-radius: 24px 24px 24px 6px; max-width: 88%; line-height: 1.9; color: #e2e8f0; }
-        .ai-msg h3 { color: var(--accent-gold); font-size: 1.4rem; margin-bottom: 25px; font-weight: 700; display: flex; align-items: center; gap: 15px; }
-        .ai-msg ul { margin: 25px 0; list-style: none; }
-        .ai-msg li { position: relative; padding-left: 32px; margin-bottom: 18px; }
-        .ai-msg li::before { content: "⚖️"; position: absolute; left: 0; font-size: 1rem; }
-        .highlight { background: rgba(251, 191, 36, 0.05); border-left: 5px solid var(--accent-gold); padding: 25px; margin: 30px 0; border-radius: 0 18px 18px 0; font-weight: 600; color: #fff; }
         .typing {
             display: flex;
@@ -128,31 +321,235 @@
             animation: typing-blink 1.4s infinite ease-in-out;
         }
-        .typing-dots span:nth-child(2) { animation-delay: 0.22s; }
-        .typing-dots span:nth-child(3) { animation-delay: 0.44s; }
         @keyframes typing-blink {
-            0%, 100% { opacity: 0.2; transform: scale(0.85); }
-            50% { opacity: 1; transform: scale(1.15); }
         }
         @keyframes pulse-border-gold {
-            0%, 100% { border-color: var(--glass-border); }
-            50% { border-color: var(--accent-gold); box-shadow: 0 0 25px rgba(251, 191, 36, 0.15); }
         }
-        .input-area { padding: 40px 12%; background: linear-gradient(to top, var(--bg-dark) 60%, transparent); border-top: 1px solid var(--glass-border); z-index: 60; }
-        .input-box { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-border); border-radius: 20px; padding: 8px; display: flex; align-items: center; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
-        .input-box:focus-within { border-color: var(--accent-gold); box-shadow: 0 0 40px rgba(251, 191, 36, 0.1); background: rgba(255, 255, 255, 0.05); }
-        .input-box input { flex: 1; background: transparent; border: none; padding: 18px 28px; color: white; font-size: 1.1rem; outline: none; }
-        .send-btn { background: var(--accent-gold); color: #030617; border: none; width: 55px; height: 55px; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; margin-right: 8px; }
-        .send-btn:hover { transform: scale(1.1) rotate(-5deg); filter: brightness(1.1); }
-        .hidden { display: none !important; }
-        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
     </style>
 </head>
 <body>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>🏛️</span> New Deliberation</button>
@@ -168,25 +565,36 @@
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
-                <a href="/judgedashboard.html" style="color: var(--accent-gold); text-decoration: none; font-size: 0.85rem; text-align: center; font-weight: 700; letter-spacing: 0.5px;">Return to Chambers</a>
-                <a href="/role" style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">← Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
             <div class="system-branding">
                 <span class="branding-title">🏛️ Judicial Intelligence System</span>
-                <div class="status-pill"><div class="status-dot"></div>Secure Deliberation Active</div>
             </div>
-            <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 600; letter-spacing: 1px;">JUDICIAL FRAMEWORK v5.0 PRO</div>
         </header>
-        <div id="welcomeScreen" style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 5rem; margin-bottom: 30px; animation: float 8s ease-in-out infinite;">⚖️</div>
-            <h1 style="font-size: 3.2rem; font-weight: 800; margin-bottom: 15px; letter-spacing: -1.5px;">Protocol Initiated, Your Honor.</h1>
-            <p style="color: var(--text-dim); max-width: 600px; line-height: 1.8; font-size: 1.2rem; font-weight: 300;">Enhanced judicial support is online.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
@@ -201,10 +609,16 @@
             <div class="input-box">
                 <input type="text" id="messageInput" placeholder="Initiate legal inquiry..." autocomplete="off">
                 <button class="send-btn" id="sendButton">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" 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>
-            <p style="text-align: center; font-size: 0.8rem; color: var(--text-dim); margin-top: 25px; font-weight: 500; opacity: 0.7; letter-spacing: 0.5px;">🔒 ENCRYPTED END-TO-END • JUDICIAL PRIVACY PROTECTED</p>
         </div>
     </main>
@@ -331,6 +745,12 @@
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
             } catch (err) { console.error(err); }
         }
@@ -353,11 +773,31 @@
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Judicial Deliberation System</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
         }
         * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
         }
             width: 300px;
             background: var(--sidebar-bg);
             border-right: 1px solid var(--glass-border);
+            display: flex;
+            flex-direction: column;
             z-index: 100;
         }
+        .sidebar-header {
+            padding: 40px 25px;
+        }
         .new-chat-btn {
+            width: 100%;
+            padding: 16px;
             background: linear-gradient(135deg, var(--accent-gold), #d97706);
+            border: none;
+            border-radius: 12px;
+            color: #030617;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            cursor: pointer;
+            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             box-shadow: 0 10px 20px rgba(251, 191, 36, 0.15);
         }
+        .new-chat-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 30px rgba(251, 191, 36, 0.25);
+        }
+        .history-label {
+            padding: 0 25px 10px;
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 2.5px;
+            color: var(--text-dim);
+            font-weight: 700;
+            opacity: 0.8;
+        }
+        .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 15px;
+        }
         .history-item {
+            padding: 14px 18px;
+            border-radius: 10px;
+            margin-bottom: 8px;
+            cursor: pointer;
+            transition: 0.2s;
+            font-size: 0.9rem;
+            color: var(--text-dim);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            border: 1px solid transparent;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
+        .history-item:hover {
+            background: rgba(251, 191, 36, 0.05);
+            color: var(--accent-gold);
+            border-color: rgba(251, 191, 36, 0.2);
+        }
+        .sidebar-footer {
+            padding: 25px;
+            border-top: 1px solid var(--glass-border);
+        }
+        .user-badge {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 12px;
+            background: rgba(251, 191, 36, 0.05);
+            border-radius: 14px;
+            border: 1px solid rgba(251, 191, 36, 0.1);
+        }
+        .user-avatar {
+            width: 36px;
+            height: 36px;
+            background: var(--accent-gold);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 800;
+            color: #030617;
+            font-size: 0.9rem;
+        }
         /* MAIN AREA */
+        .main-chat {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.02), transparent);
+        }
         .top-bar {
+            height: 80px;
+            background: rgba(3, 6, 23, 0.85);
+            backdrop-filter: blur(25px);
             border-bottom: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 45px;
+            z-index: 50;
         }
+        .branding-title {
+            font-weight: 700;
+            color: white;
+            letter-spacing: -0.5px;
+            font-size: 1.1rem;
+        }
+        .status-pill {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.75rem;
+            background: rgba(251, 191, 36, 0.1);
+            color: var(--accent-gold);
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-weight: 700;
+            border: 1px solid rgba(251, 191, 36, 0.2);
+        }
+        .status-dot {
+            width: 7px;
+            height: 7px;
+            background: var(--accent-gold);
+            border-radius: 50%;
+            animation: pulse-dot 2s infinite;
+        }
+        @keyframes pulse-dot {
+            0%,
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            50% {
+                transform: scale(1.6);
+                opacity: 0.3;
+            }
+        }
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 50px 12%;
+            display: flex;
+            flex-direction: column;
+            gap: 40px;
+            scroll-behavior: smooth;
+        }
+        .message {
+            max-width: 900px;
+            animation: message-slide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+        }
+        @keyframes message-slide {
+            from {
+                opacity: 0;
+                transform: translateY(25px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .user-msg {
+            align-self: flex-end;
+            background: linear-gradient(135deg, var(--accent-gold), #d97706);
+            padding: 18px 26px;
+            border-radius: 22px 22px 4px 22px;
+            color: #030617;
+            font-weight: 500;
+            max-width: 70%;
+            box-shadow: 0 10px 30px rgba(251, 191, 36, 0.2);
+        }
+        .ai-msg {
+            align-self: flex-start;
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid var(--glass-border);
+            padding: 35px;
+            border-radius: 24px 24px 24px 6px;
+            max-width: 88%;
+            line-height: 1.9;
+            color: #e2e8f0;
+        }
+        .ai-msg h3 {
+            color: var(--accent-gold);
+            font-size: 1.4rem;
+            margin-bottom: 25px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .ai-msg ul {
+            margin: 25px 0;
+            list-style: none;
+        }
+        .ai-msg li {
+            position: relative;
+            padding-left: 32px;
+            margin-bottom: 18px;
+        }
+        .ai-msg li::before {
+            content: "⚖️";
+            position: absolute;
+            left: 0;
+            font-size: 1rem;
+        }
+        .highlight {
+            background: rgba(251, 191, 36, 0.05);
+            border-left: 5px solid var(--accent-gold);
+            padding: 25px;
+            margin: 30px 0;
+            border-radius: 0 18px 18px 0;
+            font-weight: 600;
+            color: #fff;
+        }
         .typing {
             display: flex;
             animation: typing-blink 1.4s infinite ease-in-out;
         }
+        .typing-dots span:nth-child(2) {
+            animation-delay: 0.22s;
+        }
+        .typing-dots span:nth-child(3) {
+            animation-delay: 0.44s;
+        }
         @keyframes typing-blink {
+            0%,
+            100% {
+                opacity: 0.2;
+                transform: scale(0.85);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.15);
+            }
         }
         @keyframes pulse-border-gold {
+            0%,
+            100% {
+                border-color: var(--glass-border);
+            }
+            50% {
+                border-color: var(--accent-gold);
+                box-shadow: 0 0 25px rgba(251, 191, 36, 0.15);
+            }
         }
+        .input-area {
+            padding: 40px 12%;
+            background: linear-gradient(to top, var(--bg-dark) 60%, transparent);
+            border-top: 1px solid var(--glass-border);
+            z-index: 60;
+        }
+        .input-box {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 8px;
+            display: flex;
+            align-items: center;
+            transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .input-box:focus-within {
+            border-color: var(--accent-gold);
+            box-shadow: 0 0 40px rgba(251, 191, 36, 0.1);
+            background: rgba(255, 255, 255, 0.05);
+        }
+        .input-box input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 18px 28px;
+            color: white;
+            font-size: 1.1rem;
+            outline: none;
+        }
+        .send-btn {
+            background: var(--accent-gold);
+            color: #030617;
+            border: none;
+            width: 55px;
+            height: 55px;
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: 0.3s;
+            margin-right: 8px;
+        }
+        .send-btn:hover {
+            transform: scale(1.1) rotate(-5deg);
+            filter: brightness(1.1);
+        }
+        .hidden {
+            display: none !important;
+        }
+        @keyframes float {
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+        /* MOBILE RESPONSIVENESS */
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.8rem;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            z-index: 101;
+            transition: color 0.3s;
+        }
+        .menu-toggle:hover {
+            color: var(--accent-gold);
+        }
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(3, 6, 23, 0.6);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            z-index: 99;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .sidebar-overlay.active {
+            display: block;
+            opacity: 1;
+            pointer-events: auto;
+        }
+        @media (max-width: 768px) {
+            .menu-toggle {
+                display: flex;
+            }
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: -300px;
+                height: 100vh;
+                width: 300px;
+                transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
+            }
+            .sidebar.active {
+                left: 0;
+            }
+            .top-bar {
+                padding: 0 15px;
+            }
+            .top-bar > div:last-child {
+                display: none;
+            }
+            .messages-container {
+                padding: 25px 15px;
+                gap: 20px;
+            }
+            .user-msg {
+                max-width: 85%;
+                padding: 12px 18px;
+                font-size: 0.95rem;
+            }
+            .ai-msg {
+                max-width: 95%;
+                padding: 20px;
+                font-size: 0.95rem;
+            }
+            .ai-msg h3 {
+                font-size: 1.15rem;
+                margin-bottom: 15px;
+            }
+            .input-area {
+                padding: 15px 15px 25px 15px;
+            }
+            .input-box input {
+                padding: 12px 15px;
+                font-size: 0.95rem;
+            }
+            .send-btn {
+                width: 44px;
+                height: 44px;
+            }
+            #welcomeScreen h1 {
+                font-size: 1.8rem !important;
+                margin-bottom: 10px !important;
+            }
+            #welcomeScreen p {
+                font-size: 0.95rem !important;
+                max-width: 100% !important;
+            }
+            #welcomeScreen div:first-child {
+                font-size: 3.5rem !important;
+                margin-bottom: 15px !important;
+            }
+        }
     </style>
 </head>
 <body>
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>🏛️</span> New Deliberation</button>
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
+                <a href="/judgedashboard.html"
+                    style="color: var(--accent-gold); text-decoration: none; font-size: 0.85rem; text-align: center; font-weight: 700; letter-spacing: 0.5px;">Return
+                    to Chambers</a>
+                <a href="/role"
+                    style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">←
+                    Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
+            <button class="menu-toggle" id="menuToggle" aria-label="Toggle Sidebar">☰</button>
             <div class="system-branding">
                 <span class="branding-title">🏛️ Judicial Intelligence System</span>
+                <div class="status-pill">
+                    <div class="status-dot"></div>Secure Deliberation Active
+                </div>
             </div>
+            <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 600; letter-spacing: 1px;">JUDICIAL
+                FRAMEWORK v5.0 PRO</div>
         </header>
+        <div id="welcomeScreen"
+            style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 5rem; margin-bottom: 30px; animation: float 8s ease-in-out infinite;">⚖️</div>
+            <h1 style="font-size: 3.2rem; font-weight: 800; margin-bottom: 15px; letter-spacing: -1.5px;">Protocol
+                Initiated, Your Honor.</h1>
+            <p style="color: var(--text-dim); max-width: 600px; line-height: 1.8; font-size: 1.2rem; font-weight: 300;">
+                Enhanced judicial support is online.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
             <div class="input-box">
                 <input type="text" id="messageInput" placeholder="Initiate legal inquiry..." autocomplete="off">
                 <button class="send-btn" id="sendButton">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+                        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>
+            <p
+                style="text-align: center; font-size: 0.8rem; color: var(--text-dim); margin-top: 25px; font-weight: 500; opacity: 0.7; letter-spacing: 0.5px;">
+                🔒 ENCRYPTED END-TO-END • JUDICIAL PRIVACY PROTECTED</p>
         </div>
     </main>
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
+                if (window.innerWidth <= 768) {
+                    const sidebar = document.querySelector('.sidebar');
+                    const sidebarOverlay = document.getElementById('sidebarOverlay');
+                    if (sidebar) sidebar.classList.remove('active');
+                    if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+                }
             } catch (err) { console.error(err); }
         }
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
+            if (window.innerWidth <= 768) {
+                const sidebar = document.querySelector('.sidebar');
+                const sidebarOverlay = document.getElementById('sidebarOverlay');
+                if (sidebar) sidebar.classList.remove('active');
+                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+            }
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
+        // Mobile Sidebar Toggling Logic
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.querySelector('.sidebar');
+        const sidebarOverlay = document.getElementById('sidebarOverlay');
+        function toggleSidebar() {
+            sidebar.classList.toggle('active');
+            sidebarOverlay.classList.toggle('active');
+        }
+        menuToggle.addEventListener('click', toggleSidebar);
+        sidebarOverlay.addEventListener('click', toggleSidebar);
     </script>
 </body>
 </html>

src/apps/templates/advocatechatbot.html CHANGED Viewed

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Advocate Command Center</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
@@ -17,43 +19,256 @@
             --glass-border: rgba(255, 255, 255, 0.08);
         }
-        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
-        body { background-color: var(--bg-dark); color: var(--text-primary); height: 100vh; display: flex; overflow: hidden; }
-        .sidebar { width: 280px; background: var(--sidebar-bg); border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; z-index: 100; }
-        .sidebar-header { padding: 30px 20px; }
         .new-chat-btn {
-            width: 100%; padding: 14px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
-            border: none; border-radius: 12px; color: white; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: 0.3s;
             box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
         }
-        .new-chat-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(37, 99, 235, 0.3); }
-        .history-label { padding: 0 20px 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); font-weight: 700; }
-        .history-list { flex: 1; overflow-y: auto; padding: 10px; }
-        .history-item { padding: 12px 15px; border-radius: 10px; margin-bottom: 5px; cursor: pointer; transition: 0.2s; font-size: 0.85rem; color: var(--text-dim); display: flex; align-items: center; gap: 10px; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .history-item:hover { background: var(--glass-bg); color: white; border-color: var(--glass-border); }
-        .sidebar-footer { padding: 20px; border-top: 1px solid var(--glass-border); }
-        .user-badge { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--glass-bg); border-radius: 12px; }
-        .user-avatar { width: 32px; height: 32px; background: var(--accent-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 0.8rem; }
-        .main-chat { flex: 1; display: flex; flex-direction: column; position: relative; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.03), transparent); }
-        .top-bar { height: 70px; background: rgba(3, 6, 23, 0.82); backdrop-filter: blur(25px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; z-index: 50; }
-        .status-pill { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; background: rgba(37, 99, 235, 0.1); color: #60a5fa; padding: 4px 12px; border-radius: 20px; font-weight: 600; border: 1px solid rgba(37, 99, 235, 0.2); }
-        .status-dot { width: 6px; height: 6px; background: #60a5fa; border-radius: 50%; animation: pulse-dot 2s infinite; }
-        @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }
-        .messages-container { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 30px; scroll-behavior: smooth; }
-        .message { max-width: 850px; animation: message-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
-        @keyframes message-slide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-        .user-msg { align-self: flex-end; background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo)); padding: 16px 24px; border-radius: 20px 20px 4px 20px; color: white; max-width: 70%; line-height: 1.6; }
-        .ai-msg { align-self: flex-start; background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 30px; border-radius: 20px 20px 20px 4px; max-width: 85%; line-height: 1.8; color: #e2e8f0; }
-        .ai-msg h3 { color: #60a5fa; font-size: 1.3rem; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
-        .ai-msg li { position: relative; padding-left: 28px; margin-bottom: 15px; }
-        .ai-msg li::before { content: "📘"; position: absolute; left: 0; font-size: 0.9rem; }
-        .highlight { background: rgba(37, 99, 235, 0.08); border-left: 4px solid var(--accent-blue); padding: 22px; margin: 25px 0; border-radius: 0 16px 16px 0; font-weight: 500; color: #fff; }
         .typing {
             display: flex;
@@ -88,29 +303,217 @@
             animation: typing-blink 1.4s infinite ease-in-out;
         }
-        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing-blink {
-            0%, 100% { opacity: 0.3; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.1); }
         }
         @keyframes pulse-border {
-            0%, 100% { border-color: var(--glass-border); }
-            50% { border-color: #60a5fa; box-shadow: 0 0 20px rgba(96, 165, 250, 0.1); }
         }
-        .input-area { padding: 30px 10%; background: linear-gradient(to top, var(--bg-dark) 50%, transparent); border-top: 1px solid var(--glass-border); z-index: 60; }
-        .input-box { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 18px; padding: 6px; display: flex; align-items: center; transition: 0.3s; }
-        .input-box:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 30px rgba(37, 99, 235, 0.2); }
-        .input-box input { flex: 1; background: transparent; border: none; padding: 16px 24px; color: white; font-size: 1.05rem; outline: none; }
-        .send-btn { background: var(--accent-blue); color: white; border: none; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; margin-right: 6px; }
-        .hidden { display: none !important; }
     </style>
 </head>
 <body>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>+</span> New Case Research</button>
@@ -126,25 +529,36 @@
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
-                <a href="/advocatedashboard.html" style="color: var(--accent-blue); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 600;">Back to Dashboard</a>
-                <a href="/role" style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">← Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Advocate)</span>
-                <div class="status-pill"><div class="status-dot"></div>Advocate Secure Access</div>
             </div>
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Case Management v4.0 PRO</div>
         </header>
-        <div id="welcomeScreen" style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px;">💼</div>
-            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Advancing Justice through AI.</h1>
-            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Professional research tools at your disposal. Analyze precedents, retrieve sections, and build your case strategy with precision.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
@@ -157,9 +571,14 @@
         <div class="input-area">
             <div class="input-box">
-                <input type="text" id="messageInput" placeholder="Describe case or request legal sections..." autocomplete="off">
                 <button class="send-btn" id="sendButton">
-                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
@@ -288,6 +707,12 @@
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
             } catch (err) { console.error(err); }
         }
@@ -310,11 +735,31 @@
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Advocate Command Center</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
             --glass-border: rgba(255, 255, 255, 0.08);
         }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
+            height: 100vh;
+            display: flex;
+            overflow: hidden;
+        }
+        .sidebar {
+            width: 280px;
+            background: var(--sidebar-bg);
+            border-right: 1px solid var(--glass-border);
+            display: flex;
+            flex-direction: column;
+            z-index: 100;
+        }
+        .sidebar-header {
+            padding: 30px 20px;
+        }
         .new-chat-btn {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
+            border: none;
+            border-radius: 12px;
+            color: white;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            cursor: pointer;
+            transition: 0.3s;
             box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
         }
+        .new-chat-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 25px rgba(37, 99, 235, 0.3);
+        }
+        .history-label {
+            padding: 0 20px 10px;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: var(--text-dim);
+            font-weight: 700;
+        }
+        .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+        }
+        .history-item {
+            padding: 12px 15px;
+            border-radius: 10px;
+            margin-bottom: 5px;
+            cursor: pointer;
+            transition: 0.2s;
+            font-size: 0.85rem;
+            color: var(--text-dim);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            border: 1px solid transparent;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .history-item:hover {
+            background: var(--glass-bg);
+            color: white;
+            border-color: var(--glass-border);
+        }
+        .sidebar-footer {
+            padding: 20px;
+            border-top: 1px solid var(--glass-border);
+        }
+        .user-badge {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px;
+            background: var(--glass-bg);
+            border-radius: 12px;
+        }
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            background: var(--accent-blue);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            color: white;
+            font-size: 0.8rem;
+        }
+        .main-chat {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.03), transparent);
+        }
+        .top-bar {
+            height: 70px;
+            background: rgba(3, 6, 23, 0.82);
+            backdrop-filter: blur(25px);
+            border-bottom: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 40px;
+            z-index: 50;
+        }
+        .status-pill {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.75rem;
+            background: rgba(37, 99, 235, 0.1);
+            color: #60a5fa;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-weight: 600;
+            border: 1px solid rgba(37, 99, 235, 0.2);
+        }
+        .status-dot {
+            width: 6px;
+            height: 6px;
+            background: #60a5fa;
+            border-radius: 50%;
+            animation: pulse-dot 2s infinite;
+        }
+        @keyframes pulse-dot {
+            0%,
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            50% {
+                transform: scale(1.5);
+                opacity: 0.4;
+            }
+        }
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 40px 10%;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+            scroll-behavior: smooth;
+        }
+        .message {
+            max-width: 850px;
+            animation: message-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+        }
+        @keyframes message-slide {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .user-msg {
+            align-self: flex-end;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
+            padding: 16px 24px;
+            border-radius: 20px 20px 4px 20px;
+            color: white;
+            max-width: 70%;
+            line-height: 1.6;
+        }
+        .ai-msg {
+            align-self: flex-start;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            padding: 30px;
+            border-radius: 20px 20px 20px 4px;
+            max-width: 85%;
+            line-height: 1.8;
+            color: #e2e8f0;
+        }
+        .ai-msg h3 {
+            color: #60a5fa;
+            font-size: 1.3rem;
+            margin-bottom: 20px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .ai-msg li {
+            position: relative;
+            padding-left: 28px;
+            margin-bottom: 15px;
+        }
+        .ai-msg li::before {
+            content: "📘";
+            position: absolute;
+            left: 0;
+            font-size: 0.9rem;
+        }
+        .highlight {
+            background: rgba(37, 99, 235, 0.08);
+            border-left: 4px solid var(--accent-blue);
+            padding: 22px;
+            margin: 25px 0;
+            border-radius: 0 16px 16px 0;
+            font-weight: 500;
+            color: #fff;
+        }
         .typing {
             display: flex;
             animation: typing-blink 1.4s infinite ease-in-out;
         }
+        .typing-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
         @keyframes typing-blink {
+            0%,
+            100% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.1);
+            }
         }
         @keyframes pulse-border {
+            0%,
+            100% {
+                border-color: var(--glass-border);
+            }
+            50% {
+                border-color: #60a5fa;
+                box-shadow: 0 0 20px rgba(96, 165, 250, 0.1);
+            }
         }
+        .input-area {
+            padding: 30px 10%;
+            background: linear-gradient(to top, var(--bg-dark) 50%, transparent);
+            border-top: 1px solid var(--glass-border);
+            z-index: 60;
+        }
+        .input-box {
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--glass-border);
+            border-radius: 18px;
+            padding: 6px;
+            display: flex;
+            align-items: center;
+            transition: 0.3s;
+        }
+        .input-box:focus-within {
+            border-color: var(--accent-blue);
+            box-shadow: 0 0 30px rgba(37, 99, 235, 0.2);
+        }
+        .input-box input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 16px 24px;
+            color: white;
+            font-size: 1.05rem;
+            outline: none;
+        }
+        .send-btn {
+            background: var(--accent-blue);
+            color: white;
+            border: none;
+            width: 50px;
+            height: 50px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: 0.3s;
+            margin-right: 6px;
+        }
+        .hidden {
+            display: none !important;
+        }
+        /* MOBILE RESPONSIVENESS */
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.8rem;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            z-index: 101;
+            transition: color 0.3s;
+        }
+        .menu-toggle:hover {
+            color: var(--accent-blue);
+        }
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(3, 6, 23, 0.6);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            z-index: 99;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .sidebar-overlay.active {
+            display: block;
+            opacity: 1;
+            pointer-events: auto;
+        }
+        @media (max-width: 768px) {
+            .menu-toggle {
+                display: flex;
+            }
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: -280px;
+                height: 100vh;
+                width: 280px;
+                transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
+            }
+            .sidebar.active {
+                left: 0;
+            }
+            .top-bar {
+                padding: 0 15px;
+            }
+            .top-bar > div:last-child {
+                display: none;
+            }
+            .messages-container {
+                padding: 25px 15px;
+                gap: 20px;
+            }
+            .user-msg {
+                max-width: 85%;
+                padding: 12px 18px;
+                font-size: 0.95rem;
+            }
+            .ai-msg {
+                max-width: 95%;
+                padding: 20px;
+                font-size: 0.95rem;
+            }
+            .ai-msg h3 {
+                font-size: 1.15rem;
+                margin-bottom: 15px;
+            }
+            .input-area {
+                padding: 15px 15px 25px 15px;
+            }
+            .input-box input {
+                padding: 12px 15px;
+                font-size: 0.95rem;
+            }
+            .send-btn {
+                width: 44px;
+                height: 44px;
+            }
+            #welcomeScreen h1 {
+                font-size: 1.8rem !important;
+                margin-bottom: 10px !important;
+            }
+            #welcomeScreen p {
+                font-size: 0.95rem !important;
+                max-width: 100% !important;
+            }
+            #welcomeScreen div:first-child {
+                font-size: 3.5rem !important;
+                margin-bottom: 15px !important;
+            }
+        }
     </style>
 </head>
 <body>
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>+</span> New Case Research</button>
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
+                <a href="/advocatedashboard.html"
+                    style="color: var(--accent-blue); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 600;">Back
+                    to Dashboard</a>
+                <a href="/role"
+                    style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">←
+                    Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
+            <button class="menu-toggle" id="menuToggle" aria-label="Toggle Sidebar">☰</button>
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Advocate)</span>
+                <div class="status-pill">
+                    <div class="status-dot"></div>Advocate Secure Access
+                </div>
             </div>
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Case Management v4.0 PRO</div>
         </header>
+        <div id="welcomeScreen"
+            style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px;">💼</div>
+            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Advancing
+                Justice through AI.</h1>
+            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Professional
+                research tools at your disposal. Analyze precedents, retrieve sections, and build your case strategy
+                with precision.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
         <div class="input-area">
             <div class="input-box">
+                <input type="text" id="messageInput" placeholder="Describe case or request legal sections..."
+                    autocomplete="off">
                 <button class="send-btn" id="sendButton">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                        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>
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
+                if (window.innerWidth <= 768) {
+                    const sidebar = document.querySelector('.sidebar');
+                    const sidebarOverlay = document.getElementById('sidebarOverlay');
+                    if (sidebar) sidebar.classList.remove('active');
+                    if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+                }
             } catch (err) { console.error(err); }
         }
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
+            if (window.innerWidth <= 768) {
+                const sidebar = document.querySelector('.sidebar');
+                const sidebarOverlay = document.getElementById('sidebarOverlay');
+                if (sidebar) sidebar.classList.remove('active');
+                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+            }
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
+        // Mobile Sidebar Toggling Logic
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.querySelector('.sidebar');
+        const sidebarOverlay = document.getElementById('sidebarOverlay');
+        function toggleSidebar() {
+            sidebar.classList.toggle('active');
+            sidebarOverlay.classList.toggle('active');
+        }
+        menuToggle.addEventListener('click', toggleSidebar);
+        sidebarOverlay.addEventListener('click', toggleSidebar);
     </script>
 </body>
 </html>

src/apps/templates/advocatedashboard.html CHANGED Viewed

@@ -267,6 +267,28 @@
         .logout-action:hover {
             background: #fff5f5;
         }
     </style>
 </head>

         .logout-action:hover {
             background: #fff5f5;
         }
+        @media (max-width: 768px) {
+            .container {
+                grid-template-columns: 1fr;
+            }
+            .sidebar {
+                display: none;
+            }
+            .header h1 {
+                font-size: 1.4rem;
+            }
+            .profile span {
+                display: none;
+            }
+            .stats {
+                grid-template-columns: 1fr;
+            }
+        }
     </style>
 </head>

src/apps/templates/citizen.html CHANGED Viewed

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Citizen Dashboard</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
@@ -191,9 +193,20 @@
         }
         @keyframes pulse-dot {
-            0% { transform: scale(1); opacity: 1; }
-            50% { transform: scale(1.5); opacity: 0.4; }
-            100% { transform: scale(1); opacity: 1; }
         }
         /* MESSAGES AREA */
@@ -214,8 +227,15 @@
         }
         @keyframes message-slide {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
         }
         /* USER MSG */
@@ -322,17 +342,39 @@
             animation: typing-blink 1.4s infinite ease-in-out;
         }
-        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing-blink {
-            0%, 100% { opacity: 0.3; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.1); }
         }
         @keyframes pulse-border {
-            0%, 100% { border-color: var(--glass-border); }
-            50% { border-color: var(--accent-blue); box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); }
         }
         /* INPUT AREA */
@@ -372,7 +414,9 @@
             font-weight: 400;
         }
-        .input-box input::placeholder { color: var(--text-dim); }
         .send-btn {
             background: var(--accent-blue);
@@ -395,21 +439,153 @@
         }
         /* SCROLLBAR */
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 10px; }
-        ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
-        .hidden { display: none !important; }
-        @media (max-width: 1024px) {
-            .sidebar { width: 0; transform: translateX(-100%); position: absolute; }
-            .messages-container, .input-area { padding: 30px 5%; }
-            .top-bar { padding: 0 20px; }
         }
     </style>
 </head>
 <body>
     <!-- ZONE 1: SIDEBAR -->
     <aside class="sidebar" id="sidebar">
         <div class="sidebar-header">
@@ -417,7 +593,7 @@
                 <span>+</span> New Case
             </button>
         </div>
         <div class="history-label">Case Archives</div>
         <div class="history-list" id="historyList">
             <!-- Threads pop here -->
@@ -431,13 +607,16 @@
                     <div style="font-size: 0.7rem; color: var(--text-dim);">Active Consultation</div>
                 </div>
             </div>
-            <a href="/role" style="display: block; margin-top: 15px; color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 500;">← Change Role</a>
         </div>
     </aside>
     <!-- ZONE 2: MAIN AREA -->
     <main class="main-chat">
         <header class="top-bar">
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ AI Legal Assistant</span>
                 <div class="status-pill">
@@ -448,10 +627,14 @@
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Citizen Framework v4.0 PRO</div>
         </header>
-        <div id="welcomeScreen" style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px; animation: float 6s ease-in-out infinite;">🤖</div>
-            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Intelligence at your service.</h1>
-            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Describe your legal issue, ask about sections, or get procedural guidance. Your Indian Law expert is ready to assist.</p>
         </div>
         <div class="messages-container" id="chatContainer">
@@ -467,12 +650,20 @@
         <div class="input-area">
             <div class="input-box">
-                <input type="text" id="messageInput" placeholder="How can I help you navigate the law today?" autocomplete="off">
                 <button class="send-btn" id="sendButton">
-                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
-            <p style="text-align: center; font-size: 0.75rem; color: var(--text-dim); margin-top: 18px; font-weight: 400; opacity: 0.8;">⚠️ AI can provide guidance based on IPC/BNS/CrPC. For critical judicial matters, always consult a certified advocate.</p>
         </div>
     </main>
@@ -492,13 +683,13 @@
         function formatResponse(text) {
             let formatted = text;
             // Header mapping (### titles)
             formatted = formatted.replace(/### (.*?)\s*(\n|$)/g, "<h3>⚖️ $1</h3>");
             // Highlight boxes (! at start of line)
             formatted = formatted.replace(/^! (.*?)$/gm, '<div class="highlight">$1</div>');
             // Bullet points
             formatted = formatted.replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>");
             formatted = formatted.replace(/^\*\s(.*?)$/gm, "<li>$1</li>");
@@ -519,7 +710,7 @@
             ws.onmessage = (event) => {
                 typingIndicator.classList.add('hidden');
                 welcomeScreen.classList.add('hidden');
                 if (event.data === '[DONE]') {
                     saveInteraction(currentCaseId, messageInput.value, currentAiMessage);
                     return;
@@ -545,7 +736,7 @@
             welcomeScreen.classList.add('hidden');
             const msgDiv = document.createElement('div');
             msgDiv.className = `message ${type}-msg`;
             if (type === 'ai') {
                 msgDiv.innerHTML = formatResponse(content);
                 currentAiMessageElement = msgDiv;
@@ -563,7 +754,7 @@
             createNewMessage('user', text);
             ws.send(text);
             messageInput.value = '';
             currentAiMessage = '';
             currentAiMessageElement = null;
@@ -616,7 +807,7 @@
                     headers: { 'Authorization': `Bearer ${token}` }
                 });
                 const thread = await res.json();
                 currentCaseId = caseId;
                 chatContainer.innerHTML = '';
                 welcomeScreen.classList.add('hidden');
@@ -626,6 +817,12 @@
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
             } catch (err) { console.error(err); }
         }
@@ -648,11 +845,31 @@
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Citizen Dashboard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
         }
         @keyframes pulse-dot {
+            0% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            50% {
+                transform: scale(1.5);
+                opacity: 0.4;
+            }
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
         }
         /* MESSAGES AREA */
         }
         @keyframes message-slide {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         /* USER MSG */
             animation: typing-blink 1.4s infinite ease-in-out;
         }
+        .typing-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
         @keyframes typing-blink {
+            0%,
+            100% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.1);
+            }
         }
         @keyframes pulse-border {
+            0%,
+            100% {
+                border-color: var(--glass-border);
+            }
+            50% {
+                border-color: var(--accent-blue);
+                box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
+            }
         }
         /* INPUT AREA */
             font-weight: 400;
         }
+        .input-box input::placeholder {
+            color: var(--text-dim);
+        }
         .send-btn {
             background: var(--accent-blue);
         }
         /* SCROLLBAR */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--glass-border);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--text-dim);
+        }
+        .hidden {
+            display: none !important;
+        }
+        /* MOBILE RESPONSIVENESS & SIDEBAR SLIDE OUT */
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.8rem;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            z-index: 101;
+            transition: color 0.3s;
+        }
+        .menu-toggle:hover {
+            color: var(--accent-blue);
+        }
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(3, 6, 23, 0.6);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            z-index: 99;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .sidebar-overlay.active {
+            display: block;
+            opacity: 1;
+            pointer-events: auto;
+        }
+        @media (max-width: 768px) {
+            .menu-toggle {
+                display: flex;
+            }
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: -280px;
+                height: 100vh;
+                width: 280px;
+                transform: none !important;
+                transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
+            }
+            .sidebar.active {
+                left: 0;
+            }
+            .top-bar {
+                padding: 0 15px;
+            }
+            .top-bar > div:last-child {
+                display: none;
+            }
+            .messages-container {
+                padding: 25px 15px;
+                gap: 20px;
+            }
+            .user-msg {
+                max-width: 85%;
+                padding: 12px 18px;
+                font-size: 0.95rem;
+            }
+            .ai-msg {
+                max-width: 95%;
+                padding: 20px;
+                font-size: 0.95rem;
+            }
+            .ai-msg h3 {
+                font-size: 1.15rem;
+                margin-bottom: 15px;
+            }
+            .input-area {
+                padding: 15px 15px 25px 15px;
+            }
+            .input-box input {
+                padding: 12px 15px;
+                font-size: 0.95rem;
+            }
+            .send-btn {
+                width: 44px;
+                height: 44px;
+            }
+            #welcomeScreen h1 {
+                font-size: 1.8rem !important;
+                margin-bottom: 10px !important;
+            }
+            #welcomeScreen p {
+                font-size: 0.95rem !important;
+                max-width: 100% !important;
+            }
+            #welcomeScreen div:first-child {
+                font-size: 3.5rem !important;
+                margin-bottom: 15px !important;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
     <!-- ZONE 1: SIDEBAR -->
     <aside class="sidebar" id="sidebar">
         <div class="sidebar-header">
                 <span>+</span> New Case
             </button>
         </div>
         <div class="history-label">Case Archives</div>
         <div class="history-list" id="historyList">
             <!-- Threads pop here -->
                     <div style="font-size: 0.7rem; color: var(--text-dim);">Active Consultation</div>
                 </div>
             </div>
+            <a href="/role"
+                style="display: block; margin-top: 15px; color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 500;">←
+                Change Role</a>
         </div>
     </aside>
     <!-- ZONE 2: MAIN AREA -->
     <main class="main-chat">
         <header class="top-bar">
+            <button class="menu-toggle" id="menuToggle" aria-label="Toggle Sidebar">☰</button>
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ AI Legal Assistant</span>
                 <div class="status-pill">
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Citizen Framework v4.0 PRO</div>
         </header>
+        <div id="welcomeScreen"
+            style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px; animation: float 6s ease-in-out infinite;">🤖</div>
+            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Intelligence at
+                your service.</h1>
+            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Describe your
+                legal issue, ask about sections, or get procedural guidance. Your Indian Law expert is ready to assist.
+            </p>
         </div>
         <div class="messages-container" id="chatContainer">
         <div class="input-area">
             <div class="input-box">
+                <input type="text" id="messageInput" placeholder="How can I help you navigate the law today?"
+                    autocomplete="off">
                 <button class="send-btn" id="sendButton">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                        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>
+            <p
+                style="text-align: center; font-size: 0.75rem; color: var(--text-dim); margin-top: 18px; font-weight: 400; opacity: 0.8;">
+                ⚠️ AI can provide guidance based on IPC/BNS/CrPC. For critical judicial matters, always consult a
+                certified advocate.</p>
         </div>
     </main>
         function formatResponse(text) {
             let formatted = text;
             // Header mapping (### titles)
             formatted = formatted.replace(/### (.*?)\s*(\n|$)/g, "<h3>⚖️ $1</h3>");
             // Highlight boxes (! at start of line)
             formatted = formatted.replace(/^! (.*?)$/gm, '<div class="highlight">$1</div>');
             // Bullet points
             formatted = formatted.replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>");
             formatted = formatted.replace(/^\*\s(.*?)$/gm, "<li>$1</li>");
             ws.onmessage = (event) => {
                 typingIndicator.classList.add('hidden');
                 welcomeScreen.classList.add('hidden');
                 if (event.data === '[DONE]') {
                     saveInteraction(currentCaseId, messageInput.value, currentAiMessage);
                     return;
             welcomeScreen.classList.add('hidden');
             const msgDiv = document.createElement('div');
             msgDiv.className = `message ${type}-msg`;
             if (type === 'ai') {
                 msgDiv.innerHTML = formatResponse(content);
                 currentAiMessageElement = msgDiv;
             createNewMessage('user', text);
             ws.send(text);
             messageInput.value = '';
             currentAiMessage = '';
             currentAiMessageElement = null;
                     headers: { 'Authorization': `Bearer ${token}` }
                 });
                 const thread = await res.json();
                 currentCaseId = caseId;
                 chatContainer.innerHTML = '';
                 welcomeScreen.classList.add('hidden');
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
+                if (window.innerWidth <= 768) {
+                    const sidebar = document.querySelector('.sidebar');
+                    const sidebarOverlay = document.getElementById('sidebarOverlay');
+                    if (sidebar) sidebar.classList.remove('active');
+                    if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+                }
             } catch (err) { console.error(err); }
         }
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
+            if (window.innerWidth <= 768) {
+                const sidebar = document.querySelector('.sidebar');
+                const sidebarOverlay = document.getElementById('sidebarOverlay');
+                if (sidebar) sidebar.classList.remove('active');
+                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+            }
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
+        // Mobile Sidebar Toggling Logic
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.querySelector('.sidebar');
+        const sidebarOverlay = document.getElementById('sidebarOverlay');
+        function toggleSidebar() {
+            sidebar.classList.toggle('active');
+            sidebarOverlay.classList.toggle('active');
+        }
+        menuToggle.addEventListener('click', toggleSidebar);
+        sidebarOverlay.addEventListener('click', toggleSidebar);
     </script>
 </body>
 </html>

src/apps/templates/judgedashboard.html CHANGED Viewed

@@ -339,6 +339,10 @@
             .header h1 {
                 font-size: 1.4rem;
             }
         }
         /* Animation for case cards */

             .header h1 {
                 font-size: 1.4rem;
             }
+            .user-info span {
+                display: none;
+            }
         }
         /* Animation for case cards */

src/apps/templates/legalrights.html CHANGED Viewed

@@ -1,186 +1,320 @@
-<!-- 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>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Legal Rights & Protection Portal</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #E91E63;
+            --secondary: #9C27B0;
+            --accent: #FF4081;
+            --dark: #2A0944;
+            --light: #F8BBD0;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #fff5f7 0%, #f8f4ff 100%);
+            color: var(--dark);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .safety-tips {
+            flex: 1;
+            padding: 4rem 5%;
+            max-width: 1200px;
+            margin: 0 auto;
+            width: 100%;
+        }
+        .page-title {
+            text-align: center;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 3rem;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .safety-tips .grid-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+        .safety-tips .feature-card {
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(233, 30, 99, 0.1);
+            padding: 2rem;
+            border-radius: 20px;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 8px 32px rgba(233, 30, 99, 0.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .safety-tips .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(233, 30, 99, 0.1);
+        }
+        .safety-tips h3 {
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            color: var(--dark);
+            border-bottom: 2px solid rgba(233, 30, 99, 0.1);
+            padding-bottom: 0.8rem;
+        }
+        .safety-tips ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .safety-tips li {
+            padding: 0.8rem 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            transition: transform 0.3s ease;
+            font-size: 0.95rem;
+        }
+        .safety-tips li:last-child {
+            border-bottom: none;
+        }
+        .safety-tips li:hover {
+            transform: translateX(8px);
+        }
+        .safety-tips i {
+            font-size: 1rem;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            color: white;
+            flex-shrink: 0;
+        }
+        .safety-kit {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 1px solid rgba(233, 30, 99, 0.1);
+            box-shadow: 0 8px 32px rgba(233, 30, 99, 0.05);
+            margin: 3rem 0;
+        }
+        .safety-kit h2 {
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+            color: var(--dark);
+        }
+        .safety-kit p {
+            margin-bottom: 1rem;
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+        }
+        .action-buttons {
+            display: flex;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+            margin-top: 2rem;
+        }
+        .safety-button {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border: none;
+            padding: 0.9rem 1.8rem;
+            border-radius: 50px;
+            color: white;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
+        }
+        .safety-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(233, 30, 99, 0.3);
+        }
+        .back-button {
+            background: #555;
+            border: none;
+            padding: 0.9rem 1.8rem;
+            border-radius: 50px;
+            color: white;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .back-button:hover {
+            background: #444;
+            transform: translateY(-2px);
+        }
+        @media (max-width: 768px) {
+            .safety-tips {
+                padding: 2rem 5%;
+            }
+            .page-title {
+                font-size: 2rem;
+                margin-bottom: 2rem;
+            }
+            .safety-tips .feature-card {
+                padding: 1.5rem;
+            }
+            .safety-kit {
+                padding: 1.5rem;
+            }
+            .action-buttons {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            .safety-button, .back-button {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <section class="safety-tips" id="safety">
+        <h1 class="page-title">Legal Rights & Protection</h1>
+        <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)</li>
+                    <li><i class="fas fa-university"></i> Right to education (Article 21A)</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 (Section 41A CrPC)</li>
+                </ul>
+            </div>
+            <div class="feature-card">
+                <h3>👩‍⚖️ Women's Legal Rights</h3>
+                <ul>
+                    <li><i class="fas fa-venus"></i> Free legal aid (Legal Services Authorities Act)</li>
+                    <li><i class="fas fa-home"></i> Right to residence (PWDVA, 2005)</li>
+                    <li><i class="fas fa-shield-alt"></i> Sexual harassment protection (POSH Act, 2013)</li>
+                    <li><i class="fas fa-exclamation-triangle"></i> Immediate assistance under Zero FIR</li>
+                </ul>
+            </div>
+            <div class="feature-card">
+                <h3>🛑 Consumer Rights</h3>
+                <ul>
+                    <li><i class="fas fa-receipt"></i> Right to be informed of product details</li>
+                    <li><i class="fas fa-shield-alt"></i> Right to seek redressal for unfair practices</li>
+                    <li><i class="fas fa-handshake"></i> Right to consumer education</li>
+                    <li><i class="fas fa-money-bill-wave"></i> Claim compensation for defective goods</li>
+                </ul>
+            </div>
+        </div>
+        <!-- Legal Resources Section -->
+        <div class="safety-kit">
+            <h2>Know Your Rights Checklist</h2>
+            <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>
+        <div class="action-buttons">
+            <button class="safety-button" onclick="downloadLegalGuide()">
+                <i class="fas fa-download"></i>
+                Download Legal Rights Guide
+            </button>
+            <button class="back-button" onclick="goBack()">
+                <i class="fas fa-arrow-left"></i>
+                Back to Previous Page
+            </button>
+        </div>
+    </section>
+    <script>
+    function downloadLegalGuide() {
+        const content = `==================================================
+LEGAL RIGHTS & PROTECTION GUIDE
+==================================================
+1. FUNDAMENTAL LEGAL RIGHTS:
+- Right to equality (Article 14-18 of the Constitution).
+- Right to education (Article 21A - Free and compulsory education).
+- Right to legal aid (Article 39A - Equal justice and free legal aid).
+- Protection from arrest (Section 41A CrPC - Procedure of arrest).
+2. WOMEN'S LEGAL RIGHTS:
+- Right to free legal aid (Legal Services Authorities Act).
+- Right to residence (Protection of Women from Domestic Violence Act, 2005).
+- Protection against sexual harassment at the workplace (POSH Act, 2013).
+- Right to immediate assistance under Zero FIR.
+3. CONSUMER RIGHTS:
+- Right to be informed about product/service details before purchase.
+- Right to seek redressal for unfair trade practices.
+- Right to consumer education and awareness.
+- Right to claim compensation for defective goods.
+==================================================
+REPORT OFFENSES / CONTACT HELPLINES:
+National Emergency: 112
+Women's Helpline: 1091
+Consumer Complaints Helpline: 14400 / 1915
+==================================================`;
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'Legal_Rights_Guide.txt';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+    function goBack() {
+        if (window.history.length > 1) {
+            window.history.back();
+        } else {
+            window.location.href = '/woman.html';
+        }
+    }
+    </script>
+</body>
+</html>

src/apps/templates/minor.html CHANGED Viewed

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Friendly Law Learning</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
@@ -17,43 +19,256 @@
             --glass-border: rgba(255, 255, 255, 0.08);
         }
-        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
-        body { background-color: var(--bg-dark); color: var(--text-primary); height: 100vh; display: flex; overflow: hidden; }
-        .sidebar { width: 280px; background: var(--sidebar-bg); border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; z-index: 100; }
-        .sidebar-header { padding: 30px 20px; }
         .new-chat-btn {
-            width: 100%; padding: 14px; background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
-            border: none; border-radius: 12px; color: white; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: 0.3s;
             box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
         }
-        .new-chat-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(16, 185, 129, 0.3); }
-        .history-label { padding: 0 20px 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); font-weight: 700; }
-        .history-list { flex: 1; overflow-y: auto; padding: 10px; }
-        .history-item { padding: 12px 15px; border-radius: 10px; margin-bottom: 5px; cursor: pointer; transition: 0.2s; font-size: 0.85rem; color: var(--text-dim); display: flex; align-items: center; gap: 10px; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .history-item:hover { background: var(--glass-bg); color: white; border-color: var(--glass-border); }
-        .sidebar-footer { padding: 20px; border-top: 1px solid var(--glass-border); }
-        .user-badge { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--glass-bg); border-radius: 12px; }
-        .user-avatar { width: 32px; height: 32px; background: var(--accent-green); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 0.8rem; }
-        .main-chat { flex: 1; display: flex; flex-direction: column; position: relative; background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.03), transparent); }
-        .top-bar { height: 70px; background: rgba(3, 6, 23, 0.82); backdrop-filter: blur(25px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; z-index: 50; }
-        .status-pill { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; background: rgba(16, 185, 129, 0.1); color: #34d399; padding: 4px 12px; border-radius: 20px; font-weight: 600; border: 1px solid rgba(16, 185, 129, 0.2); }
-        .status-dot { width: 6px; height: 6px; background: #34d399; border-radius: 50%; animation: pulse-dot 2s infinite; }
-        @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }
-        .messages-container { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 30px; scroll-behavior: smooth; }
-        .message { max-width: 850px; animation: message-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
-        @keyframes message-slide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-        .user-msg { align-self: flex-end; background: linear-gradient(135deg, var(--accent-green), var(--accent-teal)); padding: 16px 24px; border-radius: 20px 20px 4px 20px; color: white; max-width: 70%; line-height: 1.6; }
-        .ai-msg { align-self: flex-start; background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 30px; border-radius: 20px 20px 20px 4px; max-width: 85%; line-height: 1.8; color: #e2e8f0; }
-        .ai-msg h3 { color: #34d399; font-size: 1.3rem; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
-        .ai-msg li { position: relative; padding-left: 28px; margin-bottom: 15px; }
-        .ai-msg li::before { content: "✨"; position: absolute; left: 0; font-size: 0.9rem; }
-        .highlight { background: rgba(16, 185, 129, 0.08); border-left: 4px solid var(--accent-green); padding: 22px; margin: 25px 0; border-radius: 0 16px 16px 0; font-weight: 500; color: #fff; }
         .typing {
             display: flex;
@@ -88,29 +303,217 @@
             animation: typing-blink 1.4s infinite ease-in-out;
         }
-        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing-blink {
-            0%, 100% { opacity: 0.3; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.1); }
         }
         @keyframes pulse-border {
-            0%, 100% { border-color: var(--glass-border); }
-            50% { border-color: #34d399; box-shadow: 0 0 20px rgba(52, 211, 153, 0.1); }
         }
-        .input-area { padding: 30px 10%; background: linear-gradient(to top, var(--bg-dark) 50%, transparent); border-top: 1px solid var(--glass-border); z-index: 60; }
-        .input-box { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 18px; padding: 6px; display: flex; align-items: center; transition: 0.3s; }
-        .input-box:focus-within { border-color: var(--accent-green); box-shadow: 0 0 30px rgba(16, 185, 129, 0.2); }
-        .input-box input { flex: 1; background: transparent; border: none; padding: 16px 24px; color: white; font-size: 1.05rem; outline: none; }
-        .send-btn { background: var(--accent-green); color: white; border: none; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; margin-right: 6px; }
-        .hidden { display: none !important; }
     </style>
 </head>
 <body>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>+</span> Start New Chat</button>
@@ -126,24 +529,32 @@
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
-                <a href="/role" style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">← Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Fun Mode)</span>
-                <div class="status-pill"><div class="status-dot"></div>Learning Buddy Active</div>
             </div>
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Easy Explainer v4.0</div>
         </header>
-        <div id="welcomeScreen" style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px;">👦</div>
-            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Law made simple.</h1>
-            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Let’s talk about your rights in a fun, easy way! Ask me anything about school, safety, or basic laws.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
@@ -156,9 +567,14 @@
         <div class="input-area">
             <div class="input-box">
-                <input type="text" id="messageInput" placeholder="Ask your buddy a legal question..." autocomplete="off">
                 <button class="send-btn" id="sendButton">
-                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
@@ -287,6 +703,12 @@
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
             } catch (err) { console.error(err); }
         }
@@ -309,11 +731,31 @@
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Friendly Law Learning</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
             --glass-border: rgba(255, 255, 255, 0.08);
         }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
+            height: 100vh;
+            display: flex;
+            overflow: hidden;
+        }
+        .sidebar {
+            width: 280px;
+            background: var(--sidebar-bg);
+            border-right: 1px solid var(--glass-border);
+            display: flex;
+            flex-direction: column;
+            z-index: 100;
+        }
+        .sidebar-header {
+            padding: 30px 20px;
+        }
         .new-chat-btn {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
+            border: none;
+            border-radius: 12px;
+            color: white;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            cursor: pointer;
+            transition: 0.3s;
             box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
         }
+        .new-chat-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 25px rgba(16, 185, 129, 0.3);
+        }
+        .history-label {
+            padding: 0 20px 10px;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: var(--text-dim);
+            font-weight: 700;
+        }
+        .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+        }
+        .history-item {
+            padding: 12px 15px;
+            border-radius: 10px;
+            margin-bottom: 5px;
+            cursor: pointer;
+            transition: 0.2s;
+            font-size: 0.85rem;
+            color: var(--text-dim);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            border: 1px solid transparent;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .history-item:hover {
+            background: var(--glass-bg);
+            color: white;
+            border-color: var(--glass-border);
+        }
+        .sidebar-footer {
+            padding: 20px;
+            border-top: 1px solid var(--glass-border);
+        }
+        .user-badge {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px;
+            background: var(--glass-bg);
+            border-radius: 12px;
+        }
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            background: var(--accent-green);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            color: white;
+            font-size: 0.8rem;
+        }
+        .main-chat {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.03), transparent);
+        }
+        .top-bar {
+            height: 70px;
+            background: rgba(3, 6, 23, 0.82);
+            backdrop-filter: blur(25px);
+            border-bottom: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 40px;
+            z-index: 50;
+        }
+        .status-pill {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.75rem;
+            background: rgba(16, 185, 129, 0.1);
+            color: #34d399;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-weight: 600;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+        .status-dot {
+            width: 6px;
+            height: 6px;
+            background: #34d399;
+            border-radius: 50%;
+            animation: pulse-dot 2s infinite;
+        }
+        @keyframes pulse-dot {
+            0%,
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            50% {
+                transform: scale(1.5);
+                opacity: 0.4;
+            }
+        }
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 40px 10%;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+            scroll-behavior: smooth;
+        }
+        .message {
+            max-width: 850px;
+            animation: message-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+        }
+        @keyframes message-slide {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .user-msg {
+            align-self: flex-end;
+            background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
+            padding: 16px 24px;
+            border-radius: 20px 20px 4px 20px;
+            color: white;
+            max-width: 70%;
+            line-height: 1.6;
+        }
+        .ai-msg {
+            align-self: flex-start;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            padding: 30px;
+            border-radius: 20px 20px 20px 4px;
+            max-width: 85%;
+            line-height: 1.8;
+            color: #e2e8f0;
+        }
+        .ai-msg h3 {
+            color: #34d399;
+            font-size: 1.3rem;
+            margin-bottom: 20px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .ai-msg li {
+            position: relative;
+            padding-left: 28px;
+            margin-bottom: 15px;
+        }
+        .ai-msg li::before {
+            content: "✨";
+            position: absolute;
+            left: 0;
+            font-size: 0.9rem;
+        }
+        .highlight {
+            background: rgba(16, 185, 129, 0.08);
+            border-left: 4px solid var(--accent-green);
+            padding: 22px;
+            margin: 25px 0;
+            border-radius: 0 16px 16px 0;
+            font-weight: 500;
+            color: #fff;
+        }
         .typing {
             display: flex;
             animation: typing-blink 1.4s infinite ease-in-out;
         }
+        .typing-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
         @keyframes typing-blink {
+            0%,
+            100% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.1);
+            }
         }
         @keyframes pulse-border {
+            0%,
+            100% {
+                border-color: var(--glass-border);
+            }
+            50% {
+                border-color: #34d399;
+                box-shadow: 0 0 20px rgba(52, 211, 153, 0.1);
+            }
         }
+        .input-area {
+            padding: 30px 10%;
+            background: linear-gradient(to top, var(--bg-dark) 50%, transparent);
+            border-top: 1px solid var(--glass-border);
+            z-index: 60;
+        }
+        .input-box {
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--glass-border);
+            border-radius: 18px;
+            padding: 6px;
+            display: flex;
+            align-items: center;
+            transition: 0.3s;
+        }
+        .input-box:focus-within {
+            border-color: var(--accent-green);
+            box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
+        }
+        .input-box input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 16px 24px;
+            color: white;
+            font-size: 1.05rem;
+            outline: none;
+        }
+        .send-btn {
+            background: var(--accent-green);
+            color: white;
+            border: none;
+            width: 50px;
+            height: 50px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: 0.3s;
+            margin-right: 6px;
+        }
+        .hidden {
+            display: none !important;
+        }
+        /* MOBILE RESPONSIVENESS */
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.8rem;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            z-index: 101;
+            transition: color 0.3s;
+        }
+        .menu-toggle:hover {
+            color: var(--accent-green);
+        }
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(3, 6, 23, 0.6);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            z-index: 99;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .sidebar-overlay.active {
+            display: block;
+            opacity: 1;
+            pointer-events: auto;
+        }
+        @media (max-width: 768px) {
+            .menu-toggle {
+                display: flex;
+            }
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: -280px;
+                height: 100vh;
+                width: 280px;
+                transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
+            }
+            .sidebar.active {
+                left: 0;
+            }
+            .top-bar {
+                padding: 0 15px;
+            }
+            .top-bar > div:last-child {
+                display: none;
+            }
+            .messages-container {
+                padding: 25px 15px;
+                gap: 20px;
+            }
+            .user-msg {
+                max-width: 85%;
+                padding: 12px 18px;
+                font-size: 0.95rem;
+            }
+            .ai-msg {
+                max-width: 95%;
+                padding: 20px;
+                font-size: 0.95rem;
+            }
+            .ai-msg h3 {
+                font-size: 1.15rem;
+                margin-bottom: 15px;
+            }
+            .input-area {
+                padding: 15px 15px 25px 15px;
+            }
+            .input-box input {
+                padding: 12px 15px;
+                font-size: 0.95rem;
+            }
+            .send-btn {
+                width: 44px;
+                height: 44px;
+            }
+            #welcomeScreen h1 {
+                font-size: 1.8rem !important;
+                margin-bottom: 10px !important;
+            }
+            #welcomeScreen p {
+                font-size: 0.95rem !important;
+                max-width: 100% !important;
+            }
+            #welcomeScreen div:first-child {
+                font-size: 3.5rem !important;
+                margin-bottom: 15px !important;
+            }
+        }
     </style>
 </head>
 <body>
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>+</span> Start New Chat</button>
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
+                <a href="/role"
+                    style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">←
+                    Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
+            <button class="menu-toggle" id="menuToggle" aria-label="Toggle Sidebar">☰</button>
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Fun Mode)</span>
+                <div class="status-pill">
+                    <div class="status-dot"></div>Learning Buddy Active
+                </div>
             </div>
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Easy Explainer v4.0</div>
         </header>
+        <div id="welcomeScreen"
+            style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px;">👦</div>
+            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Law made simple.
+            </h1>
+            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Let’s talk about
+                your rights in a fun, easy way! Ask me anything about school, safety, or basic laws.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
         <div class="input-area">
             <div class="input-box">
+                <input type="text" id="messageInput" placeholder="Ask your buddy a legal question..."
+                    autocomplete="off">
                 <button class="send-btn" id="sendButton">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                        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>
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
+                if (window.innerWidth <= 768) {
+                    const sidebar = document.querySelector('.sidebar');
+                    const sidebarOverlay = document.getElementById('sidebarOverlay');
+                    if (sidebar) sidebar.classList.remove('active');
+                    if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+                }
             } catch (err) { console.error(err); }
         }
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
+            if (window.innerWidth <= 768) {
+                const sidebar = document.querySelector('.sidebar');
+                const sidebarOverlay = document.getElementById('sidebarOverlay');
+                if (sidebar) sidebar.classList.remove('active');
+                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+            }
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
+        // Mobile Sidebar Toggling Logic
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.querySelector('.sidebar');
+        const sidebarOverlay = document.getElementById('sidebarOverlay');
+        function toggleSidebar() {
+            sidebar.classList.toggle('active');
+            sidebarOverlay.classList.toggle('active');
+        }
+        menuToggle.addEventListener('click', toggleSidebar);
+        sidebarOverlay.addEventListener('click', toggleSidebar);
     </script>
 </body>
 </html>

src/apps/templates/roleselection.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,9 +8,15 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
         /* Existing styles... */
-        body.direct-roles #landing { display: none !important; }
-        body.direct-roles #rolePage { opacity: 1 !important; visibility: visible !important; }
         * {
             margin: 0;
             padding: 0;
@@ -17,7 +24,8 @@
             font-family: 'Poppins', sans-serif;
         }
-        body, html {
             height: 100%;
             overflow: hidden;
             background-color: #030617;
@@ -55,7 +63,8 @@
             overflow: hidden;
             transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 10;
-            perspective: 1000px; /* For the tilt effect */
         }
         .hero::before {
@@ -85,13 +94,23 @@
         }
         @keyframes moveLight {
-            from { transform: translate(0, 0); }
-            to { transform: translate(250px, 150px); }
         }
         @keyframes moveLight2 {
-            from { transform: translate(0, 0); }
-            to { transform: translate(-250px, -150px); }
         }
         /* FLOATING CONTENT */
@@ -107,9 +126,17 @@
         }
         @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-15px); }
-            100% { transform: translateY(0px); }
         }
         .tag {
@@ -141,7 +168,10 @@
         }
         @media (max-width: 768px) {
-            .content h1 { white-space: normal; font-size: 3rem; }
         }
         .content p#subtitle {
@@ -181,8 +211,17 @@
         }
         @keyframes blink {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.3; transform: scale(0.8); }
         }
         .cta-btn {
@@ -205,9 +244,17 @@
         }
         @keyframes pulseGlow {
-            0% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); }
-            50% { box-shadow: 0 0 35px rgba(99, 102, 241, 0.7); }
-            100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); }
         }
         .cta-btn::after {
@@ -253,6 +300,7 @@
             visibility: hidden;
             transition: opacity 1s ease;
             z-index: 5;
         }
         #rolePage.visible {
@@ -295,10 +343,70 @@
             gap: 25px;
         }
-        @media (max-width: 600px) {
-            .roles { grid-template-columns: 1fr; gap: 15px; }
-            .role-selection { padding: 40px 25px; }
-            .content h1 { line-height: 1.1; }
         }
         .role {
@@ -337,8 +445,13 @@
         }
         @keyframes sweep {
-            from { transform: translateX(-100%) skewX(-15deg); }
-            to { transform: translateX(100%) skewX(-15deg); }
         }
         .role:hover {
@@ -369,21 +482,42 @@
         }
         @keyframes fadeSlide {
-            from { opacity: 0; transform: translateY(35px); }
-            to { opacity: 1; transform: translateY(0); }
         }
         @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
         }
         @keyframes slideUp {
-            from { opacity: 0; transform: translateY(60px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        .hidden { display: none !important; }
         .fade-out {
             opacity: 0;
@@ -413,7 +547,8 @@
     <div id="rolePage">
         <div class="role-selection">
             <h2>Who are you?</h2>
-            <p>Select your role to unlock precise legal intelligence and expert guidance tailored to your specific framework.</p>
             <div class="roles">
                 <button class="role" data-role="Judge">👨⚖️ Judge</button>
                 <button class="role" data-role="Advocate/Lawyer">👩⚖️ Advocate</button>
@@ -423,7 +558,8 @@
                 <button class="role" data-role="Minor">👦 Minor</button>
             </div>
             <footer class="professional-footer">
-                &copy; 2026 Law Bot AI • Forged for Justice • Managed by <a href="https://www.linkedin.com/in/vishwanath77" target="_blank">Vishwanath</a>
             </footer>
         </div>
     </div>
@@ -444,7 +580,7 @@
                 // --- PARALLAX TILT EFFECT ---
                 const x = (window.innerWidth / 2 - e.clientX) / 75;
                 const y = (window.innerHeight / 2 - e.clientY) / 75;
                 // Keep the floating animation active by adding these transforms
                 contentEl.style.transform = `perspective(1000px) rotateY(${x}deg) rotateX(${y}deg)`;
             });
@@ -452,7 +588,7 @@
             // --- PARTICLES ANIMATION ---
             const canvas = document.getElementById("particles");
             const ctx = canvas.getContext("2d");
             let w, h, particles = [];
             function initCanvas() {
@@ -533,4 +669,5 @@
         });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
         /* Existing styles... */
+        body.direct-roles #landing {
+            display: none !important;
+        }
+        body.direct-roles #rolePage {
+            opacity: 1 !important;
+            visibility: visible !important;
+        }
         * {
             margin: 0;
             padding: 0;
             font-family: 'Poppins', sans-serif;
         }
+        body,
+        html {
             height: 100%;
             overflow: hidden;
             background-color: #030617;
             overflow: hidden;
             transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 10;
+            perspective: 1000px;
+            /* For the tilt effect */
         }
         .hero::before {
         }
         @keyframes moveLight {
+            from {
+                transform: translate(0, 0);
+            }
+            to {
+                transform: translate(250px, 150px);
+            }
         }
         @keyframes moveLight2 {
+            from {
+                transform: translate(0, 0);
+            }
+            to {
+                transform: translate(-250px, -150px);
+            }
         }
         /* FLOATING CONTENT */
         }
         @keyframes float {
+            0% {
+                transform: translateY(0px);
+            }
+            50% {
+                transform: translateY(-15px);
+            }
+            100% {
+                transform: translateY(0px);
+            }
         }
         .tag {
         }
         @media (max-width: 768px) {
+            .content h1 {
+                white-space: normal;
+                font-size: 3rem;
+            }
         }
         .content p#subtitle {
         }
         @keyframes blink {
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            50% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
         }
         .cta-btn {
         }
         @keyframes pulseGlow {
+            0% {
+                box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
+            }
+            50% {
+                box-shadow: 0 0 35px rgba(99, 102, 241, 0.7);
+            }
+            100% {
+                box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
+            }
         }
         .cta-btn::after {
             visibility: hidden;
             transition: opacity 1s ease;
             z-index: 5;
+            overflow-y: auto;
         }
         #rolePage.visible {
             gap: 25px;
         }
+        @media (max-width: 768px) {
+            #rolePage {
+                align-items: flex-start;
+                padding: 40px 15px;
+            }
+            .role-selection {
+                padding: 35px 20px;
+                border-radius: 30px;
+                margin-top: 20px;
+                margin-bottom: 20px;
+            }
+            .role-selection h2 {
+                font-size: 2.2rem;
+            }
+            .role-selection p {
+                margin-bottom: 30px;
+                font-size: 1rem;
+            }
+            .roles {
+                grid-template-columns: 1fr;
+                gap: 15px;
+            }
+            .role {
+                padding: 18px 20px;
+                font-size: 1.05rem;
+            }
+            .content {
+                padding: 20px 15px;
+            }
+            .tag {
+                font-size: 0.7rem;
+                padding: 4px 12px;
+                margin-bottom: 15px;
+            }
+            .content h1 {
+                font-size: 2.2rem !important;
+                line-height: 1.2;
+                margin-bottom: 15px;
+            }
+            .content p#subtitle {
+                font-size: 0.95rem !important;
+                line-height: 1.5;
+                margin-bottom: 25px;
+                min-height: auto;
+            }
+            .status {
+                margin-bottom: 35px;
+                font-size: 0.75rem;
+            }
+            .cta-btn {
+                padding: 16px 45px;
+                font-size: 1rem;
+            }
         }
         .role {
         }
         @keyframes sweep {
+            from {
+                transform: translateX(-100%) skewX(-15deg);
+            }
+            to {
+                transform: translateX(100%) skewX(-15deg);
+            }
         }
         .role:hover {
         }
         @keyframes fadeSlide {
+            from {
+                opacity: 0;
+                transform: translateY(35px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
         }
         @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(60px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
+        .hidden {
+            display: none !important;
+        }
         .fade-out {
             opacity: 0;
     <div id="rolePage">
         <div class="role-selection">
             <h2>Who are you?</h2>
+            <p>Select your role to unlock precise legal intelligence and expert guidance tailored to your specific
+                framework.</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="Minor">👦 Minor</button>
             </div>
             <footer class="professional-footer">
+                &copy; 2026 Law Bot AI • Forged for Justice • Managed by <a
+                    href="https://www.linkedin.com/in/vishwanath77" target="_blank">Vishwanath</a>
             </footer>
         </div>
     </div>
                 // --- PARALLAX TILT EFFECT ---
                 const x = (window.innerWidth / 2 - e.clientX) / 75;
                 const y = (window.innerHeight / 2 - e.clientY) / 75;
                 // Keep the floating animation active by adding these transforms
                 contentEl.style.transform = `perspective(1000px) rotateY(${x}deg) rotateX(${y}deg)`;
             });
             // --- PARTICLES ANIMATION ---
             const canvas = document.getElementById("particles");
             const ctx = canvas.getContext("2d");
             let w, h, particles = [];
             function initCanvas() {
         });
     </script>
 </body>
 </html>

src/apps/templates/safetytips.html CHANGED Viewed

@@ -1,186 +1,326 @@
-<!-- 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>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Women's Safety & Protection Guidelines</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #E91E63;
+            --secondary: #9C27B0;
+            --accent: #FF4081;
+            --dark: #2A0944;
+            --light: #F8BBD0;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #fff5f7 0%, #f8f4ff 100%);
+            color: var(--dark);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .safety-tips {
+            flex: 1;
+            padding: 4rem 5%;
+            max-width: 1200px;
+            margin: 0 auto;
+            width: 100%;
+        }
+        .page-title {
+            text-align: center;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 3rem;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .safety-tips .grid-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+        .safety-tips .feature-card {
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(233, 30, 99, 0.1);
+            padding: 2rem;
+            border-radius: 20px;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 8px 32px rgba(233, 30, 99, 0.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .safety-tips .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(233, 30, 99, 0.1);
+        }
+        .safety-tips h3 {
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            color: var(--dark);
+            border-bottom: 2px solid rgba(233, 30, 99, 0.1);
+            padding-bottom: 0.8rem;
+        }
+        .safety-tips ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .safety-tips li {
+            padding: 0.8rem 0;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            transition: transform 0.3s ease;
+            font-size: 0.95rem;
+        }
+        .safety-tips li:last-child {
+            border-bottom: none;
+        }
+        .safety-tips li:hover {
+            transform: translateX(8px);
+        }
+        .safety-tips i {
+            font-size: 1rem;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            color: white;
+            flex-shrink: 0;
+        }
+        .safety-kit {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 1px solid rgba(233, 30, 99, 0.1);
+            box-shadow: 0 8px 32px rgba(233, 30, 99, 0.05);
+            margin: 3rem 0;
+        }
+        .safety-kit h2 {
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+            color: var(--dark);
+        }
+        .safety-kit p {
+            margin-bottom: 1rem;
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+        }
+        .action-buttons {
+            display: flex;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+            margin-top: 2rem;
+        }
+        .safety-button {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border: none;
+            padding: 0.9rem 1.8rem;
+            border-radius: 50px;
+            color: white;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
+        }
+        .safety-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(233, 30, 99, 0.3);
+        }
+        .back-button {
+            background: #555;
+            border: none;
+            padding: 0.9rem 1.8rem;
+            border-radius: 50px;
+            color: white;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .back-button:hover {
+            background: #444;
+            transform: translateY(-2px);
+        }
+        @media (max-width: 768px) {
+            .safety-tips {
+                padding: 2rem 5%;
+            }
+            .page-title {
+                font-size: 2rem;
+                margin-bottom: 2rem;
+            }
+            .safety-tips .feature-card {
+                padding: 1.5rem;
+            }
+            .safety-kit {
+                padding: 1.5rem;
+            }
+            .action-buttons {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            .safety-button, .back-button {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <section class="safety-tips" id="safety">
+        <h1 class="page-title">Safety & Protection Guidelines</h1>
+        <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 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 emergency)</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="safety-kit">
+            <h2>Emergency Preparedness Kit</h2>
+            <p>✅ Keep pepper spray in easy-to-reach pocket</p>
+            <p>✅ Save ICE (In Case of Emergency) contacts</p>
+            <p>✅ Create code word with family for danger situations</p>
+            <p>✅ Keep ₹100 cash separate for emergencies</p>
+        </div>
+        <div class="action-buttons">
+            <button class="safety-button" onclick="downloadSafetyGuide()">
+                <i class="fas fa-download"></i>
+                Download Safety Guide
+            </button>
+            <button class="back-button" onclick="goBack()">
+                <i class="fas fa-arrow-left"></i>
+                Back to Previous Page
+            </button>
+        </div>
+    </section>
+    <script>
+    function downloadSafetyGuide() {
+        const content = `==================================================
+WOMEN'S SAFETY & PROTECTION HANDBOOK
+==================================================
+1. GENERAL SAFETY TIPS:
+- Always share live location with trusted contacts.
+- Keep emergency numbers on speed dial (112, 1091).
+- Verify cab details before boarding (check number plate).
+- Avoid isolated ATMs and restrooms at night.
+2. PUBLIC TRANSPORT SAFETY:
+- Use women-only coaches in metros and trains.
+- Prefer front seats in buses.
+- Download RailMadad app (152 for railway emergencies).
+- Avoid empty bus stops at night.
+3. WORKPLACE SAFETY:
+- Know POSH Act 2013 provisions.
+- Document all incidents formally.
+- Use company transport for late hours.
+- Report inappropriate behavior immediately.
+4. EMERGENCY PREPAREDNESS CHECKLIST:
+- Keep pepper spray in an easy-to-reach pocket.
+- Save ICE (In Case of Emergency) contacts.
+- Create a code word with family for danger situations.
+- Keep a separate reserve of cash for emergencies.
+==================================================
+EMERGENCY NUMBERS:
+National Emergency: 112
+Women Helpline: 1091 / 181
+Railway Helpline: 139 / 152
+==================================================`;
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'Womens_Safety_Handbook.txt';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+    function goBack() {
+        if (window.history.length > 1) {
+            window.history.back();
+        } else {
+            window.location.href = '/woman.html';
+        }
+    }
+    </script>
+</body>
+</html>

src/apps/templates/studentchatbot.html CHANGED Viewed

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Student Framework</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
@@ -18,7 +20,9 @@
         }
         * {
-            margin: 0; padding: 0; box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
         }
@@ -35,63 +39,243 @@
             width: 280px;
             background: var(--sidebar-bg);
             border-right: 1px solid var(--glass-border);
-            display: flex; flex-direction: column;
             z-index: 100;
         }
-        .sidebar-header { padding: 30px 20px; }
         .new-chat-btn {
-            width: 100%; padding: 14px;
             background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border: none; border-radius: 12px;
-            color: white; font-weight: 600;
-            display: flex; align-items: center; justify-content: center; gap: 10px;
-            cursor: pointer; transition: 0.3s;
             box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
         }
-        .new-chat-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(59, 130, 246, 0.3); }
-        .history-label { padding: 0 20px 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); font-weight: 700; }
-        .history-list { flex: 1; overflow-y: auto; padding: 10px; }
         .history-item {
-            padding: 12px 15px; border-radius: 10px; margin-bottom: 5px;
-            cursor: pointer; transition: 0.2s; font-size: 0.85rem; color: var(--text-dim);
-            display: flex; align-items: center; gap: 10px; border: 1px solid transparent;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         }
-        .history-item:hover { background: var(--glass-bg); color: white; border-color: var(--glass-border); }
-        .sidebar-footer { padding: 20px; border-top: 1px solid var(--glass-border); }
-        .user-badge { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--glass-bg); border-radius: 12px; }
-        .user-avatar { width: 32px; height: 32px; background: var(--accent-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 0.8rem; }
         /* MAIN AREA */
-        .main-chat { flex: 1; display: flex; flex-direction: column; position: relative; background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.03), transparent); }
         .top-bar {
-            height: 70px; background: rgba(3, 6, 23, 0.82); backdrop-filter: blur(25px);
             border-bottom: 1px solid var(--glass-border);
-            display: flex; align-items: center; justify-content: space-between; padding: 0 40px; z-index: 50;
         }
-        .status-pill { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; background: rgba(59, 130, 246, 0.1); color: var(--accent-blue); padding: 4px 12px; border-radius: 20px; font-weight: 600; border: 1px solid rgba(59, 130, 246, 0.2); }
-        .status-dot { width: 6px; height: 6px; background: var(--accent-blue); border-radius: 50%; animation: pulse-dot 2s infinite; }
-        @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }
-        .messages-container { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 30px; scroll-behavior: smooth; }
-        .message { max-width: 850px; animation: message-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
-        @keyframes message-slide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-        .user-msg { align-self: flex-end; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); padding: 16px 24px; border-radius: 20px 20px 4px 20px; color: white; max-width: 70%; line-height: 1.6; }
-        .ai-msg { align-self: flex-start; background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 30px; border-radius: 20px 20px 20px 4px; max-width: 85%; line-height: 1.8; color: #e2e8f0; }
-        .ai-msg h3 { color: var(--accent-blue); font-size: 1.3rem; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
-        .ai-msg ul { margin: 20px 0; list-style: none; }
-        .ai-msg li { position: relative; padding-left: 28px; margin-bottom: 15px; }
-        .ai-msg li::before { content: "🎓"; position: absolute; left: 0; font-size: 0.9rem; }
-        .highlight { background: rgba(59, 130, 246, 0.08); border-left: 4px solid var(--accent-blue); padding: 22px; margin: 25px 0; border-radius: 0 16px 16px 0; font-weight: 500; color: #fff; }
         .typing {
             display: flex;
@@ -126,30 +310,222 @@
             animation: typing-blink 1.4s infinite ease-in-out;
         }
-        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing-blink {
-            0%, 100% { opacity: 0.3; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.1); }
         }
         @keyframes pulse-border {
-            0%, 100% { border-color: var(--glass-border); }
-            50% { border-color: var(--accent-blue); box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); }
         }
-        .input-area { padding: 30px 10%; background: linear-gradient(to top, var(--bg-dark) 50%, transparent); border-top: 1px solid var(--glass-border); z-index: 60; }
-        .input-box { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 18px; padding: 6px; display: flex; align-items: center; transition: 0.3s; }
-        .input-box:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 30px rgba(59, 130, 246, 0.2); }
-        .input-box input { flex: 1; background: transparent; border: none; padding: 16px 24px; color: white; font-size: 1.05rem; outline: none; }
-        .send-btn { background: var(--accent-blue); color: white; border: none; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; margin-right: 6px; }
-        .send-btn:hover { background: var(--accent-purple); transform: scale(1.1); }
-        .hidden { display: none !important; }
     </style>
 </head>
 <body>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>+</span> New Research</button>
@@ -165,25 +541,35 @@
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
-                <a href="/studentdashboard.html" style="color: var(--accent-blue); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 600;">Back to Dashboard</a>
-                <a href="/role" style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">← Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Student)</span>
-                <div class="status-pill"><div class="status-dot"></div>Academic Ready</div>
             </div>
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Educational Framework v4.0</div>
         </header>
-        <div id="welcomeScreen" style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px;">📚</div>
-            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Empowering your studies.</h1>
-            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Expert guidance for law students. Ask about case laws, sections, or get conceptual breakdowns for your exams.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
@@ -198,7 +584,11 @@
             <div class="input-box">
                 <input type="text" id="messageInput" placeholder="Enter your research query..." autocomplete="off">
                 <button class="send-btn" id="sendButton">
-                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
@@ -327,6 +717,12 @@
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
             } catch (err) { console.error(err); }
         }
@@ -349,11 +745,31 @@
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Student Framework</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
         }
         * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
         }
             width: 280px;
             background: var(--sidebar-bg);
             border-right: 1px solid var(--glass-border);
+            display: flex;
+            flex-direction: column;
             z-index: 100;
         }
+        .sidebar-header {
+            padding: 30px 20px;
+        }
         .new-chat-btn {
+            width: 100%;
+            padding: 14px;
             background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
+            border: none;
+            border-radius: 12px;
+            color: white;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            cursor: pointer;
+            transition: 0.3s;
             box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
         }
+        .new-chat-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 25px rgba(59, 130, 246, 0.3);
+        }
+        .history-label {
+            padding: 0 20px 10px;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: var(--text-dim);
+            font-weight: 700;
+        }
+        .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+        }
         .history-item {
+            padding: 12px 15px;
+            border-radius: 10px;
+            margin-bottom: 5px;
+            cursor: pointer;
+            transition: 0.2s;
+            font-size: 0.85rem;
+            color: var(--text-dim);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            border: 1px solid transparent;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
+        .history-item:hover {
+            background: var(--glass-bg);
+            color: white;
+            border-color: var(--glass-border);
+        }
+        .sidebar-footer {
+            padding: 20px;
+            border-top: 1px solid var(--glass-border);
+        }
+        .user-badge {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px;
+            background: var(--glass-bg);
+            border-radius: 12px;
+        }
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            background: var(--accent-blue);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            color: white;
+            font-size: 0.8rem;
+        }
         /* MAIN AREA */
+        .main-chat {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.03), transparent);
+        }
         .top-bar {
+            height: 70px;
+            background: rgba(3, 6, 23, 0.82);
+            backdrop-filter: blur(25px);
             border-bottom: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 40px;
+            z-index: 50;
         }
+        .status-pill {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.75rem;
+            background: rgba(59, 130, 246, 0.1);
+            color: var(--accent-blue);
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-weight: 600;
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+        .status-dot {
+            width: 6px;
+            height: 6px;
+            background: var(--accent-blue);
+            border-radius: 50%;
+            animation: pulse-dot 2s infinite;
+        }
+        @keyframes pulse-dot {
+            0%,
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            50% {
+                transform: scale(1.5);
+                opacity: 0.4;
+            }
+        }
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 40px 10%;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+            scroll-behavior: smooth;
+        }
+        .message {
+            max-width: 850px;
+            animation: message-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+        }
+        @keyframes message-slide {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .user-msg {
+            align-self: flex-end;
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
+            padding: 16px 24px;
+            border-radius: 20px 20px 4px 20px;
+            color: white;
+            max-width: 70%;
+            line-height: 1.6;
+        }
+        .ai-msg {
+            align-self: flex-start;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            padding: 30px;
+            border-radius: 20px 20px 20px 4px;
+            max-width: 85%;
+            line-height: 1.8;
+            color: #e2e8f0;
+        }
+        .ai-msg h3 {
+            color: var(--accent-blue);
+            font-size: 1.3rem;
+            margin-bottom: 20px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .ai-msg ul {
+            margin: 20px 0;
+            list-style: none;
+        }
+        .ai-msg li {
+            position: relative;
+            padding-left: 28px;
+            margin-bottom: 15px;
+        }
+        .ai-msg li::before {
+            content: "🎓";
+            position: absolute;
+            left: 0;
+            font-size: 0.9rem;
+        }
+        .highlight {
+            background: rgba(59, 130, 246, 0.08);
+            border-left: 4px solid var(--accent-blue);
+            padding: 22px;
+            margin: 25px 0;
+            border-radius: 0 16px 16px 0;
+            font-weight: 500;
+            color: #fff;
+        }
         .typing {
             display: flex;
             animation: typing-blink 1.4s infinite ease-in-out;
         }
+        .typing-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
         @keyframes typing-blink {
+            0%,
+            100% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.1);
+            }
         }
         @keyframes pulse-border {
+            0%,
+            100% {
+                border-color: var(--glass-border);
+            }
+            50% {
+                border-color: var(--accent-blue);
+                box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
+            }
+        }
+        .input-area {
+            padding: 30px 10%;
+            background: linear-gradient(to top, var(--bg-dark) 50%, transparent);
+            border-top: 1px solid var(--glass-border);
+            z-index: 60;
+        }
+        .input-box {
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--glass-border);
+            border-radius: 18px;
+            padding: 6px;
+            display: flex;
+            align-items: center;
+            transition: 0.3s;
         }
+        .input-box:focus-within {
+            border-color: var(--accent-blue);
+            box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
+        }
+        .input-box input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 16px 24px;
+            color: white;
+            font-size: 1.05rem;
+            outline: none;
+        }
+        .send-btn {
+            background: var(--accent-blue);
+            color: white;
+            border: none;
+            width: 50px;
+            height: 50px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: 0.3s;
+            margin-right: 6px;
+        }
+        .send-btn:hover {
+            background: var(--accent-purple);
+            transform: scale(1.1);
+        }
+        .hidden {
+            display: none !important;
+        }
+        /* MOBILE RESPONSIVENESS */
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.8rem;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            z-index: 101;
+            transition: color 0.3s;
+        }
+        .menu-toggle:hover {
+            color: var(--accent-blue);
+        }
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(3, 6, 23, 0.6);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            z-index: 99;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .sidebar-overlay.active {
+            display: block;
+            opacity: 1;
+            pointer-events: auto;
+        }
+        @media (max-width: 768px) {
+            .menu-toggle {
+                display: flex;
+            }
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: -280px;
+                height: 100vh;
+                width: 280px;
+                transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
+            }
+            .sidebar.active {
+                left: 0;
+            }
+            .top-bar {
+                padding: 0 15px;
+            }
+            .top-bar > div:last-child {
+                display: none;
+            }
+            .messages-container {
+                padding: 25px 15px;
+                gap: 20px;
+            }
+            .user-msg {
+                max-width: 85%;
+                padding: 12px 18px;
+                font-size: 0.95rem;
+            }
+            .ai-msg {
+                max-width: 95%;
+                padding: 20px;
+                font-size: 0.95rem;
+            }
+            .ai-msg h3 {
+                font-size: 1.15rem;
+                margin-bottom: 15px;
+            }
+            .input-area {
+                padding: 15px 15px 25px 15px;
+            }
+            .input-box input {
+                padding: 12px 15px;
+                font-size: 0.95rem;
+            }
+            .send-btn {
+                width: 44px;
+                height: 44px;
+            }
+            #welcomeScreen h1 {
+                font-size: 1.8rem !important;
+                margin-bottom: 10px !important;
+            }
+            #welcomeScreen p {
+                font-size: 0.95rem !important;
+                max-width: 100% !important;
+            }
+            #welcomeScreen div:first-child {
+                font-size: 3.5rem !important;
+                margin-bottom: 15px !important;
+            }
+        }
     </style>
 </head>
 <body>
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn"><span>+</span> New Research</button>
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
+                <a href="/studentdashboard.html"
+                    style="color: var(--accent-blue); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 600;">Back
+                    to Dashboard</a>
+                <a href="/role"
+                    style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">←
+                    Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
+            <button class="menu-toggle" id="menuToggle" aria-label="Toggle Sidebar">☰</button>
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Student)</span>
+                <div class="status-pill">
+                    <div class="status-dot"></div>Academic Ready
+                </div>
             </div>
             <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Educational Framework v4.0</div>
         </header>
+        <div id="welcomeScreen"
+            style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px;">📚</div>
+            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Empowering your
+                studies.</h1>
+            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Expert guidance
+                for law students. Ask about case laws, sections, or get conceptual breakdowns for your exams.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
             <div class="input-box">
                 <input type="text" id="messageInput" placeholder="Enter your research query..." autocomplete="off">
                 <button class="send-btn" id="sendButton">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                        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>
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
+                if (window.innerWidth <= 768) {
+                    const sidebar = document.querySelector('.sidebar');
+                    const sidebarOverlay = document.getElementById('sidebarOverlay');
+                    if (sidebar) sidebar.classList.remove('active');
+                    if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+                }
             } catch (err) { console.error(err); }
         }
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
+            if (window.innerWidth <= 768) {
+                const sidebar = document.querySelector('.sidebar');
+                const sidebarOverlay = document.getElementById('sidebarOverlay');
+                if (sidebar) sidebar.classList.remove('active');
+                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+            }
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
+        // Mobile Sidebar Toggling Logic
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.querySelector('.sidebar');
+        const sidebarOverlay = document.getElementById('sidebarOverlay');
+        function toggleSidebar() {
+            sidebar.classList.toggle('active');
+            sidebarOverlay.classList.toggle('active');
+        }
+        menuToggle.addEventListener('click', toggleSidebar);
+        sidebarOverlay.addEventListener('click', toggleSidebar);
     </script>
 </body>
 </html>

src/apps/templates/studentdashboard.html CHANGED Viewed

@@ -138,6 +138,10 @@
     }
     @media(max-width: 768px) {
       .sidebar {
         width: 100%;
         height: auto;

     }
     @media(max-width: 768px) {
+      body {
+        flex-direction: column;
+      }
       .sidebar {
         width: 100%;
         height: auto;

src/apps/templates/woman.html CHANGED Viewed

@@ -87,9 +87,34 @@
                 width: 90%;
             }
             .hero {
                 flex-direction: column;
-                padding-top: 6rem;
             }
         }
@@ -159,19 +184,20 @@
         }
         .quick-links {
             flex-wrap: wrap;
             gap: 1rem;
-            margin: 2rem 0;
         }
         .quick-linkss {
             flex-wrap: wrap;
             gap: 1rem;
             margin: 0;
         }
         .quick-link {

                 width: 90%;
             }
+            .fir-generator {
+                margin-top: 0 !important;
+                width: 100% !important;
+            }
             .hero {
                 flex-direction: column;
+                padding-top: 8rem;
+                padding-bottom: 4rem;
+                min-height: auto;
+            }
+            .hero h1 {
+                font-size: 2.2rem !important;
+                line-height: 1.3;
+                margin-bottom: 0.8rem;
+            }
+            .hero p {
+                font-size: 1.1rem !important;
+                margin-bottom: 1.5rem;
+            }
+            .emergency-alert {
+                padding: 12px 24px;
+                font-size: 0.9rem;
+                bottom: 20px;
+                right: 20px;
             }
         }
         }
         .quick-links {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             flex-wrap: wrap;
             gap: 1rem;
+            margin: 2rem auto;
+            max-width: 600px;
         }
         .quick-linkss {
+            display: flex;
             flex-wrap: wrap;
             gap: 1rem;
             margin: 0;
         }
         .quick-link {

src/apps/templates/womanchatbot.html CHANGED Viewed

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Woman's Framework</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
@@ -185,9 +187,20 @@
         }
         @keyframes pulse-dot {
-            0% { transform: scale(1); opacity: 1; }
-            50% { transform: scale(1.5); opacity: 0.4; }
-            100% { transform: scale(1); opacity: 1; }
         }
         /* MESSAGES AREA */
@@ -208,8 +221,15 @@
         }
         @keyframes message-slide {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
         }
         .user-msg {
@@ -246,9 +266,20 @@
             font-weight: 600;
         }
-        .ai-msg p { margin-bottom: 18px; }
-        .ai-msg ul { margin: 20px 0; list-style: none; }
-        .ai-msg li { position: relative; padding-left: 28px; margin-bottom: 15px; }
         .ai-msg li::before {
             content: "✦";
@@ -302,17 +333,39 @@
             animation: typing-blink 1.4s infinite ease-in-out;
         }
-        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing-blink {
-            0%, 100% { opacity: 0.3; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.1); }
         }
         @keyframes pulse-border {
-            0%, 100% { border-color: var(--glass-border); }
-            50% { border-color: var(--accent-pink); box-shadow: 0 0 20px rgba(244, 114, 182, 0.1); }
         }
         /* INPUT AREA */
@@ -370,22 +423,154 @@
             transform: scale(1.1);
         }
-        .hidden { display: none !important; }
         @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-15px); }
         }
     </style>
 </head>
 <body>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn">
                 <span>+</span> New Case
             </button>
         </div>
         <div class="history-label">Legal Threads</div>
         <div class="history-list" id="historyList"></div>
@@ -398,14 +583,19 @@
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
-                <a href="/woman.html" style="color: var(--accent-pink); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 600;">Back to Dashboard</a>
-                <a href="/role" style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">← Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Woman)</span>
                 <div class="status-pill">
@@ -413,13 +603,17 @@
                     Secure Online
                 </div>
             </div>
-            <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Protective Intelligence v4.0</div>
         </header>
-        <div id="welcomeScreen" style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px; animation: float 6s ease-in-out infinite;">🛡️</div>
-            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Empowerment through Law.</h1>
-            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Dedicated legal guidance for your rights and safety. Your consultation is private and powered by expert AI.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
@@ -433,12 +627,19 @@
         <div class="input-area">
             <div class="input-box">
-                <input type="text" id="messageInput" placeholder="How can I assist you with your legal rights today?" autocomplete="off">
                 <button class="send-btn" id="sendButton">
-                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
-            <p style="text-align: center; font-size: 0.75rem; color: var(--text-dim); margin-top: 18px; opacity: 0.8;">⚠️ AI provide framework for awareness. For judicial action, connect with local authorities or legal counsel.</p>
         </div>
     </main>
@@ -565,6 +766,12 @@
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
             } catch (err) { console.error(err); }
         }
@@ -587,11 +794,31 @@
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Legal Assistant | Woman's Framework</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             --bg-dark: #030617;
         }
         @keyframes pulse-dot {
+            0% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            50% {
+                transform: scale(1.5);
+                opacity: 0.4;
+            }
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
         }
         /* MESSAGES AREA */
         }
         @keyframes message-slide {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         .user-msg {
             font-weight: 600;
         }
+        .ai-msg p {
+            margin-bottom: 18px;
+        }
+        .ai-msg ul {
+            margin: 20px 0;
+            list-style: none;
+        }
+        .ai-msg li {
+            position: relative;
+            padding-left: 28px;
+            margin-bottom: 15px;
+        }
         .ai-msg li::before {
             content: "✦";
             animation: typing-blink 1.4s infinite ease-in-out;
         }
+        .typing-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
         @keyframes typing-blink {
+            0%,
+            100% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.1);
+            }
         }
         @keyframes pulse-border {
+            0%,
+            100% {
+                border-color: var(--glass-border);
+            }
+            50% {
+                border-color: var(--accent-pink);
+                box-shadow: 0 0 20px rgba(244, 114, 182, 0.1);
+            }
         }
         /* INPUT AREA */
             transform: scale(1.1);
         }
+        .hidden {
+            display: none !important;
+        }
         @keyframes float {
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-15px);
+            }
+        }
+        /* MOBILE RESPONSIVENESS */
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.8rem;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            z-index: 101;
+            transition: color 0.3s;
+        }
+        .menu-toggle:hover {
+            color: var(--accent-pink);
+        }
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(3, 6, 23, 0.6);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            z-index: 99;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .sidebar-overlay.active {
+            display: block;
+            opacity: 1;
+            pointer-events: auto;
+        }
+        @media (max-width: 768px) {
+            .menu-toggle {
+                display: flex;
+            }
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: -280px;
+                height: 100vh;
+                width: 280px;
+                transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
+            }
+            .sidebar.active {
+                left: 0;
+            }
+            .top-bar {
+                padding: 0 15px;
+            }
+            .top-bar > div:last-child {
+                display: none;
+            }
+            .messages-container {
+                padding: 25px 15px;
+                gap: 20px;
+            }
+            .user-msg {
+                max-width: 85%;
+                padding: 12px 18px;
+                font-size: 0.95rem;
+            }
+            .ai-msg {
+                max-width: 95%;
+                padding: 20px;
+                font-size: 0.95rem;
+            }
+            .ai-msg h3 {
+                font-size: 1.15rem;
+                margin-bottom: 15px;
+            }
+            .input-area {
+                padding: 15px 15px 25px 15px;
+            }
+            .input-box input {
+                padding: 12px 15px;
+                font-size: 0.95rem;
+            }
+            .send-btn {
+                width: 44px;
+                height: 44px;
+            }
+            #welcomeScreen h1 {
+                font-size: 1.8rem !important;
+                margin-bottom: 10px !important;
+            }
+            #welcomeScreen p {
+                font-size: 0.95rem !important;
+                max-width: 100% !important;
+            }
+            #welcomeScreen div:first-child {
+                font-size: 3rem !important;
+                margin-bottom: 15px !important;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
     <aside class="sidebar">
         <div class="sidebar-header">
             <button class="new-chat-btn" id="newChatBtn">
                 <span>+</span> New Case
             </button>
         </div>
         <div class="history-label">Legal Threads</div>
         <div class="history-list" id="historyList"></div>
                 </div>
             </div>
             <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
+                <a href="/woman.html"
+                    style="color: var(--accent-pink); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 600;">Back
+                    to Dashboard</a>
+                <a href="/role"
+                    style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">←
+                    Change Role</a>
             </div>
         </div>
     </aside>
     <main class="main-chat">
         <header class="top-bar">
+            <button class="menu-toggle" id="menuToggle" aria-label="Toggle Sidebar">☰</button>
             <div class="system-branding">
                 <span style="font-weight: 700; color: white;">⚖️ Law Bot (Woman)</span>
                 <div class="status-pill">
                     Secure Online
                 </div>
             </div>
+            <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Protective Intelligence v4.0
+            </div>
         </header>
+        <div id="welcomeScreen"
+            style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
             <div style="font-size: 4rem; margin-bottom: 25px; animation: float 6s ease-in-out infinite;">🛡️</div>
+            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Empowerment
+                through Law.</h1>
+            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Dedicated legal
+                guidance for your rights and safety. Your consultation is private and powered by expert AI.</p>
         </div>
         <div class="messages-container" id="chatContainer"></div>
         <div class="input-area">
             <div class="input-box">
+                <input type="text" id="messageInput" placeholder="How can I assist you with your legal rights today?"
+                    autocomplete="off">
                 <button class="send-btn" id="sendButton">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                        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>
+            <p style="text-align: center; font-size: 0.75rem; color: var(--text-dim); margin-top: 18px; opacity: 0.8;">
+                ⚠️ AI provide framework for awareness. For judicial action, connect with local authorities or legal
+                counsel.</p>
         </div>
     </main>
                     createNewMessage('ai', msg.response);
                 });
                 currentAiMessageElement = null;
+                if (window.innerWidth <= 768) {
+                    const sidebar = document.querySelector('.sidebar');
+                    const sidebarOverlay = document.getElementById('sidebarOverlay');
+                    if (sidebar) sidebar.classList.remove('active');
+                    if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+                }
             } catch (err) { console.error(err); }
         }
             currentCaseId = crypto.randomUUID();
             chatContainer.innerHTML = '';
             welcomeScreen.classList.remove('hidden');
+            if (window.innerWidth <= 768) {
+                const sidebar = document.querySelector('.sidebar');
+                const sidebarOverlay = document.getElementById('sidebarOverlay');
+                if (sidebar) sidebar.classList.remove('active');
+                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+            }
         };
         connectWS();
         loadHistory();
         fetchUserStatus();
+        // Mobile Sidebar Toggling Logic
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.querySelector('.sidebar');
+        const sidebarOverlay = document.getElementById('sidebarOverlay');
+        function toggleSidebar() {
+            sidebar.classList.toggle('active');
+            sidebarOverlay.classList.toggle('active');
+        }
+        menuToggle.addEventListener('click', toggleSidebar);
+        sidebarOverlay.addEventListener('click', toggleSidebar);
     </script>
 </body>
 </html>