Upload 4 files

SETUP.md

@@ -1,139 +1,32 @@
-# 🔥 NoahsChat v3 – Firebase Setup
+# NoahsChat v4 — JSONBin.io Setup
 
-## Warum Firebase?
-Das Chat-System nutzt jetzt **Firebase Realtime Database** damit Nachrichten,
-DMs, Tickets und Voice-Presence für ALLE User sichtbar sind – nicht nur lokal.
+## Setup (5 Minuten, kostenlos)
 
----
-
-## Schritt 1: Firebase-Projekt erstellen (kostenlos)
-
-1. Gehe zu → https://console.firebase.google.com
-2. Klicke **"Projekt erstellen"**
-3. Gib einen Namen ein (z.B. `noahschat`) → Weiter → Projekt erstellen
-4. Im Dashboard: Klicke **"Realtime Database"** (links im Menü)
-5. Klicke **"Datenbank erstellen"**
-6. Wähle **Europe-West1** als Standort
-7. Starte im **Testmodus** (Regeln = offen für 30 Tage)
-
----
-
-## Schritt 2: App-Konfiguration holen
-
-1. Klicke auf das Zahnrad ⚙️ neben "Projektübersicht" → Projekteinstellungen
-2. Scrolle runter zu **"Deine Apps"**
-3. Klicke auf `</>` (Web-App hinzufügen)
-4. App-Namen eingeben → App registrieren
-5. Du siehst jetzt ein `firebaseConfig`-Objekt mit allen Werten
-
----
-
-## Schritt 3: app.js anpassen
-
-Öffne `app.js` und ersetze oben den `FIREBASE_CONFIG` Block:
-
-```javascript
-const FIREBASE_CONFIG = {
-  apiKey:            "AIzaSy...",        // ← dein Wert
-  authDomain:        "noahschat.firebaseapp.com",
-  databaseURL:       "https://noahschat-default-rtdb.europe-west1.firebasedatabase.app",
-  projectId:         "noahschat",
-  storageBucket:     "noahschat.appspot.com",
-  messagingSenderId: "123456789",
-  appId:             "1:123456789:web:..."
-};
-```
-
----
+### 1. JSONBin Account erstellen
+- https://jsonbin.io → kostenlos registrieren
 
-## Schritt 4: Datenbank-Regeln (nach dem Testen sichern!)
+### 2. API Key holen
+- Dashboard → "API Keys" → Master Key kopieren
 
-Im Firebase Console → Realtime Database → **Regeln**:
+### 3. Einen Bin erstellen
+- Dashboard → "+ Create Bin" → Inhalt: `{}` → Create
+- Bin ID aus der URL kopieren
 
