fix: position kaomoji picker above message input bar

Moved EmojiPicker inside the form element so it anchors to the
input area (form is already position:relative). Picker now pops
up above the input instead of floating in the message scroll area.

web/src/components/ChatArea.tsx

@@ -661,14 +661,6 @@ export function ChatArea() {
                   <GiphyPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} />
                 </div>
               )}
-              {showKaomoji && (
-                <div className="px-3 pb-1">
-                  <EmojiPicker
-                    onSelect={(emoji) => setInput((prev) => prev + emoji)}
-                    onClose={() => setShowKaomoji(false)}
-                  />
-                </div>
-              )}
               <div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic h-5 select-none">
                 {(() => {
                   const chTyping = activeChannelId ? (typingUsers[activeChannelId] || []).filter(u => u.userId !== currentUser?.id) : [];
@@ -741,6 +733,12 @@ export function ChatArea() {
                 >
                   [☺]
                 </button>
+                {showKaomoji && (
+                  <EmojiPicker
+                    onSelect={(emoji) => setInput((prev) => prev + emoji)}
+                    onClose={() => setShowKaomoji(false)}
+                  />
+                )}
               </form>
             </div>
             {activeThread && (