From 5308220441324d6a2c68574bd6af78e1d5b11964 Mon Sep 17 00:00:00 2001
From: Gal <mail@velouria.dev>
Date: Fri, 25 Jul 2025 00:16:42 +0200
Subject: [PATCH] refactor

---
 .../src/components/GermanSpeechInterface.vue  |   82 +-
 apps/german-app/src/main.js                   |    5 +-
 apps/german-app/src/views/ScenarioView.vue    |   38 +-
 .../src/components/ScenarioView.vue           |   22 +-
 apps/indonesian-app/src/main.js               |    5 +-
 .../shared/components/BaseSpeechInterface.vue |  997 ++++++++++++++++
 apps/shared/config/languages.js               |   62 +
 apps/shared/styles/speech-interface.css       | 1032 +++++++++++++++++
 8 files changed, 2156 insertions(+), 87 deletions(-)
 create mode 100644 apps/shared/components/BaseSpeechInterface.vue
 create mode 100644 apps/shared/config/languages.js
 create mode 100644 apps/shared/styles/speech-interface.css

diff --git a/apps/german-app/src/components/GermanSpeechInterface.vue b/apps/german-app/src/components/GermanSpeechInterface.vue
index 8a3ff6b..b9555fa 100644
--- a/apps/german-app/src/components/GermanSpeechInterface.vue
+++ b/apps/german-app/src/components/GermanSpeechInterface.vue
@@ -4,34 +4,34 @@
     <div v-if="showTutorial" class="tutorial-overlay" @click="closeTutorial">
       <div class="tutorial-popup" @click.stop>
         <div class="tutorial-header">
-          <h3>Willkommen bei Street Lingo! 🎉</h3>
+          <h3>Welcome to Street Lingo! 🎉</h3>
           <button @click="closeTutorial" class="tutorial-close">✕</button>
         </div>
         <div class="tutorial-content">
           <div class="tutorial-step">
             <div class="tutorial-icon">🎙️</div>
             <div class="tutorial-text">
-              <strong>Sprechen üben</strong>
-              <p>Klicken Sie auf "Gespräch beginnen", um mit KI-Charakteren in realen deutschen Szenarien zu sprechen</p>
+              <strong>Practice Speaking</strong>
+              <p>Click "Start Conversation" to begin chatting with AI characters in real German scenarios</p>
             </div>
           </div>
           <div class="tutorial-step">
             <div class="tutorial-icon">💡</div>
             <div class="tutorial-text">
-              <strong>Hilfe erhalten</strong>
-              <p>Aktivieren Sie die "Hilfe"-Schaltfläche und pausieren Sie während des Gesprächs, um hilfreiche Phrasen zu erhalten</p>
+              <strong>Get Help</strong>
+              <p>Enable the "Help" toggle and pause during conversation to get helpful phrase suggestions</p>
             </div>
           </div>
           <div class="tutorial-step">
             <div class="tutorial-icon">📊</div>
             <div class="tutorial-text">
-              <strong>Gesprächsanalyse</strong>
-              <p>Klicken Sie auf "Gespräch beenden", um personalisiertes Feedback zu Ihrem Deutsch zu erhalten</p>
+              <strong>Conversation Analysis</strong>
+              <p>Click "Finish Conversation" to get personalized feedback on your German</p>
             </div>
           </div>
         </div>
         <div class="tutorial-footer">
-          <button @click="closeTutorial" class="tutorial-got-it">Verstanden!</button>
+          <button @click="closeTutorial" class="tutorial-got-it">Got it!</button>
         </div>
       </div>
     </div>
@@ -53,13 +53,13 @@
                 :disabled="message.loadingTranslation"
                 class="translation-toggle"
               >
-                {{ message.loadingTranslation ? 'Übersetzen...' : '🌍 English zeigen' }}
+                {{ message.loadingTranslation ? 'Translating...' : '🌍 Show English' }}
               </button>
               
               <div v-if="message.showTranslation" class="translation-content">
                 <p class="translation-text">{{ message.englishTranslation }}</p>
                 <button @click="hideTranslation(message)" class="translation-toggle hide">
-                  ✕ English verstecken
+                  ✕ Hide English
                 </button>
               </div>
             </div>
@@ -80,7 +80,7 @@
       <!-- Inline Suggestion Panel -->
       <div v-if="showSuggestionPopup" class="suggestion-panel">
         <div class="suggestion-panel-header">
-          <h4>💡 Hilfe-Vorschläge</h4>
+          <h4>💡 Help Suggestions</h4>
           <button @click="closeSuggestionPopup" class="suggestion-close-btn">✕</button>
         </div>
         <div class="suggestion-panel-content" v-if="suggestionContent">
@@ -111,7 +111,7 @@
         class="start-conversation-btn"
         :disabled="isConnecting"
       >
-        🎙️ Gespräch beginnen
+        🎙️ Start Conversation
       </button>
       
       <button 
@@ -120,12 +120,12 @@
         :class="['record-btn', { recording: isRecording }]"
         :disabled="isConnecting || isFinished"
       >
-        {{ isRecording ? '🛑 Stopp' : '🎤 Sprechen' }}
+        {{ isRecording ? '🛑 Stop' : '🎤 Speak' }}
       </button>
       
       <div class="suggestion-toggle-container">
         <label class="suggestion-toggle-label" for="suggestion-toggle">
-          💡 Hilfe
+          💡 Help
         </label>
         <input 
           id="suggestion-toggle"
@@ -138,7 +138,7 @@
       <input 
         v-model="textInput"
         @keyup.enter="sendTextMessage"
-        placeholder="Deutsch eingeben..."
+        placeholder="Type in German..."
         class="text-input"
         :disabled="isRecording || isFinished"
       />
@@ -148,24 +148,24 @@
         :disabled="!textInput.trim() || isRecording || isFinished"
         class="send-btn"
       >
-        Senden
+        Send
       </button>
       
       <button 
         @click="resetConversation"
         class="reset-btn"
-        title="Neues Gespräch beginnen"
+        title="Start new conversation"
       >
-        🔄 Neustart
+        🔄 Reset
       </button>
       
       <button 
         @click="finishConversation"
         class="finish-btn"
-        title="Gespräch beenden und Bewertung erhalten"
+        title="End conversation and get assessment"
         :disabled="messages.length === 0 || isFinished || isLoadingFeedback"
       >
-        {{ isLoadingFeedback ? 'Feedback wird analysiert...' : '✓ Gespräch beenden' }}
+        {{ isLoadingFeedback ? 'Analyzing feedback...' : '✓ Finish Conversation' }}
       </button>
     </div>
 
@@ -186,14 +186,14 @@
         </div>
       </div>
       <div v-if="conversationComplete" class="completion-banner">
-        🎉 Alle Ziele erreicht! Gut gemacht!
+        🎉 All goals completed! Well done!
       </div>
     </div>
 
     <!-- Conversation Feedback -->
     <div class="feedback-section" v-if="conversationFeedback">
       <h3 class="feedback-title">
-        🎉 Großartige Unterhaltung! Hier ist hilfreiche Rückmeldung:
+        🎉 Great conversation! Here's some helpful feedback:
       </h3>
       
       <div class="feedback-content">
@@ -202,7 +202,7 @@
         </div>
         
         <div class="feedback-suggestions" v-if="conversationFeedback.suggestions && conversationFeedback.suggestions.length > 0">
-          <h4>💡 Tipps, um noch natürlicher zu klingen:</h4>
+          <h4>💡 Tips to sound even more natural:</h4>
           <div 
             v-for="(suggestion, index) in conversationFeedback.suggestions" 
             :key="index"
@@ -214,17 +214,17 @@
         </div>
         
         <div class="feedback-examples" v-if="conversationFeedback.examples && conversationFeedback.examples.length > 0">
-          <h4>🗣️ Alternative Ausdrucksmöglichkeiten:</h4>
+          <h4>🗣️ Alternative ways to express yourself:</h4>
           <div 
             v-for="(example, index) in conversationFeedback.examples" 
             :key="index"
             class="feedback-example"
           >
             <div class="example-original">
