From 644dff2387f0294aa59313b516c02dcf74c87ace Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Sat, 26 Jul 2025 22:44:42 +0200
Subject: [PATCH] style enhancements

---
 src/components/AIQueryInterface.astro | 207 ++++++++++---------
 src/styles/global.css                 | 282 ++++++++++++++++++++++++--
 2 files changed, 375 insertions(+), 114 deletions(-)

diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro
index 6448b56..a23714e 100644
--- a/src/components/AIQueryInterface.astro
+++ b/src/components/AIQueryInterface.astro
@@ -24,86 +24,89 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
       </p>
     </div>
 
-    <div class="ai-input-container" style="max-width: 800px; margin: 0 auto;">
-      <div class="ai-mode-toggle" style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border);">
-        <span id="workflow-label" class="toggle-label active" style="font-weight: 500; color: var(--color-primary); cursor: pointer; transition: var(--transition-fast);">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
-            <polyline points="9,11 12,14 22,4"/>
-            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
-          </svg>
-          Workflow-Empfehlung
-        </span>
-        
-        <div class="toggle-switch" style="position: relative; width: 50px; height: 24px; background-color: var(--color-primary); border-radius: 12px; cursor: pointer; transition: var(--transition-fast);">
-          <div class="toggle-slider" style="position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; transition: var(--transition-fast); transform: translateX(0);"></div>
-        </div>
-        
-        <span id="tool-label" class="toggle-label" style="font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: var(--transition-fast);">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
-            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
-          </svg>
-          Spezifische Software oder Methode
-        </span>
-      </div>
-
-      <textarea 
-        id="ai-query-input" 
-        placeholder="Beschreiben Sie Ihr forensisches Szenario... z.B. 'Verdacht auf Ransomware-Angriff auf Windows-Domänencontroller mit verschlüsselten Dateien und verdächtigen Netzwerkverbindungen'"
-        style="min-height: 120px; resize: vertical; font-size: 0.9375rem; line-height: 1.5;"
-        maxlength="2000"
-      ></textarea>
+  <div class="ai-input-container" style="max-width: 1000px; margin: 0 auto;">
+    <div class="ai-mode-toggle" style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border);">
+      <span id="workflow-label" class="toggle-label active" style="font-weight: 500; color: var(--color-primary); cursor: pointer; transition: var(--transition-fast);">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+          <polyline points="9,11 12,14 22,4"/>
+          <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+        </svg>
+        Workflow-Empfehlung
+      </span>
       
-      <!-- Smart Prompting Container -->
-      <div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
-        <div class="card contextual-analysis-card approach">
-          <div id="prompting-status" class="prompting-status">
-            💡 KI analysiert Ihre Eingabe...
-            <div id="prompting-spinner" class="prompting-spinner" style="display: none;">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
-                <path d="M21 12a9 9 0 11-6.219-8.56"/>
-              </svg>
+      <div class="toggle-switch" style="position: relative; width: 50px; height: 24px; background-color: var(--color-primary); border-radius: 12px; cursor: pointer; transition: var(--transition-fast);">
+        <div class="toggle-slider" style="position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; transition: var(--transition-fast); transform: translateX(0);"></div>
+      </div>
+      
+      <span id="tool-label" class="toggle-label" style="font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: var(--transition-fast);">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
+        </svg>
+        Spezifische Software oder Methode
+      </span>
+    </div>
+
+    <div class="ai-input-layout">
+      <div class="ai-textarea-section">
+        <textarea 
+          id="ai-query-input" 
+          placeholder="Beschreiben Sie Ihr forensisches Szenario... z.B. 'Verdacht auf Ransomware-Angriff auf Windows-Domänencontroller mit verschlüsselten Dateien und verdächtigen Netzwerkverbindungen'"
+          style="min-height: 220px; resize: vertical; font-size: 0.9375rem; line-height: 1.5;"
+          maxlength="2000"
+        ></textarea>
+      </div>
+      
+      <div class="ai-suggestions-section">
+        <div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
+          <div class="prompting-card">
+            <div id="prompting-status" class="prompting-status">
+              <div class="status-icon">💡</div>
+              <span class="status-text">Analysiere Eingabe...</span>
+              <div id="prompting-spinner" class="prompting-spinner" style="display: none;">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
+                  <path d="M21 12a9 9 0 11-6.219-8.56"/>
+                </svg>
+              </div>
             </div>
