Chat: Bilder, Kamerafoto, Dateien und Sprachnachrichten

- Kundenbereich und Admin-Chat: Bueroklammer-Menue (Bild, Kamera, Datei),
  Mikrofon fuer Sprachnachrichten, Vorschau vor dem Senden mit
  Upload-Fortschritt, Einfuegen (Strg+V) und Hineinziehen von Dateien
- Kamera: am Handy/Tablet die Kamera-App, am Rechner die Kamera im Browser
  mit Vorschau, Kamerawechsel und "Nochmal"
- Sprachnachricht: Aufnahme mit Zeit und Pegel, vorher anhoerbar oder
  direkt senden, hoechstens 5 Minuten
- Verlauf: Bilder (einzeln bzw. Raster, Grossansicht), Player fuer
  Sprachnachrichten, Datei-Kacheln mit Download
- Server: jede Datei einzeln roh hochgeladen (max. 25 MB, 10 je Nachricht,
  max. 3 gleichzeitig), Typ aus dem Inhalt, nur erlaubte Endungen, keine
  Programme; Ablage unter upload-data/chat/<Kunde>/ ausserhalb von public/,
  Auslieferung nur mit Login; Bilder, Audio und PDF inline, alles andere
  als Download (nosniff, CSP sandbox)
- Nicht gesendete Anhaenge werden nach 24 Stunden geloescht
- Benachrichtigungs-Mail nennt nur Art und Namen der Anhaenge
- Appwrite: neues Attribut portalMessages.attachments
  (scripts/setup-chat-collection.mjs, vor dem Deploy ausfuehren)
- Datenschutzerklaerung Abschnitt 6 ergaenzt (Stand 26.09.2026), PDF neu

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/dashboard.html

@@ -6,6 +6,7 @@
   <title>Kundenbereich – WEBklar</title>
   <link rel="stylesheet" href="/login.css">
   <link rel="stylesheet" href="/kundenbereich.css">
+  <link rel="stylesheet" href="/chat-composer.css">
 </head>
 <body class="portal-page dashboard-page kb-page">
   <div class="dot-background" aria-hidden="true">
@@ -90,11 +91,9 @@
         </header>
         <div class="kb-panel chat-box">
           <div class="chat-messages" id="chat-messages"></div>
-          <div class="chat-input-row">
-            <textarea id="chat-input" maxlength="2000" placeholder="Nachricht an das WEBklar-Team…"></textarea>
-            <button type="button" class="chat-send" id="chat-send">Senden</button>
-          </div>
-          <p class="chat-hint">Enter = Senden, Shift+Enter = Zeilenumbruch.</p>
+          <!-- Eingabezeile mit Bild, Kamera, Datei und Sprachnachricht (chat-composer.js) -->
+          <div id="chat-composer"></div>
+          <p class="chat-hint">Enter = Senden, Shift+Enter = neue Zeile. Bilder und Dateien bis 25 MB – auch per Einfügen oder Hineinziehen.</p>
         </div>
       </section>
 
@@ -120,6 +119,7 @@
     </main>
   </div>
 
+  <script src="/chat-composer.js"></script>
   <script src="/app.js"></script>
   <script>
     initDashboardPage();