Redesign DM UI with independent scrolling and split layout

- Implemented split-pane layout for Conversations and Message History.
- Added independent vertical scrolling for desktop views.
- Enforced full-height containers to prevent parent modal scrolling on desktop.
- Preserved mobile scrolling behavior by wrapping height constraints in media queries.
- Added avatars, message bubbles, and alignment styling.
- Removed space-y utility from profile modal container to prevent layout issues.
- Updated tailwind source CSS with new scrollbar utilities and overrides.

components/profile-modal.html

@@ -1270,7 +1270,7 @@
             </section>
             <section
               id="profilePaneMessages"
-              class="profile-pane hidden space-y-4"
+              class="profile-pane hidden"
               role="tabpanel"
               aria-labelledby="profileNavMessages"
             >

css/tailwind.source.css

@@ -3063,6 +3063,20 @@
     overflow-x: hidden;
   }
 
+  /* Specific override for messages pane to prevent parent scrolling on desktop */
+  @media (min-width: theme("screens.md")) {
+    #profilePaneMessages {
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    #dmAppShellMount {
+      height: 100%;
+      min-height: 0;
+    }
+  }
+
   .profile-pane.hidden {
     display: none !important;
   }
@@ -6060,9 +6074,10 @@
 }
 
 .no-scrollbar {
-  scrollbar-width: none;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
 }
 
 .no-scrollbar::-webkit-scrollbar {
-  display: none;
+  display: none !important;
 }