src/components/AIQueryInterface.astro

@@ -50,11 +50,10 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
 
       <!-- Input Layout -->
       <div class="ai-input-layout">
-        <div class="ai-textarea-section" style="height: 200px">
+        <div class="ai-textarea-section">
           <textarea 
             id="ai-query-input" 
             placeholder="Beschreiben Sie Ihr forensisches Szenario..."
-            class="w-full"
             maxlength="2000"
           ></textarea>
           <div id="ai-char-counter" class="text-xs text-secondary text-right mt-1">0/2000</div>

src/styles/global.css

@@ -1807,11 +1807,44 @@ input[type="checkbox"] {
 .ai-textarea-section {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.ai-textarea-section textarea {
+  width: 100%;
+  height: 180px;
+  min-height: 180px;
+  max-height: 300px;
+  resize: vertical;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  transition: var(--transition-fast);
+  flex: 1;
+}
+
+.confidence-tooltip {
+  background: var(--color-bg) !important;
+  border: 2px solid var(--color-border) !important;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+  z-index: 2000 !important;
+}
+
+.ai-textarea-section textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
 }
 
 .ai-suggestions-section {
   flex: 0 0 320px;
-  min-height: 120px;
+  min-height: 180px;
+  height: auto;
 }
 
 .ai-input-container textarea {
@@ -2187,12 +2220,20 @@ input[type="checkbox"] {
   border-radius: 1rem;
   font-weight: 500;
   text-transform: uppercase;
+  position: relative;
+  z-index: 1;
 }
 
 .tool-rec-priority.high { background-color: var(--color-error); color: white; }
 .tool-rec-priority.medium { background-color: var(--color-warning); color: white; }
 .tool-rec-priority.low { background-color: var(--color-accent); color: white; }
 
+[data-theme="dark"] .confidence-tooltip {
+  background: var(--color-bg-secondary) !important;
+  border-color: var(--color-border) !important;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
+}
+
 .tool-rec-justification {
   font-size: 0.875rem;
   line-height: 1.5;
@@ -2611,7 +2652,8 @@ footer {
    ================================================================= */
 
 .smart-prompting-container {
-  height: 100%;
+  height: auto;
+  min-height: 180px;
   animation: smartPromptSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -2620,8 +2662,10 @@ footer {
   border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   padding: 1rem;
-  height: 100%;
+  height: auto;
-  min-height: 120px;
+  min-height: 180px;
+  max-height: 400px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   opacity: 0.85;
@@ -2661,8 +2705,8 @@ footer {
 
 /* Smart Prompting Hint */
 .smart-prompting-hint {
-  height: 100%;
+  height: 180px;
-  min-height: 120px;
+  min-height: 180px;
   display: flex;
   align-items: center;
   animation: hintFadeIn 0.3s ease-in-out;
@@ -3376,8 +3420,8 @@ footer {
   
   .ai-suggestions-section {
     flex: 0 0 auto;
-    width: 100%;
+    height: auto;
-    max-width: none;
+    min-height: 120px;
   }
   
   .ai-textarea-section {
@@ -3387,6 +3431,11 @@ footer {
     min-height: 100px;
   }
 
+  .ai-textarea-section textarea {
+    height: 150px;
+    min-height: 150px;
+  }
+
   .ai-spotlight-content {
     flex-direction: column;
     gap: 0.75rem;