- Start met Mobiele versie van de chat client.

eveai_chat_client/static/assets/css/chat.css

@@ -18,6 +18,16 @@
     width: 100%;
 }
 
+/* Mobile header container - hidden on desktop */
+#mobile-header-container {
+    display: none;
+}
+
+/* Desktop layout - default */
+#sidebar-container {
+    display: block;
+}
+
 /* Sidebar styling */
 .sidebar {
     width: 300px;
@@ -254,4 +264,29 @@ body {
 
 /* .btn-primary wordt nu gedefinieerd in chat-components.css */
 
+/* Mobile responsive layout */
+@media (max-width: 768px) {
+    /* Switch to vertical layout */
+    .app-container {
+        flex-direction: column;
+    }
+    
+    /* Hide desktop sidebar on mobile */
+    #sidebar-container {
+        display: none;
+    }
+    
+    /* Show mobile header on mobile */
+    #mobile-header-container {
+        display: block;
+        width: 100%;
+    }
+    
+    /* Content area takes remaining space */
+    .content-area {
+        flex: 1;
+        height: calc(100vh - 60px); /* Subtract mobile header height */
+    }
+}
+
 /* Responsieve design regels worden nu gedefinieerd in chat-components.css */