Overhaul social scheduler UI

- Emoji picker with 6 categories (~100 emojis), inserts at cursor
- Character counter (0/500) with amber/red thresholds
- Default schedule time is now +5 min in browser local time (fixes UTC offset bug)
- Relative time display uses local time (removes incorrect +Z suffix)
- Post cards redesigned: color-coded left border by status, platform badges
  in Discord/Mastodon/LinkedIn brand colors, status icons
- Delete is two-click confirm (no confirm() dialog)
- Duplicate errors use inline error area (no alert())
- Nicer empty state with icon

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

views/social.php

@@ -20,9 +20,36 @@ include ROOT . '/views/_header.php';
         <input type="hidden" id="socialEditId">
 
         <div class="mb-3">
-          <label class="form-label small">Content</label>
+          <div class="d-flex align-items-center mb-1">
+            <label class="form-label small mb-0">Content</label>
+            <div class="ms-auto dropdown">
+              <button type="button" class="btn btn-xs btn-outline-secondary" id="socialEmojiBtn"
+                      data-bs-toggle="dropdown" data-bs-auto-close="outside" title="Insert emoji">
+                😊
+              </button>
+              <div class="dropdown-menu p-2 social-emoji-picker" aria-labelledby="socialEmojiBtn">
+                <div class="social-emoji-grid">
+                  <div class="social-emoji-cat">Smileys</div>
+                  <div>😀 😂 🥰 😍 🤩 😎 😭 😤 🤔 😴 🥳 🤗 😅 🫡 😇 🙃 😘 😣 😝 🥺 👀</div>
+                  <div class="social-emoji-cat mt-1">Gestures</div>
+                  <div>👍 👎 👏 🙌 🤝 ✌️ 👌 🤞 🫶 💪 🎉 🔥 ✨ ⭐ 💯 🙏 👋 🤷‍♀️</div>
+                  <div class="social-emoji-cat mt-1">Hearts</div>
+                  <div>❤️ 🧡 💛 💚 💙 💜 🖤 🤍 💔 💕 💞 💓 💗 💖 🫀 ♥️</div>
+                  <div class="social-emoji-cat mt-1">Nature</div>
+                  <div>🌟 🌈 🌸 🌺 🌻 🌙 ☀️ 🌊 🌿 🍀 🦋 🌍 🌱 🎄 🌴 🌵</div>
+                  <div class="social-emoji-cat mt-1">Objects</div>
+                  <div>💻 📱 📸 🎵 🎮 🎨 📚 🏆 🔑 💡 🔔 📢 🎯 📊 🚀 🎁</div>
+                  <div class="social-emoji-cat mt-1">Symbols</div>
+                  <div>✅ ❌ ⚡ 🔗 💬 📌 🔍 💰 ⏰ 📅 🗓️ ➡️ ⬆️ 🔄 💤 ❓</div>
+                </div>
+              </div>
+            </div>
+          </div>
           <textarea id="socialContent" class="form-control form-control-sm font-monospace"
                     rows="7" placeholder="What's on your mind?"></textarea>
+          <div class="d-flex justify-content-end mt-1">
+            <span id="socialCharCount" class="small text-muted">0 / 500</span>
+          </div>
         </div>
 
         <div class="mb-3">