refactor: Avatar-Editor als wiederverwendbares Modal-Modul

- Neues avatar-editor.js: Upload, Paste, AI-Generate, Scale, Clear in einem Modal
- Session + Agent Pages: ~280 Zeilen doppelter Avatar-Code → je 5 Zeilen AvatarEditor.init/destroy
- Avatar-Preview klickbar → öffnet Modal mit allen Einstellungen
- chat.css: Shared-Content Message-Styling (max-width, border)

wwwroot/css/chat.css

@@ -941,6 +941,16 @@
   gap: var(--badge-spacing);
 }
 
+.shared-content .msg {
+  max-width: unset;
+  align-self: stretch;
+}
+
+.shared-content .msg.assistant {
+  background: unset;
+  border: unset;
+}
+
 .shared-loading  {
   text-align: center;
   padding: 3em 1em;

wwwroot/css/form.css

@@ -15,11 +15,7 @@
   cursor: pointer;
 }
 
-.avatar-section {
-  display: flex;
-  align-items: center;
-  gap: var(--box-spacing);
-}
+/* ── Avatar Preview (in Formularen) ── */
 
 .avatar-preview {
   width: 8em;
@@ -32,37 +28,114 @@
   overflow: hidden;
   flex-shrink: 0;
   border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: border-color var(--transition-duration);
+}
+
+.avatar-preview:hover {
+  border-color: var(--primary);
 }
 
 .avatar-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: scale var(--transition-duration);
 }
 
-.avatar-scale-row {
+/* ── Avatar Editor Modal ── */
+
+.av-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgb(from var(--f1-bg) r g b / var(--semi-transparent));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.av-modal {
+  background: var(--f2-bg);
+  border: var(--border-width) solid var(--f2-border);
+  border-radius: var(--border-radius);
+  width: 90vw;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.av-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--box-padding);
+  border-bottom: var(--border-width) solid var(--f1-border);
+  background: var(--f1-bg);
+}
+
+.av-body {
+  padding: var(--box-padding);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--box-spacing);
+}
+
+.av-preview-large {
+  width: 16em;
+  height: 16em;
+  background: var(--f3-bg);
+  border: var(--border-width) solid var(--f2-border);
+  border-radius: var(--border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.av-preview-large img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.av-controls {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-spacing);
+}
+
+.av-scale-row {
   display: flex;
   align-items: center;
   gap: var(--badge-spacing);
-  flex: 1;
-  padding: var(--box-padding);
 }
-.avatar-scale-row label {
+
+.av-scale-row label {
   margin: 0;
+  white-space: nowrap;
 }
-.avatar-scale-row input[type="range"] {
+
+.av-scale-row input[type="range"] {
   flex: 1;
   accent-color: var(--primary);
 }
-.avatar-scale-row span {
+
+.av-scale-row .av-scale-value {
   font-size: 0.85em;
   min-width: 2.5em;
   text-align: right;
   opacity: 0.7;
 }
 
-.avatar-ai-section {
+.av-actions {
+  display: flex;
+  gap: var(--badge-spacing);
+}
+
+.av-ai-section {
   width: 100%;
 }