refactor: Completely unify channel and DM interface styling

Unify navbar:
- Add menu button to DM navbar (same icon as channels) for consistent height
- Both navbars now have 3 elements: back/brand, dropdown, menu button

Unify message input area:
- Disable textarea resize on both pages (resize: none)
- Unify input font-size on mobile (0.9rem)
- Unify form padding on mobile (0.5rem)
- Unify border-radius for send buttons

Unify message bubbles:
- Set DM message max-width to 70% (same as channels)
- Unify padding: 0.75rem 1rem (same as channels)
- Unify max-width on mobile: 85% for both
- Remove explicit font-size from DM bubbles (inherit default)
- Unify animation duration: 0.3s

Unify selectors:
- Apply same mobile styles to both #channelSelector and #dmConversationSelector

PWA fixes:
- Move safe-area handling from inline styles to main CSS
- Apply safe-area-inset-bottom globally for both pages
- Remove duplicate inline styles from dm.html

This should fix the Android PWA viewport issue where the bottom bar
gets hidden under system navigation after navigating to DM page.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/static/css/style.css

@@ -111,12 +111,14 @@ main {
 }
 
 /* Send Form */
-#messageInput {
+#messageInput,
+#dmMessageInput {
     resize: none;
     border-radius: 0.5rem 0 0 0.5rem;
 }
 
-#sendBtn {
+#sendBtn,
+#dmSendBtn {
     border-radius: 0 0.5rem 0.5rem 0;
 }
 
@@ -188,7 +190,8 @@ main {
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    .message {
+    .message,
+    .dm-message {
         max-width: 85%;
     }
 
@@ -196,12 +199,14 @@ main {
         font-size: 0.8rem;
     }
 
-    #messageInput {
+    #messageInput,
+    #dmMessageInput {
         font-size: 0.9rem;
     }
 
     /* Reduce padding on mobile to save vertical space */
-    #sendMessageForm {
+    #sendMessageForm,
+    #dmSendForm {
         padding: 0.5rem !important;
     }
 
@@ -217,7 +222,8 @@ main {
     }
 
     /* Navbar: Channel selector on mobile */
-    #channelSelector {
+    #channelSelector,
+    #dmConversationSelector {
         min-width: 100px !important;
         font-size: 0.9rem;
     }
@@ -377,12 +383,11 @@ main {
 
 /* DM Message Bubbles */
 .dm-message {
-    max-width: 80%;
-    padding: 0.5rem 0.75rem;
+    max-width: 70%;
+    padding: 0.75rem 1rem;
     border-radius: 1rem;
-    font-size: 0.9rem;
     word-wrap: break-word;
-    animation: fadeIn 0.2s ease-in;
+    animation: fadeIn 0.3s ease-in;
 }
 
 .dm-message.own {
@@ -574,3 +579,14 @@ main {
     border-radius: 0.5rem;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }
+
+/* =============================================================================
+   PWA Safe Area Handling
+   ============================================================================= */
+
+/* Ensure bottom UI is visible above system bars on mobile devices */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+    body {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}