-              <strong>Sie sagten:</strong> "{{ example.original }}"
+              <strong>You said:</strong> "{{ example.original }}"
             </div>
             <div class="example-improved">
-              <strong>Sie könnten auch sagen:</strong> "{{ example.improved }}"
+              <strong>You could also say:</strong> "{{ example.improved }}"
             </div>
             <div class="example-reason" v-if="example.reason">
               <em>{{ example.reason }}</em>
@@ -233,7 +233,7 @@
         </div>
         
         <div class="feedback-encouragement-final">
-          <p>Üben Sie weiter - Sie machen das großartig! 🌟</p>
+          <p>Keep practicing - you're doing great! 🌟</p>
         </div>
       </div>
     </div>
@@ -428,7 +428,7 @@ export default {
     
     async startRecording() {
       if (this.connectionStatus !== 'connected') {
-        alert('Bitte warten Sie, bis die Verbindung hergestellt ist')
+        alert('Please wait for connection to establish')
         return
       }
       
@@ -472,7 +472,7 @@ export default {
         
       } catch (error) {
         console.error('Error starting recording:', error)
-        alert('Fehler beim Zugriff auf das Mikrofon: ' + error.message)
+        alert('Error accessing microphone: ' + error.message)
       }
     },
     
@@ -495,7 +495,7 @@ export default {
       
       this.isRecording = false
       this.isAutoListening = false
-      this.currentTranscription = 'Verarbeitung...'
+      this.currentTranscription = 'Processing...'
       this.isTranscriptionFinal = false
     },
     
@@ -571,10 +571,10 @@ export default {
     
     getStatusMessage() {
       const statusMessages = {
-        connecting: 'Verbindung wird hergestellt...',
-        connected: 'Verbunden',
-        disconnected: 'Getrennt',
-        error: 'Verbindungsfehler'
+        connecting: 'Connecting...',
+        connected: 'Connected',
+        disconnected: 'Disconnected',
+        error: 'Connection Error'
       }
       return statusMessages[this.connectionStatus] || 'Unbekannt'
     },
@@ -623,7 +623,7 @@ export default {
     },
 
     showConversationComplete() {
-      this.addMessage('system', '🎉 Herzlichen Glückwunsch! Sie haben alle Ziele für dieses Szenario erreicht!')
+      this.addMessage('system', '🎉 Congratulations! You have completed all goals for this scenario!')
       
       setTimeout(() => {
         this.scrollToBottom()
@@ -693,7 +693,7 @@ export default {
         message.showTranslation = true
       } catch (error) {
         console.error('Translation error:', error)
-        message.englishTranslation = 'Übersetzung fehlgeschlagen. Bitte versuchen Sie es erneut.'
+        message.englishTranslation = 'Translation failed. Please try again.'
         message.showTranslation = true
       } finally {
         message.loadingTranslation = false
@@ -881,11 +881,11 @@ export default {
 
     getTranscriptionStatus() {
       if (this.isTranscriptionFinal) {
-        return 'Fertig'
+        return 'Final'
       } else if (this.isAutoListening) {
-        return 'Auto-Zuhören...'
+        return 'Auto-listening...'
       } else {
-        return 'Höre zu...'
+        return 'Listening...'
       }
     },
 
@@ -1047,7 +1047,7 @@ export default {
           console.error('Failed to get conversation feedback:', response.status)
           // Show a fallback message
           this.conversationFeedback = {
-            encouragement: "Großartige Übung! Jedes Gespräch hilft Ihnen dabei, sich zu verbessern.",
+            encouragement: "Great job practicing! Every conversation helps you improve.",
             suggestions: [],
             examples: []
           }
@@ -1057,7 +1057,7 @@ export default {
         console.error('Error getting conversation feedback:', error)
         // Show a fallback message
         this.conversationFeedback = {
-          encouragement: "Großartige Übung! Jedes Gespräch hilft Ihnen dabei, sich zu verbessern.",
+          encouragement: "Great job practicing! Every conversation helps you improve.",
           suggestions: [],
           examples: []
         }
diff --git a/apps/german-app/src/main.js b/apps/german-app/src/main.js
index b39d85e..db7baa7 100644
--- a/apps/german-app/src/main.js
+++ b/apps/german-app/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import ScenarioView from './views/ScenarioView.vue'
+import { getLanguageConfig } from '../../shared/config/languages.js'
 
 const routes = [
   { path: '/', redirect: '/scenario/spati' },
@@ -13,4 +14,6 @@ const router = createRouter({
   routes
 })
 
-createApp(App).use(router).mount('#app')
\ No newline at end of file
+const app = createApp(App)
+app.config.globalProperties.$languageConfig = getLanguageConfig('german')
+app.use(router).mount('#app')
\ No newline at end of file
diff --git a/apps/german-app/src/views/ScenarioView.vue b/apps/german-app/src/views/ScenarioView.vue
index 6077ec0..4ad5654 100644
--- a/apps/german-app/src/views/ScenarioView.vue
+++ b/apps/german-app/src/views/ScenarioView.vue
@@ -3,7 +3,7 @@
     <div class="scenario-header" v-if="scenarioData">
       <h2>{{ getScenarioEmoji(type) }} {{ scenarioData.title }}</h2>
       <div class="scenario-goal">
-        <strong>Ziel:</strong> {{ scenarioData.goal }}
+        <strong>Goal:</strong> {{ scenarioData.goal }}
       </div>
     </div>
 
@@ -22,31 +22,31 @@
         </div>
 
         <div class="ai-chat-section">
-          <GermanSpeechInterface :scenario="type" />
+          <BaseSpeechInterface :scenario="type" :config="$languageConfig" />
         </div>
       </div>
 
       <div class="right-panel">
         <div class="context-section" v-if="scenarioData">
-          <h3>📍 Situationskontext</h3>
+          <h3>📍 Scenario Context</h3>
           <div class="context-info">
             <div class="context-item">
-              <div class="context-label">Ort</div>
+              <div class="context-label">Location</div>
               <div class="context-value">{{ scenarioData.location }}</div>
             </div>
             <div class="context-item">
-              <div class="context-label">Beschreibung</div>
+              <div class="context-label">Description</div>
               <div class="context-value">{{ scenarioData.description }}</div>
             </div>
             <div class="context-item">
-              <div class="context-label">Herausforderung</div>
+              <div class="context-label">Challenge</div>
               <div class="context-value">{{ scenarioData.challenge }}</div>
             </div>
           </div>
         </div>
 
         <div class="helpful-phrases" v-if="scenarioData?.helpful_phrases">
-          <h4>💬 Hilfreiche Phrasen:</h4>
+          <h4>💬 Helpful Phrases:</h4>
           <div class="phrases-list">
             <div 
               v-for="phrase in scenarioData.helpful_phrases" 
@@ -64,12 +64,12 @@
 </template>
 
 <script>
-import GermanSpeechInterface from '../components/GermanSpeechInterface.vue'
+import BaseSpeechInterface from '../../../shared/components/BaseSpeechInterface.vue'
 
 export default {
   name: 'ScenarioView',
   components: {
-    GermanSpeechInterface
+    BaseSpeechInterface
   },
   props: {
     type: {
@@ -109,26 +109,10 @@ export default {
       }
     },
     getScenarioEmoji(type) {
-      const emojiMap = {
-        'spati': '🏪',
-        'wg_viewing': '🏠',
-        'burgeramt': '🏛️',
-        'biergarten': '🍺',
-        'ber_airport': '✈️',
-        'arzt': '👨‍⚕️'
-      }
-      return emojiMap[type] || '📍'
+      return this.$languageConfig.scenarios[type]?.emoji || '📍'
     },
     getCharacterAvatar(type) {
-      const avatarMap = {
-        'spati': '👨‍💼',
-        'wg_viewing': '👩‍🎓',
-        'burgeramt': '👩‍💼',
-        'biergarten': '👨‍🍳',
-        'ber_airport': '👩‍💼',
-        'arzt': '👨‍⚕️'
-      }
-      return avatarMap[type] || '👤'
+      return this.$languageConfig.scenarios[type]?.avatar || '👤'
     }
   }
 }
diff --git a/apps/indonesian-app/src/components/ScenarioView.vue b/apps/indonesian-app/src/components/ScenarioView.vue
index de60d13..2462a39 100644
--- a/apps/indonesian-app/src/components/ScenarioView.vue
+++ b/apps/indonesian-app/src/components/ScenarioView.vue
@@ -22,7 +22,7 @@
         </div>
 
         <div class="ai-chat-section">
-          <SpeechInterface :scenario="type" />
+          <BaseSpeechInterface :scenario="type" :config="$languageConfig" />
         </div>
       </div>
 
@@ -64,12 +64,12 @@
 </template>
 
 <script>
-import SpeechInterface from './SpeechInterface.vue'
+import BaseSpeechInterface from '../../../shared/components/BaseSpeechInterface.vue'
 
 export default {
   name: 'ScenarioView',
   components: {
-    SpeechInterface
+    BaseSpeechInterface
   },
   props: {
     type: {
@@ -109,22 +109,10 @@ export default {
       }
     },
     getScenarioEmoji(type) {
-      const emojiMap = {
-        'warung': '🍜',
-        'ojek': '🏍️',
-        'alfamart': '🏪',
-        'coffee_shop': '☕'
-      }
-      return emojiMap[type] || '📍'
+      return this.$languageConfig.scenarios[type]?.emoji || '📍'
     },
     getCharacterAvatar(type) {
-      const avatarMap = {
-        'warung': '👨‍🍳',
-        'ojek': '👩‍🏋️',
-        'alfamart': '👩‍💼',
-        'coffee_shop': '👨‍💼'
-      }
-      return avatarMap[type] || '👤'
+      return this.$languageConfig.scenarios[type]?.avatar || '👤'
     }
   }
 }
diff --git a/apps/indonesian-app/src/main.js b/apps/indonesian-app/src/main.js
index 0e613a6..2671c07 100644
--- a/apps/indonesian-app/src/main.js
+++ b/apps/indonesian-app/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import ScenarioView from './components/ScenarioView.vue'
+import { getLanguageConfig } from '../../shared/config/languages.js'
 
 const routes = [
   { path: '/', redirect: '/scenario/warung' },
@@ -13,4 +14,6 @@ const router = createRouter({
   routes
 })
 
-createApp(App).use(router).mount('#app')
\ No newline at end of file
+const app = createApp(App)
+app.config.globalProperties.$languageConfig = getLanguageConfig('indonesian')
+app.use(router).mount('#app')
\ No newline at end of file
diff --git a/apps/shared/components/BaseSpeechInterface.vue b/apps/shared/components/BaseSpeechInterface.vue
new file mode 100644
index 0000000..ed74de0
--- /dev/null
+++ b/apps/shared/components/BaseSpeechInterface.vue
@@ -0,0 +1,997 @@
+<template>
+  <div class="speech-interface">
+    <!-- Tutorial Popup -->
+    <div v-if="showTutorial" class="tutorial-overlay" @click="closeTutorial">
+      <div class="tutorial-popup" @click.stop>
+        <div class="tutorial-header">
+          <h3>Welcome to Street Lingo! 🎉</h3>
+          <button @click="closeTutorial" class="tutorial-close">✕</button>
+        </div>
+        <div class="tutorial-content">
+          <div class="tutorial-step">
+            <div class="tutorial-icon">🎙️</div>
+            <div class="tutorial-text">
+              <strong>Practice Speaking</strong>
+              <p>Click "Start Conversation" to begin chatting with AI characters in real {{ config.name }} scenarios</p>
+            </div>
+          </div>
+          <div class="tutorial-step">
+            <div class="tutorial-icon">💡</div>
+            <div class="tutorial-text">
+              <strong>Get Help</strong>
+              <p>Enable the "Help" toggle and pause during conversation to get helpful phrase suggestions</p>
+            </div>
+          </div>
+          <div class="tutorial-step">
+            <div class="tutorial-icon">📊</div>
+            <div class="tutorial-text">
+              <strong>Conversation Analysis</strong>
+              <p>Click "Finish Conversation" to get personalized feedback on your {{ config.name }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="tutorial-footer">
+          <button @click="closeTutorial" class="tutorial-got-it">Got it!</button>
+        </div>
+      </div>
+    </div>
+    
+    <div class="conversation-area">
+      <div class="messages" ref="messagesContainer">
+        <div 
+          v-for="message in messages" 
+          :key="message.id"
+          :class="['message', message.type]"
+        >
+          <div class="message-content">
+            <p>{{ message.text }}</p>
+            
+            <div v-if="message.type === 'ai'" class="translation-section">
+              <button 
+                v-if="!message.showTranslation" 
+                @click="requestTranslation(message)"
+                :disabled="message.loadingTranslation"
+                class="translation-toggle"
+              >
+                {{ message.loadingTranslation ? 'Translating...' : '🌍 Show English' }}
+              </button>
+              
+              <div v-if="message.showTranslation" class="translation-content">
+                <p class="translation-text">{{ message.englishTranslation }}</p>
+                <button @click="hideTranslation(message)" class="translation-toggle hide">
+                  ✕ Hide English
+                </button>
+              </div>
+            </div>
+            
+            <div v-if="message.audio" class="audio-player">
+              <audio :src="message.audio" controls autoplay></audio>
+            </div>
+          </div>
+          <span class="timestamp">{{ formatTime(message.timestamp) }}</span>
+        </div>
+      </div>
+      
+      <div class="transcription-display" v-if="currentTranscription">
+        <p class="transcription-text">{{ currentTranscription }}</p>
+        <span class="transcription-status">{{ getTranscriptionStatus() }}</span>
+      </div>
+      
+      <!-- Recording Stopped Notification -->
+      <div v-if="showRecordingStoppedNotification" class="recording-stopped-notification">
+        <p>🛑 Recording stopped. Click "Speak" to continue.</p>
+      </div>
+      
+      <!-- Inline Suggestion Panel -->
+      <div v-if="showSuggestionPopup" class="suggestion-panel">
+        <div class="suggestion-panel-header">
+          <h4>💡 Help Suggestions</h4>
+          <button @click="closeSuggestionPopup" class="suggestion-close-btn">✕</button>
+        </div>
+        <div class="suggestion-panel-content" v-if="suggestionContent">
+          <p class="suggestion-panel-intro">{{ suggestionContent.intro }}</p>
+          <div class="suggestion-panel-list">
+            <div 
+              v-for="(suggestion, index) in suggestionContent.suggestions" 
+              :key="index"
+              class="suggestion-panel-item"
+            >
+              <div class="suggestion-panel-text">
+                <strong>{{ suggestion[config.phrases.nativeField] }}</strong>
+              </div>
+              <div class="suggestion-panel-translation">
+                {{ suggestion[config.phrases.translationField] }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="controls">
+      <!-- Start Conversation Button -->
+      <button 
+        v-if="showStartButton"
+        @click="startConversation"
+        class="start-conversation-btn"
+        :disabled="isConnecting"
+      >
+        🎙️ Start Conversation
+      </button>
+      
+      <button 
+        v-else
+        @click="toggleRecording"
+        :class="['record-btn', { recording: isRecording }]"
+        :disabled="isConnecting || isFinished"
+      >
+        {{ isRecording ? '🛑 Stop' : '🎤 Speak' }}
+      </button>
+      
+      <div class="suggestion-toggle-container">
+        <label class="suggestion-toggle-label" for="suggestion-toggle">
+          💡 Help
+        </label>
+        <input 
+          id="suggestion-toggle"
+          type="checkbox"
+          v-model="suggestionsEnabled"
+          class="suggestion-toggle"
+        />
+      </div>
+      
+      <input 
+        v-model="textInput"
+        @keyup.enter="sendTextMessage"
+        :placeholder="`Type in ${config.name}...`"
+        class="text-input"
+        :disabled="isRecording || isFinished"
+      />
+      
+      <button 
+        @click="sendTextMessage"
+        :disabled="!textInput.trim() || isRecording || isFinished"
+        class="send-btn"
+      >
+        Send
+      </button>
+      
+      <button 
+        @click="resetConversation"
+        class="reset-btn"
+        title="Start new conversation"
+      >
+        🔄 Reset
+      </button>
+      
+      <button 
+        @click="finishConversation"
+        class="finish-btn"
+        title="End conversation and get assessment"
+        :disabled="messages.length === 0 || isFinished || isLoadingFeedback"
+      >
+        {{ isLoadingFeedback ? 'Analyzing feedback...' : '✓ Finish Conversation' }}
+      </button>
+    </div>
+
+    <div class="goal-section" v-if="goalStatus">
+      <h3 class="goal-title">
+        🎯 Goal: {{ goalStatus.scenario_goal }}
+      </h3>
+      <div class="goal-checklist">
+        <div 
+          v-for="item in goalStatus.goal_items" 
+          :key="item.id"
+          :class="['goal-item', { completed: item.completed }]"
+        >
+          <span class="goal-checkbox">
+            {{ item.completed ? '✅' : '⏳' }}
+          </span>
+          <span class="goal-description">{{ item.description }}</span>
+        </div>
+      </div>
+      <div v-if="conversationComplete" class="completion-banner">
+        🎉 All goals completed! Well done!
+      </div>
+    </div>
+
+    <!-- Feedback Loading Notification -->
+    <div class="feedback-loading" v-if="isLoadingFeedback">
+      <div class="loading-content">
+        <div class="loading-spinner"></div>
+        <p>Analyzing your conversation...</p>
+      </div>
+    </div>
+
+    <!-- Conversation Feedback -->
+    <div class="feedback-section" v-if="conversationFeedback">
+      <h3 class="feedback-title">
+        🎉 Great conversation! Here's some helpful feedback:
+      </h3>
+      
+      <div class="feedback-content">
+        <div class="feedback-summary">
+          <p class="feedback-encouragement">{{ conversationFeedback.encouragement }}</p>
+        </div>
+        
+        <div class="feedback-suggestions" v-if="conversationFeedback.suggestions && conversationFeedback.suggestions.length > 0">
+          <h4>💡 Tips to sound even more natural:</h4>
+          <div 
+            v-for="(suggestion, index) in conversationFeedback.suggestions" 
+            :key="index"
+            class="feedback-suggestion"
+          >
+            <div class="suggestion-title">{{ suggestion.category }}</div>
+            <div class="suggestion-text">{{ suggestion.tip }}</div>
+          </div>
+        </div>
+        
+        <div class="feedback-examples" v-if="conversationFeedback.examples && conversationFeedback.examples.length > 0">
+          <h4>🗣️ Alternative ways to express yourself:</h4>
+          <div 
+            v-for="(example, index) in conversationFeedback.examples" 
+            :key="index"
+            class="feedback-example"
+          >
+            <div class="example-original">
+              <strong>You said:</strong> "{{ example.original }}"
+            </div>
+            <div class="example-improved">
+              <strong>You could also say:</strong> "{{ example.improved }}"
+            </div>
+            <div class="example-reason" v-if="example.reason">
+              <em>{{ example.reason }}</em>
+            </div>
+          </div>
+        </div>
+        
+        <div class="feedback-encouragement-final">
+          <p>Keep practicing - you're doing great! 🌟</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="status" v-if="connectionStatus">
+      <span :class="['status-indicator', connectionStatus]">
+        {{ getStatusMessage() }}
+      </span>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseSpeechInterface',
+  inject: ['updateConversationProgress'],
+  props: {
+    scenario: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      messages: [],
+      currentTranscription: '',
+      isTranscriptionFinal: false,
+      isRecording: false,
+      isConnecting: false,
+      textInput: '',
+      connectionStatus: 'disconnected',
+      websocket: null,
+      mediaRecorder: null,
+      audioStream: null,
+      audioContext: null,
+      messageId: 0,
+      wsBaseUrl: import.meta.env.VITE_WS_BASE_URL || 'ws://localhost:8000',
+      goalStatus: null,
+      conversationComplete: false,
+      scenarioData: null,
+      isAutoListening: false,
+      suggestionsEnabled: false,
+      showSuggestionPopup: false,
+      suggestionContent: null,
+      pauseTimer: null,
+      lastInteractionTime: null,
+      silenceTimer: null,
+      lastVoiceActivityTime: null,
+      showRecordingStoppedNotification: false,
+      isAICurrentlySpeaking: false,
+      lastAIResponseTime: null,
+      isFinished: false,
+      conversationFeedback: null,
+      isLoadingFeedback: false,
+      hasRequestedInitialGreeting: false,
+      showStartButton: true,
+      showTutorial: false
+    }
+  },
+  mounted() {
+    this.connectWebSocket()
+    this.loadScenarioData()
+    this.checkAndShowTutorial()
+  },
+  beforeUnmount() {
+    this.disconnect()
+    this.clearPauseTimer()
+  },
+  watch: {
+    scenario: {
+      handler(newScenario, oldScenario) {
+        if (oldScenario && newScenario !== oldScenario) {
+          this.resetConversationOnScenarioChange()
+        } else if (newScenario && !oldScenario) {
+          console.log('Scenario initially set to:', newScenario)
+        }
+      }
+    },
+    messages: {
+      handler(newMessages) {
+        this.updateConversationProgress(newMessages.length > 0)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    connectWebSocket() {
+      this.isConnecting = true
+      this.connectionStatus = 'connecting'
+      
+      try {
+        this.websocket = new WebSocket(`${this.wsBaseUrl}${this.config.wsEndpoint}`)
+        
+        this.websocket.onopen = () => {
+          this.connectionStatus = 'connected'
+          this.isConnecting = false
+          console.log(`${this.config.name} WebSocket connected`)
+        }
+        
+        this.websocket.onmessage = (event) => {
+          const data = JSON.parse(event.data)
+          this.handleWebSocketMessage(data)
+        }
+        
+        this.websocket.onclose = () => {
+          this.connectionStatus = 'disconnected'
+          this.isConnecting = false
+          console.log(`${this.config.name} WebSocket disconnected`)
+        }
+        
+        this.websocket.onerror = (error) => {
+          this.connectionStatus = 'error'
+          this.isConnecting = false
+          console.error(`${this.config.name} WebSocket error:`, error)
+        }
+      } catch (error) {
+        this.connectionStatus = 'error'
+        this.isConnecting = false
+        console.error('Failed to connect:', error)
+      }
+    },
+    
+    handleWebSocketMessage(data) {
+      if (data.type === 'transcription') {
+        this.currentTranscription = data.transcript
+        this.isTranscriptionFinal = data.is_final
+        
+        if (data.is_final) {
+          if (data.transcript.trim()) {
+            this.addMessage('user', data.transcript)
+            this.lastInteractionTime = Date.now()
+            this.clearPauseTimer()
+            this.startPauseDetection()
+          }
+          this.currentTranscription = ''
+        }
+      } else if (data.type === 'ai_response') {
+        this.addMessage('ai', data.text, data.audio)
+        if (data.goal_status) {
+          this.goalStatus = data.goal_status
+        }
+        if (data.conversation_complete) {
+          this.conversationComplete = true
+          this.showConversationComplete()
+        }
+        this.lastInteractionTime = Date.now()
+        this.isAICurrentlySpeaking = true
+        this.lastAIResponseTime = Date.now()
+        this.startPauseDetection()
+      } else if (data.type === 'recording_timeout') {
+        const timeSinceAIResponse = this.lastAIResponseTime ? Date.now() - this.lastAIResponseTime : Infinity
+        const timeSinceLastVoice = this.lastVoiceActivityTime ? Date.now() - this.lastVoiceActivityTime : Infinity
+        
+        if (!this.isAICurrentlySpeaking && 
+            timeSinceAIResponse > 15000 && 
+            timeSinceLastVoice < 30000 && 
+            timeSinceLastVoice > 5000) {
+          this.showRecordingStoppedNotification = true
+          setTimeout(() => {
+            this.showRecordingStoppedNotification = false
+          }, 5000)
+        }
+      } else if (data.type === 'error') {
+        this.addMessage('error', data.message)
+      }
+    },
+    
+    async toggleRecording() {
+      if (this.isRecording) {
+        this.stopRecording()
+      } else {
+        await this.startRecording()
+      }
+    },
+    
+    async startRecording() {
+      if (this.connectionStatus !== 'connected') {
+        alert('Please wait for connection to establish')
+        return
+      }
+      
+      try {
+        this.audioStream = await navigator.mediaDevices.getUserMedia({ 
+          audio: {
+            sampleRate: 48000,
+            channelCount: 1,
+            echoCancellation: true,
+            noiseSuppression: true
+          }
+        })
+        
+        if (!this.audioContext) {
+          this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
+        }
+        
+        this.mediaRecorder = new MediaRecorder(this.audioStream, {
+          mimeType: 'audio/webm;codecs=opus'
+        })
+        
+        this.mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            this.sendAudioChunk(event.data)
+          }
+        }
+        
+        this.mediaRecorder.start(250)
+        this.isRecording = true
+        this.currentTranscription = ''
+        this.isTranscriptionFinal = false
+        
+        if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+          const startMessage = {
+            type: 'audio_start',
+            scenario_context: this.scenario
+          }
+          this.websocket.send(JSON.stringify(startMessage))
+        }
+        
+      } catch (error) {
+        console.error('Error starting recording:', error)
+        alert('Error accessing microphone: ' + error.message)
+      }
+    },
+    
+    stopRecording() {
+      if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+        this.mediaRecorder.stop()
+      }
+      
+      if (this.audioStream) {
+        this.audioStream.getTracks().forEach(track => track.stop())
+      }
+      
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        const endMessage = {
+          type: 'audio_end',
+          scenario_context: this.scenario
+        }
+        this.websocket.send(JSON.stringify(endMessage))
+      }
+      
+      this.isRecording = false
+      this.isAutoListening = false
+      this.currentTranscription = 'Processing...'
+      this.isTranscriptionFinal = false
+    },
+    
+    async sendAudioChunk(audioBlob) {
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        const arrayBuffer = await audioBlob.arrayBuffer()
+        const base64Audio = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)))
+        
+        const message = {
+          type: 'audio_chunk',
+          audio: base64Audio,
+          scenario_context: this.scenario
+        }
+        
+        this.websocket.send(JSON.stringify(message))
+      }
+    },
+    
+    sendTextMessage() {
+      if (!this.textInput.trim() || this.connectionStatus !== 'connected') return
+      
+      const message = {
+        type: 'text_message',
+        text: this.textInput,
+        scenario_context: this.scenario
+      }
+      
+      this.addMessage('user', this.textInput)
+      this.websocket.send(JSON.stringify(message))
+      this.textInput = ''
+      this.lastInteractionTime = Date.now()
+      this.clearPauseTimer()
+      this.startPauseDetection()
+    },
+    
+    addMessage(type, text, audio = null) {
+      const message = {
+        id: this.messageId++,
+        type,
+        text,
+        audio: audio ? `data:audio/wav;base64,${audio}` : null,
+        timestamp: new Date(),
+        showTranslation: false,
+        loadingTranslation: false,
+        englishTranslation: null
+      }
+      
+      this.messages.push(message)
+      this.$nextTick(() => {
+        this.scrollToBottom()
+        
+        if (type === 'ai' && audio) {
+          this.setupAutoRecording(message)
+        }
+      })
+    },
+    
+    scrollToBottom() {
+      const container = this.$refs.messagesContainer
+      if (container) {
+        container.scrollTop = container.scrollHeight
+      }
+    },
+    
+    formatTime(timestamp) {
+      return timestamp.toLocaleTimeString('en-US', { 
+        hour12: false, 
+        hour: '2-digit', 
+        minute: '2-digit' 
+      })
+    },
+    
+    getStatusMessage() {
+      const statusMessages = {
+        connecting: 'Connecting...',
+        connected: 'Connected',
+        disconnected: 'Disconnected',
+        error: 'Connection Error'
+      }
+      return statusMessages[this.connectionStatus] || 'Unknown'
+    },
+    
+    resetConversation() {
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        const resetMessage = {
+          type: 'conversation_reset'
+        }
+        this.websocket.send(JSON.stringify(resetMessage))
+      }
+      
+      this.messages = []
+      this.currentTranscription = ''
+      this.isTranscriptionFinal = false
+      this.isFinished = false
+      this.conversationFeedback = null
+      this.resetGoals()
+    },
+    
+    disconnect() {
+      this.stopRecording()
+      if (this.websocket) {
+        this.websocket.close()
+      }
+    },
+
+    async loadScenarioData() {
+      try {
+        const response = await fetch(`${this.wsBaseUrl.replace('ws', 'http')}${this.config.apiEndpoint}`)
+        const scenarios = await response.json()
+        this.scenarioData = scenarios[this.scenario]
+        if (this.scenarioData) {
+          this.goalStatus = {
+            scenario_goal: this.scenarioData.goal,
+            goal_items: this.scenarioData.goal_items.map(item => ({
+              ...item,
+              completed: false
+            })),
+            all_completed: false
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load scenario data:', error)
+      }
+    },
+
+    showConversationComplete() {
+      this.addMessage('system', '🎉 Congratulations! You have completed all goals for this scenario!')
+      
+      setTimeout(() => {
+        this.scrollToBottom()
+      }, 100)
+    },
+
+    resetGoals() {
+      if (this.scenarioData) {
+        this.goalStatus = {
+          scenario_goal: this.scenarioData.goal,
+          goal_items: this.scenarioData.goal_items.map(item => ({
+            ...item,
+            completed: false
+          })),
+          all_completed: false
+        }
+      }
+      this.conversationComplete = false
+      this.isFinished = false
+      this.conversationFeedback = null
+    },
+
+    resetConversationOnScenarioChange() {
+      this.loadScenarioData()
+      this.messages = []
+      this.currentTranscription = ''
+      this.isTranscriptionFinal = false
+      this.conversationComplete = false
+      this.isFinished = false
+      this.conversationFeedback = null
+      this.hasRequestedInitialGreeting = false
+      
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+        const resetMessage = {
+          type: 'conversation_reset'
+        }
+        this.websocket.send(JSON.stringify(resetMessage))
+      }
+      
+      this.showStartButton = true
+    },
+
+    async requestTranslation(message) {
+      message.loadingTranslation = true
+      
+      try {
+        const response = await fetch('/api/translate', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            text: message.text,
+            source_language: this.config.translation.sourceLanguage,
+            target_language: this.config.translation.targetLanguage
+          })
+        })
+
+        if (!response.ok) {
+          throw new Error('Translation failed')
+        }
+
+        const data = await response.json()
+        message.englishTranslation = data.translation
+        message.showTranslation = true
+      } catch (error) {
+        console.error('Translation error:', error)
+        message.englishTranslation = 'Translation failed. Please try again.'
+        message.showTranslation = true
+      } finally {
+        message.loadingTranslation = false
+      }
+    },
+
+    hideTranslation(message) {
+      message.showTranslation = false
+    },
+
+    requestInitialGreeting() {
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN && !this.hasRequestedInitialGreeting) {
+        setTimeout(() => {
+          if (this.scenario) {
+            const greetingMessage = {
+              type: 'initial_greeting',
+              scenario_context: this.scenario
+            }
+            this.websocket.send(JSON.stringify(greetingMessage))
+            this.hasRequestedInitialGreeting = true
+            console.log('Sent initial greeting for scenario:', this.scenario)
+          } else {
+            console.log('No scenario set, retrying in 300ms')
+            setTimeout(() => this.requestInitialGreeting(), 300)
+          }
+        }, 200)
+      }
+    },
+
+    checkAndRequestGreeting() {
+      if (this.websocket && this.websocket.readyState === WebSocket.OPEN && 
+          this.scenario && !this.hasRequestedInitialGreeting) {
+        this.requestInitialGreeting()
+      }
+    },
+
+    startConversation() {
+      this.showStartButton = false
+      this.checkAndRequestGreeting()
+    },
+
+    checkAndShowTutorial() {
+      const hasSeenTutorial = localStorage.getItem('streetLingo_tutorialSeen')
+      if (!hasSeenTutorial) {
+        this.showTutorial = true
+      }
+    },
+
+    closeTutorial() {
+      this.showTutorial = false
+      localStorage.setItem('streetLingo_tutorialSeen', 'true')
+    },
+
+    setupAutoRecording(message) {
+      this.$nextTick(() => {
+        const audioElements = this.$refs.messagesContainer.querySelectorAll('audio')
+        const latestAudio = audioElements[audioElements.length - 1]
+        
+        if (latestAudio) {
+          latestAudio.addEventListener('ended', () => {
+            setTimeout(() => {
+              if (!this.isRecording && !this.conversationComplete) {
+                this.startAutoRecording()
+              }
+              this.isAICurrentlySpeaking = false
+            }, 500)
+            
+            this.startPauseDetection()
+            
+            setTimeout(() => {
+              if (this.suggestionsEnabled && !this.showSuggestionPopup && !this.conversationComplete) {
+                this.showSuggestions()
+              }
+            }, 15000)
+          })
+        }
+      })
+    },
+
+    async startAutoRecording() {
+      try {
+        this.isAutoListening = true
+        await this.startRecording()
+        this.startVoiceActivityDetection()
+      } catch (error) {
+        console.error('Auto-recording failed:', error)
+        this.isAutoListening = false
+      }
+    },
+
+    startVoiceActivityDetection() {
+      let silenceTimer = null
+      let voiceDetected = false
+      const silenceThreshold = 3000
+      
+      if (this.audioStream && this.audioContext) {
+        const source = this.audioContext.createMediaStreamSource(this.audioStream)
+        const analyzer = this.audioContext.createAnalyser()
+        analyzer.fftSize = 256
+        source.connect(analyzer)
+        
+        const bufferLength = analyzer.frequencyBinCount
+        const dataArray = new Uint8Array(bufferLength)
+        
+        const checkVoiceActivity = () => {
+          if (!this.isRecording) return
+          
+          analyzer.getByteFrequencyData(dataArray)
+          
+          const average = dataArray.reduce((a, b) => a + b) / bufferLength
+          const volumeThreshold = 15
+          
+          if (average > volumeThreshold) {
+            voiceDetected = true
+            this.lastVoiceActivityTime = Date.now()
+            this.clearPauseTimer()
+            
+            if (silenceTimer) {
+              clearTimeout(silenceTimer)
+              silenceTimer = null
+            }
+          } else if (voiceDetected) {
+            if (!silenceTimer) {
+              silenceTimer = setTimeout(() => {
+                if (this.isRecording) {
+                  this.stopRecording()
+                  if (!this.isAICurrentlySpeaking && voiceDetected && this.lastVoiceActivityTime) {
+                    const timeSinceLastVoice = Date.now() - this.lastVoiceActivityTime
+                    const timeSinceAIResponse = this.lastAIResponseTime ? Date.now() - this.lastAIResponseTime : Infinity
+                    
+                    if (timeSinceLastVoice < 10000 && timeSinceAIResponse > 5000) {
+                      this.showRecordingStoppedNotification = true
+                      setTimeout(() => {
+                        this.showRecordingStoppedNotification = false
+                      }, 5000)
+                    }
+                  }
+                }
+              }, silenceThreshold)
+            }
+            
+            if (!voiceDetected) {
+              this.startPauseDetection()
+            }
+          }
+          
+          if (this.isRecording) {
+            requestAnimationFrame(checkVoiceActivity)
+          }
+        }
+        
+        checkVoiceActivity()
+      }
+    },
+
+    getTranscriptionStatus() {
+      if (this.isTranscriptionFinal) {
+        return 'Final'
+      } else if (this.isAutoListening) {
+        return 'Auto-listening...'
+      } else {
+        return 'Listening...'
+      }
+    },
+
+    startPauseDetection() {
+      if (!this.suggestionsEnabled) {
+        return
+      }
+      
+      this.clearPauseTimer()
+      this.pauseTimer = setTimeout(() => {
+        if (!this.conversationComplete && this.messages.length > 0 && !this.showSuggestionPopup) {
+          this.showSuggestions()
+        }
+      }, 20000)
+    },
+
+    clearPauseTimer() {
+      if (this.pauseTimer) {
+        clearTimeout(this.pauseTimer)
+        this.pauseTimer = null
+      }
+    },
+
+    async showSuggestions() {
+      if (!this.suggestionsEnabled || this.showSuggestionPopup) return
+      
+      const timeSinceLastVoice = this.lastVoiceActivityTime ? Date.now() - this.lastVoiceActivityTime : Infinity
+      if (timeSinceLastVoice < 5000) {
+        return
+      }
+      
+      try {
+        const requestData = {
+          language: this.config.code === 'de' ? 'german' : 'indonesian',
+          scenario: this.scenario,
+          conversation_history: this.messages.slice(-4).map(msg => ({
+            type: msg.type,
+            text: msg.text
+          }))
+        }
+        
+        const response = await fetch(`${this.wsBaseUrl.replace('ws', 'http')}/api/suggestions`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(requestData)
+        })
+        
+        if (response.ok) {
+          const data = await response.json()
+          this.suggestionContent = data
+          this.showSuggestionPopup = true
+          
+          this.$nextTick(() => {
+            if (this.isRecording) {
+              this.stopRecording()
+              setTimeout(() => {
+                this.startAutoRecording()
+              }, 500)
+            }
+          })
+        }
+      } catch (error) {
+        console.error('Error fetching suggestions:', error)
+      }
+    },
+
+    closeSuggestionPopup() {
+      this.showSuggestionPopup = false
+      this.suggestionContent = null
+      
+      if (this.isRecording) {
+        this.stopRecording()
+        setTimeout(() => {
+          this.startAutoRecording()
+        }, 200)
+      }
+    },
+
+    async finishConversation() {
+      if (this.isRecording) {
+        this.stopRecording()
+      }
+      
+      this.isFinished = true
+      this.isLoadingFeedback = true
+      
+      if (this.showSuggestionPopup) {
+        this.closeSuggestionPopup()
+      }
+      
+      try {
+        const response = await fetch(`${this.wsBaseUrl.replace('ws', 'http')}/api/conversation-feedback`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            language: this.config.code === 'de' ? 'german' : 'indonesian',
+            scenario: this.scenario,
+            conversation_history: this.messages.map(msg => ({
+              type: msg.type,
+              text: msg.text,
+              timestamp: msg.timestamp
+            }))
+          })
+        })
+        
+        if (response.ok) {
+          const feedback = await response.json()
+          this.conversationFeedback = feedback
+          this.isLoadingFeedback = false
+          
+          this.$nextTick(() => {
+            this.scrollToBottom()
+          })
+        } else {
+          this.conversationFeedback = {
+            encouragement: "Great job practicing! Every conversation helps you improve.",
+            suggestions: [],
+            examples: []
+          }
+          this.isLoadingFeedback = false
+        }
+      } catch (error) {
+        console.error('Error getting conversation feedback:', error)
+        this.conversationFeedback = {
+          encouragement: "Great job practicing! Every conversation helps you improve.",
+          suggestions: [],
+          examples: []
+        }
+        this.isLoadingFeedback = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import '../styles/speech-interface.css';
+</style>
\ No newline at end of file
diff --git a/apps/shared/config/languages.js b/apps/shared/config/languages.js
new file mode 100644
index 0000000..0ccb11e
--- /dev/null
+++ b/apps/shared/config/languages.js
@@ -0,0 +1,62 @@
+export const LANGUAGE_CONFIGS = {
+  german: {
+    code: 'de',
+    name: 'German',
+    flag: '🇩🇪',
+    apiEndpoint: '/api/scenarios/german',
+    wsEndpoint: '/ws/speech/german',
+    theme: 'german-theme',
+    defaultScenario: 'spati',
+    branding: {
+      title: 'Street Lingo',
+      tagline: 'Deutsch lernen in Berlin - Learn German through real Berlin scenarios'
+    },
+    translation: {
+      sourceLanguage: 'de',
+      targetLanguage: 'en'
+    },
+    phrases: {
+      nativeField: 'german_text',
+      translationField: 'english_meaning'
+    },
+    scenarios: {
+      'spati': { name: 'Späti Shopping', emoji: '🏪', avatar: '👨‍💼' },
+      'wg_viewing': { name: 'WG Apartment Viewing', emoji: '🏠', avatar: '👩‍🎓' },
+      'burgeramt': { name: 'Bürgeramt Visit', emoji: '🏛️', avatar: '👩‍💼' },
+      'biergarten': { name: 'Biergarten Chat', emoji: '🍺', avatar: '👨‍🍳' },
+      'ber_airport': { name: 'BER Airport Train Help', emoji: '✈️', avatar: '👩‍💼' },
+      'arzt': { name: 'Doctor Visit', emoji: '👨‍⚕️', avatar: '👨‍⚕️' }
+    }
+  },
+  indonesian: {
+    code: 'id',
+    name: 'Indonesian',
+    flag: '🇮🇩',
+    apiEndpoint: '/api/scenarios/indonesian',
+    wsEndpoint: '/ws/speech/indonesian',
+    theme: 'indonesian-theme',
+    defaultScenario: 'warung',
+    branding: {
+      title: 'Street Lingo',
+      tagline: 'Learn Indonesian through everyday scenarios'
+    },
+    translation: {
+      sourceLanguage: 'id',
+      targetLanguage: 'en'
+    },
+    phrases: {
+      nativeField: 'indonesian_text',
+      translationField: 'english_meaning'
+    },
+    scenarios: {
+      'warung': { name: 'Warung Dining', emoji: '🍜', avatar: '👨‍🍳' },
+      'ojek': { name: 'Ojek Ride', emoji: '🏍️', avatar: '👩‍🦱' },
+      'alfamart': { name: 'Alfamart Shopping', emoji: '🏪', avatar: '👩‍💼' },
+      'coffee_shop': { name: 'Coffee Shop Small Talk', emoji: '☕', avatar: '👨‍💼' }
+    }
+  }
+}
+
+export function getLanguageConfig(language) {
+  return LANGUAGE_CONFIGS[language] || LANGUAGE_CONFIGS.indonesian
+}
\ No newline at end of file
diff --git a/apps/shared/styles/speech-interface.css b/apps/shared/styles/speech-interface.css
new file mode 100644
index 0000000..5c13732
--- /dev/null
+++ b/apps/shared/styles/speech-interface.css
@@ -0,0 +1,1032 @@
+.speech-interface {
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+  padding: 1.5rem; /* Add padding to prevent goal section from touching edges */
+}
+
+.conversation-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.messages {
+  overflow-y: auto;
+  padding: 1.5rem;
+  background: var(--surface-alt);
+  margin-bottom: 1rem;
+  border-radius: var(--radius) var(--radius) 0 0;
+  height: 400px; /* Fixed height for messages area */
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) var(--surface-alt);
+}
+
+.messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.messages::-webkit-scrollbar-track {
+  background: var(--surface-alt);
+}
+
+.messages::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+.messages::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+.message {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border-radius: var(--radius-lg);
+  max-width: 75%;
+  position: relative;
+  animation: messageSlide 0.3s ease;
+}
+
+@keyframes messageSlide {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message.user {
+  background: var(--primary);
+  color: white;
+  margin-left: auto;
+  border-bottom-right-radius: 4px;
+}
+
+.message.ai {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  margin-right: auto;
+  border-bottom-left-radius: 4px;
+}
+
+.message.system {
+  background: var(--accent);
+  color: white;
+  margin: 0 auto;
+  text-align: center;
+  font-weight: 500;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+}
+
+.message.error {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+  margin-right: auto;
+}
+
+.message-content {
+  margin-bottom: 0.5rem;
+}
+
+.message-content p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.audio-player {
+  margin-top: 0.75rem;
+}
+
+.audio-player audio {
+  width: 100%;
+  max-width: 250px;
+  height: 32px;
+  border-radius: 16px;
+}
+
+.timestamp {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  opacity: 0.7;
+  font-weight: 400;
+}
+
+.message.user .timestamp {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Translation styles */
+.translation-section {
+  margin-top: 0.75rem;
+  border-top: 1px solid var(--border);
+  padding-top: 0.75rem;
+}
+
+.translation-toggle {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  color: var(--text-light);
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.translation-toggle:hover {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+  transform: translateY(-1px);
+}
+
+.translation-toggle:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.translation-toggle.hide {
+  background: var(--surface);
+  color: var(--text-muted);
+  font-size: 0.7rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.translation-toggle.hide:hover {
+  background: var(--text-muted);
+  color: white;
+}
+
+.translation-content {
+  margin-top: 0.5rem;
+}
+
+.translation-text {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  margin: 0 0 0.5rem 0;
+  font-style: italic;
+  color: var(--text-light);
+  font-size: 0.9rem;
+  line-height: 1.4;
+  position: relative;
+}
+
+.translation-text::before {
+  content: "🇺🇸";
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
+.transcription-display {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: 1rem;
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+  border-left: 3px solid var(--secondary);
+}
+
+.transcription-text {
+  font-style: italic;
+  margin-bottom: 0.5rem;
+  color: var(--text-light);
+}
+
+.transcription-status {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.recording-stopped-notification {
+  background: var(--secondary);
+  color: white;
+  padding: 1rem;
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+  text-align: center;
+  box-shadow: var(--shadow);
+  animation: slideIn 0.3s ease;
+}
+
+.recording-stopped-notification p {
+  margin: 0;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.controls {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 1rem;
+  background: var(--surface);
+  border-radius: 0 0 var(--radius) var(--radius);
+  border-top: 1px solid var(--border);
+}
+
+.record-btn {
+  background: var(--accent);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.25rem;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: 100px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.record-btn:hover {
+  background: #059669;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow);
+}
+
+.record-btn.recording {
+  background: #dc2626;
+  animation: recordingPulse 2s ease-in-out infinite;
+}
+
+.record-btn:disabled {
+  background: var(--text-muted);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+@keyframes recordingPulse {
+  0%, 100% { 
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
+  }
+  50% { 
+    transform: scale(1.02);
+    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
+  }
+}
+
+.text-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9rem;
+  background: var(--surface);
+  color: var(--text);
+  transition: all 0.2s ease;
+}
+
+.text-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.text-input::placeholder {
+  color: var(--text-muted);
+}
+
+.send-btn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.25rem;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-sm);
+}
+
+.send-btn:hover {
+  background: var(--primary-dark);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow);
+}
+
+.send-btn:disabled {
+  background: var(--text-muted);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.reset-btn {
+  background: var(--surface);
+  color: var(--text-light);
+  border: 1px solid var(--border);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.reset-btn:hover {
+  background: var(--surface-alt);
+  border-color: var(--text-muted);
+  transform: translateY(-1px);
+}
+
+.finish-btn {
+  background: var(--accent);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.25rem;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-sm);
+}
+
+.finish-btn:hover:not(:disabled) {
+  background: #047857;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow);
+}
+
+.finish-btn:disabled {
+  background: var(--text-muted);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+
+.status {
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-lg);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.status-indicator.connected {
+  background: #f0fdf4;
+  color: var(--accent);
+  border: 1px solid #bbf7d0;
+}
+
+.status-indicator.connecting {
+  background: #fffbeb;
+  color: var(--secondary);
+  border: 1px solid #fed7aa;
+}
+
+.status-indicator.disconnected,
+.status-indicator.error {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+/* Goal Progress Styles */
+.goal-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+.goal-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--primary);
+}
+
+.goal-title {
+  margin: 0 0 1rem 0;
+  color: var(--text);
+  font-size: 1.1rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.goal-checklist {
+  margin-bottom: 1rem;
+}
+
+.goal-item {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 0;
+  transition: all 0.2s ease;
+  border-radius: var(--radius);
+}
+
+.goal-item.completed {
+  opacity: 0.7;
+}
+
+.goal-checkbox {
+  margin-right: 0.75rem;
+  font-size: 1.1rem;
+  transition: transform 0.2s ease;
+}
+
+.goal-item.completed .goal-checkbox {
+  transform: scale(1.1);
+}
+
+.goal-description {
+  color: var(--text-light);
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.goal-item.completed .goal-description {
+  text-decoration: line-through;
+  color: var(--text-muted);
+}
+
+.completion-banner {
+  background: var(--accent);
+  color: white;
+  padding: 1.25rem;
+  border-radius: var(--radius-lg);
+  text-align: center;
+  font-weight: 600;
+  font-size: 1rem;
+  box-shadow: var(--shadow);
+  animation: celebrationPulse 3s ease-in-out;
+}
+
+@keyframes celebrationPulse {
+  0%, 100% { 
+    transform: scale(1);
+    box-shadow: var(--shadow);
+  }
+  50% { 
+    transform: scale(1.02);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+@media (max-width: 768px) {
+  .controls {
+    gap: 0.5rem;
+    padding: 0.75rem;
+    flex-wrap: wrap;
+  }
+  
+  .suggestion-toggle-container {
+    margin-left: 0;
+    margin-top: 0.5rem;
+  }
+  
+  .suggestion-panel {
+    margin-bottom: 0.75rem;
+  }
+  
+  .suggestion-panel-content {
+    padding: 0.75rem;
+  }
+  
+  .suggestion-panel-item {
+    padding: 0.5rem;
+  }
+  
+  .record-btn,
+  .send-btn {
+    padding: 0.625rem 1rem;
+    font-size: 0.85rem;
+    min-width: 80px;
+  }
+  
+  .text-input {
+    min-width: 0;
+    flex: 1 1 100%;
+    order: -1;
+    margin-bottom: 0.5rem;
+  }
+  
+  .speech-interface {
+    padding: 1rem; /* Reduce padding on mobile */
+  }
+  
+  .goal-section {
+    padding: 1rem;
+  }
+  
+  .messages {
+    padding: 1rem;
+    height: 300px; /* Fixed height for mobile */
+  }
+}
+
+/* Suggestion Toggle Styles */
+.suggestion-toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+.suggestion-toggle-label {
+  font-size: 0.8rem;
+  color: var(--text-light);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.suggestion-toggle {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--primary);
+}
+
+/* Inline Suggestion Panel Styles */
+.suggestion-panel {
+  background: var(--surface);
+  border: 1px solid var(--primary);
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+  box-shadow: var(--shadow-sm);
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.suggestion-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-alt);
+}
+
+.suggestion-panel-header h4 {
+  margin: 0;
+  color: var(--text);
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.suggestion-close-btn {
+  background: none;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 0.25rem;
+  border-radius: var(--radius);
+  transition: all 0.2s ease;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.suggestion-close-btn:hover {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.suggestion-panel-content {
+  padding: 1rem;
+}
+
+.suggestion-panel-intro {
+  color: var(--text-light);
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
+}
+
+.suggestion-panel-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.suggestion-panel-item {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  transition: all 0.2s ease;
+}
+
+.suggestion-panel-text {
+  margin-bottom: 0.25rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.suggestion-panel-translation {
+  font-size: 0.8rem;
+  opacity: 0.7;
+  font-style: italic;
+  color: var(--text-muted);
+}
+
+/* Feedback Section Styles */
+.feedback-section {
+  background: var(--surface);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+.feedback-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--accent);
+}
+
+.feedback-title {
+  margin: 0 0 1rem 0;
+  color: var(--text);
+  font-size: 1.2rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.feedback-content {
+  margin-bottom: 1rem;
+}
+
+.feedback-encouragement {
+  font-size: 1rem;
+  color: var(--text-light);
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-style: italic;
+}
+
+.feedback-suggestions h4,
+.feedback-examples h4 {
+  color: var(--text);
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 1.5rem 0 1rem 0;
+}
+
+.feedback-suggestion {
+  background: var(--surface-alt);
+  border-radius: var(--radius);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  border-left: 3px solid var(--primary);
+}
+
+.suggestion-title {
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+
+.suggestion-text {
+  color: var(--text-light);
+  line-height: 1.5;
+}
+
+.feedback-example {
+  background: var(--surface-alt);
+  border-radius: var(--radius);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  border-left: 3px solid var(--secondary);
+}
+
+.example-original {
+  margin-bottom: 0.5rem;
+  color: var(--text-light);
+}
+
+.example-improved {
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+
+.example-reason {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.feedback-encouragement-final {
+  text-align: center;
+  margin-top: 1.5rem;
+  color: var(--text-light);
+  font-size: 1rem;
+  font-style: italic;
+}
+
+/* Feedback Loading Styles */
+.feedback-loading {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+.feedback-loading::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--primary);
+}
+
+.loading-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  text-align: center;
+}
+
+.loading-content p {
+  margin: 0;
+  color: var(--text-light);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--surface-alt);
+  border-top: 3px solid var(--primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Start Conversation Button Styles */
+.start-conversation-btn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 200px;
+  justify-content: center;
+}
+
+.start-conversation-btn:hover:not(:disabled) {
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.start-conversation-btn:disabled {
+  background: var(--text-muted);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: var(--shadow-sm);
+}
+
+/* Tutorial Popup Styles */
+.tutorial-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  backdrop-filter: blur(4px);
+}
+
+.tutorial-popup {
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: tutorialSlideIn 0.3s ease-out;
+}
+
+@keyframes tutorialSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.tutorial-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 1.5rem 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.tutorial-header h3 {
+  margin: 0;
+  color: var(--text);
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.tutorial-close {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 0.25rem;
+  border-radius: var(--radius);
+  transition: all 0.2s ease;
+}
+
+.tutorial-close:hover {
+  background: var(--surface-alt);
+  color: var(--text);
+}
+
+.tutorial-content {
+  padding: 1.5rem;
+}
+
+.tutorial-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.tutorial-step:last-child {
+  margin-bottom: 0;
+}
+
+.tutorial-icon {
+  font-size: 2rem;
+  flex-shrink: 0;
+}
+
+.tutorial-text {
+  flex: 1;
+}
+
+.tutorial-text strong {
+  display: block;
+  color: var(--text);
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.tutorial-text p {
+  margin: 0;
+  color: var(--text-light);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.tutorial-footer {
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: center;
+}
+
+.tutorial-got-it {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  box-shadow: var(--shadow-sm);
+}
+
+.tutorial-got-it:hover {
+  background: var(--primary-dark);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow);
+}
+
+@media (max-width: 768px) {
+  .tutorial-popup {
+    width: 95%;
+    max-height: 85vh;
+  }
+  
+  .tutorial-header {
+    padding: 1rem 1rem 0.75rem 1rem;
+  }
+  
+  .tutorial-header h3 {
+    font-size: 1.1rem;
+  }
+  
+  .tutorial-content {
+    padding: 1rem;
+  }
+  
+  .tutorial-step {
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+  
+  .tutorial-icon {
+    font-size: 1.5rem;
+  }
+  
+  .tutorial-footer {
+    padding: 0.75rem 1rem 1rem 1rem;
+  }
+}