[split-required] Split website + studio-v2 monoliths (Phase 3 continued)

Website (14 monoliths split):
- compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20)
- quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11)
- i18n.ts (1,173 → 8 language files)
- unity-bridge (1,094 → 12), backlog (1,087 → 6)
- training (1,066 → 8), rag (1,063 → 8)
- Deleted index_original.ts (4,899 LOC dead backup)

Studio-v2 (5 monoliths split):
- meet/page.tsx (1,481 → 9), messages (1,166 → 9)
- AlertsB2BContext.tsx (1,165 → 5 modules)
- alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6)

All existing imports preserved. Zero new TypeScript errors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

studio-v2/app/messages/_components/EmojiPicker.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import { emojiCategories } from '@/lib/MessagesContext'
+
+interface EmojiPickerProps {
+  onSelect: (emoji: string) => void
+  onClose: () => void
+  isDark: boolean
+}
+
+export function EmojiPicker({ onSelect, onClose, isDark }: EmojiPickerProps) {
+  const [activeCategory, setActiveCategory] = useState('Häufig')
+
+  return (
+    <div className={`absolute bottom-full left-0 mb-2 w-80 rounded-2xl border shadow-2xl overflow-hidden z-50 ${
+      isDark
+        ? 'bg-slate-900 border-white/20'
+        : 'bg-white border-slate-200'
+    }`}>
+      {/* Header */}
+      <div className={`flex items-center justify-between p-3 border-b ${
+        isDark ? 'border-white/10' : 'border-slate-100'
+      }`}>
+        <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
+          Emoji
+        </span>
+        <button
+          onClick={onClose}
+          className={`p-1 rounded-lg transition-colors ${
+            isDark ? 'hover:bg-white/10 text-white/60' : 'hover:bg-slate-100 text-slate-400'
+          }`}
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Category Tabs */}
+      <div className={`flex overflow-x-auto border-b scrollbar-hide ${
+        isDark ? 'border-white/10' : 'border-slate-100'
+      }`}>
+        {Object.keys(emojiCategories).map(cat => (
+          <button
+            key={cat}
+            onClick={() => setActiveCategory(cat)}
+            className={`px-3 py-2 text-xs font-medium whitespace-nowrap transition-colors ${
+              activeCategory === cat
+                ? isDark
+                  ? 'text-green-400 border-b-2 border-green-400'
+                  : 'text-green-600 border-b-2 border-green-600'
+                : isDark
+                  ? 'text-white/60 hover:text-white'
+                  : 'text-slate-500 hover:text-slate-900'
+            }`}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      {/* Emoji Grid */}
+      <div className="p-3 max-h-48 overflow-y-auto">
+        <div className="grid grid-cols-8 gap-1">
+          {emojiCategories[activeCategory as keyof typeof emojiCategories].map((emoji, i) => (
+            <button
+              key={i}
+              onClick={() => onSelect(emoji)}
+              className={`w-8 h-8 flex items-center justify-center text-xl rounded-lg transition-colors ${
+                isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'
+              }`}
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}