Fix UI — CSS variables, sidebar toggle with chevron, settings panel pushes content

components/SettingsPanel.tsx

@@ -60,20 +60,12 @@ export default function SettingsPanel() {
 
   return (
     <>
-      {/* Backdrop on mobile */}
-      {settingsOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/40 md:hidden"
-          onClick={() => setSettingsOpen(false)}
-        />
-      )}
-
       <div
         className={`fixed top-0 right-0 bottom-0 z-50 flex flex-col transition-transform duration-200 ${
           settingsOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
         style={{
-          width: 'min(340px, 100vw)',
+          width: '340px',
           background: 'var(--bg)',
           borderLeft: '1px solid var(--border)',
         }}

components/Sidebar.tsx

@@ -27,7 +27,7 @@ function groupConversations(convs: { id: string; title: string; updated_at: stri
   return groups;
 }
 
-export default function Sidebar() {
+export default function Sidebar({ onClose }: { onClose?: () => void }) {
   const { conversations, currentId, setCurrentId, setMessages, setConversations, setSidebarOpen } = useStore();
 
   async function newConversation() {
@@ -36,7 +36,7 @@ export default function Sidebar() {
     setConversations(updated);
     setCurrentId(conv.id);
     setMessages([]);
-    setSidebarOpen(false);
+    if (onClose) onClose();
   }
 
   async function loadConversation(id: string) {