Refactor chat interface in index.html and main.js: Improve user interaction by optimizing chat message rendering and enhancing initialization logic for the ChatGPT assistant. Update styles for better responsiveness and visual appeal, ensuring seamless integration with existing functionalities.

.cursor/rules/frontend-structure.mdc

@@ -0,0 +1,41 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Frontend-Struktur
+
+Die Anwendung verwendet ein Flask-Jinja2-Template-System mit JavaScript-Erweiterungen:
+
+## Template-Struktur
+- `/templates`: Hauptverzeichnis für Jinja2-Templates
+- `/templates/errors`: Fehlerseiten (404, 500, etc.)
+- Layout-Templates für einheitliches Design
+
+## Frontend-Assets
+- `/static/css`: CSS-Dateien (mit Tailwind)
+  - `/static/css/src`: Quell-CSS-Dateien
+- `/static/js`: JavaScript-Dateien
+  - `/static/js/modules`: Modulare JS-Komponenten
+- `/static/img`: Bilder und grafische Elemente
+
+## JavaScript-Funktionalität
+- API-Integration: Asynchrone Kommunikation mit Backend
+- Mindmap-Visualisierung: Interaktive Darstellung von Konzepten
+- Benutzeroberflächen-Interaktivität: Drag & Drop, Tooltips, Modals
+
+## CSS-Framework
+- Tailwind CSS für responsive Design-Elemente
+- TAILWIND CDN verwenden, nicht manuell build!
+
+## Responsive Design
+- Mobile-first Ansatz für verschiedene Gerätetypen
+- Anpassungsfähiges Layout für verschiedene Bildschirmgrößen
+
+## Zugänglichkeit
+- Semantisches HTML für bessere Zugänglichkeit
+- ARIA-Attribute für Screenreader-Unterstützung
+
+## Internationalisierung
+- Deutsche Benutzeroberfläche als Standard
+- Vorbereitet für mehrsprachige Unterstützung