update

frontend/src/components/TopicDetail.vue

@@ -146,11 +146,19 @@ async function scrollToBottom() {
   if (messagesEl.value) messagesEl.value.scrollTop = messagesEl.value.scrollHeight
 }
 
+function autoGrow() {
+  const el = inputEl.value
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = Math.min(el.scrollHeight, 140) + 'px'
+}
+
 async function send() {
   const text = input.value.trim()
   if (!text || loading.value || !props.previewGuide) return
   messages.value.push({ role: 'user', content: text })
   input.value = ''
+  nextTick(autoGrow)
   loading.value = true
   scrollToBottom()
   try {
@@ -237,7 +245,9 @@ async function send() {
         <textarea
           ref="inputEl"
           v-model="input"
+          rows="3"
           placeholder="Frage stellen…"
+          @input="autoGrow"
           @keydown.enter.exact.prevent="send"
         ></textarea>
         <button :disabled="!input.trim() || loading" @click="send">➤</button>
@@ -252,7 +262,7 @@ async function send() {
   /* Flex-Item darf schmaler werden als seine Code-Blöcke — sonst sprengt
      deren Mindestbreite auf Mobile das Layout */
   min-width: 0;
-  height: 100vh;
+  height: 100dvh;
   position: relative;
 }
 
@@ -269,7 +279,7 @@ async function send() {
   margin: 0 auto;
   padding: 2rem 2.5rem 5rem;
   /* Lese-Zoom nur für den Inhalt — Sidebar/Chat bleiben unverändert */
-  zoom: 1.2;
+  zoom: 1;
 }
 
 @media (max-width: 600px) {
@@ -623,7 +633,7 @@ async function send() {
   bottom: 1.5rem;
   width: 360px;
   height: 500px;
-  max-height: calc(100vh - 3rem);
+  max-height: calc(100dvh - 3rem);
   display: flex;
   flex-direction: column;
   background: var(--panel);
@@ -706,6 +716,7 @@ async function send() {
 
 .chat-input {
   display: flex;
+  align-items: stretch;
   gap: 6px;
   padding: 0.6rem;
   border-top: 1px solid var(--border);
@@ -714,12 +725,15 @@ async function send() {
 .chat-input textarea {
   flex: 1;
   resize: none;
-  height: 38px;
+  min-height: 72px;
+  max-height: 200px;
+  overflow-y: auto;
   padding: 8px 10px;
   border: 1px solid var(--border-strong);
   border-radius: 8px;
   font-size: 0.85rem;
   font-family: inherit;
+  line-height: 1.4;
   outline: none;
 }
 
@@ -729,6 +743,7 @@ async function send() {
 
 .chat-input button {
   width: 38px;
+  flex-shrink: 0;
   border: none;
   border-radius: 8px;
   background: var(--accent);