-          </div>
-          <div id="suggested-questions" class="suggested-questions" style="display: none;">
-            <p style="margin: 0 0 0.75rem 0; font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.5;">
-              Zur besseren Analyse könnten diese Zusatzinformationen hilfreich sein:
-            </p>
-            <div id="questions-list"></div>
-            <div style="margin-top: 1rem; text-align: right;">
-              <button id="dismiss-suggestions" class="btn-icon" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: var(--color-bg-secondary);">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
+            
+            <div id="suggested-questions" class="suggested-questions" style="display: none;">
+              <div class="suggestions-header">
+                <span class="suggestions-label">Zur besseren Analyse:</span>
+              </div>
+              <div id="questions-list" class="questions-list"></div>
+              <button id="dismiss-suggestions" class="dismiss-button">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <line x1="18" y1="6" x2="6" y2="18"/>
                   <line x1="6" y1="6" x2="18" y2="18"/>
                 </svg>
-                Ausblenden
               </button>
             </div>
           </div>
         </div>
       </div>
-      
-      <div style="margin-top: 0.5rem; margin-bottom: 1rem;">
-        <p style="font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; line-height: 1.4;">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem; vertical-align: middle;">
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="12" y1="8" x2="12" y2="12"/>
-            <line x1="12" y1="16" x2="12.01" y2="16"/>
-          </svg>
-          Ihre Anfrage wird über die kostenlose API von mistral.ai übertragen, wird für KI-Training verwendet und unterliegt deren 
-          <a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary); text-decoration: underline;">Datenschutzrichtlinien</a>
-        </p>
-      </div>
-      
-      <div style="display: flex; justify-content: center; gap: 1rem;">
-        <button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem;">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
-            <path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
-            <path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
-            <path d="M12 17h.01"/>
-          </svg>
-          <span id="submit-btn-text">Empfehlungen generieren</span>
-        </button>
-      </div>
+    </div>
+    
+    <div style="margin-top: 0.5rem; margin-bottom: 1rem;">
+      <p style="font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; line-height: 1.4;">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem; vertical-align: middle;">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="12" y1="8" x2="12" y2="12"/>
+          <line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        Ihre Anfrage wird über die kostenlose API von mistral.ai übertragen, wird für KI-Training verwendet und unterliegt deren 
+        <a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary); text-decoration: underline;">Datenschutzrichtlinien</a>
+      </p>
+    </div>
+    
+    <div style="display: flex; justify-content: center; gap: 1rem;">
+      <button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+          <path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
+          <path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
+          <path d="M12 17h.01"/>
+        </svg>
+        <span id="submit-btn-text">Empfehlungen generieren</span>
+      </button>
     </div>
   </div>
  
@@ -117,27 +120,34 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
     </div>
     <p id="loading-text" style="color: var(--color-text-secondary);">Analysiere Szenario und generiere Empfehlungen...</p>
     
-    <div id="queue-status" style="margin-top: 1rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.5rem; border: 1px solid var(--color-border); display: none;">
-      <div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.75rem;">
-        <div style="display: flex; align-items: center; gap: 0.5rem;">
-          <div id="queue-position-badge" style="width: 24px; height: 24px; background-color: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.875rem;">1</div>
-          <span style="font-weight: 500;">Position in Warteschlange</span>
-        </div>
-      </div>
-      <div style="font-size: 0.875rem; color: var(--color-text-secondary); text-align: center;">
-        <div id="queue-length-info" style="margin-bottom: 0.5rem;">
-          <span id="queue-length">0</span> Anfrage(n) in der Warteschlange
-        </div>
-        <div id="estimated-time-info">
-          Geschätzte Wartezeit: <span id="estimated-time">--</span>
-        </div>
-        <div id="task-id-info" style="margin-top: 0.5rem; font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
-          Task-ID: <span id="current-task-id">--</span>
+    <div id="queue-status" class="queue-status-card" style="display: none;">
+      <div class="queue-header">
+        <div class="queue-position-display">
+          <div id="queue-position-badge" class="position-badge">1</div>
+          <span class="position-label">Position in Warteschlange</span>
         </div>
       </div>
       
