Update style.css

style.css

@@ -336,11 +336,172 @@ body {
 .messages::-webkit-scrollbar { width:3px; }
 .sidebar-scroll::-webkit-scrollbar { width:3px; }
 
-/* ─── RESPONSIVE ─── */
+/* ─── RESPONSIVE / MOBILE ─── */
 @media (max-width:768px) {
-  :root { --sidebar-w: 0px; }
-  .sidebar { display:none; }
-  #app.visible { grid-template-columns:1fr; }
+  :root { --sidebar-w: 260px; --topbar-h: 50px; }
+
+  /* ── Layout ── */
+  #app.visible {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    overflow: hidden;
+  }
+
+  /* ── Topbar ── */
+  .topbar {
+    order: 0;
+    padding: 0 10px;
+    height: var(--topbar-h);
+    flex-shrink: 0;
+    gap: 8px;
+  }
+  .topbar-logo { font-size: .8rem; }
+  .topbar-sep { display: none; }
+  .topbar-channel { font-size: .6rem; flex: 1; text-align: center; }
+  .topbar-role-badge, #topbar-username { display: none; }
+  .logout-btn { font-size: .7rem; padding: 4px 7px; }
+  .icon-btn { padding: 5px 7px; font-size: .8rem; }
+  #topbar-avatar { width: 28px; height: 28px; font-size: .6rem; }
+
+  /* Hamburger button */
+  #mobile-menu-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    width: 34px; height: 34px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+    clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
+    transition: color .2s, border-color .2s;
+  }
+  #mobile-menu-btn:hover { color: var(--accent); border-color: rgba(0,212,255,0.4); }
+
+  /* ── Sidebar as overlay drawer ── */
+  .sidebar {
+    position: fixed;
+    top: var(--topbar-h);
+    left: 0;
+    bottom: 0;
+    width: var(--sidebar-w);
+    z-index: 500;
+    transform: translateX(-100%);
+    transition: transform .28s cubic-bezier(.4,0,.2,1);
+    flex-direction: column;
+    display: flex;
+  }
+  .sidebar.open {
+    transform: translateX(0);
+    box-shadow: 6px 0 30px rgba(0,0,0,0.6);
+  }
+
+  /* Sidebar overlay backdrop */
+  #sidebar-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    top: var(--topbar-h);
+    z-index: 499;
+    background: rgba(0,0,0,0.55);
+    backdrop-filter: blur(2px);
+  }
+  #sidebar-backdrop.visible { display: block; }
+
+  /* ── Chat area fills remaining space ── */
+  .chat-area {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* ── Chat header ── */
+  .chat-header { padding: 8px 12px; }
+  .chat-header-title { font-size: .78rem; }
+  .chat-header-sub { font-size: .68rem; }
+
+  /* ── Messages ── */
+  .messages {
+    flex: 1;
+    min-height: 0;
+    padding: 10px 10px 6px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* ── Input area ── */
+  .input-area {
+    padding: 8px 10px;
+    flex-shrink: 0;
+    /* Make it stick above the virtual keyboard */
+    position: sticky;
+    bottom: 0;
+  }
+  .msg-input {
+    font-size: 1rem; /* prevents iOS zoom on focus */
+    padding: 9px 12px;
+    min-height: 40px;
+  }
+  .send-btn {
+    padding: 0 14px;
+    height: 40px;
+    font-size: .6rem;
+  }
+
+  /* ── Messages layout ── */
+  .msg { padding: 3px 4px; gap: 8px; }
+  .msg-avatar { width: 30px; height: 30px; font-size: .62rem; }
+  .msg-text { font-size: .92rem; }
+  .msg-actions { display: none !important; } /* use long-press context menu on mobile */
+
+  /* ── Auth box ── */
+  .auth-box {
+    padding: 30px 20px;
+    margin: 12px;
+    max-width: 100%;
+    clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
+  }
+  .auth-logo { font-size: 1.6rem; }
+
+  /* ── Modals ── */
+  .modal {
+    margin: 12px;
+    padding: 22px 16px;
+    max-width: calc(100% - 24px);
+    max-height: 88vh;
+    clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
+  }
+
+  /* ── Voice panel ── */
+  .voice-panel.active {
+    flex-shrink: 0;
+  }
+  .voice-status-bar { flex-wrap: wrap; gap: 6px; }
+  .voice-ctrl { font-size: .68rem; padding: 4px 6px; }
+
+  /* ── Toast ── */
+  .toast {
+    bottom: 12px;
+    right: 10px;
+    left: 10px;
+    max-width: 100%;
+    font-size: .62rem;
+  }
+
+  /* ── Timeout bar ── */
+  .timeout-bar { font-size: .58rem; padding: 8px 12px; }
+
+  /* ── Context menu ── */
+  #context-menu {
+    min-width: 170px;
+    /* Prevent overflow off-screen */
+    max-width: calc(100vw - 20px);
+  }
 }
 
 /* ─── MISC ─── */