Polish dashboard UI to match Mento mockup with IRANSans and brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/dashboard/HomeAiAssistant.vue

@@ -12,7 +12,7 @@ const emit = defineEmits<{
 }>();
 
 const shortcuts = [
-  { label: 'خلاصه مشتری شرکت آریانا را بده', to: '/contacts', icon: 'users' as const },
+  { label: 'خلاصه مشتری شرکت آریا را بده', to: '/contacts', icon: 'users' as const },
   { label: 'متن پیگیری برای مشتری بفرست', to: '/notes', icon: 'send' as const },
   { label: 'گزارش فروش این هفته را نشان بده', to: '/reports', icon: 'chart' as const },
   { label: 'معاملات در خطر را لیست کن', to: '/pipeline', icon: 'warning' as const },
@@ -20,10 +20,10 @@ const shortcuts = [
 </script>
 
 <template>
-  <article class="panel ai-panel">
+  <article class="panel">
     <header class="panel-head">
       <h2>
-        <UiIcon name="sparkle" :size="16" />
+        <span class="spark"><UiIcon name="sparkle" :size="15" /></span>
         دستیار هوشمند منتو
       </h2>
     </header>
@@ -31,13 +31,8 @@ const shortcuts = [
     <p class="ai-lead">چه کمکی می‌تونم بکنم؟</p>
 
     <div class="ai-shortcuts">
-      <RouterLink
-        v-for="item in shortcuts"
-        :key="item.label"
-        class="ai-chip"
-        :to="item.to"
-      >
-        <span class="chip-ico"><UiIcon :name="item.icon" :size="15" /></span>
+      <RouterLink v-for="item in shortcuts" :key="item.label" class="ai-chip" :to="item.to">
+        <span class="chip-ico"><UiIcon :name="item.icon" :size="14" /></span>
         <span>{{ item.label }}</span>
       </RouterLink>
     </div>
@@ -50,7 +45,7 @@ const shortcuts = [
         @input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
       />
       <button type="submit" aria-label="ارسال">
-        <UiIcon name="send" :size="16" />
+        <UiIcon name="send" :size="15" />
       </button>
     </form>
   </article>
@@ -59,8 +54,8 @@ const shortcuts = [
 <style scoped>
 .panel {
   background: #fff;
-  border-radius: 22px;
-  padding: 1.05rem 1.1rem;
+  border-radius: 20px;
+  padding: 1rem 1rem 0.95rem;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
   border: 1px solid #eef2f7;
   min-width: 0;
@@ -74,49 +69,60 @@ const shortcuts = [
 
 h2 {
   margin: 0;
-  font-size: 0.98rem;
+  font-size: 0.92rem;
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.4rem;
   color: #0f172a;
 }
 
+.spark {
+  color: #eab308;
+  display: grid;
+}
+
 .ai-lead {
-  margin: 0 0 0.85rem;
-  color: #94a3b8;
-  font-size: 0.88rem;
+  margin: 0 0 0.75rem;
+  padding: 0.55rem 0.75rem;
+  width: fit-content;
+  max-width: 100%;
+  background: #d1fae5;
+  color: #115e59;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-radius: 14px 14px 4px 14px;
 }
 
 .ai-shortcuts {
   display: grid;
-  gap: 0.45rem;
-  margin-bottom: 0.95rem;
+  gap: 0.4rem;
+  margin-bottom: 0.8rem;
   flex: 1;
 }
 
 .ai-chip {
   display: flex;
   align-items: center;
-  gap: 0.6rem;
-  padding: 0.7rem 0.8rem;
-  border-radius: 14px;
-  background: #f8fafc;
+  gap: 0.55rem;
+  padding: 0.58rem 0.7rem;
+  border-radius: 12px;
+  background: #fff;
   border: 1px solid #eef2f7;
   color: #334155;
-  font-size: 0.8rem;
+  font-size: 0.76rem;
   text-decoration: none;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
 }
 
 .ai-chip:hover {
-  background: #ecfdf8;
+  background: #f0fdfa;
   border-color: #99f6e4;
 }
 
 .chip-ico {
-  width: 28px;
-  height: 28px;
-  border-radius: 10px;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
   background: #ecfdf8;
   color: #14b8a6;
   display: grid;
@@ -126,22 +132,23 @@ h2 {
 
 .ai-input {
   display: flex;
-  gap: 0.45rem;
+  gap: 0.4rem;
   margin-top: auto;
 }
 
 .ai-input input {
   flex: 1;
   border: 1px solid #e2e8f0;
-  border-radius: 14px;
-  padding: 0.7rem 0.85rem;
+  border-radius: 12px;
+  padding: 0.58rem 0.75rem;
   background: #f8fafc;
+  font-size: 0.8rem;
 }
 
 .ai-input button {
-  width: 44px;
+  width: 40px;
   border: 0;
-  border-radius: 14px;
+  border-radius: 12px;
   background: #14b8a6;
   color: #fff;
   cursor: pointer;