feat: Add peek animation and hide scrollbars in DM lists

- Add `.no-scrollbar` utility to hide scrollbars while keeping scrollability.
- Apply `.no-scrollbar` to ConversationList and MessageThread containers.
- Implement "peek" animation:
    - ConversationList: scrolls down 40px then back up on load.
    - MessageThread: scrolls up 40px then back down (to bottom) on load.
- Animation only triggers if content overflows.

js/ui/dm/ConversationList.js

@@ -47,7 +47,7 @@ export function ConversationList({
   }
   root.appendChild(header);
 
-  const list = createElement(doc, "div", "dm-conversation-list__items");
+  const list = createElement(doc, "div", "dm-conversation-list__items no-scrollbar");
   list.setAttribute("role", "listbox");
   list.setAttribute("aria-label", "Conversation list");
 
@@ -75,6 +75,18 @@ export function ConversationList({
       });
       list.appendChild(row);
     });
+
+    // Peek animation
+    if (conversations.length > 0) {
+      setTimeout(() => {
+        if (list.scrollHeight > list.clientHeight) {
+          list.scrollTo({ top: 40, behavior: "smooth" });
+          setTimeout(() => {
+            list.scrollTo({ top: 0, behavior: "smooth" });
+          }, 600);
+        }
+      }, 600);
+    }
   }
 
   list.addEventListener("keydown", (event) => {

js/ui/dm/MessageThread.js

@@ -93,7 +93,7 @@ export function MessageThread({
   }
   root.appendChild(header);
 
-  const timeline = createElement(doc, "div", "dm-message-thread__timeline");
+  const timeline = createElement(doc, "div", "dm-message-thread__timeline no-scrollbar");
   timeline.setAttribute("role", "log");
   timeline.setAttribute("aria-live", "polite");
 
@@ -137,11 +137,25 @@ export function MessageThread({
     });
   }
 
-  // Scroll to bottom
+  // Scroll to bottom and peek
   if (messages.length > 0) {
-      setTimeout(() => {
-        timeline.scrollTop = timeline.scrollHeight;
-      }, 0);
+    setTimeout(() => {
+      timeline.scrollTop = timeline.scrollHeight;
+
+      if (timeline.scrollHeight > timeline.clientHeight) {
+        setTimeout(() => {
+          const targetScroll = Math.max(0, timeline.scrollTop - 40);
+          timeline.scrollTo({ top: targetScroll, behavior: "smooth" });
+
+          setTimeout(() => {
+            timeline.scrollTo({
+              top: timeline.scrollHeight,
+              behavior: "smooth",
+            });
+          }, 600);
+        }, 600);
+      }
+    }, 0);
   }
 
   root.appendChild(timeline);