-```json
-{
-  "rules": {
-    ".read": true,
-    ".write": true
-  }
-}
+### 4. In app.js eintragen
+```js
+const JSONBIN_KEY = '$2a$10$DEIN_KEY_HIER';
+const JSONBIN_BIN = 'DEINE_BIN_ID_HIER';
 ```
 
-Für Produktion später:
-```json
-{
-  "rules": {
-    "users": {
-      ".read": true,
-      ".write": true
-    },
-    "msgs": {
-      ".read": true,
-      ".write": true
-    },
-    "dms": {
-      ".read": true,
-      ".write": true
-    },
-    "online": {
-      ".read": true,
-      ".write": true
-    },
-    "voice_participants": {
-      ".read": true,
-      ".write": true
-    },
-    "tickets": {
-      ".read": true,
-      ".write": true
-    },
-    "pins": {
-      ".read": true,
-      ".write": true
-    },
-    "moderation": {
-      ".read": true,
-      ".write": true
-    },
-    "config": {
-      ".read": true,
-      ".write": true
-    },
-    "user_fps": {
-      ".read": true,
-      ".write": true
-    }
-  }
-}
-```
-
----
-
-## Was jetzt funktioniert ✅
-
-| Feature | Status |
-|---------|--------|
-| Nachrichten (geteilt) | ✅ Realtime via Firebase |
-| DMs | ✅ Funktioniert für alle User |
-| Voice Presence | ✅ Sichtbar für alle |
-| Tickets | ✅ Für Admins sichtbar |
-| Online-Status | ✅ Live-Update |
-| Ban/Kick/Timeout | ✅ Server-übergreifend |
-| AutoMod | ✅ |
-| Pins | ✅ |
-| Suche | ✅ |
+### 5. Alle 3 Dateien auf HF Space hochladen — fertig!
 
 ---
 
-## Fallback (ohne Firebase)
-
-Ohne Firebase-Konfiguration läuft alles in **localStorage** – funktioniert
-nur lokal in deinem Browser, aber zum Testen reicht es.
-
-Der gelbe Hinweis `⚠ LOKAL – Firebase fehlt!` verschwindet wenn Firebase konfiguriert ist.
-
----
+## Geschwindigkeit
+- Lesen: ~200-400ms
+- Schreiben: ~300-600ms  
+- Nachrichten erscheinen sofort lokal, andere sehen sie nach ~3 Sekunden
 
 ## Owner-Account
-- **Username:** Noah
-- **Passwort:** Noah100419!
+- Username: Noah
+- Passwort: Noah100419!

app.js

@@ -0,0 +1,1168 @@
+// ═══════════════════════════════════════════════════════════════
+// NOAHSCHAT v4 — JSONBin.io Backend
+// ═══════════════════════════════════════════════════════════════
+//
+// SETUP (5 Minuten, kostenlos):
+// 1. https://jsonbin.io → kostenlos registrieren
+// 2. Dashboard → "API Keys" → Master Key kopieren
+// 3. "+ Create Bin" → leeres JSON {} → Create → Bin ID kopieren
+//    (du brauchst NUR EINEN Bin für alles!)
+// 4. JSONBIN_KEY und JSONBIN_BIN unten eintragen → fertig!
+// ─────────────────────────────────────────────────────────────
+
+const JSONBIN_KEY = '$2a$10$DEIN_MASTER_KEY_HIER';   // ← eintragen
+const JSONBIN_BIN = 'DEINE_BIN_ID_HIER';              // ← eintragen
+
+// ─── CONFIG ───────────────────────────────────────────────────
+const OWNER_NAME = 'Noah';
+const OWNER_PASS = 'Noah100419!';
+const POLL_MS    = 3000; // Polling-Intervall in ms
+
+// ─── STATE ────────────────────────────────────────────────────
+let currentUser    = null;
+let currentChannel = 'allgemein';
+let currentDM      = null;
+let pollTimer      = null;
+let spamTs         = [];
+let captchaData    = {};
+let pendingSpamMsg = null;
+let appConfig      = {};
+let voiceActive    = false;
+let voiceChannel   = null;
+let micMuted       = false;
+let deafened       = false;
+let translationEnabled = false;
+let userLanguage   = 'de';
+let unreadCounts   = {};
+let lastMsgCounts  = {};
+
+// ─── IN-MEMORY DB CACHE ───────────────────────────────────────
+// Die komplette DB liegt immer im RAM.
+// Schreiben: sofort im Cache sichtbar, async zu JSONBin gesendet.
+// Lesen: aus Cache (kein Extra-Request nötig).
+// Polling lädt alle POLL_MS die DB neu von JSONBin.
+let DB = null;
+let isSaving = false;
+let saveQueued = false;
+
+const DB_DEFAULT = () => ({
+  users:      {},
+  msgs:       {},
+  dms:        {},
+  online:     {},
+  voice:      {},
+  tickets:    {},
+  pins:       [],
+  moderation: { bans:{}, banned_fps:{}, kicked:{}, timeouts:{} },
+  config:     {}
+});
+
+// ─── FINGERPRINT ──────────────────────────────────────────────
+function getFingerprint() {
+  const s = navigator.userAgent + screen.width + screen.height + screen.colorDepth
+    + (Intl.DateTimeFormat().resolvedOptions().timeZone||'') + navigator.language;
+  let h = 0;
+  for (let i = 0; i < s.length; i++) { h = ((h<<5)-h) + s.charCodeAt(i); h = h&h; }
+  return Math.abs(h).toString(36);
+}
+const MY_FP = getFingerprint();
+
+// ─── JSONBIN API ──────────────────────────────────────────────
+const isConfigured = () =>
+  !JSONBIN_KEY.includes('DEIN') && !JSONBIN_BIN.includes('DEINE');
+
+async function apiLoad() {
+  if (!isConfigured()) {
+    const v = localStorage.getItem('nc_db');
+    DB = v ? JSON.parse(v) : DB_DEFAULT();
+    ensureFields();
+    return;
+  }
+  try {
+    const r = await fetch(`https://api.jsonbin.io/v3/b/${JSONBIN_BIN}/latest`, {
+      headers: { 'X-Master-Key': JSONBIN_KEY, 'X-Bin-Meta': 'false' }
+    });
+    if (!r.ok) throw new Error(r.status);
+    DB = await r.json();
+    ensureFields();
+    localStorage.setItem('nc_db', JSON.stringify(DB)); // Lokaler Backup
+  } catch(e) {
+    console.warn('Load fehlgeschlagen:', e);
+    // Fallback: letzten lokalen Stand nehmen
+    const v = localStorage.getItem('nc_db');
+    if (v) DB = JSON.parse(v);
+    else   DB = DB_DEFAULT();
+    ensureFields();
+  }
+}
+
+async function apiSave() {
+  // Immer lokal speichern
+  localStorage.setItem('nc_db', JSON.stringify(DB));
+  if (!isConfigured()) return;
+
+  if (isSaving) { saveQueued = true; return; }
+  isSaving = true;
+  try {
+    const r = await fetch(`https://api.jsonbin.io/v3/b/${JSONBIN_BIN}`, {
+      method:  'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Master-Key': JSONBIN_KEY,
+        'X-Bin-Versioning': 'false' // Kein Versionsverlauf → schneller
+      },
+      body: JSON.stringify(DB)
+    });
+    if (!r.ok) console.warn('Save Fehler:', r.status);
+  } catch(e) {
+    console.warn('Save Exception:', e);
+  } finally {
+    isSaving = false;
+    if (saveQueued) { saveQueued = false; apiSave(); }
+  }
+}
+
+// Fehlende Felder ergänzen falls DB älter ist
+function ensureFields() {
+  const def = DB_DEFAULT();
+  for (const k of Object.keys(def)) {
+    if (DB[k] === undefined) DB[k] = def[k];
+  }
+  if (!DB.moderation.bans)       DB.moderation.bans = {};
+  if (!DB.moderation.banned_fps) DB.moderation.banned_fps = {};
+  if (!DB.moderation.kicked)     DB.moderation.kicked = {};
+  if (!DB.moderation.timeouts)   DB.moderation.timeouts = {};
+}
+
+// Hilfsfunktionen: Pfad-Zugriff (z.B. "users/noah")
+function dbGet(path) {
+  const parts = path.split('/').filter(Boolean);
+  let o = DB;
+  for (const p of parts) { if (o==null) return undefined; o = o[p]; }
+  return o;
+}
+
+function dbSet(path, val) {
+  const parts = path.split('/').filter(Boolean);
+  let o = DB;
+  for (let i = 0; i < parts.length-1; i++) {
+    if (o[parts[i]] == null) o[parts[i]] = {};
+    o = o[parts[i]];
+  }
+  o[parts[parts.length-1]] = val;
+  apiSave(); // Async, blockiert nicht
+}
+
+function dbDelete(path) {
+  const parts = path.split('/').filter(Boolean);
+  let o = DB;
+  for (let i = 0; i < parts.length-1; i++) {
+    if (o[parts[i]] == null) return;
+    o = o[parts[i]];
+  }
+  delete o[parts[parts.length-1]];
+  apiSave();
+}
+
+function dbPush(path, val) {
+  const key = Date.now().toString(36) + Math.random().toString(36).slice(2,5);
+  val._key = key;
+  dbSet(path+'/'+key, val);
+  return key;
+}
+
+// ─── ROLE HELPERS ─────────────────────────────────────────────
+const ROLE_PRIORITY = { owner:5, admin:4, mod:3, vip:2, member:1 };
+const ROLE_BADGE    = { owner:'👑', admin:'🔰', mod:'⭐', vip:'💎', member:'' };
+const ROLE_LABELS   = { owner:'Owner', admin:'Admin', mod:'Moderator', vip:'VIP', member:'Mitglied' };
+const ROLE_COLORS   = { owner:'name-color-1', admin:'name-color-0', mod:'name-color-2', vip:'name-color-4', member:'' };
+function hasRole(r) { return currentUser && ROLE_PRIORITY[currentUser.role] >= ROLE_PRIORITY[r]; }
+
+// ─── CAPTCHA ──────────────────────────────────────────────────
+function genCaptcha() {
+  const a=Math.floor(Math.random()*18)+2, b=Math.floor(Math.random()*18)+2;
+  if (Math.random()>.4) return {q:`${a} + ${b} = ?`, ans:a+b};
+  const big=Math.max(a,b), sm=Math.min(a,b);
+  return {q:`${big} − ${sm} = ?`, ans:big-sm};
+}
+function refreshCaptcha(id) {
+  const d=genCaptcha(); captchaData[id]=d;
+  const q=document.getElementById(id+'-q'); if(q) q.textContent=d.q;
+  const a=document.getElementById(id+'-a'); if(a) a.value='';
+}
+function verifyCaptcha(id) {
+  return captchaData[id] && parseInt(document.getElementById(id+'-a')?.value)===captchaData[id].ans;
+}
+
+// ─── AUTH TABS ────────────────────────────────────────────────
+function switchTab(tab) {
+  ['login','register'].forEach((t,i)=>{
+    document.getElementById('tab-'+t).style.display=t===tab?'':'none';
+    document.querySelectorAll('.auth-tab')[i].classList.toggle('active',t===tab);
+  });
+  document.getElementById('auth-error').textContent='';
+}
+
+// ─── REGISTER ─────────────────────────────────────────────────
+async function doRegister() {
+  const u=document.getElementById('reg-user').value.trim();
+  const p=document.getElementById('reg-pass').value;
+  const p2=document.getElementById('reg-pass2').value;
+  const err=t=>document.getElementById('auth-error').textContent=t;
+  if (u.length<2)  return err('Username mind. 2 Zeichen');
+  if (u.length>20) return err('Username max. 20 Zeichen');
+  if (!/^[a-zA-Z0-9_]+$/.test(u)) return err('Nur Buchstaben, Zahlen, _');
+  if (p.length<4)  return err('Passwort mind. 4 Zeichen');
+  if (p!==p2)      return err('Passwörter stimmen nicht überein');
+  if (!verifyCaptcha('reg')) { refreshCaptcha('reg'); return err('❌ Falsches Captcha!'); }
+  if (DB.moderation.bans?.[u.toLowerCase()]) return err('Dieser Account ist gesperrt.');
+  if (DB.moderation.banned_fps?.[MY_FP])     return showBanned();
+  if (DB.users[u.toLowerCase()])             return err('Username bereits vergeben');
+  dbSet(`users/${u.toLowerCase()}`, {
+    username:u, password:encode(p),
+    color:Math.floor(Math.random()*5), role:'member', joined:Date.now(),
+    settings:{lang:'de', translate:false, notif:true}
+  });
+  refreshCaptcha('reg');
+  showAuthSuccess('✓ Account erstellt! Du kannst dich jetzt einloggen.');
+  setTimeout(()=>{ switchTab('login'); document.getElementById('login-user').value=u; }, 1300);
+}
+
+// ─── LOGIN ────────────────────────────────────────────────────
+async function doLogin() {
+  const u=document.getElementById('login-user').value.trim();
+  const p=document.getElementById('login-pass').value;
+  const err=t=>document.getElementById('auth-error').textContent=t;
+  if (!verifyCaptcha('login')) { refreshCaptcha('login'); return err('❌ Falsches Captcha!'); }
+  if (DB.moderation.banned_fps?.[MY_FP]) return showBanned();
+  const entry=DB.users[u.toLowerCase()];
+  if (!entry)                    return err('Falscher Username oder Passwort');
+  if (decode(entry.password)!==p)return err('Falscher Username oder Passwort');
+  if (DB.moderation.bans?.[u.toLowerCase()]) return err('🚫 Du bist von NoahsChat gebannt.');
+  currentUser={...entry};
+  refreshCaptcha('login');
+  dbSet(`users/${u.toLowerCase()}/_fp`, MY_FP);
+  dbSet(`online/${entry.username}`, Date.now());
+  userLanguage=entry.settings?.lang||'de';
+  translationEnabled=entry.settings?.translate||false;
+  launchApp();
+}
+
+// ─── LOGOUT ───────────────────────────────────────────────────
+async function doLogout() {
+  if (!currentUser) return;
+  dbDelete(`online/${currentUser.username}`);
+  if (voiceActive) leaveVoice();
+  clearInterval(pollTimer);
+  currentUser=null;
+  document.getElementById('app').classList.remove('visible');
+  document.getElementById('auth-screen').style.display='flex';
+  document.getElementById('login-pass').value='';
+  refreshCaptcha('login');
+}
+
+// ─── LAUNCH APP ───────────────────────────────────────────────
+async function launchApp() {
+  document.getElementById('auth-screen').style.display='none';
+  document.getElementById('app').classList.add('visible');
+  appConfig = DB.config || {};
+  if (!appConfig.channels) {
+    appConfig.channels = window.DEFAULT_CHANNELS||[];
+    appConfig.automod  = window.DEFAULT_AUTOMOD||{};
+    dbSet('config', appConfig);
+  }
+  updateTopbar();
+  buildChannelList();
+  openChannel('allgemein');
+  startPolling();
+}
+
+// ─── POLLING ──────────────────────────────────────────────────
+function startPolling() {
+  pollTimer = setInterval(pollTick, POLL_MS);
+}
+
+async function pollTick() {
+  if (!currentUser) return;
+
+  // DB neu laden → bekommt Änderungen anderer User
+  setSyncStatus('sync');
+  await apiLoad();
+  setSyncStatus('ok');
+
+  // Eigene Daten aktualisieren (Rolle könnte geändert worden sein)
+  const me = DB.users[currentUser.username.toLowerCase()];
+  if (me) {
+    currentUser = {...me};
+    updateTopbar();
+    userLanguage = me.settings?.lang||'de';
+    translationEnabled = me.settings?.translate||false;
+  }
+
+  // Heartbeat
+  DB.online[currentUser.username] = Date.now();
+  apiSave();
+
+  // Moderation-Checks
+  const mod = DB.moderation;
+  if (mod.bans?.[currentUser.username.toLowerCase()] || mod.banned_fps?.[MY_FP]) {
+    clearInterval(pollTimer); showBanned(); return;
+  }
+  const kick = mod.kicked?.[currentUser.username.toLowerCase()];
+  if (kick && Date.now()-kick.ts < 60000) { clearInterval(pollTimer); showKickedModal(); return; }
+  updateTimeoutBar();
+
+  // Online-User-Liste
+  const now = Date.now();
+  const onlineNames = Object.entries(DB.online)
+    .filter(([,ts])=>now-ts<12000).map(([u])=>u);
+  document.getElementById('online-count').textContent = onlineNames.length;
+  renderUserList(onlineNames);
+  updateDMList();
+
+  // Nachrichten anzeigen
+  if (currentDM) renderDMMessages(currentDM);
+  else {
+    renderChannelMessages(currentChannel);
+    // Unread-Badges für andere Channels
+    for (const ch of (appConfig.channels||[])) {
+      if (ch.id===currentChannel) continue;
+      const msgs = getMsgs(ch.id);
+      const key  = 'ch_'+ch.id;
+      const prev = lastMsgCounts[key]||0;
+      if (msgs.length>prev) {
+        unreadCounts[key] = (unreadCounts[key]||0) + (msgs.length-prev);
+        updateBadge('badge-'+ch.id, unreadCounts[key]);
+        lastMsgCounts[key] = msgs.length;
+      }
+    }
+  }
+
+  // DM Unread-Badges
+  for (const entry of Object.values(DB.users)) {
+    if (entry.username===currentUser.username) continue;
+    if (currentDM===entry.username) continue;
+    const key = 'dm_'+entry.username.toLowerCase();
+    const msgs = getDMMsgs(getDMKey(currentUser.username, entry.username));
+    const prev = lastMsgCounts[key]||0;
+    if (msgs.length>prev) {
+      unreadCounts[key] = (unreadCounts[key]||0) + (msgs.length-prev);
+      lastMsgCounts[key] = msgs.length;
+      updateDMList();
+    }
+  }
+
+  // Abgelaufene Voice-Einträge aufräumen
+  for (const [vcId, parts] of Object.entries(DB.voice||{})) {
+    for (const [uname, data] of Object.entries(parts||{})) {
+      if (now-(data.ts||0) > 12000) dbDelete(`voice/${vcId}/${uname}`);
+    }
+  }
+  buildChannelList();
+}
+
+// ─── SYNC STATUS INDICATOR ────────────────────────────────────
+function setSyncStatus(state) {
+  let el = document.getElementById('sync-dot');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'sync-dot';
+    el.style.cssText = 'position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:9999;font-family:Orbitron,monospace;font-size:.55rem;letter-spacing:.12em;padding:3px 10px;background:rgba(5,10,15,0.9);border-radius:2px;border:1px solid;transition:all .3s;pointer-events:none';
+    document.body.appendChild(el);
+  }
+  if (state==='sync') {
+    el.textContent='⟳ SYNC...';
+    el.style.borderColor='rgba(0,212,255,0.3)';
+    el.style.color='var(--muted)';
+    el.style.opacity='1';
+  } else {
+    el.textContent='● LIVE';
+    el.style.borderColor='rgba(78,255,145,0.3)';
+    el.style.color='var(--green)';
+    setTimeout(()=>{ if(el) el.style.opacity='0'; }, 1500);
+  }
+}
+
+// ─── TOPBAR ───────────────────────────────────────────────────
+function updateTopbar() {
+  const av=document.getElementById('topbar-avatar');
+  av.textContent=currentUser.username[0].toUpperCase();
+  av.className=`user-avatar-sm av-color-${currentUser.color}`;
+  document.getElementById('topbar-username').textContent=currentUser.username;
+  document.getElementById('topbar-role-badge').textContent=ROLE_BADGE[currentUser.role]||'';
+}
+
+// ─── SIDEBAR ──────────────────────────────────────────────────
+function buildChannelList() {
+  const channels=appConfig.channels||window.DEFAULT_CHANNELS||[];
+  const list=document.getElementById('channel-list');
+  list.innerHTML='';
+  const cats={info:'Info',chat:'Text-Channels',fun:'Community',staff:'Staff'};
+  const grouped={};
+  for (const ch of channels) {
+    const cat=ch.category||'chat';
+    if (!grouped[cat]) grouped[cat]=[];
+    grouped[cat].push(ch);
+  }
+  for (const [catId,label] of Object.entries(cats)) {
+    const chs=grouped[catId]; if (!chs) continue;
+    if (catId==='staff'&&!hasRole('mod')) continue;
+    const catEl=document.createElement('div');
+    catEl.className='channel-category';
+    catEl.textContent='— '+label;
+    list.appendChild(catEl);
+    for (const ch of chs) {
+      if (ch.adminOnly&&!hasRole('admin')) {
+        if (catId==='staff') continue;
+        const div=document.createElement('div');
+        div.className='channel-item ch-locked';
+        div.innerHTML=`<span class="channel-icon">${ch.icon}</span><span class="channel-name">${ch.name}</span><span style="font-size:.65rem;color:var(--muted)">🔒</span>`;
+        list.appendChild(div); continue;
+      }
+      if (ch.modOnly&&!hasRole('mod')) continue;
+      const div=document.createElement('div');
+      div.className='channel-item'+(ch.id===currentChannel&&!currentDM?' active':'');
+      div.dataset.channel=ch.id;
+      div.innerHTML=`<span class="channel-icon">${ch.icon}</span><span class="channel-name">${ch.name}</span><span class="unread-badge" id="badge-${ch.id}" style="display:none"></span>`;
+      div.onclick=()=>openChannel(ch.id);
+      list.appendChild(div);
+    }
+  }
+  // Voice Channels
+  const vcCat=document.createElement('div');
+  vcCat.className='channel-category';
+  vcCat.textContent='— Voice Channels';
+  list.appendChild(vcCat);
+  for (const vc of [{id:'voice-allgemein',name:'Allgemein',icon:'🔊'},{id:'voice-gaming',name:'Gaming',icon:'🎮'},{id:'voice-musik',name:'Musik',icon:'🎵'}]) {
+    const isActive=voiceActive&&voiceChannel===vc.id;
+    const div=document.createElement('div');
+    div.className='channel-item'+(isActive?' active':'');
+    div.innerHTML=`<span class="channel-icon">${vc.icon}</span><span class="channel-name">${vc.name}</span>`;
+    div.onclick=()=>joinVoice(vc.id,vc.name);
+    list.appendChild(div);
+    for (const p of Object.values(DB.voice?.[vc.id]||{})) {
+      const pe=document.createElement('div');
+      pe.style.cssText='padding:3px 14px 3px 32px;font-size:.78rem;color:var(--green);display:flex;gap:6px;align-items:center;pointer-events:none';
+      pe.innerHTML=`<span>🎙</span><span>${escHtml(p.name)}</span>${p.muted?'<span style="color:var(--muted)">🔇</span>':''}`;
+      list.appendChild(pe);
+    }
+  }
+}
+
+// ─── CHANNELS ─────────────────────────────────────────────────
+function openChannel(chId) {
+  currentChannel=chId; currentDM=null;
+  document.querySelectorAll('.channel-item').forEach(el=>el.classList.remove('active'));
+  document.querySelector(`[data-channel="${chId}"]`)?.classList.add('active');
+  document.querySelectorAll('.dm-item').forEach(el=>el.classList.remove('active'));
+  const ch=(appConfig.channels||[]).find(c=>c.id===chId)||{name:chId,icon:'💬',sub:''};
+  document.getElementById('chat-title').textContent=ch.icon+' '+ch.name;
+  document.getElementById('chat-sub').textContent=ch.sub||'';
+  document.getElementById('topbar-channel-name').textContent='# '+ch.name;
+  unreadCounts['ch_'+chId]=0; updateBadge('badge-'+chId,0);
+  const locked=(ch.adminOnly&&!hasRole('admin'))||(ch.readOnly&&!hasRole('admin'))||(ch.modOnly&&!hasRole('mod'));
+  document.getElementById('msg-input').disabled=locked;
+  document.getElementById('send-btn').disabled=locked;
+  document.getElementById('msg-input').placeholder=locked?'🔒 Du kannst hier nicht schreiben':'Nachricht schreiben...';
+  renderChannelMessages(chId);
+}
+
+function getMsgs(chId) {
+  return Object.values(DB.msgs[chId]||{}).sort((a,b)=>a.ts-b.ts);
+}
+
+function renderChannelMessages(chId) {
+  const msgs=getMsgs(chId);
+  lastMsgCounts['ch_'+chId]=msgs.length;
+  renderMessages(msgs);
+}
+
+// ─── DMs ──────────────────────────────────────────────────────
+function getDMKey(a,b) { return [a.toLowerCase(),b.toLowerCase()].sort().join('__'); }
+
+function getDMMsgs(key) {
+  return Object.values(DB.dms[key]||{}).sort((a,b)=>a.ts-b.ts);
+}
+
+function openDM(username) {
+  currentDM=username; currentChannel=null;
+  document.querySelectorAll('.channel-item').forEach(el=>el.classList.remove('active'));
+  document.querySelectorAll('.dm-item').forEach(el=>{
+    el.classList.toggle('active',el.dataset.user===username.toLowerCase());
+  });
+  document.getElementById('chat-title').textContent='@ '+username;
+  document.getElementById('chat-sub').textContent='Direktnachricht – privat';
+  document.getElementById('topbar-channel-name').textContent='@ '+username;
+  document.getElementById('msg-input').disabled=false;
+  document.getElementById('send-btn').disabled=false;
+  document.getElementById('msg-input').placeholder=`Nachricht an @${username}...`;
+  unreadCounts['dm_'+username.toLowerCase()]=0;
+  updateDMList();
+  renderDMMessages(username);
+}
+
+function renderDMMessages(username) {
+  const key=getDMKey(currentUser.username,username);
+  const msgs=getDMMsgs(key);
+  lastMsgCounts['dm_'+username.toLowerCase()]=msgs.length;
+  renderMessages(msgs,true);
+}
+
+// ─── RENDER MESSAGES ──────────────────────────────────────────
+function renderMessages(msgs, isDM=false) {
+  const c=document.getElementById('messages');
+  const atBottom=c.scrollHeight-c.scrollTop<=c.clientHeight+80;
+  if (!msgs.length) {
+    c.innerHTML='<div class="empty-chat"><div class="empty-chat-icon">💬</div><p>Noch keine Nachrichten. Schreib was!</p></div>';
+    return;
+  }
+  let html='', lastDay='', lastAuthor='', lastTime=0;
+  for (let i=0; i<msgs.length; i++) {
+    const m=msgs[i];
+    if (m.system) { html+=`<div class="msg-system">⚙ ${escHtml(m.text)}</div>`; lastAuthor=''; continue; }
+    if (m.automod){ html+=`<div class="msg-automod">🤖 AutoMod: ${escHtml(m.text)}</div>`; lastAuthor=''; continue; }
+    const date=new Date(m.ts);
+    const day=date.toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit',year:'numeric'});
+    const time=date.toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'});
+    if (day!==lastDay) { html+=`<div class="day-divider">${day}</div>`; lastDay=day; lastAuthor=''; }
+    const color=m.color??0;
+    const consec=m.author===lastAuthor&&(m.ts-lastTime)<5*60000;
+    lastAuthor=m.author; lastTime=m.ts;
+    const initials=(m.author||'?')[0].toUpperCase();
+    const role=m.role||'member';
+    const badge=ROLE_BADGE[role]||'';
+    const nc=ROLE_COLORS[role]||`name-color-${color}`;
+    const canDel=hasRole('mod')||m.author===currentUser?.username;
+    const canPin=hasRole('mod')&&!isDM;
+    const safeT=escHtml((m.text||'').substring(0,50));
+    html+=`<div class="msg ${consec?'consecutive':''}" data-key="${m._key||''}">
+      <div class="msg-avatar av-color-${color}" onclick="onAvatarClick(event,'${escHtml(m.author)}')">${initials}</div>
+      <div class="msg-content">
+        <div class="msg-header">
+          <span class="msg-name ${nc}" onclick="onAvatarClick(event,'${escHtml(m.author)}')">${escHtml(m.author)}${badge?` <span class="msg-role-badge">${badge}</span>`:''}</span>
+          <span class="msg-time">${time}</span>
+          <div class="msg-actions">
+            ${canPin?`<button class="msg-action-btn" onclick="pinMsg('${escHtml(m.author)}','${safeT}')">📌</button>`:''}
+            ${canDel?`<button class="msg-action-btn danger" onclick="deleteMsg('${m._key||''}',${isDM})">🗑</button>`:''}
+          </div>
+        </div>
+        <div class="msg-text">${formatMsg(m.text)}</div>
+      </div>
+    </div>`;
+  }
+  c.innerHTML=html;
+  if (atBottom) c.scrollTop=c.scrollHeight;
+}
+
+function formatMsg(text) {
+  return escHtml(text)
+    .replace(/\*\*(.*?)\*\*/g,'<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g,'<em>$1</em>')
+    .replace(/`(.*?)`/g,'<code style="background:rgba(0,212,255,0.08);padding:1px 5px;border-radius:2px;font-family:monospace">$1</code>')
+    .replace(/(https?:\/\/[^\s]+)/g,'<a href="$1" target="_blank" rel="noopener">$1</a>');
+}
+
+// ─── SEND ────────���────────────────────────────────────────────
+async function sendMessage() {
+  const input=document.getElementById('msg-input');
+  const text=input.value.trim();
+  if (!text||!currentUser) return;
+  const mod=DB.moderation;
+  const to=mod.timeouts?.[currentUser.username.toLowerCase()];
+  if (to&&to.until>Date.now()) { showToast('Du bist stummgeschaltet!','var(--warn)'); return; }
+  if (!currentDM) {
+    const ch=(appConfig.channels||[]).find(c=>c.id===currentChannel);
+    if (ch?.adminOnly&&!hasRole('admin')) return;
+    if (ch?.readOnly&&!hasRole('admin'))  return;
+    if (ch?.modOnly&&!hasRole('mod'))     return;
+    const am=autoModCheck(text);
+    if (am.blocked) { showToast('🤖 AutoMod: '+am.reason,'var(--warn)'); input.value=''; input.style.height=''; return; }
+  }
+  const now=Date.now();
+  spamTs=spamTs.filter(t=>now-t<(appConfig.automod?.spamWindow||10000));
+  spamTs.push(now);
+  if (spamTs.length>(appConfig.automod?.spamThreshold||5)) {
+    pendingSpamMsg=text; input.value=''; input.style.height='';
+    showSpamCaptchaModal(); return;
+  }
+  input.value=''; input.style.height='';
+  const msg={author:currentUser.username,color:currentUser.color,role:currentUser.role,text,ts:Date.now()};
+  if (currentDM) {
+    const key=getDMKey(currentUser.username,currentDM);
+    if (!DB.dms[key]) DB.dms[key]={};
+    dbPush(`dms/${key}`,msg);
+    renderDMMessages(currentDM);
+  } else {
+    if (!DB.msgs[currentChannel]) DB.msgs[currentChannel]={};
+    dbPush(`msgs/${currentChannel}`,msg);
+    renderChannelMessages(currentChannel);
+    document.getElementById('messages').scrollTop=9999999;
+  }
+}
+
+function autoModCheck(text) {
+  const am=appConfig.automod||{};
+  if (!am.enabled) return {blocked:false};
+  if (am.maxMsgLength&&text.length>am.maxMsgLength) return {blocked:true,reason:`Zu lang (max. ${am.maxMsgLength})`};
+  const lower=text.toLowerCase();
+  for (const w of (am.bannedWords||[])) { if(lower.includes(w.toLowerCase())) return {blocked:true,reason:'Verbotenes Wort'}; }
+  if (am.capsFilter&&text.length>10) {
+    const caps=(text.match(/[A-ZÄÖÜ]/g)||[]).length;
+    if (caps/text.length>(am.capsThreshold||0.7)) return {blocked:true,reason:'Zu viele Großbuchstaben'};
+  }
+  return {blocked:false};
+}
+
+function deleteMsg(key,isDM=false) {
+  if (!key) return;
+  if (isDM&&currentDM) {
+    const dmKey=getDMKey(currentUser.username,currentDM);
+    const m=DB.dms[dmKey]?.[key];
+    if (!m||(m.author!==currentUser.username&&!hasRole('mod'))) return;
+    dbDelete(`dms/${dmKey}/${key}`);
+    renderDMMessages(currentDM);
+  } else {
+    const m=DB.msgs[currentChannel]?.[key];
+    if (!m||(m.author!==currentUser.username&&!hasRole('mod'))) return;
+    dbDelete(`msgs/${currentChannel}/${key}`);
+    renderChannelMessages(currentChannel);
+  }
+}
+
+function pinMsg(author,text) {
+  if (!Array.isArray(DB.pins)) DB.pins=[];
+  DB.pins.push({author,text,by:currentUser.username,ts:Date.now(),channel:currentChannel});
+  if (DB.pins.length>50) DB.pins.shift();
+  apiSave();
+  showToast('📌 Nachricht angepinnt','var(--green)');
+}
+
+function handleKey(e) { if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMessage();} }
+function autoResize(el) { el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,120)+'px'; }
+
+// ─── TIMEOUT BAR ──────────────────────────────────────────────
+function updateTimeoutBar() {
+  const t=DB.moderation.timeouts?.[currentUser.username.toLowerCase()];
+  const bar=document.getElementById('timeout-bar');
+  if (t&&t.until>Date.now()) {
+    bar.style.display='';
+    document.getElementById('timeout-until').textContent=
+      new Date(t.until).toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
+    document.getElementById('msg-input').disabled=true;
+    document.getElementById('send-btn').disabled=true;
+  } else {
+    bar.style.display='none';
+    if (!currentDM) {
+      const ch=(appConfig.channels||[]).find(c=>c.id===currentChannel);
+      const locked=(ch?.adminOnly&&!hasRole('admin'))||(ch?.readOnly&&!hasRole('admin'));
+      document.getElementById('msg-input').disabled=!!locked;
+      document.getElementById('send-btn').disabled=!!locked;
+    }
+  }
+}
+
+function updateBadge(id,count) {
+  const el=document.getElementById(id); if (!el) return;
+  if (count>0){el.style.display='';el.textContent=count>99?'99+':count;}
+  else el.style.display='none';
+}
+
+// ─── VOICE ────────────────────────────────────────────────────
+function joinVoice(vcId,vcName) {
+  if (voiceActive&&voiceChannel===vcId) { leaveVoice(); return; }
+  if (voiceActive) leaveVoice();
+  voiceActive=true; voiceChannel=vcId; micMuted=false; deafened=false;
+  if (!DB.voice[vcId]) DB.voice[vcId]={};
+  dbSet(`voice/${vcId}/${currentUser.username}`,{name:currentUser.username,muted:false,ts:Date.now()});
+  document.getElementById('voice-panel').classList.add('active');
+  document.getElementById('voice-channel-name').textContent='🔊 '+vcName;
+  document.getElementById('voice-mute-btn').textContent='🎙 Stumm';
+  document.getElementById('voice-deaf-btn').textContent='🔔 Taub';
+  document.getElementById('voice-mute-btn').classList.remove('active');
+  document.getElementById('voice-deaf-btn').classList.remove('active');
+  buildChannelList();
+  showToast(`🔊 Beigetreten: ${vcName}`,'var(--green)');
+}
+function leaveVoice() {
+  if (!voiceActive) return;
+  dbDelete(`voice/${voiceChannel}/${currentUser.username}`);
+  voiceActive=false; voiceChannel=null;
+  document.getElementById('voice-panel').classList.remove('active');
+  buildChannelList();
+  showToast('Voice verlassen','var(--muted)');
+}
+function toggleMute() {
+  micMuted=!micMuted;
+  const btn=document.getElementById('voice-mute-btn');
+  btn.textContent=micMuted?'🔇 Stumm':'🎙 Stumm';
+  btn.classList.toggle('active',micMuted);
+  if (voiceActive) dbSet(`voice/${voiceChannel}/${currentUser.username}/muted`,micMuted);
+}
+function toggleDeafen() {
+  deafened=!deafened;
+  const btn=document.getElementById('voice-deaf-btn');
+  btn.textContent=deafened?'🔕 Taub':'🔔 Taub';
+  btn.classList.toggle('active',deafened);
+}
+
+// ─── USER LIST ────────────────────────────────────────────────
+function renderUserList(onlineNames) {
+  const listEl=document.getElementById('user-list');
+  listEl.innerHTML='';
+  const groups={owner:[],admin:[],mod:[],vip:[],member:[]};
+  for (const u of Object.values(DB.users)) {
+    if (groups[u.role||'member']) groups[u.role||'member'].push(u);
+    else groups.member.push(u);
+  }
+  for (const [roleId,users] of Object.entries(groups)) {
+    if (!users.length) continue;
+    const hdr=document.createElement('div');
+    hdr.className='role-group-header';
+    hdr.innerHTML=`<span>${ROLE_LABELS[roleId]}</span><span style="color:var(--muted);font-size:.7rem">${users.length}</span>`;
+    listEl.appendChild(hdr);
+    for (const u of users) {
+      const isMe=u.username===currentUser?.username;
+      const isOnline=onlineNames.includes(u.username);
+      const div=document.createElement('div');
+      div.className='user-item'+(isMe?' me':'')+(!isOnline?' offline':'');
+      div.innerHTML=`<div class="${isOnline?'online-dot':'offline-dot'}"></div>
+        <div class="user-avatar-sm av-color-${u.color??0}">${u.username[0].toUpperCase()}</div>
+        <span>${escHtml(u.username)}${ROLE_BADGE[u.role]?' '+ROLE_BADGE[u.role]:''}</span>`;
+      if (!isMe) div.onclick=e=>{e.stopPropagation();showUserCtx(e,u.username);};
+      listEl.appendChild(div);
+    }
+  }
+}
+
+function updateDMList() {
+  const dmEl=document.getElementById('dm-list');
+  dmEl.innerHTML='';
+  for (const u of Object.values(DB.users)) {
+    if (u.username===currentUser?.username) continue;
+    const unread=unreadCounts['dm_'+u.username.toLowerCase()]||0;
+    const div=document.createElement('div');
+    div.className=`channel-item dm-item ${currentDM===u.username?'active':''}`;
+    div.dataset.user=u.username.toLowerCase();
+    div.innerHTML=`<span class="channel-icon">@</span><span class="channel-name">${escHtml(u.username)}</span>${unread>0?`<span class="unread-badge">${unread}</span>`:''}`;
+    div.onclick=()=>openDM(u.username);
+    dmEl.appendChild(div);
+  }
+}
+
+// ─── CONTEXT MENU ─────────────────────────────────────────────
+function onAvatarClick(e,username) {
+  e.preventDefault(); e.stopPropagation();
+  hideCtx();
+  if (username===currentUser?.username) return;
+  showUserCtx(e,username);
+}
+function showUserCtx(e,username) {
+  e.preventDefault(); e.stopPropagation();
+  hideCtx();
+  const menu=document.getElementById('context-menu');
+  menu.innerHTML='';
+  const h=document.createElement('div'); h.className='ctx-header'; h.textContent=username; menu.appendChild(h);
+  addCtxItem(menu,'💬 Direktnachricht','',()=>{hideCtx();openDM(username);});
+  addCtxItem(menu,'👤 Profil','',()=>{hideCtx();showProfileModal(username);});
+  if (hasRole('mod')) {
+    addCtxDivider(menu);
+    addCtxItem(menu,'👢 Kicken','warn',()=>{hideCtx();openKickModal(username);});
+    addCtxItem(menu,'⏱ Timeout','warn',()=>{hideCtx();openTimeoutModal(username);});
+    addCtxItem(menu,'🗑 Nachrichten löschen','warn',()=>{hideCtx();clearUserMsgs(username);});
+  }
+  if (hasRole('admin')) {
+    addCtxItem(menu,'🚫 Bannen','danger',()=>{hideCtx();openBanModal(username);});
+    addCtxDivider(menu);
+    addCtxItem(menu,'🎖 Rolle ändern','',()=>{hideCtx();openRoleModal(username);});
+  }
+  menu.style.left=Math.min(e.clientX,window.innerWidth-210)+'px';
+  menu.style.top=Math.min(e.clientY,window.innerHeight-200)+'px';
+  menu.style.display='';
+}
+function addCtxItem(menu,label,cls,fn){const i=document.createElement('div');i.className='ctx-item'+(cls?' '+cls:'');i.textContent=label;i.onclick=fn;menu.appendChild(i);}
+function addCtxDivider(menu){const d=document.createElement('div');d.className='ctx-divider';menu.appendChild(d);}
+function hideCtx(){document.getElementById('context-menu').style.display='none';}
+document.addEventListener('click',hideCtx);
+
+// ─── MODERATION ───────────────────────────────────────────────
+function openKickModal(u) {
+  showModal(`<div class="modal-title">👢 Kick: ${escHtml(u)}</div>
+    <div class="modal-sub">Der User wird aus dem Chat geworfen.</div>
+    <div class="modal-field"><label>Grund (optional)</label><input type="text" id="m-reason" placeholder="z.B. Regelverstoß"></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
+      <button class="modal-btn warn-btn" onclick="doKick('${escHtml(u)}')">Kicken</button>
+    </div>`);
+}
+function doKick(u) {
+  const reason=document.getElementById('m-reason')?.value||'';
+  if (!DB.moderation.kicked) DB.moderation.kicked={};
+  DB.moderation.kicked[u.toLowerCase()]={by:currentUser.username,ts:Date.now(),reason};
+  apiSave();
+  sysMsg(`${u} wurde von ${currentUser.username} gekickt.${reason?' Grund: '+reason:''}`);
+  clearModal(); showToast(`${u} gekickt`,'var(--warn)');
+}
+function openTimeoutModal(u) {
+  showModal(`<div class="modal-title">⏱ Timeout: ${escHtml(u)}</div>
+    <div class="modal-sub">Stummschalten für eine bestimmte Zeit.</div>
+    <div class="modal-field"><label>Dauer</label>
+      <select id="m-dur">
+        <option value="60000">1 Minute</option><option value="300000">5 Minuten</option>
+        <option value="600000">10 Minuten</option><option value="1800000">30 Minuten</option>
+        <option value="3600000">1 Stunde</option><option value="86400000">24 Stunden</option>
+      </select></div>
+    <div class="modal-field"><label>Grund</label><input type="text" id="m-reason" placeholder="z.B. Spam"></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
+      <button class="modal-btn warn-btn" onclick="doTimeout('${escHtml(u)}')">Timeout</button>
+    </div>`);
+}
+function doTimeout(u) {
+  const dur=parseInt(document.getElementById('m-dur').value);
+  const reason=document.getElementById('m-reason')?.value||'';
+  if (!DB.moderation.timeouts) DB.moderation.timeouts={};
+  DB.moderation.timeouts[u.toLowerCase()]={until:Date.now()+dur,by:currentUser.username,reason};
+  apiSave();
+  sysMsg(`${u} stummgeschaltet für ${Math.round(dur/60000)} Min.${reason?' Grund: '+reason:''}`);
+  clearModal(); showToast(`${u} stummgeschaltet`,'var(--warn)');
+}
+function openBanModal(u) {
+  showModal(`<div class="modal-title" style="color:var(--danger)">🚫 Ban: ${escHtml(u)}</div>
+    <div class="modal-sub">Permanenter Bann.</div>
+    <div class="modal-field"><label>Grund</label><input type="text" id="m-reason" placeholder="Banngrund (Pflicht)"></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
+      <button class="modal-btn danger-btn" onclick="doBan('${escHtml(u)}')">BANNEN</button>
+    </div>`);
+}
+function doBan(u) {
+  const reason=document.getElementById('m-reason')?.value||'';
+  if (!reason) { showToast('Bitte einen Grund angeben!','var(--danger)'); return; }
+  if (!DB.moderation.bans) DB.moderation.bans={};
+  DB.moderation.bans[u.toLowerCase()]={by:currentUser.username,ts:Date.now(),reason};
+  const fp=DB.users[u.toLowerCase()]?._fp;
+  if (fp) { if (!DB.moderation.banned_fps) DB.moderation.banned_fps={}; DB.moderation.banned_fps[fp]=true; }
+  apiSave();
+  sysMsg(`${u} wurde von ${currentUser.username} gebannt. Grund: ${reason}`);
+  clearModal(); showToast(`${u} gebannt`,'var(--danger)');
+}
+function openRoleModal(u) {
+  showModal(`<div class="modal-title">🎖 Rolle: ${escHtml(u)}</div>
+    <div class="modal-sub">Rolle des Users ändern.</div>
+    <div class="modal-field"><label>Neue Rolle</label>
+      <select id="m-role">
+        <option value="member">Mitglied</option><option value="vip">💎 VIP</option>
+        <option value="mod">⭐ Moderator</option>
+        ${currentUser.role==='owner'?'<option value="admin">🔰 Admin</option>':''}
+      </select></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
+      <button class="modal-btn primary" onclick="doSetRole('${escHtml(u)}')">Speichern</button>
+    </div>`);
+}
+function doSetRole(u) {
+  const newRole=document.getElementById('m-role').value;
+  const target=DB.users[u.toLowerCase()]; if (!target) return clearModal();
+  if (target.role==='owner'){showToast('Owner-Rolle kann nicht geändert werden','var(--danger)');return clearModal();}
+  if (currentUser.role!=='owner'&&ROLE_PRIORITY[target.role]>=ROLE_PRIORITY[currentUser.role]){
+    showToast('Keine Berechtigung','var(--danger)');return clearModal();
+  }
+  DB.users[u.toLowerCase()].role=newRole;
+  apiSave();
+  sysMsg(`${u} → Rolle "${ROLE_LABELS[newRole]}" (von ${currentUser.username})`);
+  clearModal(); showToast(`${u} → ${ROLE_LABELS[newRole]}`,'var(--green)');
+}
+function clearUserMsgs(u) {
+  if (!hasRole('mod')) return;
+  const ch=DB.msgs[currentChannel]||{};
+  for (const [k,m] of Object.entries(ch)) { if (m.author===u) delete DB.msgs[currentChannel][k]; }
+  apiSave();
+  renderChannelMessages(currentChannel);
+  showToast(`Nachrichten von ${u} gelöscht`,'var(--warn)');
+}
+function sysMsg(text) {
+  if (!currentChannel) return;
+  if (!DB.msgs[currentChannel]) DB.msgs[currentChannel]={};
+  dbPush(`msgs/${currentChannel}`,{system:true,text,ts:Date.now()});
+}
+
+// ─── PROFILE ──────────────────────────────────────────────────
+function showProfileModal(username) {
+  const u=DB.users[username.toLowerCase()]; if (!u) return;
+  showModal(`<div class="modal-title">👤 ${escHtml(u.username)} ${ROLE_BADGE[u.role]||''}</div>
+    <div class="modal-sub">Rolle: ${ROLE_LABELS[u.role]||'Mitglied'} · Beigetreten: ${new Date(u.joined||Date.now()).toLocaleDateString('de-DE')}</div>
+    <div style="text-align:center;margin:14px 0">
+      <div class="user-avatar-sm av-color-${u.color}" style="width:60px;height:60px;font-size:1.5rem;margin:0 auto 12px">${u.username[0].toUpperCase()}</div>
+    </div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+      <button class="modal-btn primary" onclick="clearModal();openDM('${escHtml(u.username)}')">💬 DM senden</button>
+    </div>`);
+}
+
+// ─── SETTINGS ─────────────────────────────────────────────────
+const _st={};
+function openSettings() {
+  const s=currentUser.settings||{};
+  showModal(`<div class="modal-title">⚙️ Einstellungen</div>
+    <div class="modal-tabs">
+      <button class="modal-tab active" onclick="switchSettingsTab('konto',this)">Konto</button>
+      <button class="modal-tab" onclick="switchSettingsTab('darstellung',this)">Darstellung</button>
+      ${hasRole('mod')?'<button class="modal-tab" onclick="switchSettingsTab(\'automod\',this)">AutoMod</button>':''}
+      ${hasRole('admin')?'<button class="modal-tab" onclick="switchSettingsTab(\'tickets\',this)">Tickets</button>':''}
+    </div>
+    <div id="settings-tab-konto">
+      <div class="settings-section"><h4>Konto</h4>
+        <div class="modal-field"><label>Neuer Username</label><input type="text" id="s-user" placeholder="${escHtml(currentUser.username)}"></div>
+        <div class="modal-field"><label>Neues Passwort</label><input type="password" id="s-pass" placeholder="Leer = keine Änderung"></div>
+        <div class="modal-field"><label>Passwort bestätigen</label><input type="password" id="s-pass2"></div>
+      </div>
+      <div class="settings-section"><h4>Benachrichtigungen</h4>
+        <div class="toggle-row"><label>DM-Benachrichtigungen</label>
+          <div class="toggle ${s.notif!==false?'on':''}" id="toggle-notif" onclick="toggleST('notif')"></div>
+        </div>
+      </div>
+    </div>
+    <div id="settings-tab-darstellung" style="display:none">
+      <div class="settings-section"><h4>Avatar-Farbe</h4>
+        <div style="display:flex;gap:10px;margin:10px 0">
+          ${[0,1,2,3,4].map(i=>`<div class="user-avatar-sm av-color-${i}" style="width:36px;height:36px;cursor:pointer${currentUser.color===i?';box-shadow:0 0 8px currentColor':''}" onclick="setAvatarColor(${i})">${currentUser.username[0].toUpperCase()}</div>`).join('')}
+        </div>
+      </div>
+    </div>
+    ${hasRole('mod')?`<div id="settings-tab-automod" style="display:none">
+      <div class="settings-section"><h4>AutoMod</h4>
+        <div class="toggle-row"><label>AutoMod aktiv</label><div class="toggle ${appConfig.automod?.enabled?'on':''}" id="toggle-am" onclick="toggleST('am')"></div></div>
+        <div class="modal-field"><label>Max. Nachrichtenlänge</label><input type="number" id="s-maxlen" value="${appConfig.automod?.maxMsgLength||800}"></div>
+        <div class="modal-field"><label>Spam-Grenze (Nachrichten/10s)</label><input type="number" id="s-spam" value="${appConfig.automod?.spamThreshold||5}"></div>
+        <div class="modal-field"><label>Verbotene Wörter</label>
+          <div id="bw-tags">${(appConfig.automod?.bannedWords||[]).map(w=>`<span class="tag">${escHtml(w)}<button class="tag-remove" onclick="removeBW('${escHtml(w)}')">×</button></span>`).join('')}</div>
+          <div style="display:flex;gap:6px;margin-top:6px">
+            <input class="tag-input" type="text" id="new-bw" placeholder="Wort hinzufügen" style="flex:1">
+            <button class="modal-btn primary" style="flex:none;width:auto;padding:5px 12px;font-size:.7rem" onclick="addBW()">+</button>
+          </div>
+        </div>
+        <div class="toggle-row"><label>Caps-Filter</label><div class="toggle ${appConfig.automod?.capsFilter?'on':''}" id="toggle-caps" onclick="toggleST('caps')"></div></div>
+        <div class="toggle-row"><label>Link-Filter</label><div class="toggle ${appConfig.automod?.linkFilter?'on':''}" id="toggle-links" onclick="toggleST('links')"></div></div>
+      </div>
+    </div>`:''}
+    ${hasRole('admin')?`<div id="settings-tab-tickets" style="display:none">
+      <div class="settings-section"><h4>Ticket-System</h4><div id="admin-tickets-list">Wird geladen...</div></div>
+    </div>`:''}
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+      <button class="modal-btn primary" onclick="saveSettings()">Speichern</button>
+    </div>`,true);
+  if (hasRole('admin')) setTimeout(loadAdminTickets,100);
+}
+function toggleST(id){const el=document.getElementById('toggle-'+id);if(!el)return;const on=!el.classList.contains('on');el.classList.toggle('on',on);_st[id]=on;}
+function switchSettingsTab(tab,btn){
+  document.querySelectorAll('[id^="settings-tab-"]').forEach(el=>el.style.display='none');
+  document.querySelectorAll('.modal-tab').forEach(el=>el.classList.remove('active'));
+  const el=document.getElementById('settings-tab-'+tab);if(el)el.style.display='';
+  if(btn)btn.classList.add('active');
+  if(tab==='tickets')loadAdminTickets();
+}
+function addBW(){const i=document.getElementById('new-bw');const w=i.value.trim().toLowerCase();if(!w)return;if(!appConfig.automod)appConfig.automod={};if(!appConfig.automod.bannedWords)appConfig.automod.bannedWords=[];if(!appConfig.automod.bannedWords.includes(w)){appConfig.automod.bannedWords.push(w);document.getElementById('bw-tags').insertAdjacentHTML('beforeend',`<span class="tag">${escHtml(w)}<button class="tag-remove" onclick="removeBW('${escHtml(w)}')">×</button></span>`);}i.value='';}
+function removeBW(w){if(!appConfig.automod?.bannedWords)return;appConfig.automod.bannedWords=appConfig.automod.bannedWords.filter(x=>x!==w);const el=document.getElementById('bw-tags');if(el)el.innerHTML=appConfig.automod.bannedWords.map(x=>`<span class="tag">${escHtml(x)}<button class="tag-remove" onclick="removeBW('${escHtml(x)}')">×</button></span>`).join('');}
+function setAvatarColor(c){currentUser.color=c;DB.users[currentUser.username.toLowerCase()].color=c;apiSave();updateTopbar();}
+function saveSettings(){
+  const me=DB.users[currentUser.username.toLowerCase()];if(!me)return clearModal();
+  const newU=document.getElementById('s-user')?.value.trim();
+  if(newU&&newU!==currentUser.username){
+    if(newU.length<2||newU.length>20){showToast('Username: 2-20 Zeichen','var(--danger)');return;}
+    if(!/^[a-zA-Z0-9_]+$/.test(newU)){showToast('Nur Buchstaben, Zahlen, _','var(--danger)');return;}
+    if(DB.users[newU.toLowerCase()]&&newU.toLowerCase()!==currentUser.username.toLowerCase()){showToast('Username bereits vergeben','var(--danger)');return;}
+    delete DB.users[currentUser.username.toLowerCase()];
+    me.username=newU;
+    DB.users[newU.toLowerCase()]=me;
+    currentUser.username=newU;
+  }
+  const np=document.getElementById('s-pass')?.value,np2=document.getElementById('s-pass2')?.value;
+  if(np){if(np.length<4){showToast('Passwort mind. 4 Zeichen','var(--danger)');return;}if(np!==np2){showToast('Passwörter stimmen nicht überein','var(--danger)');return;}me.password=encode(np);}
+  if(!me.settings)me.settings={};
+  if('notif' in _st)me.settings.notif=_st.notif;
+  if(hasRole('mod')&&appConfig.automod){
+    const ml=document.getElementById('s-maxlen'),sp=document.getElementById('s-spam');
+    if(ml)appConfig.automod.maxMsgLength=parseInt(ml.value)||800;
+    if(sp)appConfig.automod.spamThreshold=parseInt(sp.value)||5;
+    if('am' in _st)appConfig.automod.enabled=_st.am;
+    if('caps' in _st)appConfig.automod.capsFilter=_st.caps;
+    if('links' in _st)appConfig.automod.linkFilter=_st.links;
+    DB.config.automod=appConfig.automod;
+  }
+  DB.users[me.username.toLowerCase()]=me;
+  apiSave();
+  currentUser={...me};
+  updateTopbar();clearModal();
+  showToast('✓ Einstellungen gespeichert','var(--green)');
+}
+
+// ─── TICKETS ──────────────────────────────────────────────────
+function openCreateTicket(){
+  showModal(`<div class="modal-title">🎫 Ticket erstellen</div>
+    <div class="modal-sub">Wende dich an das Team!</div>
+    <div class="modal-field"><label>Kategorie</label>
+      <select id="t-cat"><option value="support">❓ Support</option><option value="report">🚨 Meldung</option><option value="appeal">⚖️ Ban-Appeal</option><option value="other">💭 Sonstiges</option></select></div>
+    <div class="modal-field"><label>Betreff</label><input type="text" id="t-title" maxlength="80"></div>
+    <div class="modal-field"><label>Beschreibung</label><textarea id="t-desc" rows="4"></textarea></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
+      <button class="modal-btn primary" onclick="submitTicket()">Erstellen</button>
+    </div>`);
+}
+function submitTicket(){
+  const cat=document.getElementById('t-cat')?.value;
+  const title=document.getElementById('t-title')?.value.trim();
+  const desc=document.getElementById('t-desc')?.value.trim();
+  if(!title||!desc){showToast('Bitte alle Felder ausfüllen','var(--danger)');return;}
+  const id='TKT-'+String(Date.now()).slice(-5);
+  if(!DB.tickets)DB.tickets={};
+  dbPush('tickets',{id,cat,title,desc,author:currentUser.username,status:'open',ts:Date.now()});
+  clearModal();showToast(`🎫 Ticket ${id} erstellt`,'var(--green)');
+}
+function loadAdminTickets(){
+  const el=document.getElementById('admin-tickets-list');if(!el)return;
+  const tickets=Object.values(DB.tickets||{}).sort((a,b)=>b.ts-a.ts);
+  if(!tickets.length){el.innerHTML='<div style="color:var(--muted);text-align:center;padding:20px;font-size:.85rem">Keine Tickets</div>';return;}
+  el.innerHTML=tickets.map(t=>`<div class="ticket-item ${t.status}" onclick="openTicketDetail('${escHtml(t._key||t.id)}')">
+    <div class="ticket-meta">${t.id} · ${t.cat} · ${new Date(t.ts).toLocaleDateString('de-DE')} · ${t.author}</div>
+    <div class="ticket-title">${escHtml(t.title)}</div>
+    <div style="font-size:.75rem;color:${t.status==='open'?'var(--green)':'var(--muted)'}">● ${t.status==='open'?'Offen':'Geschlossen'}</div>
+  </div>`).join('');
+}
+function openTicketDetail(key){
+  const t=DB.tickets[key];if(!t)return;
+  showModal(`<div class="modal-title">🎫 ${escHtml(t.id)}: ${escHtml(t.title)}</div>
+    <div class="modal-sub">Von ${escHtml(t.author)} · ${new Date(t.ts).toLocaleDateString('de-DE')} · ${t.status}</div>
+    <div style="background:rgba(0,0,0,0.3);padding:12px;border:1px solid var(--border);font-size:.9rem;margin-bottom:14px;border-radius:2px">${escHtml(t.desc)}</div>
+    ${hasRole('mod')?`<div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+      <button class="modal-btn ${t.status==='open'?'danger-btn':'success-btn'}" onclick="toggleTicket('${key}')">
+        ${t.status==='open'?'Ticket schließen':'Ticket öffnen'}</button></div>`
+    :`<div class="modal-btns"><button class="modal-btn secondary" onclick="clearModal()">Schließen</button></div>`},true);
+}
+function toggleTicket(key){
+  const t=DB.tickets[key];if(!t)return;
+  t.status=t.status==='open'?'closed':'open';
+  apiSave();clearModal();
+  showToast(`Ticket ${t.id} ${t.status==='open'?'geöffnet':'geschlossen'}`,'var(--accent)');
+}
+
+// ─── SEARCH & PINS ────────────────────────────────────────────
+async function openSearchModal(){
+  showModal(`<div class="modal-title">🔍 Nachrichten durchsuchen</div>
+    <div class="modal-field"><label>Suchbegriff</label>
+      <input type="text" id="search-q" placeholder="Suche im aktuellen Channel..." oninput="liveSearch(this.value)">
+    </div>
+    <div id="search-results" style="max-height:300px;overflow-y:auto;margin-top:10px"></div>
+    <div class="modal-btns"><button class="modal-btn secondary" onclick="clearModal()">Schließen</button></div>`);
+}
+function liveSearch(query){
+  const res=document.getElementById('search-results');
+  if(!query||query.length<2){res.innerHTML='';return;}
+  const msgs=getMsgs(currentChannel).filter(m=>!m.system&&m.text?.toLowerCase().includes(query.toLowerCase()));
+  if(!msgs.length){res.innerHTML='<div style="color:var(--muted);text-align:center;padding:12px;font-size:.85rem">Keine Ergebnisse</div>';return;}
+  res.innerHTML=msgs.slice(-20).map(m=>`<div style="padding:8px 0;border-bottom:1px solid var(--border)">
+    <div style="font-size:.72rem;color:var(--muted);font-family:Orbitron,monospace">${m.author} · ${new Date(m.ts).toLocaleDateString('de-DE')}</div>
+    <div style="font-size:.9rem;color:var(--text)">${escHtml(m.text).replace(new RegExp(escHtml(query),'gi'),s=>`<mark style="background:rgba(0,212,255,0.2);color:var(--accent)">${s}</mark>`)}</div>
+  </div>`).join('');
+}
+async function openPinsModal(){
+  const pins=Array.isArray(DB.pins)?DB.pins.filter(p=>p.channel===currentChannel):[];
+  showModal(`<div class="modal-title">📌 Angepinnte Nachrichten</div>
+    <div style="max-height:350px;overflow-y:auto">
+      ${!pins.length?'<div style="color:var(--muted);text-align:center;padding:20px;font-size:.85rem">Keine angepinnten Nachrichten</div>':
+        pins.map(p=>`<div style="padding:10px 0;border-bottom:1px solid var(--border)">
+          <div style="font-size:.7rem;color:var(--muted);font-family:Orbitron,monospace">📌 ${p.author} · angeheftet von ${p.by}</div>
+          <div style="font-size:.9rem;color:var(--text);margin-top:4px">${escHtml(p.text)}</div>
+        </div>`).join('')}
+    </div>
+    <div class="modal-btns"><button class="modal-btn secondary" onclick="clearModal()">Schließen</button></div>`);
+}
+
+// ─── SPAM CAPTCHA ─────────────────────────────────────────────
+function showSpamCaptchaModal(){
+  const d=genCaptcha();captchaData.spam=d;
+  showModal(`<div class="modal-title">🤖 Anti-Spam Prüfung</div>
+    <div class="modal-sub">Du schreibst zu schnell. Löse das Captcha.</div>
+    <div class="captcha-modal-question" id="spam-q">${d.q}</div>
+    <div class="modal-field"><label>Antwort</label><input type="number" id="spam-a" placeholder="?" onkeydown="if(event.key==='Enter')spamSubmit()"></div>
+    <div class="auth-error" id="spam-err"></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Abbrechen</button>
+      <button class="modal-btn primary" onclick="spamSubmit()">Bestätigen</button>
+    </div>`);
+}
+async function spamSubmit(){
+  const ans=parseInt(document.getElementById('spam-a')?.value);
+  if(ans!==captchaData.spam?.ans){
+    const d=genCaptcha();captchaData.spam=d;
+    const q=document.getElementById('spam-q');if(q)q.textContent=d.q;
+    const e=document.getElementById('spam-err');if(e)e.textContent='❌ Falsche Antwort!';
+    return;
+  }
+  clearModal();spamTs=[];
+  if(pendingSpamMsg){await sendMessage();pendingSpamMsg=null;}
+}
+
+// ─── MODAL SYSTEM ─────────────────────────────────────────────
+function showModal(html,wide=false){
+  clearModal();
+  const o=document.createElement('div');
+  o.className='modal-overlay';o.id='active-modal';
+  o.innerHTML=`<div class="modal${wide?' wide':''}">${html}</div>`;
+  o.onclick=e=>{if(e.target===o)clearModal();};
+  document.getElementById('modal-container').appendChild(o);
+}
+function clearModal(){document.getElementById('active-modal')?.remove();}
+function showKickedModal(){
+  showModal(`<div class="modal-title">👢 Du wurdest gekickt</div>
+    <div class="modal-sub">Ein Moderator hat dich aus dem Chat entfernt.</div>
+    <div class="modal-btns"><button class="modal-btn primary" onclick="doLogout();clearModal()">Zum Login</button></div>`);
+}
+
+// ─── HELPERS ──────────────────────────────────────────────────
+function encode(s){try{return btoa(unescape(encodeURIComponent(s)));}catch{return btoa(s);}}
+function decode(s){try{return decodeURIComponent(escape(atob(s)));}catch{try{return atob(s);}catch{return '';}}}
+function escHtml(str){return String(str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#x27;');}
+function showBanned(){document.getElementById('banned-screen').style.display='flex';document.getElementById('auth-screen').style.display='none';document.getElementById('app').classList.remove('visible');}
+function showAuthSuccess(msg){const el=document.getElementById('auth-error');el.style.color='var(--green)';el.textContent=msg;setTimeout(()=>{el.style.color='';el.textContent='';},3000);}
+function showToast(msg,color='var(--accent)'){const t=document.createElement('div');t.className='toast';t.style.borderColor=color;t.style.color=color;t.textContent=msg;document.body.appendChild(t);setTimeout(()=>t.remove(),3000);}
+
+// ─── INIT ─────────────────────────────────────────────────────
+(async function init(){
+  refreshCaptcha('login');
+  refreshCaptcha('reg');
+
+  // DB laden
+  showToast('⟳ Verbinde...','var(--muted)');
+  await apiLoad();
+
+  if (!isConfigured()) {
+    showToast('⚠ JSONBin nicht konfiguriert – lokaler Modus','var(--warn)');
+  } else {
+    showToast('✓ Verbunden','var(--green)');
+  }
+
+  // Ban-Check
+  if (DB.moderation.banned_fps?.[MY_FP]) { showBanned(); return; }
+
+  // Owner sicherstellen
+  const ownerKey=OWNER_NAME.toLowerCase();
+  if (!DB.users[ownerKey]) {
+    DB.users[ownerKey]={username:OWNER_NAME,password:encode(OWNER_PASS),color:1,role:'owner',joined:Date.now(),settings:{lang:'de',translate:false,notif:true}};
+    apiSave();
+  } else {
+    DB.users[ownerKey].role='owner';
+  }
+
+  // Config laden
+  appConfig=DB.config||{};
+  if (!appConfig.channels) {
+    appConfig.channels=window.DEFAULT_CHANNELS||[];
+    appConfig.automod=window.DEFAULT_AUTOMOD||{};
+    DB.config=appConfig;
+    apiSave();
+  }
+})();

index.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NoahsChat</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<!-- BANNED SCREEN -->
+<div id="banned-screen">
+  <div class="banned-icon">🚫</div>
+  <div class="banned-title">GEBANNT</div>
+  <div class="banned-sub" id="banned-sub">Du wurdest permanent von NoahsChat gebannt.</div>
+</div>
+
+<!-- AUTH SCREEN -->
+<div id="auth-screen">
+  <div class="auth-box">
+    <div class="auth-logo">Noahs<span>Chat</span></div>
+    <div class="auth-tagline">by NoahsAPP · v2.0</div>
+
+    <div class="auth-tabs">
+      <button class="auth-tab active" onclick="switchTab('login')">Login</button>
+      <button class="auth-tab" onclick="switchTab('register')">Registrieren</button>
+    </div>
+
+    <!-- LOGIN -->
+    <div id="tab-login">
+      <div class="auth-field">
+        <label>Username</label>
+        <input type="text" id="login-user" placeholder="dein username" autocomplete="off" onkeydown="if(event.key==='Enter')doLogin()">
+      </div>
+      <div class="auth-field">
+        <label>Passwort</label>
+        <input type="password" id="login-pass" placeholder="••••••••" onkeydown="if(event.key==='Enter')doLogin()">
+      </div>
+      <div class="captcha-box">
+        <div>
+          <div style="font-size:.6rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-bottom:4px">Anti-Bot</div>
+          <div class="captcha-question" id="login-q">? + ? = ?</div>
+        </div>
+        <input class="captcha-input" type="number" id="login-a" placeholder="?" onkeydown="if(event.key==='Enter')doLogin()">
+        <button class="captcha-refresh" onclick="refreshCaptcha('login')" title="Neu">↺</button>
+      </div>
+      <button class="auth-btn" onclick="doLogin()">Einloggen ▶</button>
+    </div>
+
+    <!-- REGISTER -->
+    <div id="tab-register" style="display:none">
+      <div class="auth-field">
+        <label>Username</label>
+        <input type="text" id="reg-user" placeholder="wähle einen username" autocomplete="off">
+      </div>
+      <div class="auth-field">
+        <label>Passwort</label>
+        <input type="password" id="reg-pass" placeholder="mindestens 4 Zeichen">
+      </div>
+      <div class="auth-field">
+        <label>Passwort bestätigen</label>
+        <input type="password" id="reg-pass2" placeholder="nochmal eingeben" onkeydown="if(event.key==='Enter')doRegister()">
+      </div>
+      <div class="captcha-box">
+        <div>
+          <div style="font-size:.6rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-bottom:4px">Anti-Bot</div>
+          <div class="captcha-question" id="reg-q">? + ? = ?</div>
+        </div>
+        <input class="captcha-input" type="number" id="reg-a" placeholder="?" onkeydown="if(event.key==='Enter')doRegister()">
+        <button class="captcha-refresh" onclick="refreshCaptcha('reg')" title="Neu">↺</button>
+      </div>
+      <button class="auth-btn" onclick="doRegister()">Account erstellen ▶</button>
+    </div>
+
+    <div class="auth-error" id="auth-error"></div>
+  </div>
+</div>
+
+<!-- MAIN APP -->
+<div id="app">
+
+  <!-- TOPBAR -->
+  <div class="topbar">
+    <a href="#" class="topbar-logo">Noahs<span>APP</span></a>
+    <div class="topbar-sep"></div>
+    <div class="topbar-channel">
+      <span id="topbar-channel-name"># allgemein</span>
+    </div>
+    <div class="topbar-actions">
+      <button class="icon-btn" onclick="openCreateTicket()" title="Ticket erstellen">🎫</button>
+      <button class="icon-btn" onclick="openSettings()" title="Einstellungen">⚙️</button>
+      <div class="topbar-sep"></div>
+      <div class="topbar-user">
+        <div class="user-avatar-sm" id="topbar-avatar" onclick="openSettings()"></div>
+        <span id="topbar-username" style="font-weight:700"></span>
+        <span class="topbar-role-badge" id="topbar-role-badge"></span>
+        <button class="logout-btn" onclick="doLogout()">Logout</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- SIDEBAR -->
+  <div class="sidebar">
+    <div class="sidebar-scroll">
+
+      <!-- Channels -->
+      <div class="sidebar-section">
+        Channels
+        <span id="online-count" style="color:var(--green);font-family:'Orbitron',monospace">0</span>
+      </div>
+      <div id="channel-list"></div>
+
+      <div class="sidebar-divider"></div>
+
+      <!-- DMs -->
+      <div class="sidebar-section">Direktnachrichten</div>
+      <div id="dm-list"></div>
+
+      <div class="sidebar-divider"></div>
+
+      <!-- Members -->
+      <div class="sidebar-section">Mitglieder</div>
+      <div id="user-list"></div>
+
+    </div>
+
+    <!-- Voice Panel -->
+    <div class="voice-panel" id="voice-panel">
+      <div class="voice-status-bar">
+        <div class="voice-active-dot"></div>
+        <div class="voice-name" id="voice-channel-name">🔊 Voice</div>
+        <div class="voice-controls">
+          <button class="voice-ctrl" id="voice-mute-btn" onclick="toggleMute()">🎙 Stumm</button>
+          <button class="voice-ctrl" id="voice-deaf-btn" onclick="toggleDeafen()">🔔 Taub</button>
+          <button class="voice-ctrl" style="color:var(--danger)" onclick="leaveVoice()">✕</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- CHAT AREA -->
+  <div class="chat-area">
+    <div class="chat-header">
+      <div class="chat-header-info">
+        <div class="chat-header-title" id="chat-title">💬 allgemein</div>
+        <div class="chat-header-sub" id="chat-sub">Allgemeiner Chat für alle</div>
+      </div>
+      <div class="chat-header-actions">
+        <button class="icon-btn" id="search-btn" title="Suchen" onclick="openSearchModal()">🔍</button>
+        <button class="icon-btn" id="pins-btn" title="Angepinnte Nachrichten" onclick="openPinsModal()">📌</button>
+      </div>
+    </div>
+
+    <div class="messages" id="messages">
+      <div class="empty-chat">
+        <div class="empty-chat-icon">💬</div>
+        <p>Noch keine Nachrichten. Schreib was!</p>
+      </div>
+    </div>
+
+    <div id="timeout-bar" class="timeout-bar" style="display:none">
+      ⏱ Du bist stummgeschaltet bis <span id="timeout-until"></span>
+    </div>
+
+    <div class="input-area">
+      <textarea class="msg-input" id="msg-input" placeholder="Nachricht schreiben..."
+        rows="1" onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
+      <button class="send-btn" id="send-btn" onclick="sendMessage()">SEND</button>
+    </div>
+  </div>
+
+</div>
+
+<!-- CONTEXT MENU -->
+<div id="context-menu" style="display:none"></div>
+
+<!-- MODAL CONTAINER -->
+<div id="modal-container"></div>
+
+<script>
+// ─── DEFAULT DATA (from data.json equivalent) ─────────────────
+window.DEFAULT_CHANNELS = [
+  { id: 'ankuendigungen', name: 'ankündigungen', icon: '📢', sub: 'Wichtige Ankündigungen', adminOnly: true, category: 'info' },
+  { id: 'regeln', name: 'regeln', icon: '📋', sub: 'Serverregeln', readOnly: true, category: 'info' },
+  { id: 'allgemein', name: 'allgemein', icon: '💬', sub: 'Allgemeiner Chat für alle', category: 'chat' },
+  { id: 'gaming', name: 'gaming', icon: '🎮', sub: 'Alles rund ums Gaming', category: 'chat' },
+  { id: 'roblox', name: 'roblox', icon: '🧱', sub: 'Roblox & NoahsHacks', category: 'chat' },
+  { id: 'musik', name: 'musik', icon: '🎵', sub: 'Musik & Playlists', category: 'chat' },
+  { id: 'memes', name: 'memes', icon: '😂', sub: 'Memes & Witze', category: 'fun' },
+  { id: 'off-topic', name: 'off-topic', icon: '💭', sub: 'Alles andere', category: 'fun' },
+  { id: 'kunst', name: 'kunst', icon: '🎨', sub: 'Kreative Werke', category: 'fun' },
+  { id: 'technik', name: 'technik', icon: '💻', sub: 'Tech & Coding', category: 'fun' },
+  { id: 'voicetext', name: 'voice-lounge', icon: '🔊', sub: 'Begleitchat für Voice', category: 'chat' },
+  { id: 'moderators', name: 'mod-logs', icon: '🛡', sub: 'Moderationslog', modOnly: true, category: 'staff' },
+  { id: 'admin', name: 'admin-bereich', icon: '⚙️', sub: 'Nur für Admins', adminOnly: true, category: 'staff' }
+];
+
+window.DEFAULT_AUTOMOD = {
+  enabled: true,
+  maxMsgLength: 800,
+  spamThreshold: 5,
+  spamWindow: 10000,
+  bannedWords: ['scheiß', 'hurensohn', 'wichser', 'fick', 'arschloch'],
+  linkFilter: false,
+  capsFilter: true,
+  capsThreshold: 0.7
+};
+</script>
+
+<!-- Search & Pins modals -->
+<script>
+async function openSearchModal() {
+  showModal(`
+    <div class="modal-title">🔍 Nachrichten durchsuchen</div>
+    <div class="modal-field">
+      <label>Suchbegriff</label>
+      <input type="text" id="search-q" placeholder="Suche im aktuellen Channel..." oninput="liveSearch(this.value)">
+    </div>
+    <div id="search-results" style="max-height:300px;overflow-y:auto;margin-top:10px"></div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+    </div>`);
+}
+
+async function liveSearch(query) {
+  const results = document.getElementById('search-results');
+  if (!query || query.length < 2) { results.innerHTML = ''; return; }
+  const msgs = (await DB.get('msgs_' + currentChannel)) || [];
+  const found = msgs.filter(m => !m.system && m.text && m.text.toLowerCase().includes(query.toLowerCase()));
+  if (!found.length) { results.innerHTML = '<div style="color:var(--muted);text-align:center;padding:12px;font-size:.85rem">Keine Ergebnisse</div>'; return; }
+  results.innerHTML = found.slice(-20).map(m => `
+    <div style="padding:8px 0;border-bottom:1px solid var(--border)">
+      <div style="font-size:.72rem;color:var(--muted);font-family:Orbitron,monospace">${m.author} · ${new Date(m.ts).toLocaleDateString('de-DE')}</div>
+      <div style="font-size:.9rem;color:var(--text)">${escHtml(m.text).replace(new RegExp(escHtml(query),'gi'), s => `<mark style="background:rgba(0,212,255,0.2);color:var(--accent)">${s}</mark>`)}</div>
+    </div>`).join('');
+}
+
+async function openPinsModal() {
+  const pins = (await DB.get('pins')) || [];
+  const relevant = pins.filter(p => p.channel === currentChannel);
+  showModal(`
+    <div class="modal-title">📌 Angepinnte Nachrichten</div>
+    <div style="max-height:350px;overflow-y:auto">
+      ${!relevant.length ? '<div style="color:var(--muted);text-align:center;padding:20px;font-size:.85rem">Keine angepinnten Nachrichten</div>' :
+        relevant.map(p => `
+          <div style="padding:10px 0;border-bottom:1px solid var(--border)">
+            <div style="font-size:.7rem;color:var(--muted);font-family:Orbitron,monospace">📌 ${p.author} · angeheftet von ${p.by}</div>
+            <div style="font-size:.9rem;color:var(--text);margin-top:4px">${escHtml(p.text)}</div>
+          </div>`).join('')}
+    </div>
+    <div class="modal-btns">
+      <button class="modal-btn secondary" onclick="clearModal()">Schließen</button>
+    </div>`);
+}
+</script>
+
+<script src="app.js"></script>
+</body>
+</html>

style.css

@@ -0,0 +1,354 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap');
+
+:root {
+  --bg: #050a0f;
+  --surface: #0a1520;
+  --surface2: #0d1c2e;
+  --surface3: #071018;
+  --border: rgba(0,212,255,0.12);
+  --accent: #00d4ff;
+  --accent2: #ff6b35;
+  --green: #4eff91;
+  --glow: rgba(0,212,255,0.25);
+  --text: #e0f4ff;
+  --muted: #4a7a99;
+  --danger: #ff4466;
+  --warn: #ffaa00;
+  --purple: #a855f7;
+  --gold: #ffd600;
+  --sidebar-w: 240px;
+  --topbar-h: 52px;
+}
+
+* { margin:0; padding:0; box-sizing:border-box; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Rajdhani', sans-serif;
+  height: 100vh;
+  overflow: hidden;
+}
+
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 2px; }
+
+/* ─── BANNED SCREEN ─── */
+#banned-screen {
+  position: fixed; inset:0; z-index:9999;
+  display: none; align-items:center; justify-content:center;
+  background: rgba(5,0,5,0.98); flex-direction:column; gap:16px;
+  text-align:center;
+}
+.banned-icon { font-size:4rem; }
+.banned-title { font-family:'Orbitron',monospace; font-size:1.5rem; color:var(--danger); font-weight:900; }
+.banned-sub { color:var(--muted); font-size:0.9rem; letter-spacing:.1em; }
+
+/* ─── AUTH SCREEN ─── */
+#auth-screen {
+  position: fixed; inset:0; z-index:1000;
+  display: flex; align-items:center; justify-content:center;
+  background: var(--bg);
+}
+#auth-screen::before {
+  content:''; position:absolute; inset:0;
+  background-image: linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px), linear-gradient(90deg,rgba(0,212,255,0.04) 1px,transparent 1px);
+  background-size:60px 60px;
+  animation: gridMove 20s linear infinite;
+}
+@keyframes gridMove { to { transform:translateY(60px); } }
+
+.auth-box {
+  position:relative; z-index:1;
+  background: linear-gradient(135deg, rgba(10,21,32,0.98), rgba(5,10,15,0.99));
+  border: 1px solid rgba(0,212,255,0.2);
+  padding: 44px 40px;
+  width:100%; max-width:440px;
+  clip-path: polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));
+  animation: boxIn 0.5s ease-out;
+}
+@keyframes boxIn { from { opacity:0; transform:translateY(30px) scale(0.97); } }
+
+.auth-logo { font-family:'Orbitron',monospace; font-size:2rem; font-weight:900; color:var(--accent); text-shadow:0 0 30px var(--glow); margin-bottom:4px; text-align:center; }
+.auth-logo span { color:var(--accent2); }
+.auth-tagline { text-align:center; color:var(--muted); font-size:0.75rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:30px; }
+
+.auth-tabs { display:flex; margin-bottom:24px; border-bottom:1px solid var(--border); }
+.auth-tab { flex:1; padding:10px; background:none; border:none; color:var(--muted); cursor:pointer; font-family:'Orbitron',monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; transition:color .2s; border-bottom:2px solid transparent; margin-bottom:-1px; }
+.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
+
+.auth-field { margin-bottom:14px; }
+.auth-field label { display:block; font-size:.72rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
+.auth-field input {
+  width:100%; padding:11px 15px;
+  background:rgba(0,0,0,0.4);
+  border:1px solid var(--border);
+  color:var(--text); font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:600;
+  outline:none; transition:border-color .2s,box-shadow .2s;
+  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
+}
+.auth-field input:focus { border-color:rgba(0,212,255,0.5); box-shadow:0 0 20px rgba(0,212,255,0.1); }
+
+.captcha-box {
+  background:rgba(0,0,0,0.4); border:1px solid rgba(0,212,255,0.15);
+  padding:12px 14px; margin-bottom:14px;
+  display:flex; align-items:center; gap:12px;
+  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
+}
+.captcha-question { font-family:'Orbitron',monospace; font-size:1rem; font-weight:700; color:var(--accent); flex:1; }
+.captcha-input { width:70px; padding:8px 10px; background:rgba(0,0,0,0.5); border:1px solid var(--border); color:var(--text); font-family:'Orbitron',monospace; font-size:0.95rem; font-weight:700; outline:none; text-align:center; }
+.captcha-input:focus { border-color:rgba(0,212,255,0.5); }
+.captcha-refresh { background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.1rem; transition:color .2s; padding:4px; }
+.captcha-refresh:hover { color:var(--accent); }
+
+.auth-btn { width:100%; padding:13px; background:var(--accent); border:none; color:var(--bg); cursor:pointer; font-family:'Orbitron',monospace; font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); transition:all .2s; margin-top:6px; }
+.auth-btn:hover { background:#33ddff; transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,212,255,0.3); }
+.auth-error { color:var(--danger); font-size:.85rem; text-align:center; margin-top:10px; min-height:20px; letter-spacing:.05em; }
+
+/* ─── MAIN APP ─── */
+#app { display:none; height:100vh; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--topbar-h) 1fr; }
+#app.visible { display:grid; }
+
+/* ─── TOPBAR ─── */
+.topbar {
+  grid-column: 1 / -1;
+  background:rgba(5,10,15,0.98); border-bottom:1px solid var(--border);
+  display:flex; align-items:center; padding:0 16px; gap:12px;
+  backdrop-filter:blur(10px); position:relative; z-index:100;
+}
+.topbar-logo { font-family:'Orbitron',monospace; font-size:1rem; font-weight:900; color:var(--accent); text-shadow:0 0 15px var(--glow); text-decoration:none; white-space:nowrap; }
+.topbar-logo span { color:var(--accent2); }
+.topbar-sep { width:1px; height:24px; background:var(--border); }
+.topbar-channel { flex:1; font-family:'Orbitron',monospace; font-size:.7rem; color:var(--muted); letter-spacing:.12em; }
+.topbar-channel span { color:var(--accent); }
+.topbar-actions { display:flex; align-items:center; gap:8px; }
+.topbar-user { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; }
+.user-avatar-sm { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',monospace; font-size:.7rem; font-weight:900; border:1px solid var(--accent); color:var(--accent); background:rgba(0,212,255,0.08); flex-shrink:0; cursor:pointer; }
+.topbar-role-badge { font-size:.85rem; }
+.icon-btn { background:none; border:1px solid var(--border); color:var(--muted); padding:5px 10px; cursor:pointer; font-size:.85rem; transition:all .2s; clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); }
+.icon-btn:hover { color:var(--accent); border-color:rgba(0,212,255,0.4); }
+.logout-btn { background:none; border:1px solid rgba(255,68,102,0.3); color:var(--danger); padding:5px 10px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:.8rem; letter-spacing:.1em; transition:all .2s; clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); }
+.logout-btn:hover { background:rgba(255,68,102,0.1); border-color:var(--danger); }
+
+/* ─── SIDEBAR ─── */
+.sidebar { background:var(--surface3); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
+.sidebar-scroll { flex:1; overflow-y:auto; padding-bottom:12px; }
+
+.sidebar-section { padding:14px 14px 5px; font-family:'Orbitron',monospace; font-size:.56rem; letter-spacing:.3em; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; }
+.sidebar-section button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:0 2px; transition:color .2s; }
+.sidebar-section button:hover { color:var(--accent); }
+
+.channel-category { padding:10px 14px 4px; font-family:'Orbitron',monospace; font-size:.52rem; letter-spacing:.25em; color:rgba(74,122,153,0.6); text-transform:uppercase; }
+
+.channel-item { display:flex; align-items:center; gap:7px; padding:6px 14px; cursor:pointer; transition:background .15s,color .15s; font-size:.88rem; font-weight:600; color:var(--muted); position:relative; user-select:none; }
+.channel-item:hover { background:rgba(0,212,255,0.05); color:var(--text); }
+.channel-item.active { background:rgba(0,212,255,0.08); color:var(--accent); border-left:2px solid var(--accent); }
+.channel-icon { font-size:.82rem; opacity:.7; }
+.channel-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.unread-badge { background:var(--accent2); color:#fff; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:10px; font-family:'Orbitron',monospace; flex-shrink:0; }
+.ch-locked { opacity:.4; cursor:default; }
+.ch-locked:hover { background:none; color:var(--muted); }
+
+.voice-channel { display:flex; align-items:center; gap:7px; padding:6px 14px; cursor:pointer; transition:background .15s; font-size:.88rem; font-weight:600; color:var(--muted); flex-direction:column; align-items:flex-start; }
+.voice-ch-header { display:flex; align-items:center; gap:7px; width:100%; }
+.voice-ch-header:hover { color:var(--text); }
+.voice-ch-participants { padding-left:22px; display:flex; flex-direction:column; gap:2px; }
+.voice-participant { font-size:.78rem; color:var(--green); display:flex; align-items:center; gap:5px; }
+.voice-participant.muted { color:var(--muted); }
+
+.sidebar-divider { height:1px; background:var(--border); margin:6px 14px; }
+
+/* Role groups */
+.role-group-header { display:flex; align-items:center; gap:6px; padding:8px 14px 3px; font-family:'Orbitron',monospace; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); cursor:pointer; }
+.role-group-header:hover { color:var(--text); }
+
+.user-item { display:flex; align-items:center; gap:8px; padding:5px 14px; cursor:pointer; transition:background .15s; font-size:.86rem; font-weight:600; color:var(--muted); }
+.user-item:hover { background:rgba(0,212,255,0.05); color:var(--text); }
+.user-item.me { cursor:default; }
+.user-item.me:hover { background:none; }
+.user-item.offline { opacity:.5; }
+
+.online-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green); flex-shrink:0; }
+.offline-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex-shrink:0; }
+.away-dot { width:7px; height:7px; border-radius:50%; background:var(--warn); flex-shrink:0; }
+
+/* ─── CHAT AREA ─── */
+.chat-area { display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }
+.chat-header { padding:10px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; background:rgba(5,10,15,0.85); }
+.chat-header-info { flex:1; }
+.chat-header-title { font-family:'Orbitron',monospace; font-size:.85rem; font-weight:700; color:var(--text); }
+.chat-header-sub { font-size:.76rem; color:var(--muted); letter-spacing:.05em; }
+.chat-header-actions { display:flex; gap:6px; }
+
+.messages { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:1px; }
+
+.day-divider { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--muted); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-family:'Orbitron',monospace; }
+.day-divider::before, .day-divider::after { content:''; flex:1; height:1px; background:var(--border); }
+
+.msg { display:flex; gap:10px; padding:3px 8px 3px; border-radius:2px; transition:background .15s; animation:msgIn .2s ease-out; }
+@keyframes msgIn { from { opacity:0; transform:translateY(5px); } }
+.msg:hover { background:rgba(255,255,255,0.02); }
+.msg.consecutive { padding-top:0; }
+.msg.consecutive .msg-avatar { opacity:0; pointer-events:none; }
+.msg.consecutive .msg-header { display:none; }
+
+.msg-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',monospace; font-size:.7rem; font-weight:900; flex-shrink:0; margin-top:2px; border:1px solid rgba(0,212,255,0.2); background:rgba(0,212,255,0.06); color:var(--accent); cursor:pointer; }
+.msg-content { flex:1; min-width:0; }
+.msg-header { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; flex-wrap:wrap; }
+.msg-name { font-family:'Orbitron',monospace; font-size:.7rem; font-weight:700; color:var(--accent); cursor:pointer; }
+.msg-name:hover { text-decoration:underline; }
+.msg-role-badge { font-size:.72rem; }
+.msg-time { font-size:.65rem; color:var(--muted); letter-spacing:.05em; }
+.msg-translated { font-size:.72rem; color:var(--muted); font-style:italic; margin-top:2px; border-left:2px solid rgba(0,212,255,0.2); padding-left:6px; }
+.msg-text { font-size:.96rem; line-height:1.5; color:var(--text); word-break:break-word; font-weight:400; }
+.msg-text a { color:var(--accent); text-decoration:none; }
+.msg-text a:hover { text-decoration:underline; }
+.msg-actions { display:none; gap:4px; margin-left:auto; }
+.msg:hover .msg-actions { display:flex; }
+.msg-action-btn { background:none; border:1px solid var(--border); color:var(--muted); padding:2px 7px; cursor:pointer; font-size:.7rem; border-radius:2px; transition:all .15s; }
+.msg-action-btn:hover { color:var(--accent); border-color:rgba(0,212,255,0.4); }
+.msg-action-btn.danger:hover { color:var(--danger); border-color:rgba(255,68,102,0.4); }
+
+.msg-system { padding:5px 8px; font-size:.76rem; color:var(--muted); font-style:italic; letter-spacing:.04em; text-align:center; }
+.msg-automod { padding:5px 8px; font-size:.76rem; color:var(--warn); letter-spacing:.04em; text-align:center; border:1px solid rgba(255,170,0,0.15); background:rgba(255,170,0,0.04); margin:4px 0; border-radius:2px; }
+
+.pinned-banner { background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.15); padding:8px 14px; font-size:.82rem; color:var(--muted); display:flex; gap:8px; align-items:center; }
+.pinned-banner span { color:var(--accent); font-weight:700; }
+
+.timeout-bar { padding:10px 20px; background:rgba(255,170,0,0.08); border-top:1px solid rgba(255,170,0,0.2); color:var(--warn); font-family:'Orbitron',monospace; font-size:.64rem; text-align:center; }
+
+.input-area { padding:12px 20px; border-top:1px solid var(--border); background:rgba(5,10,15,0.8); display:flex; gap:8px; align-items:flex-end; }
+.msg-input { flex:1; background:rgba(0,0,0,0.5); border:1px solid var(--border); color:var(--text); padding:10px 14px; font-family:'Rajdhani',sans-serif; font-size:.97rem; font-weight:500; outline:none; resize:none; min-height:42px; max-height:120px; transition:border-color .2s,box-shadow .2s; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); line-height:1.4; }
+.msg-input:focus { border-color:rgba(0,212,255,0.4); box-shadow:0 0 20px rgba(0,212,255,0.08); }
+.msg-input::placeholder { color:var(--muted); }
+.msg-input:disabled { opacity:.4; cursor:not-allowed; }
+.send-btn { padding:10px 16px; background:var(--accent); border:none; color:var(--bg); cursor:pointer; font-family:'Orbitron',monospace; font-size:.65rem; font-weight:700; letter-spacing:.15em; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); transition:all .2s; flex-shrink:0; height:42px; }
+.send-btn:hover { background:#33ddff; transform:translateY(-1px); }
+.send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
+
+.empty-chat { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center; gap:10px; }
+.empty-chat-icon { font-size:2.5rem; opacity:.3; }
+.empty-chat p { font-family:'Orbitron',monospace; font-size:.64rem; letter-spacing:.1em; }
+
+/* ─── VOICE PANEL ─── */
+.voice-panel { display:none; flex-direction:column; border-top:1px solid var(--border); background:var(--surface3); }
+.voice-panel.active { display:flex; }
+.voice-status-bar { padding:8px 14px; display:flex; align-items:center; gap:8px; font-size:.8rem; }
+.voice-active-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; flex-shrink:0; }
+@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
+.voice-name { flex:1; font-family:'Orbitron',monospace; font-size:.65rem; color:var(--green); }
+.voice-controls { display:flex; gap:4px; }
+.voice-ctrl { background:none; border:1px solid var(--border); color:var(--muted); padding:4px 8px; cursor:pointer; font-size:.75rem; transition:all .15s; clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%); }
+.voice-ctrl:hover { color:var(--accent); border-color:rgba(0,212,255,0.4); }
+.voice-ctrl.active { color:var(--danger); border-color:rgba(255,68,102,0.4); }
+
+/* ─── TICKET PANEL ─── */
+.ticket-item { padding:8px 14px; border-left:2px solid var(--border); margin:4px 0; transition:border-color .2s; cursor:pointer; }
+.ticket-item:hover { border-left-color:var(--accent); background:rgba(0,212,255,0.03); }
+.ticket-item.open { border-left-color:var(--green); }
+.ticket-item.closed { border-left-color:var(--muted); opacity:.6; }
+.ticket-meta { font-size:.7rem; color:var(--muted); font-family:'Orbitron',monospace; }
+.ticket-title { font-size:.88rem; font-weight:600; color:var(--text); }
+
+/* ─── CONTEXT MENU ─── */
+#context-menu { position:fixed; z-index:5000; background:rgba(10,21,32,0.98); border:1px solid rgba(0,212,255,0.2); padding:6px 0; min-width:190px; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); animation:ctxIn .15s ease-out; box-shadow:0 8px 40px rgba(0,0,0,0.5); }
+@keyframes ctxIn { from { opacity:0; transform:scale(0.95); } }
+.ctx-header { padding:8px 14px 6px; font-family:'Orbitron',monospace; font-size:.63rem; color:var(--accent); letter-spacing:.2em; border-bottom:1px solid var(--border); margin-bottom:4px; }
+.ctx-item { padding:8px 14px; cursor:pointer; font-size:.88rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; transition:background .1s; }
+.ctx-item:hover { background:rgba(0,212,255,0.08); }
+.ctx-item.danger { color:var(--danger); }
+.ctx-item.danger:hover { background:rgba(255,68,102,0.08); }
+.ctx-item.warn { color:var(--warn); }
+.ctx-item.warn:hover { background:rgba(255,170,0,0.08); }
+.ctx-item.success { color:var(--green); }
+.ctx-item.success:hover { background:rgba(78,255,145,0.08); }
+.ctx-divider { height:1px; background:var(--border); margin:4px 0; }
+
+/* ─── MODALS ─── */
+.modal-overlay { position:fixed; inset:0; z-index:6000; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); animation:fadeIn .2s ease-out; }
+@keyframes fadeIn { from { opacity:0; } }
+.modal { background:linear-gradient(135deg,rgba(10,21,32,0.99),rgba(5,10,15,0.99)); border:1px solid rgba(0,212,255,0.2); padding:30px 28px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px)); animation:boxIn .3s ease-out; }
+.modal.wide { max-width:600px; }
+.modal-title { font-family:'Orbitron',monospace; font-size:.95rem; font-weight:700; color:var(--accent); margin-bottom:5px; }
+.modal-sub { font-size:.84rem; color:var(--muted); margin-bottom:20px; }
+.modal-field { margin-bottom:13px; }
+.modal-field label { display:block; font-size:.7rem; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; margin-bottom:5px; }
+.modal-field input, .modal-field select, .modal-field textarea { width:100%; padding:10px 13px; background:rgba(0,0,0,0.5); border:1px solid var(--border); color:var(--text); font-family:'Rajdhani',sans-serif; font-size:.94rem; font-weight:600; outline:none; transition:border-color .2s; clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%); }
+.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus { border-color:rgba(0,212,255,0.5); }
+.modal-field select option { background:#0a1520; }
+.modal-field textarea { resize:vertical; min-height:80px; }
+.modal-field .hint { font-size:.72rem; color:var(--muted); margin-top:4px; }
+.modal-tabs { display:flex; margin-bottom:20px; border-bottom:1px solid var(--border); }
+.modal-tab { flex:1; padding:8px; background:none; border:none; color:var(--muted); cursor:pointer; font-family:'Orbitron',monospace; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; transition:color .2s; border-bottom:2px solid transparent; margin-bottom:-1px; }
+.modal-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
+.modal-btns { display:flex; gap:8px; margin-top:18px; }
+.modal-btn { flex:1; padding:11px; border:none; cursor:pointer; font-family:'Orbitron',monospace; font-size:.65rem; font-weight:700; letter-spacing:.15em; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); transition:all .2s; }
+.modal-btn.primary { background:var(--accent); color:var(--bg); }
+.modal-btn.primary:hover { background:#33ddff; }
+.modal-btn.secondary { background:transparent; color:var(--muted); border:1px solid var(--border); }
+.modal-btn.secondary:hover { color:var(--text); border-color:rgba(0,212,255,0.3); }
+.modal-btn.danger-btn { background:var(--danger); color:#fff; }
+.modal-btn.danger-btn:hover { background:#ff6680; }
+.modal-btn.warn-btn { background:var(--warn); color:#000; }
+.modal-btn.warn-btn:hover { background:#ffcc44; }
+.modal-btn.success-btn { background:var(--green); color:#000; }
+.modal-btn.success-btn:hover { background:#7fffb2; }
+.captcha-modal-question { font-family:'Orbitron',monospace; font-size:2rem; font-weight:900; color:var(--accent); text-align:center; letter-spacing:.1em; margin:16px 0; text-shadow:0 0 20px var(--glow); }
+
+/* ─── SETTINGS ─── */
+.settings-section { margin-bottom:20px; }
+.settings-section h4 { font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--border); }
+.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(0,212,255,0.06); }
+.toggle-row label { font-size:.88rem; color:var(--text); }
+.toggle { width:40px; height:20px; background:rgba(0,0,0,0.5); border:1px solid var(--border); border-radius:10px; cursor:pointer; position:relative; transition:background .2s; }
+.toggle.on { background:rgba(0,212,255,0.3); border-color:rgba(0,212,255,0.5); }
+.toggle::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:all .2s; }
+.toggle.on::after { left:22px; background:var(--accent); }
+
+/* ─── AUTOMOD TAGS ─── */
+.tag { display:inline-flex; align-items:center; gap:5px; background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.2); color:var(--accent); padding:3px 10px; border-radius:2px; font-size:.78rem; margin:3px 2px; }
+.tag-remove { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem; line-height:1; padding:0 1px; }
+.tag-remove:hover { color:var(--danger); }
+.tag-input { background:rgba(0,0,0,0.4); border:1px solid var(--border); color:var(--text); padding:5px 10px; font-family:'Rajdhani',sans-serif; font-size:.88rem; outline:none; margin-top:6px; }
+.tag-input:focus { border-color:rgba(0,212,255,0.4); }
+
+/* ─── TOAST ─── */
+.toast { position:fixed; bottom:20px; right:20px; background:rgba(10,21,32,0.98); border:1px solid var(--accent); color:var(--accent); padding:10px 16px; font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:.12em; z-index:9999; animation:toastIn .3s ease-out; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); max-width:300px; }
+@keyframes toastIn { from { opacity:0; transform:translateY(20px); } }
+
+/* ─── AVATAR COLORS ─── */
+.av-color-0 { border-color:rgba(0,212,255,0.3)!important; color:#00d4ff!important; background:rgba(0,212,255,0.06)!important; }
+.av-color-1 { border-color:rgba(255,107,53,0.3)!important; color:#ff6b35!important; background:rgba(255,107,53,0.06)!important; }
+.av-color-2 { border-color:rgba(168,85,247,0.3)!important; color:#a855f7!important; background:rgba(168,85,247,0.06)!important; }
+.av-color-3 { border-color:rgba(78,255,145,0.3)!important; color:#4eff91!important; background:rgba(78,255,145,0.06)!important; }
+.av-color-4 { border-color:rgba(255,214,0,0.3)!important; color:#ffd600!important; background:rgba(255,214,0,0.06)!important; }
+.name-color-0 { color:#00d4ff!important; }
+.name-color-1 { color:#ff6b35!important; }
+.name-color-2 { color:#a855f7!important; }
+.name-color-3 { color:#4eff91!important; }
+.name-color-4 { color:#ffd600!important; }
+
+/* ─── TICKET BADGE ─── */
+.ticket-badge { background:var(--purple); color:#fff; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:10px; font-family:'Orbitron',monospace; }
+
+/* ─── SCROLLBAR CUSTOM ─── */
+.messages::-webkit-scrollbar { width:3px; }
+.sidebar-scroll::-webkit-scrollbar { width:3px; }
+
+/* ─── RESPONSIVE ─── */
+@media (max-width:768px) {
+  :root { --sidebar-w: 0px; }
+  .sidebar { display:none; }
+  #app.visible { grid-template-columns:1fr; }
+}
+
+/* ─── MISC ─── */
+.divider { height:1px; background:var(--border); margin:10px 0; }
+.txt-accent { color:var(--accent); }
+.txt-danger { color:var(--danger); }
+.txt-warn { color:var(--warn); }
+.txt-green { color:var(--green); }
+.txt-muted { color:var(--muted); }
+.fw700 { font-weight:700; }
+.mono { font-family:'Orbitron',monospace; font-size:.75rem; }