Mobile UI

public/css/chat.css

@@ -360,51 +360,60 @@ span[data-color="pink"] { color: #f472b6; }
   0%, 100% { opacity: 1; }
   50% { opacity: 0.75; }
 }
+
 /* ══════════════════════════════════════════════════════════════════════════
-   MOBILE CHAT — Proper scroll containment, no overflow leakage
+   MOBILE CHAT — Proper scroll containment, centered welcome
    ══════════════════════════════════════════════════════════════════════════ */
 
 @media (max-width: 768px) {
 
-  /* #main fills available height; overflow must not escape */
+  /* Main: full height, no overflow */
   #main {
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
-  /* Chat view: the ONLY vertical scrollbar in the page */
+  /* Chat view: the ONE vertical scrollbar on the page */
   .chat-view {
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
-    overscroll-behavior: contain;
+    overscroll-behavior-y: contain;
   }
 
-  /* Welcome view: no scroll on the outer container */
+  /* Welcome view: centered, no scroll */
   .welcome-view {
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
 
-  /* Messages container: no extra padding */
+  /* Messages: no extra horizontal padding */
   .chat-messages {
-    padding: 0 16px;
+    padding: 0 14px;
     max-width: 100%;
   }
 
-  /* User bubbles: slightly wider on narrow screens */
+  /* Bubbles */
   .msg-user {
-    max-width: 90%;
+    max-width: 88%;
     font-size: 14px;
     padding: 9px 14px;
   }
 
-  /* Assistant messages: full width */
   .msg-assistant {
     max-width: 100%;
     font-size: 14px;
-    padding: 4px 0 28px;
   }
 
-  /* Code blocks: horizontal scroll only (already set, reinforce) */
+  /* Code blocks: horizontal scroll only */
   .code-block {
     overflow: hidden;
   }

public/css/input.css

@@ -253,44 +253,108 @@
     padding: 6px;
   }
 }
+
 /* ══════════════════════════════════════════════════════════════════════════
-   MOBILE INPUT — No extra scrollbars, TOS repositioned
+   MOBILE INPUT — Top bar chrome, TOS at bottom, no overflow
    ══════════════════════════════════════════════════════════════════════════ */
 
 @media (max-width: 768px) {
 
-  /* TOS banner: fixed just above the bottom nav bar */
+  /* ── Mobile top header bar (new chat + sidebar buttons) ── */
+  #mobile-top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 52px;
+    z-index: 90;
+    transform: translateY(0);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    flex-shrink: 0;
+  }
+
+  #mobile-top-bar.hidden-bar {
+    transform: translateY(-100%);
+  }
+
+  #mobile-top-bar .mobile-bar-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text);
+    letter-spacing: -0.01em;
+  }
+
+  #mobile-top-bar .mobile-bar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-md);
+    color: var(--text-dim);
+    transition: background var(--transition), color var(--transition);
+  }
+
+  #mobile-top-bar .mobile-bar-btn:hover,
+  #mobile-top-bar .mobile-bar-btn:active {
+    background: var(--bg-hover);
+    color: var(--text);
+  }
+
+  /* ── TOS banner: pinned to very bottom ── */
   #tos-banner {
-    bottom: 60px; /* height of collapsed mobile sidebar */
+    bottom: 0 !important;
+    left: 0 !important;
+    transform: none !important;
+    width: 100% !important;
     font-size: 11px;
-    padding: 6px 12px;
-    width: 100%;
-    left: 0;
-    transform: none;
-    background: var(--bg);
+    padding: 6px 14px;
     border-top: 1px solid var(--border);
+    background: var(--bg);
+    z-index: 80;
+    text-align: center;
   }
 
-  /* Bottom input bar: sits above TOS + bottom nav */
-  .bottom-input-bar {
-    padding: 0 12px 4px !important;
-    /* JS will set padding-bottom dynamically; this is a safe fallback */
+  /* ── Main area: padded for top bar + TOS ── */
+  #main {
+    padding-top: 52px;
   }
 
