From 26121aba26a09792f4b81d7879e96f33828a251c Mon Sep 17 00:00:00 2001
From: Babak Alizadeh <alizadeh.babak@gmail.com>
Date: Sat, 19 Jul 2025 13:04:23 +0000
Subject: [PATCH] redesign wizard home

---
 hesabixCore/src/Service/AI/AIService.php |    3 +
 webUI/src/views/wizard/home.vue          | 3123 ++++++++++++++++------
 2 files changed, 2378 insertions(+), 748 deletions(-)

diff --git a/hesabixCore/src/Service/AI/AIService.php b/hesabixCore/src/Service/AI/AIService.php
index 95a5f062..c43646be 100644
--- a/hesabixCore/src/Service/AI/AIService.php
+++ b/hesabixCore/src/Service/AI/AIService.php
@@ -78,10 +78,13 @@ class AIService
                     // اضافه کردن debug logging
                     error_log('AIService Debug - AI Response: ' . $aiResponse);
                     error_log('AIService Debug - Processed Response: ' . json_encode($processedResponse));
+                    error_log('AIService Debug - Usage Data: ' . json_encode($response['data']['usage'] ?? 'No usage data'));
+                    error_log('AIService Debug - Cost Data: ' . json_encode($cost));
                     
                     return [
                         'success' => true,
                         'response' => $processedResponse['response'],
+                        'usage' => $response['data']['usage'] ?? null,
                         'cost' => $cost,
                         'service' => $service,
                         'model' => $this->getAIModel(),
diff --git a/webUI/src/views/wizard/home.vue b/webUI/src/views/wizard/home.vue
index aba33206..a98f5b89 100644
--- a/webUI/src/views/wizard/home.vue
+++ b/webUI/src/views/wizard/home.vue
@@ -1,267 +1,241 @@
 <template>
-  <v-toolbar color="toolbar" title="هوش مصنوعی حسابیکس">
-    <v-spacer></v-spacer>
-    
-    <!-- نمایش وضعیت سرویس -->
-    <v-tooltip location="bottom">
-      <template v-slot:activator="{ props }">
-        <div v-bind="props" class="d-flex align-center mr-3">
-          <v-chip 
-            :color="aiSettings.aiEnabled ? 'success' : 'error'" 
-            size="small"
-            variant="flat"
-            class="status-chip"
-          >
-            <v-icon start size="16">
-              {{ aiSettings.aiEnabled ? 'mdi-robot' : 'mdi-robot-off' }}
-            </v-icon>
-            {{ aiSettings.aiEnabled ? 'فعال' : 'غیرفعال' }}
-          </v-chip>
+  <!-- Header Toolbar -->
+  <v-app-bar 
+    color="primary" 
+    elevation="0" 
+    class="ai-header"
+    height="70"
+  >
+    <div class="header-content">
+      <!-- Logo and Title -->
+      <div class="header-left">
+        <div class="logo-container">
+          <v-icon color="white" size="28">mdi-robot</v-icon>
         </div>
-      </template>
-      <span>وضعیت سرویس هوش مصنوعی</span>
-    </v-tooltip>
-
-    <!-- نمایش اعتبار کاربر -->
-    <v-tooltip location="bottom">
-      <template v-slot:activator="{ props }">
-        <div v-bind="props" class="d-flex align-center mr-3">
-          <v-chip 
-            :color="userBalance < 1000 ? 'warning' : 'success'" 
-            size="small"
-            variant="flat"
-            class="balance-chip"
-          >
-            <v-icon start size="16">mdi-wallet</v-icon>
-            {{ formatBalance(userBalance) }}
-          </v-chip>
+        <div class="title-section">
+          <h1 class="app-title">هوش مصنوعی حسابیکس</h1>
+          <p class="app-subtitle">دستیار هوشمند شما</p>
         </div>
-      </template>
-      <span>اعتبار باقی‌مانده حساب شما</span>
-    </v-tooltip>
+      </div>
 
-    <!-- نمایش وضعیت اتصال -->
-    <v-tooltip location="bottom">
-      <template v-slot:activator="{ props }">
-        <div v-bind="props" class="d-flex align-center mr-3">
-          <v-chip 
-            :color="connectionStatus.color" 
-            size="small"
-            variant="flat"
-            class="connection-chip"
-          >
-            <v-icon start size="16">
-              {{ connectionStatus.icon }}
-            </v-icon>
-            {{ connectionStatus.text }}
-          </v-chip>
-        </div>
-      </template>
-      <span>وضعیت اتصال به سرور</span>
-    </v-tooltip>
-
-    <!-- دکمه آرشیو گفتگوها -->
-    <v-tooltip location="bottom">
-      <template v-slot:activator="{ props }">
-        <v-btn 
-          v-bind="props"
-          icon 
-          @click="showConversationsDialog = true"
-          class="mr-2 archive-btn"
-          color="primary"
-          variant="tonal"
-        >
-          <v-icon>mdi-archive</v-icon>
-        </v-btn>
-      </template>
-      <span>مشاهده آرشیو گفتگوها</span>
-    </v-tooltip>
-  </v-toolbar>
-  <div class="page-container">
-    <!-- کارت اطلاعات قیمت‌گذاری و آمار استفاده -->
-    <div class="info-cards" v-if="aiSettings.aiEnabled">
-      <v-card variant="outlined" class="ma-4 info-card" elevation="0">
-        <v-card-text class="pa-3">
-          <div class="d-flex align-center justify-space-between flex-wrap">
-            <!-- بخش قیمت‌گذاری -->
-            <div class="pricing-section d-flex align-center">
-              <v-icon color="info" size="20" class="mr-2">mdi-currency-usd</v-icon>
-              <div class="d-flex align-center gap-3">
-                <div class="text-center">
-                  <div class="text-caption text-medium-emphasis">ورودی</div>
-                  <div class="text-body-2 font-weight-medium">{{ aiSettings.inputTokenPrice.toLocaleString('fa-IR') }}</div>
-                </div>
-                <v-divider vertical></v-divider>
-                <div class="text-center">
-                  <div class="text-caption text-medium-emphasis">خروجی</div>
-                  <div class="text-body-2 font-weight-medium">{{ aiSettings.outputTokenPrice.toLocaleString('fa-IR') }}</div>
-                </div>
-                <div class="text-caption text-medium-emphasis">ریال/1000 توکن</div>
+      <!-- Status Indicators -->
+      <div class="header-center">
+        <div class="status-indicators">
+          <!-- AI Service Status -->
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <div v-bind="props" class="status-item">
+                <v-chip 
+                  :color="aiSettings.aiEnabled ? 'success' : 'error'" 
+                  size="small"
+                  variant="flat"
+                  class="status-chip"
+                >
+                  <v-icon start size="16">
+                    {{ aiSettings.aiEnabled ? 'mdi-robot' : 'mdi-robot-off' }}
+                  </v-icon>
+                  {{ aiSettings.aiEnabled ? 'فعال' : 'غیرفعال' }}
+                </v-chip>
               </div>
-            </div>
+            </template>
+            <span>وضعیت سرویس هوش مصنوعی</span>
+          </v-tooltip>
 
-            <!-- خط جداکننده -->
-            <v-divider vertical class="mx-4" v-if="userMessages.length > 0"></v-divider>
-
-            <!-- بخش آمار استفاده -->
-            <div class="stats-section d-flex align-center" v-if="userMessages.length > 0">
-              <v-icon color="success" size="20" class="mr-2">mdi-chart-line</v-icon>
-              <div class="d-flex align-center gap-3">
-                <div class="text-center">
-                  <div class="text-caption text-medium-emphasis">پیام‌ها</div>
-                  <div class="text-body-2 font-weight-medium">{{ userMessages.length }}</div>
-                </div>
-                <v-divider vertical></v-divider>
-                <div class="text-center">
-                  <div class="text-caption text-medium-emphasis">توکن‌ها</div>
-                  <div class="text-body-2 font-weight-medium">{{ usageStats.totalTokens.toLocaleString('fa-IR') }}</div>
-                </div>
-                <v-divider vertical></v-divider>
-                <div class="text-center">
-                  <div class="text-caption text-medium-emphasis">هزینه</div>
-                  <div class="text-body-2 font-weight-medium">{{ usageStats.totalCost.toLocaleString('fa-IR') }} ریال</div>
-                </div>
+          <!-- User Balance -->
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <div v-bind="props" class="status-item">
+                <v-chip 
+                  :color="userBalance < 1000 ? 'warning' : 'success'" 
+                  size="small"
+                  variant="flat"
+                  class="status-chip"
+                >
+                  <v-icon start size="16">mdi-wallet</v-icon>
+                  {{ formatBalance(userBalance) }}
+                </v-chip>
               </div>
-            </div>
-          </div>
-        </v-card-text>
-      </v-card>
+            </template>
+            <span>اعتبار باقی‌مانده حساب شما</span>
+          </v-tooltip>
+
+          <!-- Connection Status -->
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <div v-bind="props" class="status-item">
+                <v-chip 
+                  :color="connectionStatus.color" 
+                  size="small"
+                  variant="flat"
+                  class="status-chip"
+                >
+                  <v-icon start size="16">
+                    {{ connectionStatus.icon }}
+                  </v-icon>
+                  {{ connectionStatus.text }}
+                </v-chip>
+              </div>
+            </template>
+            <span>وضعیت اتصال به سرور</span>
+          </v-tooltip>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="header-right">
+        <v-tooltip location="bottom">
+          <template v-slot:activator="{ props }">
+            <v-btn 
+              v-bind="props"
+              icon 
+              @click="showConversationsDialog = true"
+              class="action-btn"
+              color="white"
+              variant="text"
+            >
+              <v-icon>mdi-archive</v-icon>
+            </v-btn>
+          </template>
+          <span>مشاهده آرشیو گفتگوها</span>
+        </v-tooltip>
+      </div>
     </div>
-    
-    <div class="content-container">
-      <v-card class="chat-container" elevation="0">
-        <!-- هدر گفتگو -->
+  </v-app-bar>
+
+  <!-- Main Content -->
+  <div class="main-container">
+    <!-- Info Cards Section -->
+    <div class="info-section" v-if="aiSettings.aiEnabled">
+      <div class="info-cards">
+        <!-- Pricing Card -->
+        <v-card class="info-card pricing-card" elevation="1">
+          <div class="card-content">
+            <div class="pricing-row">
+              <v-icon color="info" size="16" class="pricing-icon">mdi-currency-usd</v-icon>
+              <div class="pricing-info">
+                <span class="pricing-label">قیمت:</span>
+                <span class="pricing-value">{{ aiSettings.inputTokenPrice.toLocaleString('fa-IR') }} / {{ aiSettings.outputTokenPrice.toLocaleString('fa-IR') }}</span>
+                <span class="pricing-unit">ریال/1000 توکن</span>
+              </div>
+            </div>
+          </div>
+        </v-card>
+
+        <!-- Usage Stats Card -->
+        <v-card class="info-card stats-card" elevation="1" v-if="userMessages.length > 0">
+          <div class="card-content">
+            <div class="stats-row">
+              <v-icon color="success" size="16" class="stats-icon">mdi-chart-line</v-icon>
+              <div class="stats-info">
+                <span class="stats-label">استفاده:</span>
+                <span class="stats-value">{{ userMessages.length }} پیام • {{ usageStats.totalTokens.toLocaleString('fa-IR') }} توکن • {{ usageStats.totalCost.toLocaleString('fa-IR') }} ریال</span>
+              </div>
+            </div>
+          </div>
+        </v-card>
+      </div>
+    </div>
+
+    <!-- Chat Container -->
+    <div class="chat-section">
+      <v-card class="chat-container" elevation="3">
+        <!-- Chat Header -->
         <div class="chat-header" v-if="currentConversation">
-          <div class="d-flex align-center justify-space-between pa-4">
-            <div class="d-flex align-center">
-              <v-icon color="primary" class="mr-2">mdi-chat</v-icon>
-              <span class="text-subtitle-1 font-weight-medium">{{ currentConversation.title }}</span>
-              <v-chip size="small" variant="outlined" class="ml-2">{{ currentConversation.category }}</v-chip>
-            </div>
-            <div class="d-flex align-center">
-              <v-btn 
-                size="small" 
-                variant="text" 
-                color="grey"
-                @click="newConversation"
-              >
-                <v-icon start size="16">mdi-plus</v-icon>
-                گفتگوی جدید
-              </v-btn>
+          <div class="conversation-info">
+            <div class="conversation-title">
+              <v-icon color="primary" size="20">mdi-chat</v-icon>
+              <span class="title-text">{{ currentConversation.title }}</span>
+              <v-chip size="small" variant="outlined" class="category-chip">
+                {{ currentConversation.category }}
+              </v-chip>
             </div>
+            <v-btn 
+              size="small" 
+              variant="text" 
+              color="primary"
+              @click="newConversation"
+              class="new-chat-btn"
+            >
+              <v-icon start size="16">mdi-plus</v-icon>
+              گفتگوی جدید
+            </v-btn>
           </div>
         </div>
 
-        <div class="chat-box">
+        <!-- Messages Area -->
+        <div class="messages-area">
           <div class="messages-container" ref="messagesContainer">
-            <!-- پیام هوش مصنوعی -->
+            <!-- Welcome Message -->
             <div class="message ai-message" v-if="displayWelcome">
-              <div class="message-content">
-                <div class="message-text typing-text" v-html="renderMarkdown(displayWelcome)"></div>
+              <div class="message-avatar">
+                <v-avatar color="primary" size="40">
+                  <v-icon color="white" size="20">mdi-robot</v-icon>
+                </v-avatar>
+              </div>
+              <div class="message-content">
+                <div class="message-text" v-html="renderMarkdown(displayWelcome)"></div>
+                <div class="message-time">{{ formatTime(new Date()) }}</div>
               </div>
-              <v-avatar color="#1a237e" size="36" class="ml-2">
-                <v-icon color="white" size="20">mdi-robot</v-icon>
-              </v-avatar>
             </div>
 
-            <!-- پیام‌های کاربر و پاسخ‌های هوش مصنوعی -->
+            <!-- User and AI Messages -->
             <template v-for="(message, index) in userMessages" :key="index">
-              <!-- پیام کاربر -->
+              <!-- User Message -->
               <div class="message user-message" v-if="typeof message === 'string'">
-                <v-avatar color="grey lighten-2" size="36" class="mr-2">
-                  <v-icon color="grey darken-1" size="20">mdi-account</v-icon>
-                </v-avatar>
                 <div class="message-content">
                   <div class="message-text">{{ message }}</div>
                   <div class="message-time">{{ formatTime(new Date()) }}</div>
                 </div>
+                <div class="message-avatar">
+                  <v-avatar color="grey lighten-2" size="40">
+                    <v-icon color="grey darken-1" size="20">mdi-account</v-icon>
+                  </v-avatar>
+                </div>
               </div>
 
-              <!-- پیام هوش مصنوعی -->
+              <!-- AI Message -->
               <div class="message ai-message" v-else-if="message && message.isAI">
+                <div class="message-avatar">
+                  <v-avatar 
+                    :color="message.text && message.text.startsWith('خطا:') ? 'error' : 'primary'" 
+                    size="40"
+                  >
+                    <v-icon color="white" size="20">
+                      {{ message.text && message.text.startsWith('خطا:') ? 'mdi-alert-circle' : 'mdi-robot' }}
+                    </v-icon>
+                  </v-avatar>
+                </div>
                 <div class="message-content" :class="{ 
-                  'details-message': message.isDetails,
-                  'error-message': message.text && message.text.startsWith('خطا:')
+                  'error-message': message.text && message.text.startsWith('خطا:'),
+                  'success-message': message.text && !message.text.startsWith('خطا:')
                 }">
                   <div class="message-text" v-html="renderMarkdown(message.text)"></div>
                   