-      <div style="margin-top: 1rem; background-color: var(--color-bg-tertiary); border-radius: 0.25rem; height: 4px; overflow: hidden;">
-        <div id="queue-progress" style="height: 100%; background-color: var(--color-primary); width: 0%; transition: width 0.3s ease;"></div>
+      <div class="queue-details">
+        <div class="queue-stat">
+          <span class="stat-label">Warteschlange:</span>
+          <span id="queue-length" class="stat-value">0</span>
+          <span class="stat-unit">Anfrage(n)</span>
+        </div>
+        <div class="queue-stat">
+          <span class="stat-label">Geschätzte Zeit:</span>
+          <span id="estimated-time" class="stat-value">--</span>
+        </div>
+      </div>
+      
+      <div class="queue-progress-container">
+        <div class="queue-progress-track">
+          <div id="queue-progress" class="queue-progress-fill"></div>
+        </div>
+        <div class="task-id-display">
+          <span class="task-label">Task:</span>
+          <code id="current-task-id" class="task-id">--</code>
+        </div>
       </div>
     </div>
   </div>
@@ -258,29 +268,31 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
   
-  // Smart Prompting Functions - Simplified
   function showPromptingStatus(state) {
     if (!smartPromptingContainer || !promptingStatus || !promptingSpinner) return;
     
+    const statusText = promptingStatus.querySelector('.status-text');
+    if (!statusText) return;
+    
     switch (state) {
       case 'analyzing':
         smartPromptingContainer.style.display = 'block';
-        promptingStatus.textContent = '💡 KI analysiert Ihre Eingabe...';
+        statusText.textContent = 'Analysiere Eingabe...';
         promptingSpinner.style.display = 'inline-block';
         suggestedQuestions.style.display = 'none';
         break;
       case 'suggestions':
-        promptingStatus.textContent = '✅ Verbesserungsvorschläge verfügbar';
+        statusText.textContent = 'Verbesserungsvorschläge verfügbar';
         promptingSpinner.style.display = 'none';
         suggestedQuestions.style.display = 'block';
         break;
       case 'rate-limited':
-        promptingStatus.textContent = '⏸️ Verbesserungen nach Hauptabfrage verfügbar';
+        statusText.textContent = 'Nach Hauptabfrage verfügbar';
         promptingSpinner.style.display = 'none';
         suggestedQuestions.style.display = 'none';
         break;
       case 'error':
-        smartPromptingContainer.style.display = 'none'; // Just hide on error
+        smartPromptingContainer.style.display = 'none';
         break;
       case 'hidden':
         smartPromptingContainer.style.display = 'none';
@@ -293,15 +305,10 @@ document.addEventListener('DOMContentLoaded', () => {
     
     questionsList.innerHTML = '';
     
-    suggestions.forEach((question, index) => {
+    suggestions.forEach((question) => {
       const questionElement = document.createElement('div');
       questionElement.className = 'suggestion-item';
-      
-      questionElement.innerHTML = `
-        <span class="suggestion-number">${index + 1}.</span>
-        ${question}
-      `;
-      
+      questionElement.textContent = question;
       questionsList.appendChild(questionElement);
     });
     
diff --git a/src/styles/global.css b/src/styles/global.css
index 976fce0..6383ef9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -967,6 +967,23 @@ input[type="checkbox"] {
   transition: var(--transition-fast);
 }
 
+.ai-input-layout {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.ai-textarea-section {
+  flex: 1;
+  min-width: 0;
+}
+
+.ai-suggestions-section {
+  flex: 0 0 320px;
+  min-height: 120px;
+}
+
 .ai-input-container textarea:focus {
   outline: none;
   border-color: var(--color-primary);
@@ -1922,46 +1939,139 @@ footer {
   .kb-entry .flex.gap-2 {
     gap: 0.5rem;
   }
+  .ai-input-layout {
+    gap: 0.75rem;
+  }
+  
+  .prompting-card {
+    padding: 0.75rem;
+  }
+  
+  .suggestion-item {
+    padding: 0.375rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  
+  .position-badge {
+    width: 28px;
+    height: 28px;
+    font-size: 0.875rem;
+  }
+  
+  .queue-status-card {
+    padding: 1rem;
+  }
 }
 
 /* Smart Prompting Styles - Simplified */
 .smart-prompting-container {
-  margin-top: 1rem;
+  height: 100%;
   animation: smartPromptSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.prompting-card {
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  opacity: 0.85;
+  transition: var(--transition-fast);
+}
+
+.prompting-card:hover {
+  opacity: 1;
+  border-color: var(--color-accent);
+}
+
 .prompting-status {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.status-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.status-text {
+  font-size: 0.8125rem;
   font-weight: 500;
   color: var(--color-text);
+  flex: 1;
 }
 
 .prompting-spinner {
-  display: inline-block;
+  flex-shrink: 0;
   animation: spin 1s linear infinite;
 }
 
 .suggested-questions {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.suggestions-header {
+  margin-bottom: 0.75rem;
+}
+
+.suggestions-label {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.questions-list {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .suggestion-item {
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background-color: var(--color-bg);
+  border: 1px solid transparent;
   border-radius: 0.375rem;
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--color-text);
-  border-left: 3px solid var(--color-accent);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--color-text-secondary);
+  border-left: 2px solid var(--color-accent);
   transition: var(--transition-fast);
+  position: relative;
 }
 
+.suggestion-item::before {
+  content: counter(suggestion-counter);
+  counter-increment: suggestion-counter;
+  position: absolute;
+  left: -8px;
+  top: -6px;
+  background-color: var(--color-accent);
+  color: white;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.625rem;
+  font-weight: 600;
+}
+.questions-list {
+  counter-reset: suggestion-counter;
+}
 
 .suggestion-number {
   color: var(--color-accent);
@@ -1969,17 +2079,161 @@ footer {
   margin-right: 0.5rem;
 }
 
-/* Improved animation - smoother and simpler */
+.dismiss-button {
+  align-self: flex-end;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: var(--transition-fast);
+  opacity: 0.7;
+}
+
+.dismiss-button:hover {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+/* Queue Status - Improved Design */
+.queue-status-card {
+  max-width: 400px;
+  margin: 1.5rem auto 0;
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.queue-position-display {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.position-badge {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.position-label {
+  font-weight: 600;
+  color: var(--color-text);
+  font-size: 0.9375rem;
+}
+
+.queue-details {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.queue-stat {
+  text-align: center;
+  padding: 0.75rem;
+  background-color: var(--color-bg);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+}
+
+.stat-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+
+.stat-unit {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-left: 0.25rem;
+}
+
+.queue-progress-container {
+  position: relative;
+}
+
+.queue-progress-track {
+  background-color: var(--color-bg);
+  border-radius: 8px;
+  height: 6px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  margin-bottom: 0.75rem;
+}
+
+.queue-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  width: 0%;
+  transition: width 0.3s ease;
+  border-radius: 8px;
+}
+
+.task-id-display {
+  text-align: center;
+  padding: 0.5rem;
+  background-color: var(--color-bg);
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-border);
+}
+
+.task-label {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  margin-right: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  font-weight: 500;
+}
+
+.task-id {
+  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 0.6875rem;
+  color: var(--color-text);
+  background-color: var(--color-bg-secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+}
+
 @keyframes smartPromptSlideIn {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateX(20px);
     max-height: 0;
   }
   to {
-    opacity: 1;
-    transform: translateY(0);
-    max-height: 200px;
+    opacity: 0.85;
+    transform: translateX(0);
+    max-height: 300px;
   }
 }