-  /* Input wrap: slightly tighter padding */
-  .bottom-input-wrap {
-    padding: 6px 8px;
+  /* ── Bottom input bar: sits just above TOS ── */
+  .bottom-input-bar {
+    padding: 0 12px 40px !important;
   }
 
-  /* Welcome view: full height minus mobile chrome */
+  /* ── Welcome view: truly vertically centered ── */
   .welcome-view {
-    padding: 24px 16px !important;
-    justify-content: flex-start;
-    padding-top: 48px !important;
+    padding-top: 0 !important;
+    padding-bottom: 40px !important;
+    justify-content: center !important;
+    align-items: center !important;
+    height: 100% !important;
+    gap: 20px !important;
+  }
+
+  .welcome-title {
+    text-align: center;
+    font-size: clamp(22px, 6vw, 36px) !important;
   }
 
   .welcome-input-wrap {
     width: 100%;
+    padding: 0 4px;
+  }
+
+  /* Input wrap: tighter on mobile */
+  .bottom-input-wrap,
+  .center-input-container {
+    padding: 6px 8px;
   }
 
   /* Prevent any horizontal overflow */
@@ -298,4 +362,11 @@
   .bottom-input-wrap {
     max-width: 100%;
   }
+}
+
+/* Desktop: never show the mobile top bar */
+@media (min-width: 769px) {
+  #mobile-top-bar {
+    display: none !important;
+  }
 }

public/css/sidebar.css

