Redesign DM profile pane: Split view, independent scrolling, avatars, and cleanup

- Refactored `AppShell` to implement a split-pane layout for Conversations and Message History.
- Removed `NotificationCenter` from the DM view to declutter the interface.
- Updated `MessageThread` and `ConversationList` to support independent vertical scrolling with hidden scrollbars.
- Added avatars to message bubbles and conversation list items.
- Implemented right/left alignment for outgoing/incoming messages.
- Added "peak" bounce animations for list boundaries.
- Cleaned up redundant headers in the sidebar.
- Applied responsive CSS improvements in `tailwind.source.css`.

css/tailwind.source.css

@@ -5060,7 +5060,8 @@
   .profile-modal .dm-app-shell {
     min-height: 0;
     height: auto;
-    padding: var(--space-md);
+    padding: 0;
+    gap: var(--space-md);
   }
 
   .dm-app-shell__sidebar,
@@ -5075,6 +5076,10 @@
   .profile-modal .dm-app-shell__main {
     height: auto;
     min-height: 0;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
   }
 
   .dm-app-shell__sidebar {
@@ -5878,7 +5883,7 @@
     }
 
     .profile-modal .dm-conversation-list {
-      height: 100%;
+      flex: 1;
       min-height: 0;
       display: flex;
       flex-direction: column;
@@ -5888,10 +5893,11 @@
       flex: 1;
       overflow-y: auto;
       min-height: 0;
+      @apply no-scrollbar;
     }
 
     .profile-modal .dm-message-thread {
-      height: 100%;
+      flex: 1;
       min-height: 0;
       display: flex;
       flex-direction: column;
@@ -5901,6 +5907,7 @@
       flex: 1;
       overflow-y: auto;
       min-height: 0;
+      @apply no-scrollbar;
     }
   }