-                  <!-- Debug Info Section -->
-                  <div class="debug-info" v-if="message.debug_info">
-                    <div class="debug-header" @click="toggleDebugInfo(index)">
-                      <span>اطلاعات دیباگ</span>
-                      <span class="debug-toggle">{{ message.debug_info.expanded ? '▼' : '▶' }}</span>
-                    </div>
-                    <div class="debug-content" v-if="message.debug_info.expanded">
-                      <div class="debug-section" v-if="message.debug_info.operation_type">
-                        <h5>نوع عملیات:</h5>
-                        <p>{{ message.debug_info.operation_type }}</p>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.current_step">
-                        <h5>مرحله فعلی:</h5>
-                        <p>{{ message.debug_info.current_step }}</p>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.attempt_count">
-                        <h5>تعداد تلاش:</h5>
-                        <p>{{ message.debug_info.attempt_count }} از {{ message.debug_info.max_attempts }}</p>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.next_action">
-                        <h5>مرحله بعدی:</h5>
-                        <p>{{ message.debug_info.next_action }}</p>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.final_result">
-                        <h5>نتیجه نهایی:</h5>
-                        <p>{{ message.debug_info.final_result }}</p>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.final_data">
-                        <h5>داده‌های نهایی:</h5>
-                        <pre>{{ JSON.stringify(message.debug_info.final_data, null, 2) }}</pre>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.json_response">
-                        <h5>پاسخ JSON:</h5>
-                        <pre>{{ JSON.stringify(message.debug_info.json_response, null, 2) }}</pre>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.tool_commands && message.debug_info.tool_commands.length > 0">
-                        <h5>دستورات ابزار یافت شده:</h5>
-                        <div v-for="(command, cmdIndex) in message.debug_info.tool_commands" :key="cmdIndex">
-                          <strong>{{ command.tool }}</strong>
-                          <pre>{{ JSON.stringify(command.params, null, 2) }}</pre>
-                        </div>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.execution_result">
-                        <h5>نتیجه اجرا:</h5>
-                        <pre>{{ JSON.stringify(message.debug_info.execution_result, null, 2) }}</pre>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.execution_results">
-                        <h5>نتایج اجرای چندمرحله‌ای:</h5>
-                        <div v-for="(result, resultIndex) in message.debug_info.execution_results" :key="resultIndex">
-                          <strong>مرحله {{ resultIndex + 1 }}:</strong>
-                          <pre>{{ JSON.stringify(result, null, 2) }}</pre>
-                        </div>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.ai_response">
-                        <h5>پاسخ هوش مصنوعی:</h5>
-                        <pre>{{ message.debug_info.ai_response }}</pre>
-                      </div>
-                      
-                      <div class="debug-section" v-if="message.debug_info.error">
-                        <h5>خطا:</h5>
-                        <p class="error">{{ message.debug_info.error }}</p>
-                      </div>
-                    </div>
+                  <!-- Debug Button -->
+                  <div class="debug-section" v-if="message.debug_info">
+                    <v-btn
+                      size="small"
+                      variant="outlined"
+                      color="info"
+                      @click="openDebugDialog(message.debug_info, index)"
+                      class="debug-btn"
+                      prepend-icon="mdi-bug"
+                    >
+                      <span>دیباگ</span>
+                      <v-chip 
+                        size="x-small" 
+                        color="info" 
+                        variant="tonal" 
+                        class="debug-count"
+                        v-if="getDebugInfoCount(message.debug_info) > 0"
+                      >
+                        {{ getDebugInfoCount(message.debug_info) }}
+                      </v-chip>
+                    </v-btn>
                   </div>
                   
-                  <!-- دکمه شارژ برای پیام‌های خطای اعتبار -->
-                  <div v-if="message.showChargeButton" class="charge-button-container mt-3">
+                  <!-- Charge Button -->
+                  <div class="charge-section" v-if="message.showChargeButton">
                     <v-btn
                       color="success"
                       variant="elevated"
@@ -276,37 +250,38 @@
                   
                   <div class="message-time">{{ formatTime(new Date()) }}</div>
                 </div>
-                <v-avatar :color="message.text && message.text.startsWith('خطا:') ? '#f44336' : '#1a237e'" size="36" class="ml-2">
-                  <v-icon color="white" size="20">{{ message.text && message.text.startsWith('خطا:') ? 'mdi-alert-circle' : 'mdi-robot' }}</v-icon>
-                </v-avatar>
               </div>
             </template>
 
-            <!-- نشانگر تایپ -->
+            <!-- Typing Indicator -->
             <div class="message ai-message" v-if="isTyping">
+              <div class="message-avatar">
+                <v-avatar color="primary" size="40">
+                  <v-icon color="white" size="20">mdi-robot</v-icon>
+                </v-avatar>
+              </div>
               <div class="message-content">
-                <div class="message-text">
-                  <span class="typing-indicator">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                  </span>
+                <div class="typing-indicator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
                 </div>
               </div>
-              <v-avatar color="#1a237e" size="36" class="ml-2">
-                <v-icon color="white" size="20">mdi-robot</v-icon>
-              </v-avatar>
             </div>
           </div>
 
-          <!-- پیشنهادات سوالات -->
-          <div class="suggestions-container" v-if="userMessages.length === 0 && aiSettings.aiEnabled">
-            <div class="d-flex flex-wrap gap-1">
+          <!-- Suggestions -->
+          <div class="suggestions-section" v-if="userMessages.length === 0 && aiSettings.aiEnabled">
+            <div class="suggestions-title">
+              <v-icon color="primary" size="20">mdi-lightbulb</v-icon>
+              <span>پیشنهادات</span>
+            </div>
+            <div class="suggestions-grid">
               <v-chip 
                 v-for="suggestion in suggestions" 
                 :key="suggestion"
-                size="x-small"
-                variant="tonal"
+                size="small"
+                variant="outlined"
                 @click="useSuggestion(suggestion)"
                 class="suggestion-chip"
                 color="primary"
@@ -315,46 +290,58 @@
               </v-chip>
             </div>
           </div>
-
-          <!-- بخش ورودی پیام -->
-          <div class="input-container d-flex align-center flex-row-reverse">
-            <v-btn
-              color="primary"
-              class="send-button ml-2"
-              :disabled="isLoading || !userMessage.trim() || !aiSettings.aiEnabled"
-              @click="sendMessage"
-              icon
-            >
-              <v-icon class="send-icon-rotate">mdi-send</v-icon>
-            </v-btn>
-            <v-text-field
-              v-model="userMessage"
-              class="flex-grow-1 message-input"
-              :placeholder="aiSettings.aiEnabled ? 'پیام خود را بنویسید...' : 'سرویس هوش مصنوعی غیرفعال است'"
-              hide-details="auto"
-              variant="outlined"
-              @keyup.enter="sendMessage"
-              :disabled="isLoading || !aiSettings.aiEnabled"
-            ></v-text-field>
-          </div>
         </div>
       </v-card>
     </div>