@@ -282,132 +282,116 @@
 .context-item svg { flex-shrink: 0; color: var(--text-dim); }
 .context-item.danger svg { color: #f07070; }
 /* ══════════════════════════════════════════════════════════════════════════
-   MOBILE SIDEBAR — Bottom navigation drawer pattern
+/* ══════════════════════════════════════════════════════════════════════════
+   MOBILE SIDEBAR — Top header bar + full-screen left drawer
    ══════════════════════════════════════════════════════════════════════════ */
 
 @media (max-width: 768px) {
 
-  /* ── Root layout: full-height columns → full-height rows ── */
+  /* ── Root layout ── */
   #app {
     flex-direction: column !important;
     height: 100dvh;
     overflow: hidden;
   }
 
-  /* ── Sidebar becomes a bottom drawer ── */
+  /* ── Sidebar: hidden off-screen left, slides in as full-screen overlay ── */
   .sidebar {
     position: fixed !important;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: auto !important;
-    width: 100% !important;
-    height: auto !important;
-    max-height: 72px; /* collapsed = icon strip */
+    top: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100dvh !important;
+    max-height: none !important;
     border-right: none !important;
-    border-top: 1px solid var(--sidebar-border) !important;
-    flex-direction: row;
+    border-top: none !important;
+    flex-direction: column !important;
     z-index: var(--z-sidebar);
     overflow: hidden;
-    transition: max-height var(--transition-slow);
+    transform: translateX(-100%);
+    transition: transform var(--transition-slow);
   }
 
-  /* Collapsed mobile: icon strip at bottom */
   .sidebar.collapsed {
-    max-height: 60px;
+    transform: translateX(-100%);
   }
 
-  /* Expanded mobile: slide up as drawer */
   .sidebar.expanded {
-    max-height: 75dvh;
-    flex-direction: column;
+    transform: translateX(0);
   }
 
-  /* Top icon strip becomes a horizontal nav row */
+  /* ── Sidebar inner top: header row ── */
   .sidebar-top {
     flex-direction: row !important;
-    padding: 10px 14px !important;
-    gap: 6px !important;
-    border-bottom: none !important;
-    border-bottom: 1px solid var(--sidebar-border);
+    padding: 14px 16px !important;
+    gap: 8px !important;
+    border-bottom: 1px solid var(--sidebar-border) !important;
     flex-shrink: 0;
   }
 
-  /* Session list: shown only when expanded, scrollable */
+  /* Session list: scrollable */
   .sidebar-sessions {
-    opacity: 0;
-    pointer-events: none;
+    opacity: 1 !important;
+    pointer-events: auto !important;
     overflow-y: auto;
     flex: 1;
+    -webkit-overflow-scrolling: touch;
   }
 
-  .sidebar.expanded .sidebar-sessions {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  /* Bottom account section */
+  /* Bottom account section: always show */
   .sidebar-bottom {
     flex-shrink: 0;
     border-top: 1px solid var(--sidebar-border);
+    display: block !important;
   }
 
-  .sidebar.expanded .sidebar-bottom {
-    display: block;
-  }
-
-  .sidebar.collapsed .sidebar-bottom {
-    display: none;
-  }
-
-  /* Account section always horizontal on mobile */
   .account-section {
     flex-direction: row !important;
     align-items: center;
   }
 
-  /* Sign-in button always visible on mobile when expanded */
-  .sidebar.expanded .btn-signin {
-    display: block;
-    opacity: 1;
-    pointer-events: auto;
+  .btn-signin {
+    display: block !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
   }
 
-  /* Collapsed: hide sign-in icon button in bottom bar (space is tight) */
-  .sidebar.collapsed .btn-signin-icon {
-    display: none;
+  .btn-signin-icon {
+    display: none !important;
   }
 
-  /* User info visible when expanded */
-  .sidebar.expanded .user-info {
-    opacity: 1;
-    pointer-events: auto;
+  .user-info {
+    opacity: 1 !important;
+    pointer-events: auto !important;
   }
 
-  /* User profile button: full width on mobile */
-  .sidebar.expanded .user-profile-btn {
+  .user-profile-btn {
+    flex: 1 !important;
     width: auto !important;
-    justify-content: flex-start;
+    justify-content: flex-start !important;
     border-radius: var(--radius-md) !important;
+    gap: 9px !important;
   }
 
-  /* ── Main content: fills remaining space above bottom nav ── */
+  /* ── Main: full viewport ── */
   #main {
-    height: calc(100dvh - 60px) !important;
-    padding-bottom: 0 !important;
+    height: 100dvh !important;
+    width: 100% !important;
     overflow: hidden;
   }
 
-  /* Collapse sidebar when tapping outside (backdrop) */
+  /* ── Backdrop ── */
   .sidebar-backdrop {
     display: none;
     position: fixed;
     inset: 0;
-    bottom: 75dvh; /* above the drawer */
-    background: rgba(0,0,0,0.45);
+    background: rgba(0, 0, 0, 0.55);
     z-index: calc(var(--z-sidebar) - 1);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
   }
-  .sidebar.expanded ~ .sidebar-backdrop,
+
   .sidebar-backdrop.visible {
     display: block;
   }

public/index.html

@@ -17,8 +17,15 @@
     html, body { overflow: hidden; height: 100%; max-height: 100dvh; }
     #app { display: flex; height: 100dvh; overflow: hidden; }
     @media (max-width: 768px) {
-      #main { height: calc(100dvh - 60px); max-height: calc(100dvh - 60px); }
-      .chat-view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
+      #main {
+        height: 100dvh;
+        max-height: 100dvh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      /* Push content below the fixed top bar */
+      .chat-view, .welcome-view { padding-top: 0; }
     }
   </style>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
@@ -40,6 +47,17 @@
     </div>
   </div>
 
+  <!-- Mobile top bar (hidden on desktop via CSS) -->
+  <div id="mobile-top-bar">
+    <button id="mobile-sidebar-btn" class="mobile-bar-btn" title="Menu">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+    </button>
+    <span class="mobile-bar-title">InferencePort AI</span>
+    <button id="mobile-newchat-btn" class="mobile-bar-btn" title="New Chat">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+    </button>
+  </div>
+
   <div id="app">
     <!-- Sidebar -->
     <aside id="sidebar" class="sidebar collapsed">

public/js/app.js

@@ -17,13 +17,18 @@ import { showNotification, autoResize, escHtml } from './ui.js';
   if (!banner) return;
   const applyPadding = () => {
     const isMobile = window.innerWidth <= 768;
-    // On mobile the sidebar is a bottom nav (60px) + TOS banner above it
-    const mobileNavH = isMobile ? 60 : 0;
-    const h = banner.offsetHeight || 36;
-    const totalBottom = h + mobileNavH + 8;
-    document.getElementById('bottom-input-bar')?.style.setProperty('padding-bottom', `${totalBottom}px`);
-    const welcomeView = document.getElementById('welcome-view');
-    if (welcomeView) welcomeView.style.paddingBottom = `${totalBottom + 16}px`;
+    if (isMobile) {
+      // On mobile: TOS is fixed at bottom, bottom-input-bar padding is set via CSS
+      // Just ensure welcome-view accounts for TOS height
+      const h = banner.offsetHeight || 36;
+      const welcomeView = document.getElementById('welcome-view');
+      if (welcomeView) welcomeView.style.paddingBottom = `${h + 8}px`;
+    } else {
+      const h = banner.offsetHeight || 42;
+      document.getElementById('bottom-input-bar')?.style.setProperty('padding-bottom', `${h + 8}px`);
+      const welcomeView = document.getElementById('welcome-view');
+      if (welcomeView) welcomeView.style.paddingBottom = `${h + 16}px`;
+    }
   };
   requestAnimationFrame(() => { applyPadding(); });
   window.addEventListener('resize', applyPadding);
@@ -40,42 +45,83 @@ function toggleSidebar()  { sidebar?.classList.contains('expanded') ? collapseSi
 
 toggleBtn?.addEventListener('click', toggleSidebar);
 
-// ── Mobile: backdrop to close sidebar drawer ──────────────────────────────
+// ── Mobile top bar + sidebar logic ───────────────────────────────────────
 
-(function setupMobileBackdrop() {
+(function setupMobile() {
+  // Create backdrop
   const backdrop = document.createElement('div');
   backdrop.id = 'sidebar-backdrop';
   backdrop.className = 'sidebar-backdrop';
   document.body.appendChild(backdrop);
 
-  function updateBackdrop() {
-    if (window.innerWidth <= 768 && sidebar?.classList.contains('expanded')) {
-      backdrop.classList.add('visible');
-    } else {
-      backdrop.classList.remove('visible');
+  function openSidebar()  { sidebar?.classList.remove('collapsed'); sidebar?.classList.add('expanded'); backdrop.classList.add('visible'); }
+  function closeSidebar() { sidebar?.classList.remove('expanded'); sidebar?.classList.add('collapsed'); backdrop.classList.remove('visible'); }
+
+  backdrop.addEventListener('click', closeSidebar);
+
+  // Wire mobile top bar buttons
+  document.getElementById('mobile-sidebar-btn')?.addEventListener('click', () => {
+    sidebar?.classList.contains('expanded') ? closeSidebar() : openSidebar();
+  });
+  document.getElementById('mobile-newchat-btn')?.addEventListener('click', () => {
+    showWelcomeScreen();
+    const ci = document.getElementById('center-input');
+    if (ci) { ci.value = ''; autoResize(ci, 6); }
+    const box = document.getElementById('chat-messages');
+    if (box) box.innerHTML = '';
+  });
+
+  // Auto-close drawer when a session is switched on mobile
+  onSessionChange((event) => {
+    if ((event === 'switched' || event === 'created') && window.innerWidth <= 768) {
+      closeSidebar();
+    }
+  });
+
+  // ── Hide/show top bar on scroll ─────────────────────────────────────────
+  let lastScrollY = 0;
+  let ticking = false;
+  const topBar = document.getElementById('mobile-top-bar');
+
+  function handleChatScroll(e) {
+    if (window.innerWidth > 768) return;
+    const el = e.target;
+    const currentY = el.scrollTop;
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        if (currentY > lastScrollY && currentY > 60) {
+          // Scrolling down — hide bar
+          topBar?.classList.add('hidden-bar');
+        } else {
+          // Scrolling up — show bar
+          topBar?.classList.remove('hidden-bar');
+        }
+        lastScrollY = currentY <= 0 ? 0 : currentY;
+        ticking = false;
+      });
+      ticking = true;
     }
   }
 
-  backdrop.addEventListener('click', () => { collapseSidebar(); updateBackdrop(); });
-  toggleBtn?.addEventListener('click', () => { setTimeout(updateBackdrop, 50); });
-  window.addEventListener('resize', () => {
-    if (window.innerWidth > 768) backdrop.classList.remove('visible');
-  });
+  // Attach to chat-view scroll
+  document.getElementById('chat-view')?.addEventListener('scroll', handleChatScroll, { passive: true });
 
-  // Patch expand/collapse to also update backdrop
-  const origExpand = expandSidebar, origCollapse = collapseSidebar;
-  window._mobileUpdateBackdrop = updateBackdrop;
+  // Always show top bar when on welcome screen
+  onSessionChange((event, data) => {
+    if (event === 'switched' && !data) {
+      topBar?.classList.remove('hidden-bar');
+      lastScrollY = 0;
+    }
+  });
 })();
 
 // ── New chat — just show the welcome screen; don't create a session yet ───
 
 document.getElementById('new-chat-btn')?.addEventListener('click', () => {
   showWelcomeScreen();
-  if (window.innerWidth < 768) collapseSidebar();
-  // Clear the center input so the user starts fresh
+  if (window.innerWidth < 768) { /* handled by setupMobile onSessionChange */ }
   const ci = document.getElementById('center-input');
   if (ci) { ci.value = ''; autoResize(ci, 6); }
-  // Clear chat messages so old chat doesn't show through
   const box = document.getElementById('chat-messages');
   if (box) box.innerHTML = '';
 });
@@ -100,7 +146,6 @@ onSessionChange((event, data) => {
   if (event === 'created') {
     setActiveSession(data.id);
     switchSession(data.id);
-    if (window.innerWidth < 768) collapseSidebar();
   }
 });