refactor: Unify channel and DM interface styling

- Change DM message input from input to textarea (rows=2) for consistency
- Increase DM form padding (p-2 → p-3) to match channel view
- Increase DM status bar padding (p-1 → p-2) with larger font
- Replace "Last refresh:" with "Updated:" in both views
- Update DM status to show connection states (Connected/Connecting/Disconnected) instead of "Ready"
- Add loadStatus() function to DM page for proper connection monitoring
- Unify message input area height and status bar appearance across both pages

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

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

app/templates/dm.html

@@ -109,15 +109,17 @@
             <!-- Send Message Form -->
             <div class="row border-top bg-light">
                 <div class="col-12">
-                    <form id="dmSendForm" class="p-2">
+                    <form id="dmSendForm" class="p-3">
                         <div class="emoji-picker-container">
                             <div class="input-group">
-                                <input type="text"
-                                       id="dmMessageInput"
-                                       class="form-control"
-                                       placeholder="Type a message..."
-                                       maxlength="200"
-                                       disabled>
+                                <textarea
+                                    id="dmMessageInput"
+                                    class="form-control"
+                                    placeholder="Type a message..."
+                                    rows="2"
+                                    maxlength="500"
+                                    disabled
+                                ></textarea>
                                 <button type="button" class="btn btn-outline-secondary" id="dmEmojiBtn" title="Insert emoji">
                                     <i class="bi bi-emoji-smile"></i>
                                 </button>
@@ -138,11 +140,11 @@
             <!-- Status Bar -->
             <div class="row border-top">
                 <div class="col-12">
-                    <div class="p-1 small text-muted d-flex justify-content-between align-items-center">
+                    <div class="p-2 small text-muted d-flex justify-content-between align-items-center">
                         <span id="dmStatusText">
-                            <i class="bi bi-circle-fill text-secondary"></i> Ready
+                            <i class="bi bi-circle-fill text-secondary"></i> Connecting...
                         </span>
-                        <span id="dmLastRefresh">-</span>
+                        <span id="dmLastRefresh">Updated: Never</span>
                     </div>
                 </div>
             </div>