+
+    <!-- Input Section -->
+    <div class="input-section">
+      <div class="input-container">
+        <v-text-field
+          v-model="userMessage"
+          class="message-input"
+          :placeholder="aiSettings.aiEnabled ? 'پیام خود را بنویسید...' : 'سرویس هوش مصنوعی غیرفعال است'"
+          hide-details="auto"
+          variant="outlined"
+          @keyup.enter="sendMessage"
+          :disabled="isLoading || !aiSettings.aiEnabled"
+          ref="messageInput"
+          autofocus
+          rounded
+          density="comfortable"
+        >
+          <template #append-inner>
+            <v-btn
+              color="primary"
+              :disabled="isLoading || !userMessage.trim() || !aiSettings.aiEnabled"
+              @click="sendMessage"
+              icon
+              class="send-btn"
+            >
+              <v-icon class="send-icon">mdi-send</v-icon>
+            </v-btn>
+          </template>
+        </v-text-field>
+      </div>
+    </div>
   </div>
 
-  <!-- دیالوگ آرشیو گفتگوها -->
-  <v-dialog v-model="showConversationsDialog" max-width="800px">
-    <v-card>
-      <v-card-title class="d-flex align-center justify-space-between">
-        <span>آرشیو گفتگوها</span>
-        <v-btn icon @click="showConversationsDialog = false">
+  <!-- Conversations Dialog -->
+  <v-dialog v-model="showConversationsDialog" max-width="900px" persistent>
+    <v-card class="conversations-dialog">
+      <v-card-title class="dialog-header">
+        <div class="dialog-title">
+          <v-icon color="primary" size="24">mdi-archive</v-icon>
+          <span>آرشیو گفتگوها</span>
+        </div>
+        <v-btn icon @click="showConversationsDialog = false" variant="text">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
       
-      <v-card-text>
-        <!-- فیلترها -->
-        <div class="d-flex align-center gap-4 mb-4">
+      <v-card-text class="dialog-content">
+        <!-- Filters -->
+        <div class="filters-section">
           <v-text-field
             v-model="searchTerm"
             placeholder="جستجو در گفتگوها..."
@@ -362,7 +349,7 @@
             variant="outlined"
             density="compact"
             hide-details
-            class="flex-grow-1"
+            class="search-field"
             @input="searchConversations"
           ></v-text-field>
           <v-select
@@ -372,33 +359,41 @@
             variant="outlined"
             density="compact"
             hide-details
-            class="flex-grow-1"
+            class="category-field"
             @update:model-value="filterByCategory"
           ></v-select>
         </div>
 
-        <!-- لیست گفتگوها -->
+        <!-- Conversations List -->
         <div class="conversations-list">
-          <v-list>
+          <v-list class="conversations-items">
             <v-list-item
               v-for="conversation in filteredConversations"
               :key="conversation.id"
               class="conversation-item"
+              @click="loadConversation(conversation)"
             >
               <template #prepend>
-                <v-avatar color="primary" size="40" @click="loadConversation(conversation)" style="cursor: pointer;">
+                <v-avatar color="primary" size="48">
                   <v-icon color="white">mdi-chat</v-icon>
                 </v-avatar>
               </template>
               
-              <v-list-item-title @click="loadConversation(conversation)" style="cursor: pointer;">{{ conversation.title }}</v-list-item-title>
-              <v-list-item-subtitle>
-                <div class="d-flex align-center justify-space-between">
-                  <span>{{ conversation.category }}</span>
-                  <span>{{ conversation.updatedAt }}</span>
+              <v-list-item-title class="conversation-title">
+                {{ conversation.title }}
+              </v-list-item-title>
+              
+              <v-list-item-subtitle class="conversation-details">
+                <div class="conversation-meta">
+                  <v-chip size="x-small" variant="tonal" color="primary">
+                    {{ conversation.category }}
+                  </v-chip>
+                  <span class="conversation-date">{{ conversation.updatedAt }}</span>
                 </div>
-                <div class="text-caption text-medium-emphasis">
-                  {{ conversation.messageCount || 0 }} پیام • {{ (conversation.stats?.totalTokens || 0).toLocaleString('fa-IR') }} توکن • {{ (conversation.stats?.totalCost || 0).toLocaleString('fa-IR') }} ریال
+                <div class="conversation-stats">
+                  {{ conversation.messageCount || 0 }} پیام • 
+                  {{ (conversation.stats?.totalTokens || 0).toLocaleString('fa-IR') }} توکن • 
+                  {{ (conversation.stats?.totalCost || 0).toLocaleString('fa-IR') }} ریال
                 </div>
               </v-list-item-subtitle>
               
@@ -420,12 +415,13 @@
         </div>
       </v-card-text>
       
-      <v-card-actions>
+      <v-card-actions class="dialog-actions">
         <v-spacer></v-spacer>
         <v-btn 
           color="primary" 
           @click="newConversation"
           prepend-icon="mdi-plus"
+          variant="elevated"
         >
           گفتگوی جدید
         </v-btn>
@@ -433,26 +429,26 @@
     </v-card>
   </v-dialog>
 
-  <!-- دیالوگ تأیید حذف گفتگو -->
-  <v-dialog v-model="showDeleteDialog" max-width="400px">
-    <v-card>
-      <v-card-title class="d-flex align-center">
-        <v-icon color="error" class="mr-2">mdi-delete</v-icon>
-        حذف گفتگو
+  <!-- Delete Confirmation Dialog -->
+  <v-dialog v-model="showDeleteDialog" max-width="450px" persistent>
+    <v-card class="delete-dialog">
+      <v-card-title class="delete-header">
+        <v-icon color="error" size="24">mdi-delete</v-icon>
+        <span>حذف گفتگو</span>
       </v-card-title>
       
-      <v-card-text>
-        <p class="text-body-1">
+      <v-card-text class="delete-content">
+        <p class="delete-message">
           آیا مطمئن هستید که می‌خواهید گفتگوی 
           <strong>"{{ conversationToDelete?.title }}"</strong> 
           را حذف کنید؟
         </p>
-        <p class="text-caption text-medium-emphasis mt-2">
+        <p class="delete-warning">
           این عملیات قابل بازگشت نیست و گفتگو از لیست شما حذف خواهد شد.
         </p>
       </v-card-text>
       
-      <v-card-actions>
+      <v-card-actions class="delete-actions">
         <v-spacer></v-spacer>
         <v-btn 
           variant="text" 
@@ -466,6 +462,7 @@
           @click="confirmDeleteConversation"
           :loading="isLoading"
           prepend-icon="mdi-delete"
+          variant="elevated"
         >
           حذف
         </v-btn>
@@ -473,17 +470,20 @@
     </v-card>
   </v-dialog>
 
-  <!-- دیالوگ نمایش اطلاعات اشخاص -->
-  <v-dialog v-model="showPersonInfo" max-width="900px">
-    <v-card>
-      <v-card-title class="d-flex align-center justify-space-between">
-        <span>اطلاعات شخص</span>
-        <v-btn icon @click="showPersonInfo = false">
+  <!-- Person Info Dialog -->
+  <v-dialog v-model="showPersonInfo" max-width="1000px" persistent>
+    <v-card class="person-dialog">
+      <v-card-title class="dialog-header">
+        <div class="dialog-title">
+          <v-icon color="primary" size="24">mdi-account</v-icon>
+          <span>اطلاعات شخص</span>
+        </div>
+        <v-btn icon @click="showPersonInfo = false" variant="text">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
       
-      <v-card-text>
+      <v-card-text class="dialog-content">
         <PersonInfo 
           :person="selectedPerson" 
           :transactions="personTransactions"
@@ -491,6 +491,353 @@
       </v-card-text>
     </v-card>
   </v-dialog>
