Update bot_index.html

bot_index.html

@@ -16,13 +16,13 @@
 
   <div class="layout">
     <!-- Sidebar: Chats & Folders -->
-    <aside class="sidebar" id="sidebar">
+    <aside class="sidebar offcanvas" id="sidebar" aria-label="Conversation list">
       <div class="side-header">
         <div class="brand-mini">
           <img src="icon_vera.png" alt="Vera" />
           <span>VERA</span>
         </div>
-        <button id="collapseSidebar" class="icon-btn" title="Collapse">«</button>
+        <button id="closeSidebar" class="icon-btn only-mobile" title="Close">✕</button>
       </div>
 
       <div class="side-actions">
@@ -32,20 +32,22 @@
 
       <div class="side-section">
         <div class="section-title">Folders</div>
-        <ul id="folderList" class="list"></ul>
+        <ul id="folderList" class="list scrollable"></ul>
       </div>
 
       <div class="side-section">
         <div class="section-title">Chats</div>
-        <ul id="chatList" class="list"></ul>
+        <ul id="chatList" class="list scrollable"></ul>
       </div>
     </aside>
+    <div id="scrim" class="scrim"></div>
 
     <!-- Main Panel -->
     <div class="panel">
       <!-- Header -->
-      <header class="header">
+      <header class="header sticky-top">
         <div class="brand">
+          <button id="openSidebar" class="icon-btn only-mobile" title="Menu">☰</button>
           <img src="icon_vera.png" alt="Vera Icon" class="vera-icon" />
           <div class="titles">
             <h1>VERA</h1>
@@ -54,6 +56,9 @@
         </div>
 
         <div class="controls">
+          <!-- Username pill -->
+          <div id="userPill" class="user-pill" title="Signed in" style="display:none;"></div>
+
           <!-- Category dropdown (with auto) -->
           <div class="field">
             <label for="categorySelect">Category</label>
@@ -77,7 +82,7 @@
           </div>
 
           <!-- Voice picker -->
-          <div class="field">
+          <div class="field hide-sm">
             <label for="voiceSelect">Voice</label>
             <select id="voiceSelect"></select>
           </div>
@@ -87,7 +92,7 @@
       </header>
 
       <!-- Body -->
-      <main class="chat" id="chatBody">
+      <main class="chat scrollable" id="chatBody" aria-live="polite">
         <section class="welcome bot">
           <img src="icon_vera.png" alt="Bot Icon" class="bot-icon" />
           <p><strong>Namaste! I’m VERA.</strong> Ask anything. Set a category if you like, or keep Auto.</p>
@@ -101,7 +106,7 @@
       </main>
 
       <!-- Footer -->
-      <footer class="footer">
+      <footer class="footer sticky-bottom">
         <div class="left-tools">
           <button id="btnPlay" class="mini" title="Speak last">▶</button>
           <button id="btnPause" class="mini" title="Pause">⏸</button>