Add sliding and sliding animations on mobile.

style.css

@@ -29,11 +29,21 @@
     user-select: none;
 }
 
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    height: 100dvh;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
 body {
     background-color: var(--bg-main);
     color: var(--text-primary);
-    height: 100vh;
-    overflow: hidden;
     background-image: 
         radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
         radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%);
@@ -70,10 +80,11 @@ input:focus {
 
 .app-container {
     display: flex;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
     backdrop-filter: var(--glass-blur);
+    position: relative;
 }
 
 .app-name {
@@ -727,33 +738,59 @@ input:focus {
     display: none !important;
 }
 
-/* Responsive design */
 @media (max-width: 768px) {
     .app-container {
-        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        -webkit-overflow-scrolling: touch;
+        
+        /* Hide scrollbars */
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none;  /* IE and Edge */
+    }
+    
+    .app-container::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Opera */
     }
     
     .sidebar {
         width: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
+        flex: 0 0 100%;
+        position: relative;
+        left: auto;
+        top: auto;
         height: 100%;
-        z-index: 10;
-    }
-    
-    .sidebar.hidden {
-        transform: translateX(-100%);
-        display: flex !important;
+        z-index: 1;
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
     }
     
     .chat-area {
         width: 100%;
+        flex: 0 0 100%;
+        position: relative;
+        left: auto;
+        top: auto;
+        height: 100%;
+        z-index: 1;
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
     }
     
+    /* Disable scrolling to active chat if none is selected */
+    /* .app-container.no-active-chat .chat-area {
+        display: none !important;
+    } */
+    
     .back-btn {
         display: flex;
-        margin-right: 8px;
+        margin-right: 12px;
     }
 
     .message-group {