+
+  <!-- Debug Dialog -->
+  <v-dialog v-model="showDebugDialog" max-width="1400px" fullscreen persistent>
+    <v-card class="debug-dialog">
+      <!-- Debug Header -->
+      <v-card-title class="debug-header">
+        <div class="debug-title-section">
+          <div class="debug-icon">
+            <v-icon color="white" size="28">mdi-bug</v-icon>
+          </div>
+          <div class="debug-info">
+            <h2 class="debug-title">اطلاعات دیباگ</h2>
+            <p class="debug-subtitle">جزئیات کامل عملیات و نتایج</p>
+          </div>
+          <v-chip 
+            size="small" 
+            color="info" 
+            variant="flat" 
+            class="debug-count"
+            v-if="currentDebugInfo && getDebugInfoCount(currentDebugInfo) > 0"
+          >
+            {{ getDebugInfoCount(currentDebugInfo) }} آیتم
+          </v-chip>
+        </div>
+        <v-btn 
+          icon 
+          @click="showDebugDialog = false"
+          color="white"
+          variant="text"
+          class="close-btn"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      
+      <!-- Debug Content -->
+      <v-card-text class="debug-content" v-if="currentDebugInfo">
+        <!-- Main Cards -->
+        <div class="debug-main-cards">
+          <!-- Operation Type Card -->
+          <v-card 
+            v-if="currentDebugInfo.operation_type" 
+            class="debug-main-card operation-card"
+            elevation="3"
+          >
+            <div class="card-header">
+              <div class="card-icon">
+                <v-icon color="white" size="24">mdi-cog</v-icon>
+              </div>
+              <div class="card-content">
+                <h3 class="card-title">نوع عملیات</h3>
+                <v-chip 
+                  :color="getOperationTypeColor(currentDebugInfo.operation_type)" 
+                  size="small" 
+                  variant="flat"
+                  class="operation-chip"
+                >
+                  {{ getOperationTypeText(currentDebugInfo.operation_type) }}
+                </v-chip>
+              </div>
+            </div>
+          </v-card>
+
+          <!-- Current Step Card -->
+          <v-card 
+            v-if="currentDebugInfo.current_step" 
+            class="debug-main-card status-card"
+            elevation="3"
+          >
+            <div class="card-header">
+              <div class="card-icon">
+                <v-icon color="white" size="24">mdi-play-circle</v-icon>
+              </div>
+              <div class="card-content">
+                <h3 class="card-title">مرحله فعلی</h3>
+                <p class="card-text">{{ currentDebugInfo.current_step }}</p>
+              </div>
+            </div>
+          </v-card>
+
+          <!-- Attempt Count Card -->
+          <v-card 
+            v-if="currentDebugInfo.attempt_count" 
+            class="debug-main-card attempt-card"
+            elevation="3"
+          >
+            <div class="card-header">
+              <div class="card-icon">
+                <v-icon color="white" size="24">mdi-repeat</v-icon>
+              </div>
+              <div class="card-content">
+                <h3 class="card-title">تعداد تلاش</h3>
+                <div class="attempt-progress">
+                  <v-progress-linear
+                    :model-value="(currentDebugInfo.attempt_count / currentDebugInfo.max_attempts) * 100"
+                    color="warning"
+                    height="10"
+                    class="progress-bar"
+                  ></v-progress-linear>
+                  <span class="attempt-text">
+                    {{ currentDebugInfo.attempt_count }} از {{ currentDebugInfo.max_attempts }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </v-card>
+
+          <!-- Next Action Card -->
+          <v-card 
+            v-if="currentDebugInfo.next_action" 
+            class="debug-main-card next-card"
+            elevation="3"
+          >
+            <div class="card-header">
+              <div class="card-icon">
+                <v-icon color="white" size="24">mdi-arrow-right</v-icon>
+              </div>
+              <div class="card-content">
+                <h3 class="card-title">مرحله بعدی</h3>
+                <p class="card-text">{{ currentDebugInfo.next_action }}</p>
+              </div>
+            </div>
+          </v-card>
+        </div>
+
+        <!-- Results Section -->
+        <div class="debug-results-section">
+          <!-- Tool Commands -->
+          <v-card 
+            v-if="currentDebugInfo.tool_commands && currentDebugInfo.tool_commands.length > 0" 
+            class="debug-section-card"
+            elevation="2"
+          >
+            <v-card-title class="section-title">
+              <v-icon color="primary" size="20" class="mr-2">mdi-tools</v-icon>
+              دستورات ابزار یافت شده
+              <v-chip size="small" color="primary" variant="tonal" class="ml-2">
+                {{ currentDebugInfo.tool_commands.length }}
+              </v-chip>
+            </v-card-title>
+            <v-card-text class="section-content">
+              <div class="tools-grid">
+                <div 
+                  v-for="(command, cmdIndex) in currentDebugInfo.tool_commands" 
+                  :key="cmdIndex"
+                  class="tool-item"
+                >
+                  <div class="tool-header">
+                    <v-icon color="primary" size="18" class="mr-2">mdi-wrench</v-icon>
+                    <span class="tool-name">{{ command.tool }}</span>
+                  </div>
+                  <div class="tool-actions">
+                    <v-btn
+                      size="small"
+                      variant="outlined"
+                      color="info"
+                      @click="toggleJsonView(`tool-${cmdIndex}`)"
+                      class="view-btn"
+                    >
+                      <v-icon size="16" class="mr-1">mdi-code-json</v-icon>
+                      نمایش پارامترها
+                    </v-btn>
+                  </div>
+                  <v-expand-transition>
+                    <div v-show="expandedJsonViews[`tool-${cmdIndex}`]" class="json-container">
+                      <pre class="json-content">{{ JSON.stringify(command.params, null, 2) }}</pre>
+                    </div>
+                  </v-expand-transition>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+
+          <!-- Execution Results -->
+          <v-card 
+            v-if="currentDebugInfo.execution_results && currentDebugInfo.execution_results.length > 0" 
+            class="debug-section-card"
+            elevation="2"
+          >
+            <v-card-title class="section-title">
+              <v-icon color="success" size="20" class="mr-2">mdi-playlist-check</v-icon>
+              نتایج اجرای چندمرحله‌ای
+              <v-chip size="small" color="success" variant="tonal" class="ml-2">
+                {{ currentDebugInfo.execution_results.length }}
+              </v-chip>
+            </v-card-title>
+            <v-card-text class="section-content">
+              <div class="execution-timeline">
+                <div 
+                  v-for="(result, resultIndex) in currentDebugInfo.execution_results" 
+                  :key="resultIndex"
+                  class="timeline-item"
+                >
+                  <div class="timeline-marker">
+                    <v-icon color="success" size="16">mdi-check-circle</v-icon>
+                  </div>
+                  <div class="timeline-content">
+                    <div class="timeline-header">
+                      <span class="timeline-title">مرحله {{ resultIndex + 1 }}</span>
+                    </div>
+                    <div class="timeline-actions">
+                      <v-btn
+                        size="small"
+                        variant="outlined"
+                        color="info"
+                        @click="toggleJsonView(`execution-${resultIndex}`)"
+                        class="view-btn"
+                      >
+                        <v-icon size="16" class="mr-1">mdi-code-json</v-icon>
+                        نمایش نتیجه
+                      </v-btn>
+                    </div>
+                    <v-expand-transition>
+                      <div v-show="expandedJsonViews[`execution-${resultIndex}`]" class="json-container">
+                        <pre class="json-content">{{ JSON.stringify(result, null, 2) }}</pre>
+                      </div>
+                    </v-expand-transition>
+                  </div>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+
+          <!-- JSON Response -->
+          <v-card 
+            v-if="currentDebugInfo.json_response" 
+            class="debug-section-card"
+            elevation="2"
+          >
+            <v-card-title class="section-title">
+              <v-icon color="info" size="20" class="mr-2">mdi-code-json</v-icon>
+              پاسخ JSON
+            </v-card-title>
+            <v-card-text class="section-content">
+              <v-btn
+                size="small"
+                variant="outlined"
+                color="info"
+                @click="toggleJsonView('json-response')"
+                class="view-btn"
+              >
+                <v-icon size="16" class="mr-1">mdi-eye</v-icon>
+                نمایش JSON
+              </v-btn>
+              <v-expand-transition>
+                <div v-show="expandedJsonViews['json-response']" class="json-container">
+                  <pre class="json-content">{{ JSON.stringify(currentDebugInfo.json_response, null, 2) }}</pre>
+                </div>
+              </v-expand-transition>
+            </v-card-text>
+          </v-card>
+
+          <!-- Final Data -->
+          <v-card 
+            v-if="currentDebugInfo.final_data" 
+            class="debug-section-card"
+            elevation="2"
+          >
+            <v-card-title class="section-title">
+              <v-icon color="success" size="20" class="mr-2">mdi-database</v-icon>
+              داده‌های نهایی
+            </v-card-title>
+            <v-card-text class="section-content">
+              <v-btn
+                size="small"
+                variant="outlined"
+                color="info"
+                @click="toggleJsonView('final-data')"
+                class="view-btn"
+              >
+                <v-icon size="16" class="mr-1">mdi-eye</v-icon>
+                نمایش داده‌ها
+              </v-btn>
+              <v-expand-transition>
+                <div v-show="expandedJsonViews['final-data']" class="json-container">
+                  <pre class="json-content">{{ JSON.stringify(currentDebugInfo.final_data, null, 2) }}</pre>
+                </div>
+              </v-expand-transition>
+            </v-card-text>
+          </v-card>
+
+          <!-- AI Response -->
+          <v-card 
+            v-if="currentDebugInfo.ai_response" 
+            class="debug-section-card"
+            elevation="2"
+          >
+            <v-card-title class="section-title">
+              <v-icon color="primary" size="20" class="mr-2">mdi-robot</v-icon>
+              پاسخ هوش مصنوعی
+            </v-card-title>
+            <v-card-text class="section-content">
+              <v-btn
+                size="small"
+                variant="outlined"
+                color="info"
+                @click="toggleJsonView('ai-response')"
+                class="view-btn"
+              >
+                <v-icon size="16" class="mr-1">mdi-eye</v-icon>
+                نمایش پاسخ
+              </v-btn>
+              <v-expand-transition>
+                <div v-show="expandedJsonViews['ai-response']" class="ai-response-container">
+                  <div class="ai-response-content">{{ currentDebugInfo.ai_response }}</div>
+                </div>
+              </v-expand-transition>
+            </v-card-text>
+          </v-card>
+
+          <!-- Final Result -->
+          <v-card 
+            v-if="currentDebugInfo.final_result" 
+            class="debug-section-card success-card"
+            elevation="2"
+          >
+            <v-card-title class="section-title">
+              <v-icon color="success" size="20" class="mr-2">mdi-check-circle</v-icon>
+              نتیجه نهایی
+            </v-card-title>
+            <v-card-text class="section-content">
+              <div class="final-result-content">
+                <p class="result-text">{{ currentDebugInfo.final_result }}</p>
+              </div>
+            </v-card-text>
+          </v-card>
+
+          <!-- Error -->
+          <v-card 
+            v-if="currentDebugInfo.error" 
+            class="debug-section-card error-card"
+            elevation="2"
+          >
+            <v-card-title class="section-title">
+              <v-icon color="error" size="20" class="mr-2">mdi-alert-circle</v-icon>
+              خطا
+            </v-card-title>
+            <v-card-text class="section-content">
+              <div class="error-content">
+                <p class="error-text">{{ currentDebugInfo.error }}</p>
+              </div>
+            </v-card-text>
+          </v-card>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
@@ -506,10 +853,16 @@ export default {
   },
   data() {
     return {
+      // User Input
       userMessage: '',
-      userMessages: [],
       isLoading: false,
       isTyping: false,
+
+      // Messages
+      userMessages: [],
+      displayWelcome: '',
+
+      // AI Settings
       aiSettings: {
         aiEnabled: false,
         aiAgentSource: '',
@@ -518,12 +871,41 @@ export default {
         outputTokenPrice: 0,
         aiPrompt: ''
       },
+
+      // Status
       connectionStatus: {
         color: 'grey',
         icon: 'mdi-help-circle',
         text: 'در حال بررسی...'
       },
-      displayWelcome: '',
+
+      // User Data
+      userBalance: 0,
+
+      // Conversations
+      currentConversation: null,
+      showConversationsDialog: false,
+      conversations: [],
+      filteredConversations: [],
+      searchTerm: '',
+      selectedCategory: '',
+      categories: [],
+
+      // Delete Dialog
+      showDeleteDialog: false,
+      conversationToDelete: null,
+
+      // Person Info
+      selectedPerson: null,
+      personTransactions: [],
+      showPersonInfo: false,
+
+      // Debug
+      expandedJsonViews: {},
+      showDebugDialog: false,
+      currentDebugInfo: null,
+
+      // Suggestions
       suggestions: [
         'چگونه سند حسابداری ثبت کنم؟',
         'راهنمای انبارداری',
@@ -536,50 +918,31 @@ export default {
         'شخص علی اضافه کن',
         'تلفن 09123456789 را برای محسن اضافه کن',
         'شخص احمد را حذف کن'
-      ],
-      // متغیرهای جدید برای گفتگوها
-      currentConversation: null,
-      showConversationsDialog: false,
-      conversations: [],
-      filteredConversations: [],
-      searchTerm: '',
-      selectedCategory: '',
-      categories: [],
-      // متغیر اعتبار کاربر
-      userBalance: 0,
-      // متغیرهای دیالوگ حذف
-      showDeleteDialog: false,
-      conversationToDelete: null,
-      // متغیرهای اطلاعات اشخاص
-      selectedPerson: null,
-      personTransactions: [],
-      showPersonInfo: false,
+      ]
     };
   },
+
   computed: {
-    aiMessageCount() {
-      return this.userMessages.filter(msg => msg && msg.isAI).length;
-    },
-    userMessageCount() {
-      return this.userMessages.filter(msg => typeof msg === 'string').length;
-    },
     usageStats() {
       let totalTokens = 0;
       let totalCost = 0;
       
-      this.userMessages.forEach(msg => {
+      this.userMessages.forEach((msg) => {
         if (msg && msg.isAI && msg.usage) {
-          totalTokens += (msg.usage.prompt_tokens || 0) + (msg.usage.completion_tokens || 0);
-          totalCost += msg.cost?.total_cost || 0;
+          const promptTokens = msg.usage.prompt_tokens || 0;
+          const completionTokens = msg.usage.completion_tokens || 0;
+          const messageTokens = promptTokens + completionTokens;
+          const messageCost = msg.cost?.total_cost || 0;
+          
+          totalTokens += messageTokens;
+          totalCost += messageCost;
         }
       });
       
-      return {
-        totalTokens,
-        totalCost
-      };
+      return { totalTokens, totalCost };
     }
   },
+
   watch: {
     searchTerm() {
       this.searchConversations();
@@ -588,14 +951,28 @@ export default {
       this.filterByCategory();
     }
   },
+
   async mounted() {
-    await this.loadSettings();
-    await this.checkConnection();
-    await this.loadConversations();
-    await this.loadBalance();
-    this.setWelcomeMessage();
+    await this.initializeApp();
   },
+
   methods: {
+    // Initialization
+    async initializeApp() {
+      try {
+        await Promise.all([
+          this.loadSettings(),
+          this.checkConnection(),
+          this.loadConversations(),
+          this.loadBalance()
+        ]);
+        this.setWelcomeMessage();
+      } catch (error) {
+        console.error('خطا در راه‌اندازی برنامه:', error);
+      }
+    },
+
+    // Settings & Status
     async loadSettings() {
       try {
         const response = await axios.get('/api/wizard/settings');
@@ -606,71 +983,48 @@ export default {
         console.error('خطا در بارگذاری تنظیمات:', error);
       }
     },
-    
+
     async checkConnection() {
       try {
         const response = await axios.get('/api/wizard/status');
         if (response.data.success) {
           const status = response.data.status;
-          
-          if (status === 'available') {
-            this.connectionStatus = {
-              color: 'success',
-              icon: 'mdi-check-circle',
-              text: 'متصل'
-            };
-          } else if (status === 'disabled') {
-            this.connectionStatus = {
-              color: 'error',
-              icon: 'mdi-robot-off',
-              text: 'غیرفعال'
-            };
-          } else if (status === 'no_api_key') {
-            this.connectionStatus = {
-              color: 'warning',
-              icon: 'mdi-key-remove',
-              text: 'بدون کلید API'
-            };
-          } else {
-            this.connectionStatus = {
-              color: 'error',
-              icon: 'mdi-alert-circle',
-              text: 'خطا در اتصال'
-            };
-          }
+          this.updateConnectionStatus(status);
         }
       } catch (error) {
         this.connectionStatus = {
           color: 'error',
           icon: 'mdi-alert-circle',
-          text: 'خطا در اتصال'
+          text: 'خطا در بررسی وضعیت'
         };
         console.error('خطا در بررسی وضعیت:', error);
       }
     },
 
-    async loadConversations() {
-      try {
-        const response = await axios.post('/api/ai/conversations/list');
-        this.conversations = Array.isArray(response.data) ? response.data : [];
-        this.filteredConversations = Array.isArray(this.conversations) ? [...this.conversations] : [];
-        
-        // استخراج دسته‌بندی‌ها
-        const categorySet = new Set();
-        if (Array.isArray(this.conversations)) {
-          this.conversations.forEach(conv => {
-            if (conv.category) {
-              categorySet.add(conv.category);
-            }
-          });
+    updateConnectionStatus(status) {
+      const statusMap = {
+        'available': {
+          color: 'success',
+          icon: 'mdi-check-circle',
+          text: 'متصل'
+        },
+        'disabled': {
+          color: 'error',
+          icon: 'mdi-robot-off',
+          text: 'غیرفعال'
+        },
+        'no_api_key': {
+          color: 'warning',
+          icon: 'mdi-key-remove',
+          text: 'بدون کلید API'
         }
-        this.categories = Array.from(categorySet);
-      } catch (error) {
-        console.error('خطا در بارگذاری گفتگوها:', error);
-        this.conversations = [];
-        this.filteredConversations = [];
-        this.categories = [];
-      }
+      };
+
+      this.connectionStatus = statusMap[status] || {
+        color: 'error',
+        icon: 'mdi-alert-circle',
+        text: 'خطا در اتصال'
+      };
     },
 
     async loadBalance() {
@@ -684,41 +1038,39 @@ export default {
       }
     },
 
-    formatBalance(balance) {
-      // تبدیل به عدد صحیح
-      const intBalance = Math.round(balance);
-      if (intBalance < 1000) {
-        return `${intBalance.toLocaleString('fa-IR')} ریال`;
-      } else {
-        return `${(intBalance / 1000).toFixed(1)} هزار ریال`;
+    // Conversations
+    async loadConversations() {
+      try {
+        const response = await axios.post('/api/ai/conversations/list');
+        this.conversations = Array.isArray(response.data) ? response.data : [];
+        this.filteredConversations = [...this.conversations];
+        this.extractCategories();
+      } catch (error) {
+        console.error('خطا در بارگذاری گفتگوها:', error);
+        this.conversations = [];
+        this.filteredConversations = [];
+        this.categories = [];
       }
     },
 
+    extractCategories() {
+      const categorySet = new Set();
+      this.conversations.forEach(conv => {
+        if (conv.category) {
+          categorySet.add(conv.category);
+        }
+      });
+      this.categories = Array.from(categorySet);
+    },
+
     async loadConversation(conversation) {
       try {
         const response = await axios.post(`/api/ai/conversations/${conversation.id}/messages`);
         this.currentConversation = conversation;
         this.userMessages = [];
         
-        // تبدیل پیام‌های دیتابیس به فرمت نمایش
         const messages = Array.isArray(response.data) ? response.data : [];
-        messages.forEach(msg => {
-          if (msg.role === 'user') {
-            this.userMessages.push(msg.content);
-          } else if (msg.role === 'assistant') {
-            this.userMessages.push({
-              isAI: true,
-              text: msg.content,
-              usage: {
-                prompt_tokens: msg.inputTokens,
-                completion_tokens: msg.outputTokens
-              },
-              cost: {
-                total_cost: msg.totalCost
-              }
-            });
-          }
-        });
+        this.convertMessages(messages);
         
         this.showConversationsDialog = false;
         this.$nextTick(() => {
@@ -729,6 +1081,53 @@ export default {
       }
     },
 
+    convertMessages(messages) {
+      messages.forEach(msg => {
+        if (msg.role === 'user') {
+          this.userMessages.push(msg.content);
+        } else if (msg.role === 'assistant') {
+          this.userMessages.push({
+            isAI: true,
+            text: msg.content,
+            usage: {
+              prompt_tokens: msg.inputTokens,
+              completion_tokens: msg.outputTokens
+            },
+            cost: {
+              total_cost: msg.totalCost
+            }
+          });
+        }
+      });
+    },
+
+    async newConversation() {
+      this.currentConversation = null;
+      this.userMessages = [];
+      this.showConversationsDialog = false;
+      this.setWelcomeMessage();
+    },
+
+    searchConversations() {
+      if (!this.searchTerm) {
+        this.filteredConversations = [...this.conversations];
+      } else {
+        this.filteredConversations = this.conversations.filter(conv =>
+          conv.title && conv.title.toLowerCase().includes(this.searchTerm.toLowerCase())
+        );
+      }
+    },
+
+    filterByCategory() {
+      if (!this.selectedCategory) {
+        this.filteredConversations = [...this.conversations];
+      } else {
+        this.filteredConversations = this.conversations.filter(conv =>
+          conv.category === this.selectedCategory
+        );
+      }
+    },
+
     deleteConversation(conversation) {
       this.conversationToDelete = conversation;
       this.showDeleteDialog = true;
@@ -742,31 +1141,18 @@ export default {
         const response = await axios.post(`/api/ai/conversations/${this.conversationToDelete.id}/delete`);
         
         if (response.data.success) {
-          // اگر گفتگوی حذف شده، گفتگوی فعلی است، گفتگوی جدید ایجاد کن
           if (this.currentConversation && this.currentConversation.id === this.conversationToDelete.id) {
             this.newConversation();
           }
           
-          // به‌روزرسانی کامل لیست گفتگوها
           await this.loadConversations();
-          
-          // نمایش پیام موفقیت
-          this.$emit('show-snackbar', {
-            text: 'گفتگو با موفقیت حذف شد',
-            color: 'success'
-          });
+          this.showSuccessMessage('گفتگو با موفقیت حذف شد');
         } else {
-          this.$emit('show-snackbar', {
-            text: response.data.error || 'خطا در حذف گفتگو',
-            color: 'error'
-          });
+          this.showErrorMessage(response.data.error || 'خطا در حذف گفتگو');
         }
       } catch (error) {
         console.error('خطا در حذف گفتگو:', error);
-        this.$emit('show-snackbar', {
-          text: 'خطا در حذف گفتگو',
-          color: 'error'
-        });
+        this.showErrorMessage('خطا در حذف گفتگو');
       } finally {
         this.isLoading = false;
         this.showDeleteDialog = false;
@@ -774,33 +1160,7 @@ export default {
       }
     },
 
-    async newConversation() {
-      this.currentConversation = null;
-      this.userMessages = [];
-      this.showConversationsDialog = false;
-      this.setWelcomeMessage();
-    },
-
-    searchConversations() {
-      if (!this.searchTerm) {
-        this.filteredConversations = Array.isArray(this.conversations) ? [...this.conversations] : [];
-      } else {
-        this.filteredConversations = Array.isArray(this.conversations) ? this.conversations.filter(conv =>
-          conv.title && conv.title.toLowerCase().includes(this.searchTerm.toLowerCase())
-        ) : [];
-      }
-    },
-
-    filterByCategory() {
-      if (!this.selectedCategory) {
-        this.filteredConversations = Array.isArray(this.conversations) ? [...this.conversations] : [];
-      } else {
-        this.filteredConversations = Array.isArray(this.conversations) ? this.conversations.filter(conv =>
-          conv.category === this.selectedCategory
-        ) : [];
-      }
-    },
-
+    // Messages
     setWelcomeMessage() {
       if (!this.aiSettings.aiEnabled) {
         this.displayWelcome = 'سرویس هوش مصنوعی در حال حاضر غیرفعال است. لطفاً با مدیر سیستم تماس بگیرید تا این سرویس را فعال کند.';
@@ -812,32 +1172,16 @@ export default {
     async sendMessage() {
       if (!this.userMessage.trim() || this.isLoading) return;
 
-      // بررسی فعال بودن هوش مصنوعی
       if (!this.aiSettings.aiEnabled) {
-        this.userMessages.push({
-          isAI: true,
-          text: 'سرویس هوش مصنوعی در حال حاضر غیرفعال است. لطفاً با مدیر سیستم تماس بگیرید تا این سرویس را فعال کند.',
-          isError: true
-        });
-        this.userMessage = '';
-        this.$nextTick(() => {
-          this.scrollToBottom();
-        });
+        this.addErrorMessage('سرویس هوش مصنوعی در حال حاضر غیرفعال است. لطفاً با مدیر سیستم تماس بگیرید تا این سرویس را فعال کند.');
         return;
       }
 
-      // بررسی اعتبار قبل از ارسال
       if (this.userBalance < 100) {
-        this.userMessages.push({
-          isAI: true,
-          text: `خطا: اعتبار شما کافی نیست (${this.formatBalance(this.userBalance)}). برای شارژ حساب خود روی دکمه زیر کلیک کنید:`,
-          isError: true,
-          showChargeButton: true
-        });
-        this.userMessage = '';
-        this.$nextTick(() => {
-          this.scrollToBottom();
-        });
+        this.addErrorMessage(
+          `اعتبار شما کافی نیست (${this.formatBalance(this.userBalance)}). برای شارژ حساب خود روی دکمه زیر کلیک کنید:`,
+          true
+        );
         return;
       }
 
@@ -851,110 +1195,85 @@ export default {
         this.scrollToBottom();
       });
 
-      let response = null;
       try {
-        // بررسی درخواست‌های مربوط به اشخاص
         const personKeywords = ['شخص', 'مشتری', 'تامین‌کننده', 'کارمند', 'موجودی', 'تراکنش'];
         const isPersonRequest = personKeywords.some(keyword => 
           message.toLowerCase().includes(keyword.toLowerCase())
         );
 
         if (isPersonRequest) {
-          // اگر درخواست مربوط به اشخاص است، ابتدا اطلاعات شخص را نمایش دهیم
           await this.showPersonDetails(message);
         }
-        // در هر صورت درخواست را به سرور ارسال کن
-        response = await axios.post('/api/wizard/talk', {
+
+        const response = await axios.post('/api/wizard/talk', {
           message: message,
           conversationId: this.currentConversation?.id || null
         });
 
-        if (response && response.data && response.data.success) {
-          console.log('AI Response Data:', response.data);
-          this.userMessages.push({
-            isAI: true,
-            text: response.data.response,
-            usage: response.data.usage,
-            cost: response.data.cost,
-            debug_info: response.data.debug_info ? {
-              ...response.data.debug_info,
-              expanded: false
-            } : null
-          });
-          await this.loadBalance();
-          await this.loadConversations();
-          this.$emit('show-snackbar', {
-            text: 'پاسخ دریافت شد',
-            color: 'success'
-          });
-        } else if (response && response.data) {
-          console.log('AI Error Response:', response.data);
-          this.userMessages.push({
-            isAI: true,
-            text: `خطا: ${response.data.error}`,
-            isError: true,
-            debug_info: response.data.debug_info || null
-          });
-        } else {
-          console.log('No response data');
-          this.userMessages.push({
-            isAI: true,
-            text: 'خطا در ارتباط با سرور',
-            isError: true,
-            debug_info: null
-          });
-        }
+        this.handleAIResponse(response);
       } catch (error) {
         console.error('خطا در ارسال پیام:', error);
-        this.userMessages.push({
-          isAI: true,
-          text: 'خطا: خطا در ارتباط با سرور',
-          isError: true,
-          debug_info: null
-        });
+        this.addErrorMessage('خطا در ارتباط با سرور');
       } finally {
         this.isLoading = false;
         this.isTyping = false;
         this.$nextTick(() => {
           this.scrollToBottom();
+          this.focusInput();
         });
       }
     },
 
+    handleAIResponse(response) {
+      if (response && response.data && response.data.success) {
+        this.userMessages.push({
+          isAI: true,
+          text: response.data.response,
+          usage: response.data.usage,
+          cost: response.data.cost,
+          debug_info: response.data.debug_info ? {
+            ...response.data.debug_info,
+            expanded: false
+          } : null
+        });
+        this.loadBalance();
+        this.loadConversations();
+        this.showSuccessMessage('پاسخ دریافت شد');
+      } else if (response && response.data) {
+        this.userMessages.push({
+          isAI: true,
+          text: `خطا: ${response.data.error}`,
+          isError: true,
+          debug_info: response.data.debug_info || null
+        });
+      } else {
+        this.userMessages.push({
+          isAI: true,
+          text: 'خطا در ارتباط با سرور',
+          isError: true,
+          debug_info: null
+        });
+      }
+    },
+
+    addErrorMessage(message, showChargeButton = false) {
+      this.userMessages.push({
+        isAI: true,
+        text: message,
+        isError: true,
+        showChargeButton
+      });
+      this.userMessage = '';
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+    },
+
     useSuggestion(suggestion) {
       this.userMessage = suggestion;
     },
 
-    clearChat() {
-      this.userMessages = [];
-      this.currentConversation = null;
-      this.setWelcomeMessage();
-    },
-
-    scrollToBottom() {
-      if (this.$refs.messagesContainer) {
-        this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
-      }
-    },
-
-    renderMarkdown(text) {
-      if (!text) return '';
-      const html = marked(text);
-      return DOMPurify.sanitize(html);
-    },
-
-    formatTime(date) {
-      return date.toLocaleTimeString('fa-IR', {
-        hour: '2-digit',
-        minute: '2-digit'
-      });
-    },
-
-    goToChargePage() {
-      // هدایت به صفحه شارژ با vue-router
-      this.$router.push('/acc/sms/panel');
-    },
-
+    // Person Management
     async searchPersons(searchTerm) {
       try {
         const response = await axios.post('/api/wizard/persons/search', {
@@ -1007,111 +1326,398 @@ export default {
 
     async showPersonDetails(searchTerm) {
       try {
-        // جستجوی شخص
         const persons = await this.searchPersons(searchTerm);
         
         if (persons.length === 0) {
-          this.$emit('show-snackbar', {
-            text: 'شخصی با این نام یافت نشد',
-            color: 'warning'
-          });
+          this.showWarningMessage('شخصی با این نام یافت نشد');
           return;
         }
 
-        // انتخاب اولین شخص (یا می‌توانیم لیست انتخاب نمایش دهیم)
         const person = persons[0];
-        
-        // دریافت اطلاعات کامل شخص
         const personDetails = await this.getPersonDetails(person.id);
+        
         if (!personDetails) {
-          this.$emit('show-snackbar', {
-            text: 'خطا در دریافت اطلاعات شخص',
-            color: 'error'
-          });
+          this.showErrorMessage('خطا در دریافت اطلاعات شخص');
           return;
         }
 
-        // دریافت تراکنش‌های شخص
         const transactions = await this.getPersonTransactions(person.id, 10);
 
-        // نمایش اطلاعات
         this.selectedPerson = personDetails;
         this.personTransactions = transactions;
         this.showPersonInfo = true;
 
       } catch (error) {
         console.error('خطا در نمایش اطلاعات شخص:', error);
-        this.$emit('show-snackbar', {
-          text: 'خطا در نمایش اطلاعات شخص',
-          color: 'error'
-        });
+        this.showErrorMessage('خطا در نمایش اطلاعات شخص');
       }
     },
 
-    toggleDebugInfo(index) {
-      if (this.userMessages[index] && this.userMessages[index].debug_info) {
-        this.userMessages[index].debug_info.expanded = !this.userMessages[index].debug_info.expanded;
+    // Debug
+    toggleJsonView(key) {
+      this.expandedJsonViews[key] = !this.expandedJsonViews[key];
+    },
+
+    openDebugDialog(debugInfo, messageIndex) {
+      this.currentDebugInfo = debugInfo;
+      this.showDebugDialog = true;
+      this.expandedJsonViews = {};
+    },
+
+    getDebugInfoCount(debugInfo) {
+      let count = 0;
+      if (debugInfo.operation_type) count++;
+      if (debugInfo.current_step) count++;
+      if (debugInfo.attempt_count) count++;
+      if (debugInfo.next_action) count++;
+      if (debugInfo.final_result) count++;
+      if (debugInfo.final_data) count++;
+      if (debugInfo.json_response) count++;
+      if (debugInfo.tool_commands && debugInfo.tool_commands.length > 0) count++;
+      if (debugInfo.execution_result) count++;
+      if (debugInfo.execution_results && debugInfo.execution_results.length > 0) count++;
+      if (debugInfo.ai_response) count++;
+      if (debugInfo.error) count++;
+      return count;
+    },
+
+    getOperationTypeColor(operationType) {
+      const colorMap = {
+        'add_person': 'success',
+        'edit_person': 'info',
+        'delete_person': 'error',
+        'search_person': 'primary',
+        'show_person': 'primary',
+        'add_phone': 'success',
+        'remove_phone': 'error',
+        'update_balance': 'warning',
+        'show_transactions': 'info',
+        'default': 'primary'
+      };
+      return colorMap[operationType] || colorMap.default;
+    },
+
+    getOperationTypeText(operationType) {
+      const textMap = {
+        'add_person': 'افزودن شخص',
+        'edit_person': 'ویرایش شخص',
+        'delete_person': 'حذف شخص',
+        'search_person': 'جستجوی شخص',
+        'show_person': 'نمایش شخص',
+        'add_phone': 'افزودن شماره تلفن',
+        'remove_phone': 'حذف شماره تلفن',
+        'update_balance': 'به‌روزرسانی موجودی',
+        'show_transactions': 'نمایش تراکنش‌ها',
+        'default': 'عملیات نامشخص'
+      };
+      return textMap[operationType] || textMap.default;
+    },
+
+    // Utilities
+    formatBalance(balance) {
+      const intBalance = Math.round(balance);
+      if (intBalance < 1000) {
+        return `${intBalance.toLocaleString('fa-IR')} ریال`;
+      } else {
+        return `${(intBalance / 1000).toFixed(1)} هزار ریال`;
       }
+    },
+
+    formatTime(date) {
+      return date.toLocaleTimeString('fa-IR', {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    },
+
+    renderMarkdown(text) {
+      if (!text) return '';
+      const html = marked(text);
+      return DOMPurify.sanitize(html);
+    },
+
+    scrollToBottom() {
+      this.$nextTick(() => {
+        if (this.$refs.messagesContainer) {
+          this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+        }
+      });
+    },
+
+    focusInput() {
+      this.$nextTick(() => {
+        if (this.$refs.messageInput) {
+          this.$refs.messageInput.focus();
+        }
+      });
+    },
+
+    goToChargePage() {
+      this.$router.push('/acc/sms/panel');
+    },
+
+    // Notifications
+    showSuccessMessage(text) {
+      this.$emit('show-snackbar', {
+        text,
+        color: 'success'
+      });
+    },
+
+    showErrorMessage(text) {
+      this.$emit('show-snackbar', {
+        text,
+        color: 'error'
+      });
+    },
+
+    showWarningMessage(text) {
+      this.$emit('show-snackbar', {
+        text,
+        color: 'warning'
+      });
     }
   }
 };
 </script>
 
 <style scoped>
-.page-container {
-  height: calc(100vh - 64px);
+/* Main Layout */
+.main-container {
+  height: calc(100vh - 70px);
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  overflow: hidden;
+}
+
+/* Header Styles */
+.ai-header {
+  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%) !important;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo-container {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.title-section {
   display: flex;
   flex-direction: column;
 }
 
+.app-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: white;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.app-subtitle {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.status-indicators {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.status-item {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.status-chip {
+  transition: all 0.3s ease;
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+.status-chip:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.action-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+/* Info Section */
+.info-section {
+  padding: 12px 24px 0;
+  flex-shrink: 0;
+}
+
 .info-cards {
-  margin-bottom: 8px;
+  display: flex;
+  gap: 12px;
+  max-width: 1400px;
+  margin: 0 auto;
+  flex-wrap: wrap;
 }
 
 .info-card {
-  border-radius: 12px;
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 8px;
+  overflow: hidden;
+  background: white;
+  transition: all 0.3s ease;
   border: 1px solid rgba(0, 0, 0, 0.08);
-}
-
-.pricing-section, .stats-section {
   flex: 1;
   min-width: 200px;
 }
 
-@media (max-width: 768px) {
-  .pricing-section, .stats-section {
-    min-width: 100%;
-    margin-bottom: 8px;
-  }
-  
-  .info-card .v-card-text {
-    padding: 12px;
-  }
+.info-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.content-container {
-  flex: 1;
+.card-content {
+  padding: 12px 16px;
+}
+
+.pricing-row,
+.stats-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pricing-icon,
+.stats-icon {
+  flex-shrink: 0;
+}
+
+.pricing-info,
+.stats-info {
   display: flex;
   flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.pricing-label,
+.stats-label {
+  font-size: 0.75rem;
+  color: #666;
+  font-weight: 500;
+}
+
+.pricing-value,
+.stats-value {
+  font-size: 0.875rem;
+  color: #333;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.pricing-unit {
+  font-size: 0.7rem;
+  color: #999;
+}
+
+/* Chat Section */
+.chat-section {
+  flex: 1;
+  padding: 20px 24px;
   overflow: hidden;
 }
 
 .chat-container {
-  flex: 1;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  margin: 16px;
-  border-radius: 12px;
+  border-radius: 20px;
   overflow: hidden;
+  background: white;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 .chat-header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  background: rgba(0, 0, 0, 0.02);
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 16px 24px;
+  flex-shrink: 0;
 }
 
-.chat-box {
+.conversation-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.conversation-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-text {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.category-chip {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.new-chat-btn {
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.new-chat-btn:hover {
+  background: rgba(26, 35, 126, 0.1);
+  transform: translateY(-1px);
+}
+
+/* Messages Area */
+.messages-area {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -1121,17 +1727,19 @@ export default {
 .messages-container {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
+  padding: 24px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
+  scroll-behavior: smooth;
 }
 
 .message {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
+  gap: 12px;
   max-width: 80%;
+  animation: messageSlideIn 0.3s ease-out;
 }
 
 .user-message {
@@ -1143,85 +1751,176 @@ export default {
   align-self: flex-start;
 }
 
+.message-avatar {
+  flex-shrink: 0;
+}
+
 .message-content {
-  background: #f5f5f5;
-  padding: 12px 16px;
-  border-radius: 18px;
+  background: #f8f9fa;
+  padding: 16px 20px;
+  border-radius: 20px;
   border-top-left-radius: 4px;
   position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
 }
 
 .user-message .message-content {
-  background: #1a237e;
+  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
   color: white;
-  border-top-left-radius: 18px;
+  border-top-left-radius: 20px;
   border-top-right-radius: 4px;
 }
 
+.message-content:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
 .message-text {
-  line-height: 1.5;
+  line-height: 1.6;
   white-space: pre-wrap;
+  font-size: 0.875rem;
 }
 
 .message-time {
   font-size: 0.75rem;
   opacity: 0.7;
-  margin-top: 4px;
+  margin-top: 8px;
 }
 
-.input-container {
+.error-message {
+  background: #ffebee !important;
+  border: 1px solid #ffcdd2;
+}
+
+.success-message {
+  background: #f1f8e9 !important;
+  border: 1px solid #c8e6c9;
+}
+
+/* Debug Section */
+.debug-section {
+  margin-top: 12px;
   display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  padding: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  background: white;
+  justify-content: flex-start;
 }
 
-.message-input {
-  flex-grow: 1;
-  margin-left: 12px;
-  margin-right: 0;
-}
-.send-button {
-  min-width: 48px;
-  min-height: 48px;
+.debug-btn {
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.3s ease;
 }
 
-.suggestions-container {
-  padding: 8px 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+.debug-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.debug-count {
+  margin-right: 4px;
+}
+
+/* Charge Section */
+.charge-section {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+}
+
+.charge-btn {
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.charge-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Suggestions */
+.suggestions-section {
+  padding: 24px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  flex-shrink: 0;
+}
+
+.suggestions-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.suggestions-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .suggestion-chip {
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   font-size: 0.75rem;
+  border-radius: 16px;
 }
 
 .suggestion-chip:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.delete-btn {
-  opacity: 0.7;
-  transition: all 0.2s ease;
+/* Input Section */
+.input-section {
+  padding: 20px 24px;
+  background: white;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  flex-shrink: 0;
 }
 
-.delete-btn:hover {
-  opacity: 1;
+.input-container {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.message-input {
+  border-radius: 24px;
+  background: #f8f9fa;
+  transition: all 0.3s ease;
+}
+
+.message-input:hover {
+  background: #f1f3f4;
+}
+
+.message-input:focus-within {
+  background: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.send-btn {
+  transition: all 0.3s ease;
+}
+
+.send-btn:hover {
   transform: scale(1.1);
 }
 
-.conversation-item:hover .delete-btn {
-  opacity: 1;
+.send-icon {
+  transform: rotate(180deg);
 }
 
+/* Typing Indicator */
 .typing-indicator {
   display: inline-flex;
   gap: 4px;
+  padding: 8px 0;
 }
 
 .typing-indicator span {
@@ -1246,158 +1945,1086 @@ export default {
   }
 }
 
-.error-message {
-  background: #ffebee !important;
-  border: 1px solid #ffcdd2;
+@keyframes messageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.details-message {
-  background: #e8f5e8 !important;
-  border: 1px solid #c8e6c9;
+/* Dialog Styles */
+.conversations-dialog,
+.delete-dialog,
+.person-dialog {
+  border-radius: 16px;
+  overflow: hidden;
 }
 
-/* استایل‌های آرشیو گفتگوها */
+.dialog-header {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 20px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.dialog-content {
+  padding: 24px;
+}
+
+/* Filters */
+.filters-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.search-field,
+.category-field {
+  border-radius: 8px;
+}
+
+/* Conversations List */
 .conversations-list {
   max-height: 400px;
   overflow-y: auto;
 }
 
-/* استایل‌های بهبود یافته تولبار */
-.status-chip, .balance-chip, .connection-chip {
-  transition: all 0.3s ease;
-  cursor: pointer;
-  border-radius: 8px;
-  font-weight: 500;
-}
-
-.status-chip:hover, .balance-chip:hover, .connection-chip:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.archive-btn {
-  transition: all 0.3s ease;
-  border-radius: 8px;
-}
-
-.archive-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-/* بهبود tooltip */
-.v-tooltip {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-/* استایل دکمه شارژ */
-.charge-button-container {
-  display: flex;
-  justify-content: center;
-}
-
-.charge-btn {
-  transition: all 0.3s ease;
-  border-radius: 8px;
-  font-weight: 500;
-}
-
-.charge-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.conversations-items {
+  background: transparent;
 }
 
 .conversation-item {
+  border-radius: 12px;
+  margin-bottom: 8px;
+  transition: all 0.3s ease;
   cursor: pointer;
-  transition: background-color 0.2s ease;
-  border-radius: 8px;
-  margin-bottom: 4px;
 }
 
 .conversation-item:hover {
-  background-color: rgba(26, 35, 126, 0.1);
+  background: rgba(26, 35, 126, 0.1);
+  transform: translateX(4px);
 }
 
-.conversation-item:active {
-  background-color: rgba(26, 35, 126, 0.2);
+.conversation-title {
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
 }
 
-.send-icon-rotate {
-  transform: rotate(180deg);
-}
-
-/* استایل‌های Debug Info */
-.debug-info-section {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  padding-top: 12px;
-}
-
-.debug-panel-title {
-  font-size: 0.875rem;
-  font-weight: 500;
+.conversation-details {
   color: #666;
 }
 
+.conversation-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.conversation-date {
+  font-size: 0.75rem;
+  color: #999;
+}
+
+.conversation-stats {
+  font-size: 0.75rem;
+  color: #666;
+}
+
+.delete-btn {
+  opacity: 0.7;
+  transition: all 0.3s ease;
+}
+
+.delete-btn:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.conversation-item:hover .delete-btn {
+  opacity: 1;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background: #f8f9fa;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Delete Dialog */
+.delete-header {
+  background: linear-gradient(135deg, #ffebee 0%, #ffffff 100%);
+  color: #d32f2f;
+}
+
+.delete-content {
+  padding: 24px;
+}
+
+.delete-message {
+  font-size: 1rem;
+  color: #333;
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+
+.delete-warning {
+  font-size: 0.875rem;
+  color: #666;
+  line-height: 1.5;
+}
+
+.delete-actions {
+  padding: 16px 24px;
+  background: #f8f9fa;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Debug Dialog */
+.debug-dialog {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f8f9fa;
+}
+
+.debug-header {
+  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
+  color: white;
+  padding: 20px 24px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.debug-title-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.debug-icon {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 12px;
+  backdrop-filter: blur(10px);
+}
+
+.debug-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.debug-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+  color: white;
+}
+
+.debug-subtitle {
+  font-size: 0.875rem;
+  margin: 4px 0 0 0;
+  opacity: 0.8;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.debug-count {
+  margin-right: 16px;
+  font-weight: 500;
+}
+
+.close-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
 .debug-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  background: #f8f9fa;
+}
+
+/* Debug Main Cards */
+.debug-main-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.debug-main-card {
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: none;
+  background: white;
+  animation: slideInUp 0.4s ease-out;
+}
+
+.debug-main-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+}
+
+.debug-main-card:nth-child(1) { animation-delay: 0.1s; }
+.debug-main-card:nth-child(2) { animation-delay: 0.2s; }
+.debug-main-card:nth-child(3) { animation-delay: 0.3s; }
+.debug-main-card:nth-child(4) { animation-delay: 0.4s; }
+
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  gap: 16px;
+}
+
+.card-icon {
+  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
+  border-radius: 12px;
+  padding: 12px;
+  min-width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-content {
+  flex: 1;
+}
+
+.card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #333;
+}
+
+.card-text {
+  font-size: 0.875rem;
+  color: #666;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.operation-chip {
+  font-weight: 500;
+  font-size: 0.75rem;
+}
+
+.attempt-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.progress-bar {
+  border-radius: 4px;
+}
+
+.attempt-text {
+  font-size: 0.875rem;
+  color: #666;
+  font-weight: 500;
+}
+
+/* Debug Results Section */
+.debug-results-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.debug-section-card {
+  border-radius: 16px;
+  overflow: hidden;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  animation: slideInUp 0.4s ease-out;
+}
+
+.debug-section-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+.section-title {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 16px 20px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #333;
+  display: flex;
+  align-items: center;
+}
+
+.section-content {
+  padding: 20px;
+}
+
+/* Tools Grid */
+.tools-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.tool-item {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 16px;
+  border-left: 4px solid #1a237e;
+  transition: all 0.3s ease;
+}
+
+.tool-item:hover {
+  background: #e3f2fd;
+  transform: translateX(4px);
+}
+
+.tool-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.tool-name {
+  font-weight: 600;
+  color: #333;
   font-size: 0.875rem;
 }
 
-.debug-section h4 {
-  color: #333;
-  margin-bottom: 8px;
+.tool-actions {
+  display: flex;
+  gap: 8px;
 }
 
-.debug-card {
-  background: #fafafa;
+.view-btn {
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.view-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Timeline */
+.execution-timeline {
+  position: relative;
+  padding-left: 24px;
+}
+
+.execution-timeline::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: linear-gradient(to bottom, #4caf50, #81c784);
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.timeline-marker {
+  position: absolute;
+  left: -16px;
+  top: 0;
+  background: white;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.timeline-content {
+  background: #f1f8e9;
+  border-radius: 12px;
+  padding: 16px;
+  border-left: 4px solid #4caf50;
+  transition: all 0.3s ease;
+}
+
+.timeline-content:hover {
+  background: #e8f5e8;
+  transform: translateX(4px);
+}
+
+.timeline-header {
+  margin-bottom: 12px;
+}
+
+.timeline-title {
+  font-weight: 600;
+  color: #333;
+  font-size: 0.875rem;
+}
+
+.timeline-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* JSON Container */
+.json-container {
+  margin-top: 12px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  overflow: hidden;
   border: 1px solid #e0e0e0;
 }
 
-.debug-text {
-  font-family: 'Courier New', monospace;
+.json-content {
+  font-family: 'Fira Code', 'Courier New', monospace;
   font-size: 0.75rem;
   line-height: 1.4;
   color: #333;
-  background: #f5f5f5;
-  padding: 8px;
-  border-radius: 4px;
+  background: #ffffff;
+  padding: 16px;
+  margin: 0;
   overflow-x: auto;
   white-space: pre-wrap;
   word-break: break-word;
+  border: 1px solid #e0e0e0;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* AI Response Container */
+.ai-response-container {
+  margin-top: 12px;
+  background: #e3f2fd;
+  border-radius: 8px;
+  padding: 16px;
+  border-left: 4px solid #2196f3;
+}
+
+.ai-response-content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-.command-item {
-  border-left: 3px solid #1a237e;
-  padding-left: 12px;
-  background: #f8f9fa;
-  border-radius: 4px;
-  padding: 8px;
+/* Success and Error Cards */
+.success-card {
+  border-left: 4px solid #4caf50;
 }
 
-.command-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 4px;
+.error-card {
+  border-left: 4px solid #f44336;
 }
 
-.command-header .text-caption {
-  color: #666;
+.final-result-content {
+  background: #e8f5e8;
+  border-radius: 8px;
+  padding: 16px;
+  border-left: 4px solid #4caf50;
+}
+
+.result-text {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #2e7d32;
+  margin: 0;
   font-weight: 500;
 }
 
-/* استایل‌های Manual Commands */
-.manual-commands-section {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  padding-top: 12px;
+.error-content {
+  background: #ffebee;
+  border-radius: 8px;
+  padding: 16px;
+  border-left: 4px solid #f44336;
 }
 
-.manual-commands-section h4 {
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.manual-commands-section .v-btn {
-  font-size: 0.75rem;
+.error-text {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #d32f2f;
+  margin: 0;
   font-weight: 500;
 }
+
+/* Animations */
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .header-content {
+    padding: 0 12px;
+  }
+  
+  .app-title {
+    font-size: 0.9rem;
+  }
+  
+  .app-subtitle {
+    font-size: 0.65rem;
+  }
+  
+  .status-indicators {
+    gap: 6px;
+  }
+  
+  .status-chip {
+    font-size: 0.7rem;
+  }
+  
+  .header-center {
+    display: none;
+  }
+  
+  .header-right {
+    margin-right: auto;
+  }
+  
+  .info-section {
+    padding: 6px 12px 0;
+  }
+  
+  .info-cards {
+    flex-direction: column;
+    gap: 6px;
+  }
+  
+  .info-card {
+    min-width: auto;
+    border-radius: 6px;
+  }
+  
+  .card-content {
+    padding: 8px 12px;
+  }
+  
+  .pricing-row,
+  .stats-row {
+    gap: 6px;
+  }
+  
+  .pricing-icon,
+  .stats-icon {
+    font-size: 14px;
+  }
+  
+  .pricing-label,
+  .stats-label {
+    font-size: 0.7rem;
+  }
+  
+  .pricing-value,
+  .stats-value {
+    font-size: 0.75rem;
+    line-height: 1.2;
+  }
+  
+  .pricing-unit {
+    font-size: 0.65rem;
+  }
+  
+  .chat-section {
+    padding: 12px;
+  }
+  
+  .chat-container {
+    border-radius: 12px;
+  }
+  
+  .chat-header {
+    padding: 12px 16px;
+  }
+  
+  .conversation-title {
+    font-size: 0.9rem;
+  }
+  
+  .title-text {
+    font-size: 1rem;
+  }
+  
+  .messages-container {
+    padding: 12px;
+    gap: 16px;
+  }
+  
+  .message {
+    max-width: 92%;
+    gap: 8px;
+  }
+  
+  .message-content {
+    padding: 12px 16px;
+  }
+  
+  .message-text {
+    font-size: 0.8rem;
+  }
+  
+  .message-time {
+    font-size: 0.65rem;
+  }
+  
+  .suggestions-section {
+    padding: 16px;
+  }
+  
+  .suggestions-title {
+    font-size: 0.8rem;
+    margin-bottom: 12px;
+  }
+  
+  .suggestions-grid {
+    gap: 6px;
+  }
+  
+  .suggestion-chip {
+    font-size: 0.7rem;
+    height: 28px;
+  }
+  
+  .input-section {
+    padding: 12px;
+  }
+  
+  .message-input {
+    border-radius: 20px;
+  }
+  
+  .filters-section {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  
+  .search-field,
+  .category-field {
+    font-size: 0.8rem;
+  }
+  
+  .conversations-list {
+    max-height: 350px;
+  }
+  
+  .conversation-item {
+    padding: 8px 0;
+  }
+  
+  .conversation-title {
+    font-size: 0.85rem;
+  }
+  
+  .conversation-stats {
+    font-size: 0.7rem;
+  }
+  
+  .debug-header {
+    padding: 12px;
+  }
+  
+  .debug-title {
+    font-size: 1.1rem;
+  }
+  
+  .debug-subtitle {
+    font-size: 0.8rem;
+  }
+  
+  .debug-main-cards {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  
+  .card-header {
+    padding: 12px;
+    gap: 12px;
+  }
+  
+  .card-icon {
+    min-width: 40px;
+    height: 40px;
+  }
+  
+  .card-title {
+    font-size: 0.9rem;
+  }
+  
+  .card-text {
+    font-size: 0.8rem;
+  }
+  
+  .section-content {
+    padding: 12px;
+  }
+  
+  .section-title {
+    padding: 12px 16px;
+    font-size: 0.9rem;
+  }
+  
+  .tool-item,
+  .timeline-content {
+    padding: 12px;
+  }
+  
+  .tool-name,
+  .timeline-title {
+    font-size: 0.8rem;
+  }
+  
+  .view-btn {
+    font-size: 0.7rem;
+  }
+  
+  .json-content {
+    font-size: 0.65rem;
+    padding: 10px;
+  }
+  
+  .debug-content {
+    padding: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-left {
+    gap: 8px;
+  }
+  
+  .logo-container {
+    padding: 4px;
+  }
+  
+  .app-title {
+    font-size: 0.8rem;
+  }
+  
+  .app-subtitle {
+    font-size: 0.6rem;
+  }
+  
+  .status-indicators {
+    display: none;
+  }
+  
+  .info-section {
+    padding: 4px 8px 0;
+  }
+  
+  .info-cards {
+    gap: 4px;
+  }
+  
+  .card-content {
+    padding: 6px 10px;
+  }
+  
+  .pricing-row,
+  .stats-row {
+    gap: 4px;
+  }
+  
+  .pricing-icon,
+  .stats-icon {
+    font-size: 12px;
+  }
+  
+  .pricing-label,
+  .stats-label {
+    font-size: 0.65rem;
+  }
+  
+  .pricing-value,
+  .stats-value {
+    font-size: 0.7rem;
+  }
+  
+  .pricing-unit {
+    font-size: 0.6rem;
+  }
+  
+  .chat-section {
+    padding: 8px;
+  }
+  
+  .chat-header {
+    padding: 10px 12px;
+  }
+  
+  .title-text {
+    font-size: 0.9rem;
+  }
+  
+  .messages-container {
+    padding: 8px;
+    gap: 12px;
+  }
+  
+  .message {
+    max-width: 95%;
+    gap: 6px;
+  }
+  
+  .message-content {
+    padding: 10px 14px;
+  }
+  
+  .message-text {
+    font-size: 0.75rem;
+  }
+  
+  .message-time {
+    font-size: 0.6rem;
+  }
+  
+  .suggestions-section {
+    padding: 12px;
+  }
+  
+  .suggestions-title {
+    font-size: 0.75rem;
+    margin-bottom: 10px;
+  }
+  
+  .suggestions-grid {
+    gap: 4px;
+  }
+  
+  .suggestion-chip {
+    font-size: 0.65rem;
+    height: 24px;
+  }
+  
+  .input-section {
+    padding: 8px;
+  }
+  
+  .message-input {
+    font-size: 0.8rem;
+  }
+  
+  .filters-section {
+    gap: 8px;
+  }
+  
+  .search-field,
+  .category-field {
+    font-size: 0.75rem;
+  }
+  
+  .conversations-list {
+    max-height: 300px;
+  }
+  
+  .conversation-item {
+    padding: 6px 0;
+  }
+  
+  .conversation-title {
+    font-size: 0.8rem;
+  }
+  
+  .conversation-stats {
+    font-size: 0.65rem;
+  }
+  
+  .debug-header {
+    padding: 8px;
+  }
+  
+  .debug-title {
+    font-size: 1rem;
+  }
+  
+  .debug-subtitle {
+    font-size: 0.75rem;
+  }
+  
+  .debug-main-cards {
+    gap: 8px;
+  }
+  
+  .card-header {
+    padding: 8px;
+    gap: 8px;
+  }
+  
+  .card-icon {
+    min-width: 36px;
+    height: 36px;
+  }
+  
+  .card-title {
+    font-size: 0.8rem;
+  }
+  
+  .card-text {
+    font-size: 0.75rem;
+  }
+  
+  .section-content {
+    padding: 8px;
+  }
+  
+  .section-title {
+    padding: 10px 12px;
+    font-size: 0.8rem;
+  }
+  
+  .tool-item,
+  .timeline-content {
+    padding: 8px;
+  }
+  
+  .tool-name,
+  .timeline-title {
+    font-size: 0.75rem;
+  }
+  
+  .view-btn {
+    font-size: 0.65rem;
+  }
+  
+  .json-content {
+    font-size: 0.6rem;
+    padding: 8px;
+  }
+  
+  .debug-content {
+    padding: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-content {
+    padding: 0 6px;
+  }
+  
+  .header-left {
+    gap: 8px;
+  }
+  
+  .logo-container {
+    padding: 4px;
+  }
+  
+  .app-title {
+    font-size: 0.7rem;
+  }
+  
+  .app-subtitle {
+    font-size: 0.5rem;
+  }
+  
+  .status-indicators {
+    display: none;
+  }
+  
+  .header-center {
+    display: none;
+  }
+  
+  .header-right {
+    margin-right: auto;
+  }
+  
+  .action-btn {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .message {
+    max-width: 95%;
+  }
+  
+  .message-content {
+    padding: 12px 16px;
+  }
+  
+  .suggestions-grid {
+    gap: 6px;
+  }
+  
+  .suggestion-chip {
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 360px) {
+  .header-content {
+    padding: 0 4px;
+  }
+  
+  .header-left {
+    gap: 6px;
+  }
+  
+  .logo-container {
+    padding: 3px;
+  }
+  
+  .app-title {
+    font-size: 0.65rem;
+  }
+  
+  .app-subtitle {
+    font-size: 0.45rem;
+  }
+  
+  .action-btn {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .action-btn .v-icon {
+    font-size: 18px;
+  }
+}
 </style>