diff --git a/package.json b/package.json
index f877f1e..28e29d2 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
     "vue3-apexcharts": "^1.4.4",
     "vue3-lazyload": "^0.3.8",
     "vue3-odometer": "^0.1.3",
-    "vue3-otp-input": "^0.4.1"
+    "vue3-otp-input": "^0.4.1",
+    "wavesurfer.js": "^7.12.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
diff --git a/src/App.vue b/src/App.vue
index 4fecfe4..792692d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,7 @@
     </transition>
 
     <div
-      v-if="showSupportButton && !showSplash"
+      v-if="showSupportButton && !showSplash && route.name !== 'support'"
       id="support-button"
       ref="supportButtonEl"
       class="draggable-support-button"
@@ -61,6 +61,12 @@
       <div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
         <BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
         <span class="support-button-label">پشتیبانی</span>
+        <span
+          v-if="supportChatUnreadCount > 0"
+          class="support-fab-badge"
+        >
+          {{ supportChatUnreadCount > 99 ? '99+' : supportChatUnreadCount }}
+        </span>
       </div>
     </div>
 
@@ -85,7 +91,9 @@
 import { colors } from './themeConfig'
 import pkg from '../package.json'
 import { getDisplayAppVersion } from '@/config/config-cache'
-import { computed, defineAsyncComponent, h, onMounted, ref } from 'vue'
+import { computed, defineAsyncComponent, h, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { message } from 'ant-design-vue'
 import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
 import img_pattern from '@/views/login/assets/img/pattern.svg'
 import { LoadingOutlined } from '@ant-design/icons-vue'
@@ -97,6 +105,10 @@ import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
 import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
 import { usePwaInstall } from '@/composables/usePwaInstall'
 import PwaInstallGuideModal from '@/components/pwa/PwaInstallGuideModal.vue'
+import { useUserStore } from '@/store/userStore'
+import { useSettingsStore } from '@/store/settingsStore'
+import { connectChatIfExists, disconnectChat, isSettingFlagOn, unreadSupportCount, useChatService } from '@/utils/chat'
+import { getToken } from '@/utils'
 
 import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
 import logoFull from '@/assets/img/logo_full_.png'
@@ -113,6 +125,7 @@ const indicator = h(LoadingOutlined, {
 })
 const displayVersion = getDisplayAppVersion(pkg.version)
 const showSplash = ref(true)
+const route = useRoute()
 
 useApplyDesktopLayoutClass()
 
@@ -127,6 +140,7 @@ const {
   supportPickerAnchor,
   supportMessengerEntries,
   messengerMeta,
+  isChatEnabled,
   hasMessengerLink: showSupportButton,
   openMessengerEntry,
   openSupportMessenger,
@@ -135,6 +149,10 @@ const {
 const supportButtonEl = ref<HTMLElement | null>(null)
 const pickerAnchorEl = computed(() => supportPickerAnchor.value ?? supportButtonEl.value)
 
+const supportChatUnreadCount = computed(() =>
+  isChatEnabled.value ? Number(unreadSupportCount.value) || 0 : 0,
+)
+
 const supportIcon = computed(() => messengerMeta.value.icon)
 
 const supportAccentColor = computed(() =>
@@ -171,6 +189,54 @@ onMounted(async () => {
   }, 2000)
 })
 
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+const { latestIncomingNotification } = useChatService()
+let lastConnectedChatSessionKey = ''
+let lastSupportToastAt = 0
+
+watch(
+  () => [
+    userStore.userInfo?.chat_room_id,
+    userStore.userInfo?.chat_user_id,
+    settingsStore.getSettingByKey('chat_api_key'),
+    settingsStore.getSettingByKey('show_to_users_chat'),
+    settingsStore.getSettingByKey('has_chat'),
+    getToken(),
+  ],
+  async ([roomId, chatUserId, chatApiKey, chatAdminFlag, chatCustomerFlag, token]) => {
+    const chatOn =
+      isSettingFlagOn(chatAdminFlag) && isSettingFlagOn(chatCustomerFlag)
+    if (!token || !chatOn || !chatApiKey || !roomId || !chatUserId) {
+      lastConnectedChatSessionKey = ''
+      disconnectChat()
+      return
+    }
+
+    const sessionKey = `${roomId}:${chatUserId}:${chatApiKey}`
+    if (lastConnectedChatSessionKey === sessionKey) return
+
+    try {
+      await connectChatIfExists()
+      lastConnectedChatSessionKey = sessionKey
+    } catch (error) {
+      lastConnectedChatSessionKey = ''
+      console.error('connectChatIfExists failed:', error)
+    }
+  },
+  { immediate: true },
+)
+
+watch(latestIncomingNotification, (payload) => {
+  if (!payload) return
+  if (payload.at === lastSupportToastAt) return
+  lastSupportToastAt = payload.at
+  message.info({
+    content: `پیام جدید پشتیبانی: ${payload.body}`,
+    duration: 3,
+  })
+})
+
 </script>
 
 <style lang="less">
@@ -193,6 +259,7 @@ onMounted(async () => {
 }
 
 .support-button-inner {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -218,6 +285,24 @@ onMounted(async () => {
   }
 }
 
+.support-fab-badge {
+  position: absolute;
+  top: -6px;
+  left: -4px;
+  z-index: 2;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: #dc2626;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+  box-shadow: 0 0 0 2px #fff;
+}
+
 #support-button:not(.is-dragging):hover .support-button-inner {
   transform: translateY(-1px);
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
diff --git a/src/api/chat.ts b/src/api/chat.ts
new file mode 100644
index 0000000..064c404
--- /dev/null
+++ b/src/api/chat.ts
@@ -0,0 +1,6 @@
+import useAxios from '@/utils/useAxios'
+import type { User } from '@/models/login'
+
+export const startChat = async (): Promise<{ message: string; user: User }> => {
+  return await useAxios.get<{ message: string; user: User }>(`/customer/start-chat`)
+}
diff --git a/src/components/BasicPacks/tools/icons/icons.json b/src/components/BasicPacks/tools/icons/icons.json
index 808834e..645a7e5 100644
--- a/src/components/BasicPacks/tools/icons/icons.json
+++ b/src/components/BasicPacks/tools/icons/icons.json
@@ -1018,6 +1018,8 @@
   "vuesax-linear:zel-(zel)": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.5 11.5V14.3L8 15.8L5.5 14.3V11.5L8 10L9.2 10.7L10.5 11.5Z\" stroke=\"#17191C\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linejoin=\"round\"/>\n<path d=\"M18.5 11.5V14.3L16 15.8L13.5 14.3V11.5L14.8 10.7L16 10L18.5 11.5Z\" stroke=\"#17191C\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linejoin=\"round\"/>\n<path d=\"M14.8 9.29999V10.7L13.5 11.5V13.2L12 14.1L10.5 13.2V11.5L9.19995 10.7V9.29999L12 7.79999L14.8 9.29999Z\" stroke=\"#17191C\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#17191C\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linejoin=\"round\"/>\n</svg>\n",
   "vuesax-linear:zoom": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6 9.69999V12.5C6 14 7.3 15.3 8.8 15.3H12.5C13 15.3 13.4 14.9 13.4 14.4V11.6C13.4 10.1 12.2 8.79999 10.6 8.79999H6.9C6.4 8.79999 6 9.19999 6 9.69999Z\" stroke=\"#17191C\" stroke-width=\"1.5\" stroke-miterlimit=\"10\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 9.20001V14.8L15.2 12.9V11.1L18 9.20001Z\" stroke=\"#17191C\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#17191C\" stroke-width=\"1.5\" stroke-miterlimit=\"10\"/>\n</svg>\n",
   "other:target": "<svg width=\"56\" height=\"28\" viewBox=\"0 0 56 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M54.32 28C55.2478 28 56.0053 27.2472 55.9496 26.321C55.7632 23.2181 55.0612 20.1639 53.8686 17.2849C52.4615 13.8877 50.399 10.8011 47.799 8.20101C45.1989 5.60097 42.1123 3.5385 38.7151 2.13137C35.318 0.724241 31.677 -1.60727e-07 28 0C24.323 1.60727e-07 20.682 0.724242 17.2849 2.13137C13.8877 3.53851 10.801 5.60097 8.20101 8.20101C5.60097 10.8011 3.5385 13.8877 2.13137 17.2849C0.938832 20.1639 0.236779 23.2181 0.0503842 26.321C-0.00525254 27.2472 0.752162 28 1.68 28C2.60784 28 3.35404 27.247 3.41725 26.3213C3.59899 23.66 4.21196 21.042 5.23561 18.5707C6.47388 15.5812 8.28885 12.8649 10.5769 10.5769C12.8649 8.28885 15.5812 6.47389 18.5707 5.23561C21.5601 3.99733 24.7642 3.36 28 3.36C31.2358 3.36 34.4399 3.99733 37.4293 5.23561C40.4188 6.47388 43.1351 8.28885 45.4231 10.5769C47.7111 12.8649 49.5261 15.5812 50.7644 18.5707C51.788 21.042 52.401 23.66 52.5827 26.3213C52.646 27.247 53.3922 28 54.32 28Z\" fill=\"#F9F9F9\"/>\n<path d=\"M1.68 28C0.752162 28 -0.00525296 27.2471 0.0503821 26.321C0.298706 22.187 1.46159 18.1522 3.46342 14.5109C5.46525 10.8696 8.24887 7.72575 11.6062 5.30103C12.3584 4.75778 13.3999 4.99389 13.897 5.77729C14.3942 6.56069 14.1582 7.59423 13.4105 8.14361C10.5289 10.2609 8.13693 12.9843 6.40781 16.1296C4.67869 19.2748 3.66086 22.7537 3.41725 26.3213C3.35404 27.2469 2.60784 28 1.68 28Z\" fill=\"#F59E0B\"/>\n<path d=\"M23.2436 18.0636C23.2472 18.0782 23.2654 18.1473 23.2982 18.2709C23.3345 18.3909 23.3727 18.5418 23.4127 18.7236C23.4527 18.9018 23.4891 19.0945 23.5218 19.3018C23.5545 19.5091 23.5709 19.7036 23.5709 19.8855C23.5709 20.1473 23.5436 20.4 23.4891 20.6436C23.4382 20.8873 23.3527 21.1036 23.2327 21.2927C23.1127 21.4818 22.9545 21.6327 22.7582 21.7455C22.5618 21.8582 22.3182 21.9145 22.0272 21.9145C21.9145 21.9145 21.7945 21.9036 21.6672 21.8818C21.54 21.8564 21.4109 21.8145 21.28 21.7564C21.1527 21.6945 21.0272 21.6109 20.9036 21.5055C20.78 21.4 20.6654 21.2655 20.56 21.1018C20.48 21.2291 20.3927 21.3382 20.2982 21.4291C20.2036 21.52 20.1054 21.5964 20.0036 21.6582C19.9018 21.72 19.7982 21.7709 19.6927 21.8109C19.5909 21.8509 19.4909 21.8818 19.3927 21.9036C19.2872 21.9291 19.18 21.9418 19.0709 21.9418C19.0054 21.9418 18.9109 21.9345 18.7872 21.92C18.6672 21.9018 18.5291 21.8509 18.3727 21.7673C18.4091 22.1309 18.4345 22.4836 18.4491 22.8255C18.4672 23.1673 18.48 23.4945 18.4872 23.8073C18.4945 24.1164 18.4982 24.4091 18.4982 24.6855C18.4982 24.9582 18.4982 25.2109 18.4982 25.4436V25.9945H17.4727V25.4436C17.4727 25.1709 17.4709 24.8582 17.4672 24.5055C17.4672 24.1491 17.4582 23.7709 17.44 23.3709C17.4218 22.9673 17.3945 22.5491 17.3582 22.1164C17.3254 21.6836 17.2782 21.2509 17.2163 20.8182C17.1545 20.3855 17.0763 19.9618 16.9818 19.5473C16.8872 19.1291 16.7745 18.7364 16.6436 18.3691L17.62 18.0527C17.6563 18.1764 17.6909 18.2927 17.7236 18.4018C17.7563 18.5109 17.7872 18.6236 17.8163 18.74C17.8491 18.8527 17.88 18.9709 17.9091 19.0945C17.9418 19.2182 17.9763 19.3564 18.0127 19.5091C18.0527 19.6727 18.1036 19.84 18.1654 20.0109C18.2309 20.1818 18.3109 20.3364 18.4054 20.4745C18.5 20.6127 18.6109 20.7218 18.7382 20.8018C18.8436 20.8709 18.9618 20.9055 19.0927 20.9055C19.1218 20.9055 19.1509 20.9036 19.18 20.9C19.3218 20.8855 19.4454 20.8345 19.5509 20.7473C19.66 20.66 19.7454 20.5164 19.8072 20.3164C19.8691 20.1164 19.9072 19.8509 19.9218 19.52C19.9254 19.4582 19.9272 19.3927 19.9272 19.3236C19.9272 19.0291 19.9072 18.6764 19.8672 18.2655L20.8818 18.1673C20.9254 18.6109 20.9745 19.0018 21.0291 19.34C21.0872 19.6782 21.16 19.9618 21.2472 20.1909C21.3345 20.42 21.44 20.5945 21.5636 20.7145C21.6909 20.8309 21.8454 20.8891 22.0272 20.8891C22.1436 20.8891 22.2382 20.8655 22.3109 20.8182C22.3836 20.7709 22.4382 20.7036 22.4745 20.6164C22.5145 20.5291 22.54 20.4236 22.5509 20.3C22.5545 20.2382 22.5563 20.1727 22.5563 20.1036C22.5563 20.0345 22.5545 19.9618 22.5509 19.8855C22.5436 19.7436 22.5272 19.5964 22.5018 19.4436C22.48 19.2909 22.4527 19.1455 22.42 19.0073C22.3909 18.8655 22.3618 18.7382 22.3327 18.6255C22.3036 18.5091 22.28 18.4182 22.2618 18.3527L23.2436 18.0636ZM29.5861 18.0636C29.597 18.0927 29.6206 18.1709 29.657 18.2982C29.6934 18.4255 29.7315 18.5782 29.7715 18.7564C29.8115 18.9345 29.8461 19.1255 29.8752 19.3291C29.9079 19.5291 29.9243 19.7182 29.9243 19.8964C29.9243 20.2455 29.8679 20.5473 29.7552 20.8018C29.6425 21.0564 29.4952 21.2673 29.3134 21.4345C29.1315 21.5982 28.9261 21.7218 28.697 21.8055C28.4679 21.8855 28.237 21.9255 28.0043 21.9255C27.7097 21.9255 27.4425 21.8782 27.2025 21.7836C26.9625 21.6891 26.7443 21.5691 26.5479 21.4236C26.5952 21.8273 26.6297 22.2182 26.6515 22.5964C26.677 22.9709 26.6952 23.3309 26.7061 23.6764C26.717 24.0182 26.7225 24.34 26.7225 24.6418C26.7225 24.9436 26.7225 25.2218 26.7225 25.4764C26.7152 25.5709 26.7115 25.6618 26.7115 25.7491C26.7115 25.8364 26.7115 25.9218 26.7115 26.0055H25.697V25.0182C25.697 24.7018 25.6934 24.3182 25.6861 23.8673C25.6825 23.4164 25.6552 22.8873 25.6043 22.28C25.5534 21.6727 25.4697 21.04 25.3534 20.3818C25.2406 19.72 25.0788 19.0527 24.8679 18.38L25.8443 18.0636L26.057 18.7782C26.057 18.7818 26.0734 18.8382 26.1061 18.9473C26.1388 19.0527 26.1897 19.1836 26.2588 19.34C26.3279 19.4964 26.4152 19.6655 26.5206 19.8473C26.6297 20.0291 26.7552 20.1982 26.897 20.3545C27.0425 20.5109 27.2061 20.6418 27.3879 20.7473C27.5734 20.8491 27.7788 20.9 28.0043 20.9C28.0552 20.9 28.1297 20.8909 28.2279 20.8727C28.3297 20.8545 28.4315 20.8127 28.5334 20.7473C28.6352 20.6782 28.7225 20.5782 28.7952 20.4473C28.8715 20.3127 28.9097 20.1291 28.9097 19.8964C28.9097 19.7764 28.897 19.6418 28.8715 19.4927C28.8497 19.3436 28.8225 19.1982 28.7897 19.0564C28.757 18.9145 28.7225 18.7836 28.6861 18.6636C28.6534 18.54 28.6261 18.4455 28.6043 18.38L29.5861 18.0636ZM38.5943 17.4418H39.6798L36.4343 26.0055H35.3598L38.5943 17.4418ZM39.3089 25.9673L38.2016 24.86L39.3034 23.7636L40.4107 24.8709L39.3089 25.9673ZM35.867 19.8582L34.7598 18.7509L35.8616 17.6545L36.9689 18.7618L35.867 19.8582Z\" fill=\"#F59E0B\"/>\n</svg>\n",
-  "vuesax-linear:record-plus":"<svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21Z\" stroke=\"#656F87\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M10.5 12H14.5\" stroke=\"#656F87\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.5 14V10\" stroke=\"#656F87\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
-  "other:more-square":"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 19 19\">\n  <path stroke=\"#656F87\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M7.12516 17.4168h4.75004c3.9583 0 5.5416-1.5833 5.5416-5.5416V7.12516c0-3.95833-1.5833-5.54166-5.5416-5.54166H7.12516c-3.95833 0-5.54166 1.58333-5.54166 5.54166v4.75004c0 3.9583 1.58333 5.5416 5.54166 5.5416Z\"/>\n  <path stroke=\"#656F87\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12.6639 9.49984h.0072M9.49647 9.49984h.00711M6.32898 9.49984h.00712\"/>\n</svg>\n"
+  "vuesax-linear:record-plus": "<svg width=\"25\" height=\"24\" viewBox=\"0 0 25 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21Z\" stroke=\"#656F87\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M10.5 12H14.5\" stroke=\"#656F87\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.5 14V10\" stroke=\"#656F87\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
+  "other:more-square": "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 19 19\">\n  <path stroke=\"#656F87\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M7.12516 17.4168h4.75004c3.9583 0 5.5416-1.5833 5.5416-5.5416V7.12516c0-3.95833-1.5833-5.54166-5.5416-5.54166H7.12516c-3.95833 0-5.54166 1.58333-5.54166 5.54166v4.75004c0 3.9583 1.58333 5.5416 5.54166 5.5416Z\"/>\n  <path stroke=\"#656F87\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12.6639 9.49984h.0072M9.49647 9.49984h.00711M6.32898 9.49984h.00712\"/>\n</svg>\n",
+  "custom:single-check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5.5 10.5L8.2 13.2L14.5 6.8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
+  "custom:double-check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M2.8 10.7L5.2 13.1L10.2 8.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.8 10.7L10.2 13.1L15.2 8.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
 }
\ No newline at end of file
diff --git a/src/components/SupportMessengerPicker.vue b/src/components/SupportMessengerPicker.vue
index 0208efa..f69ec5b 100644
--- a/src/components/SupportMessengerPicker.vue
+++ b/src/components/SupportMessengerPicker.vue
@@ -30,7 +30,13 @@
         :aria-label="entry.label"
         @click.stop="select(entry)"
       >
-        <SupportMessengerBrandIcon :messenger="entry.messenger" />
+        <SupportMessengerBrandIcon v-if="entry.messenger !== 'chat'" :messenger="entry.messenger" />
+        <BasicIcon
+          v-else
+          :icon="entry.icon || 'vuesax-linear:messages-2'"
+          size="22"
+          :color="entry.accent || '#16a34a'"
+        />
       </button>
     </div>
   </Teleport>
@@ -39,6 +45,7 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import SupportMessengerBrandIcon from '@/components/SupportMessengerBrandIcon.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import type { ResolvedSupportMessengerEntry } from '@/utils/supportMessenger'
 
 const props = withDefaults(
diff --git a/src/composables/useSupportMessenger.ts b/src/composables/useSupportMessenger.ts
index c4d4814..ed7e53e 100644
--- a/src/composables/useSupportMessenger.ts
+++ b/src/composables/useSupportMessenger.ts
@@ -1,5 +1,6 @@
 import { computed, ref } from 'vue'
 import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
 import {
   buildDepositSmsUrl,
   buildSupportPhoneUrl,
@@ -26,39 +27,66 @@ import {
   hasDepositFieldValue,
 } from '@/utils/depositGuideText'
 import { useSettingsStore } from '@/store/settingsStore'
+import { isUserSupportChatEnabled } from '@/utils/chat'
 
 /** plain: منوی شناور / درباره ما — بدون پیش‌متن | deposit: مودال واریز — با deposit_support_message_text */
 type SupportPickerIntent = 'plain' | 'deposit'
 
+const CHAT_PICKER_ENTRY: ResolvedSupportMessengerEntry = {
+  messenger: 'chat',
+  id: 'support-chat',
+  label: 'چت پشتیبانی',
+  icon: 'vuesax-linear:messages-2',
+  accent: '#16a34a',
+  url: '',
+}
+
 export function useSupportMessenger() {
   const settingsStore = useSettingsStore()
+  const router = useRouter()
   const supportPickerOpen = supportMessengerPickerOpen
   const supportPickerIntent = ref<SupportPickerIntent>('plain')
 
+  const isChatEnabled = computed(() => isUserSupportChatEnabled())
+
   const legacySupportLink = computed(() => '')
 
   const depositSupportMessage = computed(() => resolveDepositSupportMessage())
 
-  /** لینک‌های تمیز بدون پیش‌متن — متن فقط موقع باز کردن (قصد deposit) اضافه می‌شود */
   const supportMessengerEntries = computed(() =>
     resolveSupportMessengerEntries(supportMessengerSettings.value),
   )
 
+  const pickerEntries = computed(() => {
+    const list = [...supportMessengerEntries.value]
+    if (isChatEnabled.value) {
+      list.unshift(CHAT_PICKER_ENTRY)
+    }
+    return list
+  })
+
   const primaryMessengerEntry = computed(() => supportMessengerEntries.value[0] ?? null)
 
   const messengerType = computed(
     () => (primaryMessengerEntry.value?.messenger ?? supportMessengerSettings.value.messenger ?? '').trim().toLowerCase(),
   )
 
-  const messengerMeta = computed(() =>
-    primaryMessengerEntry.value
+  const messengerMeta = computed(() => {
+    if (isChatEnabled.value && supportMessengerEntries.value.length === 0) {
+      return {
+        label: CHAT_PICKER_ENTRY.label,
+        icon: CHAT_PICKER_ENTRY.icon,
+        accent: CHAT_PICKER_ENTRY.accent,
+      }
+    }
+    return primaryMessengerEntry.value
       ? {
           label: primaryMessengerEntry.value.label,
           icon: primaryMessengerEntry.value.icon,
           accent: primaryMessengerEntry.value.accent,
         }
-      : resolveSupportMessengerMeta(messengerType.value),
-  )
+      : resolveSupportMessengerMeta(messengerType.value)
+  })
 
   const messengerLink = computed(() =>
     primaryMessengerEntry.value?.url
@@ -69,8 +97,16 @@ export function useSupportMessenger() {
       ),
   )
 
+  function goToSupportChat() {
+    void router.push({ name: 'support' })
+    return true
+  }
+
   async function openMessengerEntry(entry: ResolvedSupportMessengerEntry, text?: string) {
-    // فقط وقتی از مودال واریز آمده‌ایم پیش‌نویس می‌گذاریم؛ منوی شناور همیشه خالی
+    if (entry.messenger === 'chat') {
+      return goToSupportChat()
+    }
+
     const messageText =
       text !== undefined
         ? text.trim()
@@ -99,7 +135,12 @@ export function useSupportMessenger() {
 
     const draft =
       intent === 'deposit' ? depositSupportMessage.value.trim() : ''
-    const entries = supportMessengerEntries.value
+    const messengerEntries = supportMessengerEntries.value
+    const entries = pickerEntries.value
+
+    if (isChatEnabled.value && messengerEntries.length === 0) {
+      return goToSupportChat()
+    }
 
     if (entries.length === 0) {
       return openSupportMessengerWithMessage(
@@ -126,12 +167,10 @@ export function useSupportMessenger() {
     return true
   }
 
-  /** منوی شناور / صفحات درباره ما — بدون پیش‌نویس پیام */
   async function openSupportMessenger(anchorEl?: HTMLElement | null) {
     return openSupportPicker('plain', anchorEl)
   }
 
-  /** مودال راهنمای واریز — با متن deposit_support_message_text */
   async function openDepositSupportMessenger(anchorEl?: HTMLElement | null) {
     return openSupportPicker('deposit', anchorEl)
   }
@@ -209,8 +248,10 @@ export function useSupportMessenger() {
     )
   }
 
-  const hasMessengerLink = computed(() => supportMessengerEntries.value.length > 0 || !!messengerLink.value)
-  const hasMultipleMessengers = computed(() => supportMessengerEntries.value.length > 1)
+  const hasMessengerLink = computed(
+    () => isChatEnabled.value || supportMessengerEntries.value.length > 0 || !!messengerLink.value,
+  )
+  const hasMultipleMessengers = computed(() => pickerEntries.value.length > 1)
   const hasSupportPhoneLink = computed(() => !!supportPhoneLink.value)
   const hasSupportActions = computed(() => hasSupportPhoneLink.value || hasMessengerLink.value)
   const opensInNewTab = computed(() => /^https?:\/\//i.test(messengerLink.value))
@@ -218,7 +259,8 @@ export function useSupportMessenger() {
   return {
     supportPickerOpen,
     supportPickerAnchor: supportMessengerPickerAnchor,
-    supportMessengerEntries,
+    supportMessengerEntries: pickerEntries,
+    isChatEnabled,
     messengerType,
     messengerMeta,
     messengerLink,
@@ -240,6 +282,7 @@ export function useSupportMessenger() {
     openDepositSupportMessenger,
     openMessengerEntry,
     handleSupportMessengerClick,
+    goToSupportChat,
     hasMessengerLink,
     hasMultipleMessengers,
     hasSupportPhoneLink,
diff --git a/src/layouts/composables/useAppNavigation.ts b/src/layouts/composables/useAppNavigation.ts
index 7a65a9d..612f57a 100644
--- a/src/layouts/composables/useAppNavigation.ts
+++ b/src/layouts/composables/useAppNavigation.ts
@@ -8,6 +8,10 @@ export function useAppNavigation() {
   const popVisible = ref(false)
   const currentRoute = computed(() => route.name)
   const hideMenu = computed(() => !!route.meta.hideMenu)
+  /** فقط ناو پایین موبایل — سایدبار دسکتاپ را مخفی نمی‌کند */
+  const hideBottomNav = computed(
+    () => !!route.meta.hideBottomNav || !!route.meta.hideMenu,
+  )
 
   function isNavActive(routeName: string) {
     return currentRoute.value === routeName
@@ -34,6 +38,7 @@ export function useAppNavigation() {
     popVisible,
     currentRoute,
     hideMenu,
+    hideBottomNav,
     isNavActive,
     navItemClass,
     navigateTo,
diff --git a/src/layouts/mobile/MobileAppLayout.vue b/src/layouts/mobile/MobileAppLayout.vue
index fff6c96..89e2a6d 100644
--- a/src/layouts/mobile/MobileAppLayout.vue
+++ b/src/layouts/mobile/MobileAppLayout.vue
@@ -6,7 +6,7 @@
       @navigate="navigateTo"
     />
 
-    <div :class="['main-with-bottom-chrome', { 'main-with-bottom-chrome--no-nav': hideMenu }]">
+    <div :class="['main-with-bottom-chrome', { 'main-with-bottom-chrome--no-nav': hideBottomNav }]">
       <router-view v-slot="{ Component, route: activeRoute }">
         <transition :name="activeRoute.meta.transition || 'fade'">
           <component :is="Component" :key="activeRoute.fullPath" class="main-with-bottom-chrome-inner" />
@@ -16,7 +16,7 @@
 
     <Teleport to="body">
       <MobileBottomNav
-        v-if="!hideMenu"
+        v-if="!hideBottomNav"
         :nav-item-class="navItemClass"
         @navigate="navigateTo"
         @toggle-overflow="toggleOverflowMenu"
@@ -37,7 +37,7 @@ const route = useRoute()
 
 const {
   popVisible,
-  hideMenu,
+  hideBottomNav,
   navItemClass,
   navigateTo,
   toggleOverflowMenu,
diff --git a/src/models/login.ts b/src/models/login.ts
index 2340340..411a310 100644
--- a/src/models/login.ts
+++ b/src/models/login.ts
@@ -48,6 +48,9 @@ export interface User {
   virtual_card_number: string
   finger_print: boolean
   gold: number;
+  chat_room_id?: string | null
+  chat_user_id?: string | null
+  settings?: Array<{ key?: string; value?: string | number }>
 }
 
 export interface Login {
diff --git a/src/models/support.ts b/src/models/support.ts
new file mode 100644
index 0000000..3a23ca8
--- /dev/null
+++ b/src/models/support.ts
@@ -0,0 +1,77 @@
+export type ChatAttachmentType = 'image' | 'audio'
+
+export type ChatMessageSender = 'user' | 'support' | 'admin'
+
+export type ChatMessageStatus = 'sending' | 'sent' | 'seen' | 'failed'
+
+export type ChatAttachment = {
+  id: string
+  type: 'image' | 'audio'
+  url: string
+  name?: string
+  size?: number
+  mimeType?: string
+  durationMs?: number
+  file?: File
+  uploading?: boolean
+  uploadProgress?: number
+}
+
+export type ChatReplyPreview = {
+  id: string
+  sender: string
+  text?: string
+  attachment?: {
+    type: 'image' | 'audio'
+    url: string
+    name?: string
+  } | null
+}
+
+export interface ChatMessage {
+  id: string
+  text?: string
+  sender: 'user' | 'support'
+  createdAt: string
+  createdAtRaw?: string | number | Date | null
+  status?: 'sending' | 'sent' | 'seen'
+  attachments?: ChatAttachment[]
+
+  // reply
+  reply?: string | null
+  replyTo?: ChatReplyPreview | null
+}
+
+export type ComposerSendPayload = {
+  text: string
+  attachments: ChatAttachment[]
+  reply?: string | null
+  replyTo?: ChatReplyPreview | null
+}
+
+
+export interface SupportMessage {
+  id: string
+  sender: 'user' | 'admin'
+  text?: string
+  createdAt: string
+  createdAtRaw?: string | number | Date | null
+  status?: ChatMessageStatus
+  attachments?: ChatAttachment[]
+
+  // reply
+  reply?: string | null
+  replyTo?: ChatReplyPreview | null
+}
+
+export interface SupportConversation {
+  id: string
+  userName: string
+  avatar: string
+  online: boolean
+  unreadCount: number
+  lastSeenText: string
+  lastMessagePreview: string
+  updatedAtText: string
+  messages: SupportMessage[]
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index d311fbc..2cb9f3b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -70,6 +70,12 @@ const router = createRouter({
                     name: 'about',
                     component: () => import('@/views/base/about/index.vue')
                 },
+                {
+                    path: 'support',
+                    name: 'support',
+                    meta: { hideBottomNav: true },
+                    component: () => import('@/views/support/index.vue')
+                },
                 {
                     path: 'notifyTrigger',
                     name: 'notifyTrigger',
diff --git a/src/utils/chat.ts b/src/utils/chat.ts
new file mode 100644
index 0000000..2e8fed8
--- /dev/null
+++ b/src/utils/chat.ts
@@ -0,0 +1,1576 @@
+import { computed, ref, watch } from 'vue'
+import { useWebSocket } from '@vueuse/core'
+import { useUserStore } from '@/store/userStore'
+import { useSettingsStore } from '@/store/settingsStore'
+import { startChat } from '@/api/chat'
+import { createUuid } from '@/utils/index'
+
+/** true/1/yes/activate */
+export function isSettingFlagOn(value: unknown): boolean {
+  const v = String(value ?? '').trim().toLowerCase()
+  return v === 'true' || v === '1' || v === 'yes' || v === 'activate'
+}
+
+/** نمایش چت برای کاربر نهایی: سوییچ دیپلوی + سوییچ مشتری */
+export function isUserSupportChatEnabled(): boolean {
+  const settings = useSettingsStore()
+  return (
+    isSettingFlagOn(settings.getSettingByKey('show_to_users_chat')) &&
+    isSettingFlagOn(settings.getSettingByKey('has_chat'))
+  )
+}
+
+type ChatRawMessage = Record<string, any>
+type FetchMode = 'replace' | 'prepend' | 'sync_latest'
+type MessageSource = 'api' | 'socket' | 'optimistic'
+
+type InternalChatMessage = ChatRawMessage & {
+  _source?: MessageSource
+  _client_key?: string
+  _optimistic?: boolean
+  _local_created_at_ms?: number
+}
+
+const PAGE_SIZE = 50
+
+const PING_INTERVAL_MS = 15000
+const PONG_WAIT_MS = 8000
+const STALE_FALLBACK_MS = 60000
+const STALE_CHECK_INTERVAL_MS = 10000
+const OUTGOING_ACK_TIMEOUT_MS = 7000
+const MAX_RESEND_ATTEMPTS = 1
+const CONNECTING_TIMEOUT_MS = 12000
+const RECONNECT_WATCH_INTERVAL_MS = 5000
+const READ_SIGNAL_DEBOUNCE_MS = 1200
+
+type PendingOutgoingMessage = {
+  payload: {
+    id: string
+    type: 'text' | 'image' | 'voice'
+    room_id: string
+    content: string
+    reply?: string | null
+  }
+  optimisticKey: string | null
+  attempts: number
+  timer: number | null
+}
+
+const pendingOutgoingById = new Map<string, PendingOutgoingMessage>()
+
+const socketUrl = ref('')
+const messages = ref<InternalChatMessage[]>([])
+const currentRoomId = ref('')
+const currentChatUserId = ref('')
+const currentOffset = ref(0)
+const isSupportChatPageOpen = ref(false)
+const lastReadSignalAt = ref(0)
+const lastReadSignalRoomId = ref('')
+const isSupportChatAtBottom = ref(false)
+const latestIncomingNotification = ref<{
+  title: string
+  body: string
+  at: number
+} | null>(null)
+
+export const unreadSupportCount = ref(0)
+
+let reconnectWatchTimer: number | null = null
+let readSignalTimer: number | null = null
+let pendingReadSignalRoomId = ''
+
+const connectStartedAt = ref(0)
+
+const clearReconnectWatchTimer = () => {
+  if (reconnectWatchTimer !== null) {
+    clearInterval(reconnectWatchTimer)
+    reconnectWatchTimer = null
+  }
+}
+
+const clearReadSignalTimer = () => {
+  if (readSignalTimer !== null) {
+    window.clearTimeout(readSignalTimer)
+    readSignalTimer = null
+  }
+}
+
+const canSendReadSignal = () => {
+  return (
+    status.value === 'OPEN' &&
+    !!currentRoomId.value &&
+    initialMessagesLoaded.value &&
+    canTreatSupportAsRead()
+  )
+}
+
+export const setSupportChatAtBottom = (value: boolean) => {
+  isSupportChatAtBottom.value = value
+
+  if (!value) {
+    clearReadSignalTimer()
+    return
+  }
+
+  if (canTreatSupportAsRead()) {
+    unreadSupportCount.value = 0
+    scheduleReadSignal(80)
+  }
+}
+
+const sendReadSignal = () => {
+  if (!canSendReadSignal()) {
+    if (currentRoomId.value && canTreatSupportAsRead()) {
+      pendingReadSignalRoomId = currentRoomId.value
+    }
+    return
+  }
+
+  const now = Date.now()
+  const elapsed = now - lastReadSignalAt.value
+
+  if (
+    lastReadSignalRoomId.value === currentRoomId.value &&
+    elapsed < READ_SIGNAL_DEBOUNCE_MS
+  ) {
+    // Keep pending and retry after debounce — dropping here skips seen for new messages.
+    pendingReadSignalRoomId = currentRoomId.value
+    if (readSignalTimer === null) {
+      scheduleReadSignal(READ_SIGNAL_DEBOUNCE_MS - elapsed + 50)
+    }
+    return
+  }
+
+  send(
+    JSON.stringify({
+      type: 'read',
+      room_id: currentRoomId.value
+    })
+  )
+
+  lastReadSignalAt.value = now
+  lastReadSignalRoomId.value = currentRoomId.value
+  pendingReadSignalRoomId = ''
+}
+
+const flushPendingReadSignal = () => {
+  if (!pendingReadSignalRoomId || pendingReadSignalRoomId !== currentRoomId.value) return
+  if (!canTreatSupportAsRead()) {
+    pendingReadSignalRoomId = ''
+    return
+  }
+  sendReadSignal()
+}
+
+const scheduleReadSignal = (delay = 120) => {
+  clearReadSignalTimer()
+
+  readSignalTimer = window.setTimeout(() => {
+    readSignalTimer = null
+    sendReadSignal()
+  }, delay)
+}
+
+const applySeenPayload = (payload: any) => {
+  if (payload?.type !== 'seen') return false
+
+  const roomId = String(payload?.room_id || '')
+  if (!roomId || roomId !== currentRoomId.value) return true
+
+  const readerId = String(payload?.reader_id || '')
+  const myId = String(currentChatUserId.value || '')
+
+  if (!readerId || readerId === myId || readerId !== 'admin') {
+    return true
+  }
+
+  const ids = new Set(
+    Array.isArray(payload?.seen_message_ids)
+      ? payload.seen_message_ids.map((id: any) => String(id))
+      : []
+  )
+
+  if (!ids.size) return true
+
+  const seenAt = payload?.seen_at || new Date().toISOString()
+
+  messages.value = messages.value.map((item) => {
+    const messageId = getRealMessageId(item)
+    const senderId = String(item?.sender_id ?? item?.user_id ?? '')
+
+    if (!messageId || !ids.has(String(messageId))) return item
+    if (senderId !== myId) return item
+
+    return {
+      ...item,
+      read_at: seenAt
+    }
+  })
+
+  return true
+}
+
+const shouldKeepChatSocketAlive = () => {
+  const existing = getExistingChatSession()
+  return (
+    !manuallyClosed &&
+    !!existing?.roomId &&
+    !!existing?.chatUserId &&
+    !!getApiKey() &&
+    !!normalizeHost()
+  )
+}
+
+export const setSupportChatPageOpen = (value: boolean) => {
+  isSupportChatPageOpen.value = value
+
+  if (!value) {
+    isSupportChatAtBottom.value = false
+    clearReadSignalTimer()
+    pendingReadSignalRoomId = ''
+    return
+  }
+
+  if (canTreatSupportAsRead()) {
+    unreadSupportCount.value = 0
+    scheduleReadSignal(80)
+  }
+}
+
+const isViewingSupportNow = () => {
+  return (
+    isSupportChatPageOpen.value &&
+    typeof document !== 'undefined' &&
+    document.visibilityState === 'visible'
+  )
+}
+
+const canTreatSupportAsRead = () => {
+  return isViewingSupportNow() && isSupportChatAtBottom.value
+}
+
+const emitIncomingToastEvent = (message: InternalChatMessage) => {
+  if (String(message.sender_id) === String(currentChatUserId.value)) return
+  if (isViewingSupportNow()) return
+
+  latestIncomingNotification.value = {
+    title: 'پشتیبانی',
+    body: getContentText(message) || 'پیام جدید',
+    at: Date.now()
+  }
+}
+
+const handleIncomingSupportMessage = (message: InternalChatMessage) => {
+  if (String(message.sender_id) === String(currentChatUserId.value)) return
+
+  if (isViewingSupportNow()) {
+    unreadSupportCount.value = 0
+  } else {
+    unreadSupportCount.value += 1
+  }
+
+  emitIncomingToastEvent(message)
+}
+
+const startReconnectWatchdog = () => {
+  if (reconnectWatchTimer !== null) return
+
+  reconnectWatchTimer = window.setInterval(() => {
+    if (!shouldKeepChatSocketAlive()) return
+
+    const now = Date.now()
+
+    if (status.value === 'OPEN') return
+
+    const connectingTooLong =
+      status.value === 'CONNECTING' &&
+      connectStartedAt.value > 0 &&
+      now - connectStartedAt.value > CONNECTING_TIMEOUT_MS
+
+    if (status.value === 'CLOSED' || connectingTooLong) {
+      shouldSyncOnReconnect = true
+      safeReconnect(connectingTooLong ? 'chat connecting timeout' : 'chat closed watchdog').catch(
+        (error) => {
+          console.error('chat reconnect watchdog failed:', error)
+        }
+      )
+    }
+  }, RECONNECT_WATCH_INTERVAL_MS)
+}
+
+export const chatLoading = ref(true)
+export const hasMoreMessages = ref(true)
+export const isFetchingOlderMessages = ref(false)
+
+const initialMessagesLoaded = ref(false)
+
+let connectPromise: Promise<{ roomId: string; chatUserId: string } | null> | null = null
+let reconnectingPromise: Promise<{ roomId: string; chatUserId: string } | null> | null = null
+let fetchPromise: Promise<any[]> | null = null
+let networkListenersBound = false
+let staleCheckTimer: number | null = null
+let heartbeatInterval: number | null = null
+let pongTimeoutTimer: number | null = null
+
+let shouldSyncOnReconnect = false
+let manuallyClosed = false
+let pendingSyncAfterInitialLoad = false
+
+const lastSocketActivityAt = ref(0)
+const lastPingAt = ref(0)
+const lastPongAt = ref(0)
+
+const normalizeHost = () => {
+  // const host = String('192.168.70.136:8585' || '').trim()
+  const host = String(useSettingsStore().getSettingByKey('chat_api') || '').trim()
+
+  return host
+    .replace(/^wss?:\/\//, '')
+    .replace(/^https?:\/\//, '')
+    .replace(/\/+$/, '')
+}
+
+const getApiKey = () => String(useSettingsStore().getSettingByKey('chat_api_key') || '').trim()
+
+const buildWsUrl = (chatUserId: string) => {
+  const host = normalizeHost()
+  const apiKey = getApiKey()
+
+  if (!host || !apiKey || !chatUserId) return ''
+
+  return `wss://${host}/ws?api_key=${encodeURIComponent(apiKey)}&user_id=${encodeURIComponent(chatUserId)}`
+}
+
+const clearPendingOutgoing = (messageId: string) => {
+  const pending = pendingOutgoingById.get(messageId)
+  if (!pending) return
+
+  if (pending.timer !== null) {
+    window.clearTimeout(pending.timer)
+  }
+
+  pendingOutgoingById.delete(messageId)
+}
+
+const isSocketFreshForSend = () => {
+  if (status.value !== 'OPEN') return false
+
+  const now = Date.now()
+  const pongAge = now - lastPongAt.value
+  const activityAge = now - lastSocketActivityAt.value
+
+  return pongAge <= PING_INTERVAL_MS + PONG_WAIT_MS + 2000 && activityAge <= STALE_FALLBACK_MS
+}
+
+const armOutgoingAckTimeout = (messageId: string) => {
+  const pending = pendingOutgoingById.get(messageId)
+  if (!pending) return
+
+  if (pending.timer !== null) {
+    window.clearTimeout(pending.timer)
+  }
+
+  pending.timer = window.setTimeout(async () => {
+    const current = pendingOutgoingById.get(messageId)
+    if (!current) return
+
+    try {
+      await safeReconnect(`outgoing ack timeout: ${messageId}`)
+
+      const latest = pendingOutgoingById.get(messageId)
+      if (!latest) return
+      if (status.value !== 'OPEN') return
+
+      if (latest.attempts >= MAX_RESEND_ATTEMPTS) {
+        console.warn('message ack timeout, max resend reached:', messageId)
+        return
+      }
+
+      latest.attempts += 1
+      send(JSON.stringify(latest.payload))
+      armOutgoingAckTimeout(messageId)
+    } catch (error) {
+      console.error('resend after ack timeout failed:', error)
+    }
+  }, OUTGOING_ACK_TIMEOUT_MS)
+}
+
+const buildMessagesApiUrl = (roomId: string, chatUserId: string, limit = PAGE_SIZE, offset = 0) => {
+  const host = normalizeHost()
+  const apiKey = getApiKey()
+
+  if (!host || !apiKey || !roomId || !chatUserId) {
+    throw new Error(
+      `missing chat settings: host=${host}, apiKey=${apiKey}, roomId=${roomId}, chatUserId=${chatUserId}`
+    )
+  }
+
+  return `https://${host}/api/messages?api_key=${encodeURIComponent(apiKey)}&room_id=${encodeURIComponent(roomId)}&user_id=${encodeURIComponent(chatUserId)}&limit=${limit}&offset=${offset}`
+}
+
+const parseUnreadCountFromMessagesResponse = (result: any) => {
+  const value = Number(result?.unread_count ?? result?.unreadCount ?? 0)
+
+  if (!Number.isFinite(value)) return 0
+  return Math.max(0, value)
+}
+
+const setCurrentSession = (roomId: string, chatUserId: string) => {
+  currentRoomId.value = roomId
+  currentChatUserId.value = chatUserId
+}
+
+const resetPaginationState = () => {
+  messages.value = []
+  currentOffset.value = 0
+  hasMoreMessages.value = true
+  initialMessagesLoaded.value = false
+  pendingSyncAfterInitialLoad = false
+
+  clearReadSignalTimer()
+  lastReadSignalAt.value = 0
+  lastReadSignalRoomId.value = ''
+  pendingReadSignalRoomId = ''
+}
+
+const markSocketActivity = () => {
+  lastSocketActivityAt.value = Date.now()
+}
+
+const getContentText = (item: any) => {
+  return String(item?.content ?? item?.text ?? item?.body ?? '').trim()
+}
+
+const getRealMessageId = (item: any) => {
+  return String(item?.id ?? item?.message_id ?? '')
+}
+
+const getMessageKey = (item: any) => {
+  return (
+    getRealMessageId(item) ||
+    item?._client_key ||
+    `${item?.room_id || 'room'}-${item?.sender_id || item?.user_id || 'x'}-${item?.created_at || item?.createdAt || item?.timestamp || item?._local_created_at_ms || ''}-${getContentText(item)}`
+  )
+}
+
+const getMessageTs = (item: any) => {
+  const raw = item?.created_at || item?.createdAt || item?.timestamp
+  const parsed = raw ? new Date(raw).getTime() : NaN
+
+  if (!Number.isNaN(parsed)) return parsed
+  if (item?._local_created_at_ms) return item._local_created_at_ms
+
+  return 0
+}
+
+const sortMessagesAsc = (items: InternalChatMessage[]) => {
+  return [...items].sort((a, b) => {
+    const diff = getMessageTs(a) - getMessageTs(b)
+    if (diff !== 0) return diff
+
+    return String(getMessageKey(a)).localeCompare(String(getMessageKey(b)))
+  })
+}
+
+const isHeartbeatPayload = (payload: any) => {
+  if (!payload) return false
+
+  if (typeof payload === 'string') {
+    const value = payload.trim().toLowerCase()
+    return ['ping', 'pong', 'heartbeat', 'keepalive'].includes(value)
+  }
+
+  const type = String(payload?.type || payload?.event || payload?.message || '').toLowerCase()
+  return ['ping', 'pong', 'heartbeat', 'keepalive'].includes(type)
+}
+
+const normalizeMessage = (payload: any, source: MessageSource): InternalChatMessage | null => {
+  if (!payload) return null
+
+  const nestedObjectMessage =
+    payload?.message && typeof payload.message === 'object' ? payload.message : null
+
+  const nestedStringMessage =
+    typeof payload?.message === 'string' && !isHeartbeatPayload(payload?.message)
+      ? payload.message
+      : ''
+
+  const base = nestedObjectMessage ?? payload
+
+  const content = String(
+    base?.content ?? base?.text ?? base?.body ?? nestedStringMessage ?? ''
+  ).trim()
+
+  const attachments = base?.attachments ?? base?.files ?? base?.media
+
+  const reply =
+    base?.reply ??
+    payload?.reply ??
+    base?.reply_id ??
+    payload?.reply_id ??
+    base?.reply_to_id ??
+    payload?.reply_to_id ??
+    null
+
+  if (!content && !Array.isArray(attachments)) return null
+
+  const createdAt =
+    base?.created_at ??
+    payload?.created_at ??
+    base?.createdAt ??
+    payload?.createdAt ??
+    base?.timestamp ??
+    payload?.timestamp ??
+    new Date().toISOString()
+
+  const localCreatedAtMs = (() => {
+    const parsed = new Date(createdAt).getTime()
+    return Number.isNaN(parsed) ? Date.now() : parsed
+  })()
+
+  const normalized: InternalChatMessage = {
+    ...base,
+    content,
+    room_id: base?.room_id ?? payload?.room_id ?? currentRoomId.value,
+    sender_id:
+      base?.sender_id ??
+      payload?.sender_id ??
+      base?.user_id ??
+      payload?.user_id ??
+      base?.from_user_id ??
+      payload?.from_user_id ??
+      base?.sender?.id ??
+      payload?.sender?.id ??
+      currentChatUserId.value,
+    type_content:
+      base?.type_content ?? payload?.type_content ?? base?.type ?? payload?.type ?? 'text',
+    created_at: createdAt,
+    reply: reply ? String(reply) : null,
+    _source: source,
+    _local_created_at_ms: localCreatedAtMs
+  }
+
+  if (!normalized.id && (base?.message_id || payload?.message_id)) {
+    normalized.message_id = base?.message_id ?? payload?.message_id
+  }
+
+  normalized._client_key =
+    normalized._client_key ||
+    getRealMessageId(normalized) ||
+    `${source}-${normalized.room_id || 'room'}-${normalized.sender_id || 'sender'}-${content}-${localCreatedAtMs}-${Math.random().toString(36).slice(2, 8)}`
+
+  if (source === 'optimistic') {
+    normalized._optimistic = true
+  }
+
+  return normalized
+}
+
+const pickBetterMessage = (oldItem: InternalChatMessage, newItem: InternalChatMessage) => {
+  const oldHasRealId = !!getRealMessageId(oldItem)
+  const newHasRealId = !!getRealMessageId(newItem)
+
+  const preservedClientKey = oldItem._client_key || newItem._client_key
+
+  if (!oldHasRealId && newHasRealId) {
+    return {
+      ...oldItem,
+      ...newItem,
+      _client_key: preservedClientKey,
+      _optimistic: false
+    }
+  }
+
+  if (oldItem._optimistic && !newItem._optimistic) {
+    return {
+      ...oldItem,
+      ...newItem,
+      _client_key: preservedClientKey,
+      _optimistic: false
+    }
+  }
+
+  if (oldItem._source === 'socket' && newItem._source === 'api') {
+    return {
+      ...oldItem,
+      ...newItem,
+      _client_key: preservedClientKey,
+      _optimistic: false
+    }
+  }
+
+  return {
+    ...oldItem,
+    ...newItem,
+    _client_key: preservedClientKey
+  }
+}
+
+const mergeMessageLists = (items: InternalChatMessage[]) => {
+  const map = new Map<string, InternalChatMessage>()
+
+  for (const item of items) {
+    const key = getRealMessageId(item) || item._client_key || getMessageKey(item)
+    const prev = map.get(key)
+
+    map.set(key, prev ? pickBetterMessage(prev, item) : item)
+  }
+
+  return sortMessagesAsc([...map.values()])
+}
+
+const appendIncomingMessage = (message: InternalChatMessage) => {
+  messages.value = mergeMessageLists([...messages.value, message])
+}
+
+const appendOptimisticOutgoingMessage = (
+  content: string,
+  messageId: string,
+  reply: string | null = null
+) => {
+  const optimistic = normalizeMessage(
+    {
+      id: messageId,
+      room_id: currentRoomId.value,
+      sender_id: currentChatUserId.value,
+      content,
+      reply: reply || null,
+      type_content: 'text',
+      created_at: new Date().toISOString()
+    },
+    'optimistic'
+  )
+
+  if (!optimistic) return null
+
+  messages.value = mergeMessageLists([...messages.value, optimistic])
+  return optimistic._client_key || null
+}
+
+const appendOptimisticOutgoingMediaMessage = (
+  content: string,
+  messageId: string,
+  type: 'image' | 'voice',
+  reply: string | null = null
+) => {
+  const optimistic = normalizeMessage(
+    {
+      id: messageId,
+      room_id: currentRoomId.value,
+      sender_id: currentChatUserId.value,
+      content,
+      reply: reply || null,
+      type_content: type,
+      created_at: new Date().toISOString()
+    },
+    'optimistic'
+  )
+
+  if (!optimistic) return null
+
+  messages.value = mergeMessageLists([...messages.value, optimistic])
+  return optimistic._client_key || null
+}
+
+const removeMessageByClientKey = (clientKey: string | null) => {
+  if (!clientKey) return
+  messages.value = messages.value.filter((item) => item._client_key !== clientKey)
+}
+
+const clearHeartbeatTimers = () => {
+  if (heartbeatInterval !== null) {
+    clearInterval(heartbeatInterval)
+    heartbeatInterval = null
+  }
+
+  if (pongTimeoutTimer !== null) {
+    clearTimeout(pongTimeoutTimer)
+    pongTimeoutTimer = null
+  }
+}
+
+const clearLocalChatSession = () => {
+  const userStore = useUserStore()
+
+  if (userStore.userInfo) {
+    userStore.userInfo = {
+      ...userStore.userInfo,
+      chat_room_id: null,
+      chat_user_id: null
+    }
+  }
+
+  currentRoomId.value = ''
+  currentChatUserId.value = ''
+}
+
+const repairStaleChatSession = async () => {
+  clearLocalChatSession()
+
+  try {
+    const session = await startChatSession()
+    if (!session?.roomId || !session?.chatUserId) return null
+
+    try {
+      await connectChatSocket(session.roomId, session.chatUserId)
+    } catch (error) {
+      console.warn('reconnect after stale chat repair failed:', error)
+    }
+
+    return session
+  } catch (error) {
+    console.warn('stale chat session repair failed:', error)
+    return null
+  }
+}
+
+export async function refreshSupportUnreadCount(options?: { allowRepair?: boolean }) {
+  const allowRepair = options?.allowRepair !== false
+  const existing = getExistingChatSession()
+
+  if (!existing) {
+    unreadSupportCount.value = 0
+    return 0
+  }
+
+  if (canTreatSupportAsRead()) {
+    unreadSupportCount.value = 0
+    return 0
+  }
+
+  try {
+    const roomId = currentRoomId.value || existing.roomId
+    const chatUserId = currentChatUserId.value || existing.chatUserId
+    const url = buildMessagesApiUrl(roomId, chatUserId, 1, 0)
+
+    const response = await fetch(url, {
+      method: 'GET',
+      cache: 'no-store',
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+
+    if (!response.ok) {
+      const detail = await response.text().catch(() => '')
+      console.warn(
+        'refresh unread support count failed',
+        response.status,
+        detail.slice(0, 200)
+      )
+
+      if (allowRepair && (response.status === 401 || response.status === 403)) {
+        const repaired = await repairStaleChatSession()
+        if (repaired) {
+          return refreshSupportUnreadCount({ allowRepair: false })
+        }
+      }
+
+      return unreadSupportCount.value
+    }
+
+    const result = await response.json()
+    const count = parseUnreadCountFromMessagesResponse(result)
+
+    unreadSupportCount.value = count
+
+    return count
+  } catch (error) {
+    console.warn('refresh unread support count error:', error)
+    return unreadSupportCount.value
+  }
+}
+
+const waitForSocketOpen = (timeout = 10000) => {
+  return new Promise<void>((resolve, reject) => {
+    if (status.value === 'OPEN') {
+      resolve()
+      return
+    }
+
+    const stop = watch(status, (newStatus) => {
+      if (newStatus === 'OPEN') {
+        clearTimeout(timer)
+        stop()
+        resolve()
+      }
+    })
+
+    const timer = window.setTimeout(() => {
+      stop()
+      reject(new Error('websocket open timeout'))
+    }, timeout)
+  })
+}
+
+const waitForSocketClosed = (timeout = 5000) => {
+  return new Promise<void>((resolve, reject) => {
+    if (status.value === 'CLOSED') {
+      resolve()
+      return
+    }
+
+    const stop = watch(status, (newStatus) => {
+      if (newStatus === 'CLOSED') {
+        clearTimeout(timer)
+        stop()
+        resolve()
+      }
+    })
+
+    const timer = window.setTimeout(() => {
+      stop()
+      reject(new Error('websocket close timeout'))
+    }, timeout)
+  })
+}
+
+const markPongReceived = () => {
+  lastPongAt.value = Date.now()
+  markSocketActivity()
+
+  if (pongTimeoutTimer !== null) {
+    clearTimeout(pongTimeoutTimer)
+    pongTimeoutTimer = null
+  }
+}
+
+const replyToHeartbeatIfNeeded = (payload: any) => {
+  try {
+    if (status.value !== 'OPEN') return
+
+    if (typeof payload === 'string') {
+      const value = payload.trim().toLowerCase()
+
+      if (value === 'ping') {
+        send('pong')
+      } else if (value === 'pong') {
+        markPongReceived()
+      }
+
+      return
+    }
+
+    const type = String(payload?.type || payload?.event || payload?.message || '').toLowerCase()
+
+    if (type === 'ping') {
+      if (payload?.id) {
+        send(JSON.stringify({ type: 'pong', id: payload.id }))
+      } else {
+        send(JSON.stringify({ type: 'pong' }))
+      }
+    } else if (type === 'pong') {
+      markPongReceived()
+    }
+  } catch (error) {
+    console.error('heartbeat reply failed:', error)
+  }
+}
+
+const startHeartbeat = () => {
+  clearHeartbeatTimers()
+
+  heartbeatInterval = window.setInterval(() => {
+    if (status.value !== 'OPEN') return
+
+    try {
+      lastPingAt.value = Date.now()
+      send('ping')
+
+      if (pongTimeoutTimer !== null) {
+        clearTimeout(pongTimeoutTimer)
+      }
+
+      pongTimeoutTimer = window.setTimeout(() => {
+        const pongIsFresh = lastPongAt.value >= lastPingAt.value
+        if (pongIsFresh) return
+
+        safeReconnect('pong timeout').catch((error) => {
+          console.error('reconnect after pong timeout failed:', error)
+        })
+      }, PONG_WAIT_MS)
+    } catch (error) {
+      console.error('heartbeat send failed:', error)
+    }
+  }, PING_INTERVAL_MS)
+}
+
+const syncMessages = async () => {
+  if (!currentRoomId.value || !currentChatUserId.value) return []
+
+  if (fetchPromise) {
+    return await fetchPromise
+  }
+
+  fetchPromise = fetchChatMessages(PAGE_SIZE, 0, 'sync_latest').finally(() => {
+    fetchPromise = null
+  })
+
+  return await fetchPromise
+}
+
+const startStaleConnectionWatcher = () => {
+  if (staleCheckTimer !== null) return
+
+  staleCheckTimer = window.setInterval(() => {
+    if (manuallyClosed) return
+    if (status.value !== 'OPEN') return
+    if (!lastSocketActivityAt.value) return
+
+    const diff = Date.now() - lastSocketActivityAt.value
+    if (diff < STALE_FALLBACK_MS) return
+
+    safeReconnect('stale fallback').catch((error) => {
+      console.error('stale reconnect failed:', error)
+    })
+  }, STALE_CHECK_INTERVAL_MS)
+}
+
+const bindNetworkListeners = () => {
+  if (networkListenersBound) return
+  networkListenersBound = true
+
+  startStaleConnectionWatcher()
+  startReconnectWatchdog()
+
+  window.addEventListener('online', () => {
+    if (manuallyClosed) return
+
+    shouldSyncOnReconnect = true
+    safeReconnect('browser online').catch((error) => {
+      console.error('reconnect on online failed:', error)
+    })
+  })
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState !== 'visible') return
+
+    if (isSupportChatPageOpen.value) {
+      if (canTreatSupportAsRead()) {
+        unreadSupportCount.value = 0
+        scheduleReadSignal(80)
+      }
+    } else {
+      refreshSupportUnreadCount().catch((error) => {
+        console.error('refresh unread count on visibilitychange failed:', error)
+      })
+    }
+
+    if (!shouldKeepChatSocketAlive()) return
+
+    shouldSyncOnReconnect = true
+
+    if (status.value !== 'OPEN') {
+      safeReconnect('tab visible').catch((error) => {
+        console.error('sync on visibilitychange failed:', error)
+      })
+    }
+  })
+}
+
+const { status, send, open, close } = useWebSocket(socketUrl, {
+  immediate: false,
+  autoReconnect: false,
+
+  onConnected() {
+    console.log('Chat websocket connected')
+    markSocketActivity()
+    lastPongAt.value = Date.now()
+    manuallyClosed = false
+    startHeartbeat()
+
+    if (shouldSyncOnReconnect) {
+      shouldSyncOnReconnect = false
+
+      syncMessages()
+        .then(() => {
+          if (isViewingSupportNow()) {
+            scheduleReadSignal(120)
+          } else {
+            refreshSupportUnreadCount().catch((error) => {
+              console.error('refresh unread count after reconnect sync failed:', error)
+            })
+          }
+        })
+        .catch((error) => {
+          console.error('sync after reconnect failed:', error)
+        })
+
+      return
+    }
+
+    if (isViewingSupportNow()) {
+      scheduleReadSignal(120)
+      flushPendingReadSignal()
+    } else {
+      refreshSupportUnreadCount().catch((error) => {
+        console.error('refresh unread count after socket connected failed:', error)
+      })
+    }
+  },
+  onDisconnected() {
+    console.log('Chat websocket disconnected')
+    clearHeartbeatTimers()
+
+    if (!manuallyClosed && currentRoomId.value && currentChatUserId.value) {
+      shouldSyncOnReconnect = true
+
+      safeReconnect('disconnected').catch((error) => {
+        console.error('reconnect after disconnect failed:', error)
+      })
+    }
+  },
+
+  onError(_, event) {
+    console.error('WebSocket error:', event)
+
+    if (!manuallyClosed) {
+      shouldSyncOnReconnect = true
+      safeReconnect('socket error').catch((error) => {
+        console.error('reconnect after socket error failed:', error)
+      })
+    }
+  },
+
+  onMessage(_, event) {
+    markSocketActivity()
+
+    const rawData = event.data
+
+    if (typeof rawData !== 'string') {
+      console.log('Unhandled non-string WS payload:', rawData)
+      return
+    }
+
+    const trimmed = rawData.trim()
+
+    if (isHeartbeatPayload(trimmed)) {
+      replyToHeartbeatIfNeeded(trimmed)
+      return
+    }
+
+    try {
+      const parsed = JSON.parse(trimmed)
+
+      if (isHeartbeatPayload(parsed)) {
+        replyToHeartbeatIfNeeded(parsed)
+        return
+      }
+
+      if (parsed?.type === 'seen') {
+        applySeenPayload(parsed)
+        return
+      }
+
+      if (parsed?.type === 'typing') return
+
+      const normalizedMessage = normalizeMessage(parsed, 'socket')
+      if (!normalizedMessage) {
+        console.log('Unhandled WS payload:', parsed)
+        return
+      }
+
+      const messageId = getRealMessageId(normalizedMessage)
+      if (messageId) {
+        clearPendingOutgoing(messageId)
+      }
+
+      appendIncomingMessage(normalizedMessage)
+      handleIncomingSupportMessage(normalizedMessage)
+
+      if (!initialMessagesLoaded.value) {
+        pendingSyncAfterInitialLoad = true
+        return
+      }
+
+      if (
+        String(normalizedMessage.sender_id) !== String(currentChatUserId.value) &&
+        isViewingSupportNow() &&
+        isSupportChatAtBottom.value
+      ) {
+        scheduleReadSignal(120)
+      }
+    } catch (error) {
+      console.log('Non-JSON WS message:', trimmed)
+    }
+  }
+})
+
+export const getExistingChatSession = () => {
+  const userStore = useUserStore()
+  const roomId = userStore.userInfo?.chat_room_id
+  const chatUserId = userStore.userInfo?.chat_user_id
+
+  if (roomId != null && chatUserId != null) {
+    setCurrentSession(roomId, chatUserId)
+    return {
+      roomId: currentRoomId.value,
+      chatUserId: currentChatUserId.value
+    }
+  }
+
+  return null
+}
+
+const safeReconnect = async (reason = 'unknown') => {
+  if (manuallyClosed) return null
+  if (reconnectingPromise) return reconnectingPromise
+
+  reconnectingPromise = (async () => {
+    try {
+      console.warn('chat safeReconnect:', reason)
+
+      const existing = getExistingChatSession()
+      if (!existing) return null
+
+      shouldSyncOnReconnect = true
+      clearHeartbeatTimers()
+
+      if (status.value === 'OPEN' || status.value === 'CONNECTING') {
+        try {
+          close()
+          await waitForSocketClosed(4000)
+        } catch (error) {
+          console.warn('socket did not fully close before reopen:', error)
+        }
+      }
+
+      const url = buildWsUrl(existing.chatUserId)
+      if (!url) {
+        throw new Error('chat websocket url could not be built')
+      }
+
+      setCurrentSession(existing.roomId, existing.chatUserId)
+      socketUrl.value = url
+      connectStartedAt.value = Date.now()
+      open()
+
+      await waitForSocketOpen(CONNECTING_TIMEOUT_MS)
+      markSocketActivity()
+      lastPongAt.value = Date.now()
+
+      if (shouldSyncOnReconnect) {
+        shouldSyncOnReconnect = false
+
+        syncMessages()
+          .then(() => {
+            if (isViewingSupportNow()) {
+              scheduleReadSignal(120)
+            } else {
+              refreshSupportUnreadCount().catch((error) => {
+                console.error('refresh unread count after reconnect sync failed:', error)
+              })
+            }
+          })
+          .catch((error) => {
+            console.error('sync after reconnect failed:', error)
+          })
+
+        return
+      }
+
+      return existing
+    } finally {
+      connectStartedAt.value = 0
+      reconnectingPromise = null
+    }
+  })()
+
+  return await reconnectingPromise
+}
+
+export const startChatSession = async () => {
+  const userStore = useUserStore()
+
+  chatLoading.value = true
+
+  try {
+    const response = await startChat()
+
+    if (!response?.user) {
+      throw new Error('start-chat request failed')
+    }
+
+    const roomId = response.user?.chat_room_id
+    const chatUserId = response.user?.chat_user_id
+
+    if (!roomId || !chatUserId) {
+      throw new Error('chat_room_id or chat_user_id missing in start-chat response')
+    }
+
+    const roomChanged =
+      !!currentRoomId.value && String(currentRoomId.value) !== String(roomId)
+
+    userStore.userInfo = {
+      ...userStore.userInfo,
+      chat_room_id: roomId,
+      chat_user_id: chatUserId
+    }
+
+    if (roomChanged) {
+      resetPaginationState()
+    }
+
+    setCurrentSession(roomId, chatUserId)
+
+    return {
+      roomId,
+      chatUserId
+    }
+  } finally {
+    chatLoading.value = false
+  }
+}
+
+export const connectChatSocket = async (roomId: string, chatUserId: string) => {
+  bindNetworkListeners()
+
+  const url = buildWsUrl(chatUserId)
+  if (!url) {
+    throw new Error('chat websocket url could not be built')
+  }
+
+  const roomChanged = !!currentRoomId.value && currentRoomId.value !== roomId
+  if (roomChanged) {
+    resetPaginationState()
+  }
+
+  setCurrentSession(roomId, chatUserId)
+
+  if (
+    status.value === 'OPEN' &&
+    socketUrl.value === url &&
+    currentRoomId.value === roomId &&
+    currentChatUserId.value === chatUserId
+  ) {
+    return { roomId, chatUserId }
+  }
+
+  if (reconnectingPromise) {
+    return await reconnectingPromise
+  }
+
+  if (connectPromise) {
+    return await connectPromise
+  }
+
+  connectPromise = (async () => {
+    try {
+      manuallyClosed = false
+      socketUrl.value = url
+
+      if (status.value === 'OPEN') {
+        markSocketActivity()
+        return { roomId, chatUserId }
+      }
+
+      if (status.value === 'CONNECTING') {
+        await waitForSocketOpen(CONNECTING_TIMEOUT_MS)
+        connectStartedAt.value = 0
+        markSocketActivity()
+        return { roomId, chatUserId }
+      }
+
+      connectStartedAt.value = Date.now()
+      open()
+      await waitForSocketOpen(CONNECTING_TIMEOUT_MS)
+      connectStartedAt.value = 0
+
+      markSocketActivity()
+      lastPongAt.value = Date.now()
+
+      return { roomId, chatUserId }
+    } finally {
+      connectStartedAt.value = 0
+      connectPromise = null
+    }
+  })()
+
+  return await connectPromise
+}
+
+export const connectChatIfExists = async () => {
+  const existing = getExistingChatSession()
+  if (!existing) return null
+
+  return await connectChatSocket(existing.roomId, existing.chatUserId)
+}
+
+export const ensureChatAndConnect = async () => {
+  const session = await startChatSession()
+  return await connectChatSocket(session.roomId, session.chatUserId)
+}
+
+export const disconnectChat = () => {
+  manuallyClosed = true
+  clearHeartbeatTimers()
+  clearAllPendingOutgoing()
+  clearReadSignalTimer()
+
+  lastReadSignalAt.value = 0
+  lastReadSignalRoomId.value = ''
+  pendingReadSignalRoomId = ''
+
+  if (status.value === 'OPEN' || status.value === 'CONNECTING') {
+    close()
+  }
+}
+
+export const fetchChatMessages = async (
+  limit = PAGE_SIZE,
+  offset = 0,
+  mode: FetchMode = 'replace'
+) => {
+  if (!currentRoomId.value || !currentChatUserId.value) {
+    const existing = getExistingChatSession()
+    if (!existing) return []
+  }
+
+  if (mode === 'replace') {
+    chatLoading.value = true
+  } else if (mode === 'prepend') {
+    isFetchingOlderMessages.value = true
+  }
+
+  try {
+    const url = buildMessagesApiUrl(currentRoomId.value, currentChatUserId.value, limit, offset)
+
+    const response = await fetch(url, {
+      method: 'GET',
+      cache: 'no-store',
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+
+    if (!response.ok) {
+      throw new Error('fetch messages failed')
+    }
+
+    const result = await response.json()
+    const fetched = Array.isArray(result) ? result : result?.data || []
+
+    if (!Array.isArray(result)) {
+      const unreadCount = parseUnreadCountFromMessagesResponse(result)
+
+      if (isViewingSupportNow()) {
+        unreadSupportCount.value = 0
+      } else {
+        unreadSupportCount.value = unreadCount
+      }
+    }
+
+    const normalizedFetched = fetched
+      .map((item: any) => normalizeMessage(item, 'api'))
+      .filter(Boolean) as InternalChatMessage[]
+
+    for (const item of normalizedFetched) {
+      const messageId = getRealMessageId(item)
+      if (messageId) {
+        clearPendingOutgoing(messageId)
+      }
+    }
+
+    if (mode === 'replace') {
+      const pendingOptimistic = messages.value.filter(
+        (item) => item._optimistic && item.room_id === currentRoomId.value
+      )
+
+      messages.value = mergeMessageLists([...normalizedFetched, ...pendingOptimistic])
+      currentOffset.value = fetched.length
+      hasMoreMessages.value = fetched.length === limit
+      initialMessagesLoaded.value = true
+      flushPendingReadSignal()
+
+      if (pendingSyncAfterInitialLoad) {
+        pendingSyncAfterInitialLoad = false
+        window.setTimeout(() => {
+          syncMessages().catch((error) => {
+            console.error('sync after initial load failed:', error)
+          })
+        }, 0)
+      }
+    } else if (mode === 'prepend') {
+      messages.value = mergeMessageLists([...normalizedFetched, ...messages.value])
+      currentOffset.value += fetched.length
+      hasMoreMessages.value = fetched.length === limit
+    } else {
+      messages.value = mergeMessageLists([...messages.value, ...normalizedFetched])
+    }
+
+    if (isViewingSupportNow() && isSupportChatAtBottom.value) {
+      unreadSupportCount.value = 0
+      scheduleReadSignal(100)
+    }
+
+    return messages.value
+  } finally {
+    if (mode === 'replace') {
+      chatLoading.value = false
+    } else if (mode === 'prepend') {
+      isFetchingOlderMessages.value = false
+    }
+  }
+}
+
+export const fetchOlderChatMessages = async (limit = PAGE_SIZE) => {
+  if (isFetchingOlderMessages.value) return messages.value
+  if (!hasMoreMessages.value) return messages.value
+
+  return await fetchChatMessages(limit, currentOffset.value, 'prepend')
+}
+
+export const sendTextMessage = async (content: string, reply: string | null = null) => {
+  const text = content.trim()
+  if (!text) return
+
+  let existing = getExistingChatSession()
+
+  if (!existing) {
+    existing = await ensureChatAndConnect()
+  } else if (status.value !== 'OPEN') {
+    await connectChatSocket(existing.roomId, existing.chatUserId)
+  }
+
+  if (!isSocketFreshForSend()) {
+    await safeReconnect('send on stale socket')
+  }
+
+  if (status.value !== 'OPEN') {
+    throw new Error('websocket is not open')
+  }
+
+  if (!currentRoomId.value) {
+    throw new Error('room_id is missing')
+  }
+
+  const messageId = createUuid()
+  const replyId = reply ? String(reply) : null
+
+  const optimisticKey = appendOptimisticOutgoingMessage(text, messageId, replyId)
+
+  const payload: PendingOutgoingMessage['payload'] = {
+    id: messageId,
+    type: 'text',
+    room_id: currentRoomId.value,
+    content: text
+  }
+
+  if (replyId) {
+    payload.reply = replyId
+  }
+
+  pendingOutgoingById.set(messageId, {
+    payload,
+    optimisticKey,
+    attempts: 0,
+    timer: null
+  })
+
+  try {
+    console.log('chat ws payload:', payload)
+    send(JSON.stringify(payload))
+    armOutgoingAckTimeout(messageId)
+  } catch (error) {
+    clearPendingOutgoing(messageId)
+    removeMessageByClientKey(optimisticKey)
+    throw error
+  }
+}
+
+export const sendMediaMessage = async (
+  content: string,
+  type: 'image' | 'voice',
+  reply: string | null = null
+) => {
+  const filePath = String(content || '').trim()
+  if (!filePath) return
+
+  let existing = getExistingChatSession()
+
+  if (!existing) {
+    existing = await ensureChatAndConnect()
+  } else if (status.value !== 'OPEN') {
+    await connectChatSocket(existing.roomId, existing.chatUserId)
+  }
+
+  if (!isSocketFreshForSend()) {
+    await safeReconnect('send media on stale socket')
+  }
+
+  if (status.value !== 'OPEN') {
+    throw new Error('websocket is not open')
+  }
+
+  if (!currentRoomId.value) {
+    throw new Error('room_id is missing')
+  }
+
+  const messageId = createUuid()
+  const replyId = reply ? String(reply) : null
+
+  const optimisticKey = appendOptimisticOutgoingMediaMessage(filePath, messageId, type, replyId)
+
+  const payload: PendingOutgoingMessage['payload'] = {
+    id: messageId,
+    type,
+    room_id: currentRoomId.value,
+    content: filePath
+  }
+
+  if (replyId) {
+    payload.reply = replyId
+  }
+
+  pendingOutgoingById.set(messageId, {
+    payload,
+    optimisticKey,
+    attempts: 0,
+    timer: null
+  })
+
+  try {
+    console.log('chat media ws payload:', payload)
+    send(JSON.stringify(payload))
+    armOutgoingAckTimeout(messageId)
+  } catch (error) {
+    clearPendingOutgoing(messageId)
+    removeMessageByClientKey(optimisticKey)
+    throw error
+  }
+}
+
+const clearAllPendingOutgoing = () => {
+  for (const [messageId, pending] of pendingOutgoingById.entries()) {
+    if (pending.timer !== null) {
+      window.clearTimeout(pending.timer)
+    }
+    pendingOutgoingById.delete(messageId)
+  }
+}
+
+export const useChatService = () => {
+  return {
+    status,
+    messages: computed(() => messages.value),
+    currentRoomId: computed(() => currentRoomId.value),
+    currentChatUserId: computed(() => currentChatUserId.value),
+    unreadSupportCount: computed(() => unreadSupportCount.value),
+    latestIncomingNotification: computed(() => latestIncomingNotification.value),
+    setSupportChatPageOpen,
+    getExistingChatSession,
+    startChatSession,
+    connectChatIfExists,
+    ensureChatAndConnect,
+    connectChatSocket,
+    disconnectChat,
+    fetchChatMessages,
+    sendMediaMessage,
+    fetchOlderChatMessages,
+    sendTextMessage,
+    refreshSupportUnreadCount,
+    setSupportChatAtBottom,
+    hasMoreMessages: computed(() => hasMoreMessages.value),
+    isFetchingOlderMessages: computed(() => isFetchingOlderMessages.value)
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2bde3f5..5f00486 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -113,6 +113,27 @@ function isToken() {
   return !!token
 }
 
+function createUuid() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+    const bytes = new Uint8Array(16)
+    crypto.getRandomValues(bytes)
+    bytes[6] = (bytes[6] & 0x0f) | 0x40
+    bytes[8] = (bytes[8] & 0x3f) | 0x80
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('')
+    return [
+      hex.slice(0, 8),
+      hex.slice(8, 12),
+      hex.slice(12, 16),
+      hex.slice(16, 20),
+      hex.slice(20),
+    ].join('-')
+  }
+  return `${Date.now()}-${Math.floor(Math.random() * 1e9)}`
+}
+
 export {
   getToken,
   setToken,
@@ -123,5 +144,6 @@ export {
   removeFingerPrint,
   getIsActiveFingerprint,
   setFingerPrint,
-  isToken
+  isToken,
+  createUuid
 }
diff --git a/src/views/base/home/components/AppHeader.vue b/src/views/base/home/components/AppHeader.vue
index 4404284..1ac08f5 100644
--- a/src/views/base/home/components/AppHeader.vue
+++ b/src/views/base/home/components/AppHeader.vue
@@ -38,10 +38,10 @@
           >
             <Icon icon="vuesax-linear:menu" size="18" />
             <span
-              v-if="notificationEnabled && unreadCount > 0"
+              v-if="menuBadgeCount > 0"
               class="mhome-header-menu__badge"
             >
-              {{ unreadCount > 99 ? '99+' : unreadCount }}
+              {{ menuBadgeCount > 99 ? '99+' : menuBadgeCount }}
             </span>
           </button>
 
@@ -73,6 +73,22 @@
               <span>{{ canNativeInstall ? 'نصب اپلیکیشن' : 'آموزش نصب' }}</span>
             </button>
 
+            <button
+              v-if="chatEnabled"
+              type="button"
+              class="mhome-header-menu__item"
+              role="menuitem"
+              @click="goSupportChat"
+            >
+              <span class="mhome-header-btn__icon-wrap">
+                <Icon icon="vuesax-linear:messages-2" size="16" />
+                <span v-if="chatUnreadCount > 0" class="mhome-header-btn__badge">
+                  {{ chatUnreadCount > 99 ? '99+' : chatUnreadCount }}
+                </span>
+              </span>
+              <span>چت پشتیبانی</span>
+            </button>
+
             <button
               type="button"
               class="mhome-header-menu__item mhome-header-menu__item--danger"
@@ -90,9 +106,10 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
+import { nextTick, onActivated, onMounted, onUnmounted, ref, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useUserStore } from '@/store/userStore'
+import { useSettingsStore } from '@/store/settingsStore'
 import { useAppNotificationBadge } from '@/composables/useAppNotificationBadge'
 import { usePwaInstall } from '@/composables/usePwaInstall'
 import { PWA_MANIFEST_READY_EVENT } from '@/modules/pwa/manifest'
@@ -106,6 +123,7 @@ import {
 } from '@/utils/browserNotification'
 import router from '@/router'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { unreadSupportCount, isUserSupportChatEnabled } from '@/utils/chat'
 
 const emit = defineEmits<{
   logout: []
@@ -119,11 +137,19 @@ const canNativeInstall = ref(false)
 const route = useRoute()
 
 const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+const chatEnabled = computed(() => isUserSupportChatEnabled())
+const chatUnreadCount = computed(() => unreadSupportCount.value)
 const {
   enabled: notificationEnabled,
   unreadCount,
   clearUnreadLocally,
 } = useAppNotificationBadge()
+const menuBadgeCount = computed(() => {
+  const notifications = notificationEnabled.value ? Number(unreadCount.value) || 0 : 0
+  const chat = chatEnabled.value ? Number(chatUnreadCount.value) || 0 : 0
+  return notifications + chat
+})
 const { tryInstallOrOpenGuide, showInstallEntry } = usePwaInstall()
 
 function refreshCanInstall() {
@@ -143,6 +169,11 @@ async function goNotifications() {
   void router.push({ name: 'appNotifications' })
 }
 
+function goSupportChat() {
+  closeMenu()
+  void router.push({ name: 'support' })
+}
+
 async function onInstall() {
   closeMenu()
   await tryInstallOrOpenGuide()
diff --git a/src/views/base/user/composables/useUserPage.ts b/src/views/base/user/composables/useUserPage.ts
index 6f63e3f..eccee6d 100644
--- a/src/views/base/user/composables/useUserPage.ts
+++ b/src/views/base/user/composables/useUserPage.ts
@@ -15,6 +15,8 @@ import { useUserStore } from '@/store/userStore'
 import { useWalletStore } from '@/store/walletStore'
 import { useTrackingSystemsFeature } from '@/composables/useTrackingSystemsFeature'
 import { useSettingsStore } from '@/store/settingsStore'
+import { useSupportMessenger } from '@/composables/useSupportMessenger'
+import { isUserSupportChatEnabled, unreadSupportCount } from '@/utils/chat'
 
 export interface UserMenuAction {
   id: string
@@ -22,6 +24,7 @@ export interface UserMenuAction {
   icon: string
   onClick: () => void
   visible?: boolean
+  badge?: number
 }
 
 export interface UserPageContext {
@@ -70,6 +73,7 @@ export function useUserPage() {
   const showLogoutConfirm = ref(false)
   const { trackingSystemsEnabled } = useTrackingSystemsFeature()
   const settingsStore = useSettingsStore()
+  const { openSupportMessenger } = useSupportMessenger()
 
   const isLegal = computed(() => {
     const result = { title: '', color: '', icon: '' }
@@ -114,6 +118,16 @@ export function useUserPage() {
         onClick: () => router.push({ name: 'about' }),
         visible: true,
       },
+      {
+        id: 'support',
+        label: 'پشتیبانی',
+        icon: 'vuesax-linear:messages-2',
+        onClick: () => {
+          void openSupportMessenger()
+        },
+        visible: isUserSupportChatEnabled(),
+        badge: unreadSupportCount.value > 0 ? unreadSupportCount.value : undefined,
+      },
       {
         id: 'recoverySites',
         label: 'سایت‌های ری‌گیری',
diff --git a/src/views/base/user/desktop/DesktopUserView.vue b/src/views/base/user/desktop/DesktopUserView.vue
index 7cf1ea5..14590f6 100644
--- a/src/views/base/user/desktop/DesktopUserView.vue
+++ b/src/views/base/user/desktop/DesktopUserView.vue
@@ -73,6 +73,12 @@
             >
               <span class="duser-actions__icon">
                 <BasicIcon :icon="action.icon" size="18" />
+                <span
+                  v-if="action.badge && action.badge > 0"
+                  class="duser-actions__badge"
+                >
+                  {{ action.badge > 99 ? '99+' : action.badge }}
+                </span>
               </span>
               <span class="duser-actions__label">{{ action.label }}</span>
               <BasicIcon class="duser-actions__chevron" icon="vuesax-linear:arrow-left" size="16" />
diff --git a/src/views/base/user/desktop/styles/desktop-user.less b/src/views/base/user/desktop/styles/desktop-user.less
index 8a9a1d3..7a96eec 100644
--- a/src/views/base/user/desktop/styles/desktop-user.less
+++ b/src/views/base/user/desktop/styles/desktop-user.less
@@ -231,6 +231,7 @@
   }
 
   &__icon {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -248,6 +249,23 @@
     }
   }
 
+  &__badge {
+    position: absolute;
+    top: -6px;
+    left: -6px;
+    z-index: 1;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 999px;
+    background: #dc2626;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 16px;
+    text-align: center;
+  }
+
   &__icon-image {
     width: 18px;
     height: 18px;
diff --git a/src/views/support/components/SupportChatComposer.vue b/src/views/support/components/SupportChatComposer.vue
new file mode 100644
index 0000000..563acbd
--- /dev/null
+++ b/src/views/support/components/SupportChatComposer.vue
@@ -0,0 +1,806 @@
+<template>
+  <div class="support-composer">
+    <div class="support-composer__inner mx-auto w-full max-w-6xl">
+      <div
+        class="support-composer-panel transition-all"
+        :class="isDragOver ? 'is-drag-over' : ''"
+        @dragenter.prevent="isDragOver = true"
+        @dragover.prevent="isDragOver = true"
+        @dragleave.prevent="onDragLeave"
+        @drop.prevent="onDrop"
+      >
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept="image/*"
+          multiple
+          class="hidden"
+          @change="onFileChange"
+        />
+
+        <Transition name="support-reply-preview">
+          <div v-if="replyingTo" class="support-composer-reply">
+            <div class="support-composer-reply__bar" />
+            <div
+              v-if="replyingTo.attachment?.type === 'image'"
+              class="support-composer-reply__thumb"
+            >
+              <img
+                :src="replyingTo.attachment.url"
+                :alt="replyingTo.attachment.name || 'reply image'"
+              />
+            </div>
+            <div class="support-composer-reply__body">
+              <div class="support-composer-reply__title">
+                پاسخ به {{ getReplySenderLabel(replyingTo.sender) }}
+              </div>
+
+              <div class="support-composer-reply__text">
+                {{ getReplyPreviewText(replyingTo.text) }}
+              </div>
+            </div>
+
+            <BasicButton class="support-composer-reply__close" @click="emit('cancel-reply')" danger>
+              <BasicIcon icon="vuesax-linear:add" class="rotate-45" />
+            </BasicButton>
+          </div>
+        </Transition>
+        <div v-if="attachments.length" class="mb-3 flex gap-2 overflow-x-auto pb-1">
+          <div
+            v-for="(attachment, index) in attachments"
+            :key="attachment.id"
+            draggable="true"
+            class="support-attachment-item group relative shrink-0 cursor-move overflow-hidden rounded-2xl border"
+            :class="
+              attachment.type === 'image'
+                ? 'h-24 w-24'
+                : 'flex min-w-[240px] items-center gap-3 p-3'
+            "
+            @dragstart="onPreviewDragStart(index)"
+            @dragover.prevent
+            @drop.prevent="onPreviewDrop(index)"
+          >
+            <template v-if="attachment.type === 'image'">
+              <img
+                :src="attachment.url"
+                :alt="attachment.name"
+                class="h-full w-full object-cover"
+              />
+            </template>
+
+            <template v-else>
+              <div
+                class="support-audio-badge flex h-10 w-10 items-center justify-center rounded-2xl"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path
+                    d="M12 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3Z"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  />
+                  <path
+                    d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </div>
+
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm font-semibold text-[var(--colorText)]">
+                  {{ attachment.name }}
+                </div>
+                <audio :src="attachment.url" controls class="mt-2 block w-full max-w-[160px]" />
+              </div>
+            </template>
+
+            <button
+              type="button"
+              class="support-remove-btn absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full opacity-100 transition md:opacity-0 md:group-hover:opacity-100"
+              @click="removeAttachment(attachment.id)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M18 6 6 18M6 6l12 12"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-show="showRecorder || isRecording || recordedBlobUrl"
+          class="support-recorder-panel mb-3 overflow-hidden rounded-2xl border"
+        >
+          <div class="support-recorder-head border-b px-4 py-3">
+            <div class="flex items-center justify-between gap-3">
+              <div class="flex items-center gap-2">
+                <span
+                  v-if="isRecording"
+                  class="h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse"
+                />
+                <span class="text-sm font-semibold text-[var(--colorText)]">
+                  {{ isRecording ? 'در حال ضبط وویس...' : 'پیش‌نمایش وویس' }}
+                </span>
+              </div>
+
+              <span class="text-xs text-[var(--colorText)]/65">
+                {{ formattedRecordTime }}
+              </span>
+            </div>
+          </div>
+
+          <div class="px-3 py-3">
+            <div ref="waveformEl" class="min-h-[64px]" />
+          </div>
+
+          <div
+            v-if="recordedBlobUrl && !isRecording"
+            class="support-recorder-actions flex items-center gap-2 border-t px-4 py-3"
+          >
+            <button
+              type="button"
+              class="support-recorder-secondary rounded-xl border px-3 py-2 text-sm transition"
+              @click="discardRecordedVoice"
+            >
+              حذف وویس
+            </button>
+
+            <button
+              type="button"
+              class="support-recorder-primary rounded-xl px-3 py-2 text-sm transition"
+              @click="appendRecordedVoiceToAttachments"
+            >
+              افزودن به پیام
+            </button>
+          </div>
+        </div>
+
+        <div class="support-composer__row flex items-end gap-2">
+          <BasicButton
+            :disabled="disabled || isRecording || (!modelValue.trim() && attachments.length === 0)"
+            class="support-send-btn !h-12 !w-12 shrink-0 items-center justify-center rounded-2xl transition hover:scale-[1.03] disabled:cursor-not-allowed disabled:opacity-50"
+            @mousedown.prevent
+            @click="submit"
+          >
+            <BasicIcon icon="vuesax-linear:direct-right" size="20" />
+          </BasicButton>
+          <div
+            class="support-textarea-shell flex min-h-12 min-w-0 flex-1 items-center rounded-2xl px-1.5 py-1"
+          >
+            <textarea
+              ref="textareaRef"
+              :value="modelValue"
+              :disabled="disabled || isRecording"
+              rows="1"
+              placeholder="پیامت را بنویس..."
+              class="composer-textarea w-full resize-none overflow-y-auto bg-transparent px-2 text-sm leading-7 outline-none py-[10px] !text-[16px]"
+              @input="onInput"
+              @keydown="onKeydown"
+            />
+
+            <BasicButton
+              class="support-tool-btn flex !h-10 !w-10 shrink-0 items-center justify-center rounded-xl"
+              :disabled="disabled || isRecording"
+              type="link"
+              @mousedown.prevent
+              @click="openFilePicker"
+            >
+              <BasicIcon icon="vuesax-linear:gallery" size="20" />
+            </BasicButton>
+          </div>
+        </div>
+
+        <div
+          v-if="isDragOver"
+          class="support-drop-zone mt-3 rounded-2xl border border-dashed px-4 py-3 text-center text-sm"
+        >
+          عکس را اینجا رها کن
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import WaveSurfer from 'wavesurfer.js'
+import RecordPlugin from 'wavesurfer.js/dist/plugins/record.esm.js'
+import type { ChatAttachment, ChatReplyPreview, ComposerSendPayload } from '@/models/support'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+
+const props = defineProps<{
+  modelValue: string
+  disabled?: boolean
+  replyingTo?: ChatReplyPreview | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'send', payload: ComposerSendPayload): void
+  (e: 'cancel-reply'): void
+}>()
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const waveformEl = ref<HTMLElement | null>(null)
+
+const attachments = ref<ChatAttachment[]>([])
+const isDragOver = ref(false)
+const draggedPreviewIndex = ref<number | null>(null)
+const shouldRefocusAfterSend = ref<boolean>(false)
+
+const showRecorder = ref(false)
+const isRecording = ref(false)
+const recordTimeMs = ref(0)
+const recordedBlob = ref<Blob | null>(null)
+const recordedBlobUrl = ref('')
+const recordedMimeType = ref('audio/webm')
+
+let wavesurfer: WaveSurfer | null = null
+let recordPlugin: ReturnType<typeof RecordPlugin.create> | null = null
+
+const createId = () => `${Date.now()}-${Math.floor(Math.random() * 100000)}`
+
+const getReplySenderLabel = (sender: string) => {
+  if (sender === 'user') return 'خودتان'
+  if (sender === 'support') return 'پشتیبانی'
+  return 'پیام'
+}
+
+const getReplyPreviewText = (text: string | undefined) => {
+  const value = String(text || '').trim()
+  return value || 'پیام'
+}
+
+const focusTextarea = async () => {
+  await nextTick()
+
+  const el = textareaRef.value
+  if (!el || props.disabled || isRecording.value) return
+
+  el.focus()
+
+  const length = el.value.length
+  el.setSelectionRange(length, length)
+}
+
+const formattedRecordTime = computed(() => {
+  const totalSeconds = Math.floor(recordTimeMs.value / 1000)
+  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0')
+  const seconds = String(totalSeconds % 60).padStart(2, '0')
+  return `${minutes}:${seconds}`
+})
+
+const resizeTextarea = () => {
+  if (!textareaRef.value) return
+
+  textareaRef.value.style.height = '48px'
+  textareaRef.value.style.height = `${Math.min(textareaRef.value.scrollHeight, 144)}px`
+}
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+  resizeTextarea()
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    submit()
+  }
+}
+
+const openFilePicker = () => {
+  fileInputRef.value?.click()
+}
+
+const createImageAttachment = (file: File): ChatAttachment => ({
+  id: createId(),
+  type: 'image',
+  url: URL.createObjectURL(file),
+  name: file.name,
+  size: file.size,
+  mimeType: file.type,
+  file
+})
+
+const createAudioAttachment = (file: File, durationMs?: number): ChatAttachment => ({
+  id: createId(),
+  type: 'audio',
+  url: URL.createObjectURL(file),
+  name: file.name,
+  size: file.size,
+  mimeType: file.type,
+  durationMs,
+  file
+})
+
+const addImageFiles = (files: File[]) => {
+  const imageFiles = files.filter((file) => file.type.startsWith('image/'))
+  if (!imageFiles.length) return
+  attachments.value.push(...imageFiles.map(createImageAttachment))
+}
+
+const onFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const files = Array.from(target.files ?? [])
+  addImageFiles(files)
+
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const onDrop = (event: DragEvent) => {
+  isDragOver.value = false
+  const files = Array.from(event.dataTransfer?.files ?? [])
+  addImageFiles(files)
+}
+
+const onDragLeave = (event: DragEvent) => {
+  const target = event.currentTarget as HTMLElement | null
+  const relatedTarget = event.relatedTarget as Node | null
+  if (!target || (relatedTarget && target.contains(relatedTarget))) return
+  isDragOver.value = false
+}
+
+const removeAttachment = (id: string) => {
+  const target = attachments.value.find((item) => item.id === id)
+  if (target?.url.startsWith('blob:')) {
+    URL.revokeObjectURL(target.url)
+  }
+  attachments.value = attachments.value.filter((item) => item.id !== id)
+}
+
+const onPreviewDragStart = (index: number) => {
+  draggedPreviewIndex.value = index
+}
+
+const onPreviewDrop = (dropIndex: number) => {
+  if (draggedPreviewIndex.value === null) return
+  if (draggedPreviewIndex.value === dropIndex) return
+
+  const items = [...attachments.value]
+  const movedItem = items[draggedPreviewIndex.value]
+
+  items.splice(draggedPreviewIndex.value, 1)
+  items.splice(dropIndex, 0, movedItem)
+
+  attachments.value = items
+  draggedPreviewIndex.value = null
+}
+
+const initWaveSurfer = async () => {
+  if (!waveformEl.value || wavesurfer) return
+
+  recordPlugin = RecordPlugin.create({
+    scrollingWaveform: true,
+    renderRecordedAudio: true,
+    mediaRecorderTimeslice: 250,
+    mimeType: 'audio/webm'
+  })
+
+  wavesurfer = WaveSurfer.create({
+    container: waveformEl.value,
+    height: 64,
+    cursorWidth: 0,
+    barWidth: 3,
+    barGap: 2,
+    barRadius: 999,
+    normalize: true,
+    interact: true,
+    plugins: [recordPlugin]
+  })
+
+  recordPlugin.on('record-progress', (duration) => {
+    recordTimeMs.value = duration
+  })
+
+  recordPlugin.on('record-start', () => {
+    isRecording.value = true
+    recordTimeMs.value = 0
+    recordedBlob.value = null
+
+    if (recordedBlobUrl.value) {
+      URL.revokeObjectURL(recordedBlobUrl.value)
+      recordedBlobUrl.value = ''
+    }
+  })
+
+  recordPlugin.on('record-end', (blob) => {
+    isRecording.value = false
+    recordedBlob.value = blob
+    recordedMimeType.value = blob.type || 'audio/webm'
+
+    if (recordedBlobUrl.value) {
+      URL.revokeObjectURL(recordedBlobUrl.value)
+    }
+
+    recordedBlobUrl.value = URL.createObjectURL(blob)
+  })
+}
+
+const requestMicrophonePermission = async () => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    stream.getTracks().forEach((track) => track.stop())
+    return true
+  } catch (error) {
+    console.error('mic permission failed:', error)
+    return false
+  }
+}
+
+const toggleRecording = async () => {
+  if (props.disabled) return
+
+  try {
+    const granted = await requestMicrophonePermission()
+    if (!granted) return
+
+    if (!showRecorder.value) {
+      showRecorder.value = true
+      await nextTick()
+    }
+
+    await initWaveSurfer()
+    if (!recordPlugin) return
+
+    if (recordPlugin.isRecording()) {
+      recordPlugin.stopRecording()
+    } else {
+      await recordPlugin.startRecording()
+    }
+  } catch (error) {
+    console.error('Voice recording failed:', error)
+  }
+}
+
+const discardRecordedVoice = () => {
+  recordedBlob.value = null
+  recordTimeMs.value = 0
+  isRecording.value = false
+
+  if (recordedBlobUrl.value) {
+    URL.revokeObjectURL(recordedBlobUrl.value)
+    recordedBlobUrl.value = ''
+  }
+
+  showRecorder.value = false
+  wavesurfer?.empty()
+}
+
+const appendRecordedVoiceToAttachments = () => {
+  if (!recordedBlob.value) return
+
+  const extension = recordedMimeType.value.includes('ogg')
+    ? 'ogg'
+    : recordedMimeType.value.includes('mp4')
+      ? 'm4a'
+      : 'webm'
+
+  const file = new File([recordedBlob.value], `voice-${Date.now()}.${extension}`, {
+    type: recordedMimeType.value || 'audio/webm'
+  })
+
+  attachments.value.push(createAudioAttachment(file, recordTimeMs.value))
+  discardRecordedVoice()
+}
+
+const clearComposerAttachments = () => {
+  attachments.value.forEach((item) => {
+    if (item.url.startsWith('blob:')) {
+      URL.revokeObjectURL(item.url)
+    }
+  })
+
+  attachments.value = []
+}
+
+const submit = async () => {
+  const text = props.modelValue.trim()
+  if (!text && attachments.value.length === 0) return
+  if (props.disabled || isRecording.value) return
+
+  const payloadAttachments = attachments.value.map((item) => ({
+    ...item,
+    url: item.file ? URL.createObjectURL(item.file) : item.url
+  }))
+
+  shouldRefocusAfterSend.value = true
+
+  emit('send', {
+    text,
+    attachments: payloadAttachments,
+    reply: props.replyingTo?.id ?? null,
+    replyTo: props.replyingTo ?? null
+  })
+
+  emit('update:modelValue', '')
+  clearComposerAttachments()
+
+  await nextTick()
+  resizeTextarea()
+  await focusTextarea()
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    resizeTextarea()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  clearComposerAttachments()
+
+  if (recordedBlobUrl.value) {
+    URL.revokeObjectURL(recordedBlobUrl.value)
+  }
+
+  recordPlugin?.destroy()
+  wavesurfer?.destroy()
+  recordPlugin = null
+  wavesurfer = null
+})
+
+watch(
+  () => props.disabled,
+  async (disabled) => {
+    if (disabled) return
+    if (!shouldRefocusAfterSend.value) return
+
+    shouldRefocusAfterSend.value = false
+    await focusTextarea()
+  }
+)
+</script>
+
+<style scoped lang="less">
+.support-composer {
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
+  background: color-mix(in srgb, var(--bg, #fff) 92%, transparent);
+  border-top: 1px solid rgb(var(--colorPrimaryRGB, 37 99 235) / 0.1);
+  box-shadow: 0 -8px 28px rgb(15 23 42 / 0.04);
+  backdrop-filter: blur(14px);
+  font-family: var(--font-family, iran-sans), serif;
+}
+
+.support-composer__inner {
+  min-width: 0;
+}
+
+.support-composer-reply__thumb {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+  overflow: hidden;
+  border-radius: 12px;
+  background: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.08);
+}
+
+.support-composer-reply__thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.support-composer-panel {
+  width: 100%;
+  min-width: 0;
+}
+
+.support-composer-panel.is-drag-over {
+  background: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.06);
+  border-radius: 16px;
+}
+
+.support-attachment-item {
+  border-color: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.18);
+  background: var(--bg, #fff);
+}
+
+.support-audio-badge {
+  background: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.1);
+  color: var(--colorPrimary, #2563eb);
+}
+
+.support-remove-btn {
+  background: rgb(0 0 0 / 0.7);
+  color: #fff;
+}
+
+.support-recorder-panel {
+  border-color: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.16);
+  background: var(--bg, #fff);
+}
+
+.support-recorder-head,
+.support-recorder-actions {
+  border-color: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.12);
+}
+
+.support-recorder-secondary {
+  background: transparent;
+  border-color: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.18);
+  color: var(--colorText, #111827);
+}
+
+.support-recorder-primary {
+  background: var(--colorPrimary, #2563eb);
+  color: var(--color6, #fff);
+  border: 1px solid var(--colorPrimary, #2563eb);
+}
+
+.support-recorder-secondary:hover {
+  background: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.05);
+}
+
+.support-recorder-primary:hover {
+  opacity: 0.92;
+}
+
+.support-textarea-shell {
+  background: var(--bg2, #f4f6f8);
+  border: 1px solid rgb(var(--colorPrimaryRGB, 37 99 235) / 0.1);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
+}
+
+.composer-textarea {
+  color: var(--colorText, #111827);
+  font-family: var(--font-family, iran-sans), serif;
+  min-height: 44px;
+  max-height: 144px;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.35) transparent;
+}
+
+.composer-textarea::placeholder {
+  color: color-mix(in srgb, var(--colorText, #111827) 45%, transparent);
+}
+
+.composer-textarea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.composer-textarea::-webkit-scrollbar-thumb {
+  background: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.35);
+  border-radius: 999px;
+}
+
+.composer-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.support-tool-btn {
+  background: transparent !important;
+  color: var(--colorPrimary, #2563eb) !important;
+  box-shadow: none !important;
+}
+
+.support-tool-btn.is-recording {
+  background: rgb(239 68 68 / 0.08) !important;
+  border-color: rgb(239 68 68 / 0.28) !important;
+  color: #ef4444 !important;
+}
+
+.support-send-btn {
+  background: var(--colorPrimary, #2563eb) !important;
+  color: var(--color6, #fff) !important;
+  box-shadow: 0 8px 18px rgb(var(--colorPrimaryRGB, 37 99 235) / 0.28);
+}
+
+.support-send-btn:disabled {
+  opacity: 0.45;
+  box-shadow: none;
+}
+
+.support-drop-zone {
+  border-color: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.28);
+  background: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.06);
+  color: var(--colorText, #111827);
+}
+
+.support-composer-reply {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+  margin-bottom: 10px;
+  padding: 9px 10px;
+  border-radius: 16px;
+  background: var(--bg2, #f4f6f8);
+  border: 1px solid rgb(var(--colorPrimaryRGB, 37 99 235) / 0.12);
+  overflow: hidden;
+}
+
+.support-composer-reply__bar {
+  width: 4px;
+  height: 38px;
+  border-radius: 999px;
+  background: var(--colorPrimary, #2563eb);
+  flex: 0 0 4px;
+}
+
+.support-composer-reply__body {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.support-composer-reply__title {
+  margin-bottom: 2px;
+  font-size: 12px;
+  font-weight: 900;
+  color: var(--colorPrimary, #2563eb);
+}
+
+.support-composer-reply__text {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  unicode-bidi: plaintext;
+  font-size: 12px;
+  line-height: 1.8;
+  color: color-mix(in srgb, var(--colorText, #111827) 72%, transparent);
+}
+
+.support-composer-reply__close {
+  width: 30px;
+  height: 30px;
+  flex: 0 0 30px;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(var(--colorPrimaryRGB, 37 99 235) / 0.1);
+  color: var(--colorText, #111827);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.support-reply-preview-enter-active,
+.support-reply-preview-leave-active {
+  transition: all 0.18s ease;
+}
+
+.support-reply-preview-enter-from,
+.support-reply-preview-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+@media (min-width: 768px) {
+  .support-composer {
+    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/support/components/SupportChatHeader.vue b/src/views/support/components/SupportChatHeader.vue
new file mode 100644
index 0000000..7f737c7
--- /dev/null
+++ b/src/views/support/components/SupportChatHeader.vue
@@ -0,0 +1,130 @@
+<template>
+  <header class="support-header">
+    <div class="support-header__inner">
+      <div class="bg-glass rounded-full p-2" @click="$router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right" />
+      </div>
+      <div class="support-header__icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="support-header__icon-svg"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            d="M8 10.5h8M8 14h5M7 20l-3 1 1-3V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-2 3Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <div class="support-header__content">
+        <h1 class="support-header__title">{{ title }}</h1>
+
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+
+defineProps<{
+  title: string
+  subtitle?: string
+}>()
+</script>
+
+<style scoped lang="less">
+.support-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-bottom: 1px solid rgb(var(--colorPrimaryRGB, 37 99 235) / 0.16);
+  background: linear-gradient(
+      180deg,
+      rgb(var(--colorPrimaryRGB, 37 99 235) / 0.08),
+      rgb(var(--colorPrimaryRGB, 37 99 235) / 0.03)
+    ),
+    var(--bg, #fff);
+  backdrop-filter: blur(10px);
+}
+
+.support-header__inner {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+}
+
+.support-header__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  background: var(--bg2, #0a1b37);
+  color: var(--colorText, #fff);
+  box-shadow: 0 10px 24px rgb(var(--colorPrimaryRGB, 37 99 235) / 0.16);
+}
+
+.support-header__icon-svg {
+  width: 22px;
+  height: 22px;
+}
+
+.support-header__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.support-header__title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 900;
+  color: var(--colorText, #111827);
+}
+
+.support-header__subtitle-row {
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.support-header__status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--color4, #4caf50);
+  box-shadow: 0 0 0 3px rgb(76 175 80 / 0.12);
+}
+
+.support-header__subtitle {
+  font-size: 0.95rem;
+  color: color-mix(in srgb, var(--colorText, #111827) 75%, transparent);
+}
+
+:global(body.dynamicMode) .support-header__title,
+:global(body.dynamicMode) .support-header__subtitle {
+  color: var(--colorText, #fff);
+}
+
+@media (max-width: 767px) {
+  .support-header__inner {
+    padding: 14px 16px;
+  }
+
+  .support-header__icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 16px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/support/components/SupportChatMessages.vue b/src/views/support/components/SupportChatMessages.vue
new file mode 100644
index 0000000..128ac45
--- /dev/null
+++ b/src/views/support/components/SupportChatMessages.vue
@@ -0,0 +1,1678 @@
+<template>
+  <div class="support-chat-wrap">
+    <div v-if="loadingOlder" class="support-chat-loading">در حال بارگذاری پیام‌های قبلی...</div>
+
+    <Transition name="fade">
+      <div v-if="showJumpButton" class="support-jump-wrap">
+        <a-badge
+          :count="unseenCount > 0 ? (unseenCount > 99 ? '99+' : unseenCount) : 0"
+          :show-zero="false"
+          :offset="[-6, 6]"
+          class="support-jump-badge-wrap"
+        >
+          <button type="button" class="support-jump-button" @click="handleJumpToBottom">
+            <BasicIcon icon="vuesax-linear:arrow-down-1" class="text-black" />
+          </button>
+        </a-badge>
+      </div>
+    </Transition>
+
+    <div ref="scrollContainer" class="support-chat-scroll" @scroll="handleScroll">
+      <a-image
+        v-if="previewImageUrl"
+        :src="previewImageUrl"
+        class="support-hidden-preview-image"
+        :preview="{
+          visible: Boolean(previewImageUrl),
+          mask: 'پیش‌نمایش',
+          onVisibleChange: handlePreviewVisibleChange
+        }"
+      />
+      <div v-if="messages.length === 0 && loading" class="support-empty-state">
+        <div class="support-empty-icon support-empty-icon--loading">
+          <span class="support-spinner" />
+        </div>
+
+        <h2 class="support-empty-title">
+          {{ loadingLabel || 'در حال دریافت پیام‌ها...' }}
+        </h2>
+
+        <p class="support-empty-text">چند لحظه صبر کن تا گفتگو آماده شود.</p>
+      </div>
+
+      <div v-else-if="messages.length === 0" class="support-empty-state">
+        <div class="support-empty-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="support-empty-svg"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <path
+              d="M8 10.5h8M8 14h5M7 20l-3 1 1-3V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-2 3Z"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+
+        <h2 class="support-empty-title">چطور می‌تونم کمکت کنم؟</h2>
+
+        <p class="support-empty-text">
+          سوال، مشکل یا درخواستت رو برام بنویس. پشتیبانی از همینجا پاسخ می‌ده.
+        </p>
+      </div>
+
+      <div v-else class="support-chat-list">
+        <section v-for="group in groupedMessages" :key="group.dayKey" class="support-day-group">
+          <div class="support-day-sticky">
+            <div class="support-day-chip">
+              {{ group.label }}
+            </div>
+          </div>
+
+          <div
+            v-for="message in group.messages"
+            :key="message.id"
+            :data-message-id="message.id"
+            class="support-row"
+            :class="message.sender === 'user' ? 'support-row--user' : 'support-row--support'"
+          >
+            <div
+              class="support-reply-swipe-cue"
+              :class="
+                message.sender === 'user'
+                  ? 'support-reply-swipe-cue--user'
+                  : 'support-reply-swipe-cue--support'
+              "
+              :style="{ opacity: getSwipeOpacity(message.id) }"
+            >
+              ↩
+            </div>
+
+            <div
+              class="support-row__inner"
+              :class="message.sender === 'user' ? '' : 'support-row__inner--support'"
+              :style="getSwipeStyle(message.id)"
+              @pointerdown="onMessagePointerDown($event, message)"
+              @pointermove="onMessagePointerMove"
+              @pointerup="onMessagePointerEnd($event, message)"
+              @pointercancel="onMessagePointerCancel"
+            >
+              <div v-if="message.sender === 'support'" class="support-avatar">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="support-avatar__svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path
+                    d="M8 10.5h8M8 14h5M7 20l-3 1 1-3V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-2 3Z"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+
+              <div
+                class="support-bubble"
+                :class="[
+                  message.sender === 'user' ? 'support-bubble--user' : 'support-bubble--support',
+                  message.replyTo ? 'support-bubble--has-reply' : ''
+                ]"
+              >
+                <div
+                  v-if="message.replyTo"
+                  class="support-bubble__reply"
+                  :class="
+                    message.sender === 'user'
+                      ? 'support-bubble__reply--user'
+                      : 'support-bubble__reply--support'
+                  "
+                >
+                  <div class="support-bubble__reply-line" />
+
+                  <div
+                    v-if="message.replyTo?.attachment?.type === 'image'"
+                    class="support-bubble__reply-thumb"
+                  >
+                    <img
+                      :src="message.replyTo.attachment.url"
+                      :alt="message.replyTo.attachment.name || 'reply image'"
+                      @load="handleMessageMediaLoad(message)"
+                      @error="handleMessageMediaLoad(message)"
+                    />
+                  </div>
+                  <div class="support-bubble__reply-content">
+                    <div class="support-bubble__reply-title">
+                      {{ getReplySenderLabel(message.replyTo.sender) }}
+                    </div>
+
+                    <div class="support-bubble__reply-text">
+                      {{ getReplyPreviewText(message.replyTo.text) }}
+                    </div>
+                  </div>
+                </div>
+                <div v-if="message.attachments?.length" class="support-bubble__attachments">
+                  <template v-for="attachment in message.attachments" :key="attachment.id">
+                    <div
+                      v-if="attachment.type === 'image'"
+                      class="support-bubble__image-wrap"
+                      :data-preview-url="attachment.uploading ? '' : attachment.url"
+                    >
+                      <template v-if="attachment.uploading">
+                        <div class="support-uploading-image">
+                          <img
+                            :src="attachment.url"
+                            :alt="attachment.name || 'uploading image'"
+                            class="support-uploading-image__img"
+                            @load="handleMessageMediaLoad(message)"
+                            @error="handleMessageMediaLoad(message)"
+                          />
+
+                          <div class="support-uploading-image__overlay">
+                            <div class="support-uploading-image__circle">
+                              <span>{{ attachment.uploadProgress || 0 }}٪</span>
+                            </div>
+
+                            <div class="support-uploading-image__text">در حال آپلود...</div>
+                          </div>
+                        </div>
+                      </template>
+
+                      <template v-else>
+                        <img
+                          :src="attachment.url"
+                          :alt="attachment.name || 'image'"
+                          class="support-bubble__image"
+                          @load="handleMessageMediaLoad(message)"
+                          @error="handleMessageMediaLoad(message)"
+                        />
+
+                        <div class="support-bubble__image-mask">پیش‌نمایش</div>
+                      </template>
+                    </div>
+                    <div
+                      v-else-if="attachment.type === 'audio'"
+                      class="support-bubble__audio"
+                      :class="
+                        message.sender === 'user'
+                          ? 'support-bubble__audio--user'
+                          : 'support-bubble__audio--support'
+                      "
+                    >
+                      <audio :src="attachment.url" controls class="support-bubble__audio-el" />
+                    </div>
+                  </template>
+                </div>
+
+                <p v-if="message.text" class="support-bubble__text">
+                  {{ message.text }}
+                </p>
+
+                <div
+                  class="support-bubble__meta"
+                  :class="
+                    message.sender === 'user'
+                      ? 'support-bubble__meta--user'
+                      : 'support-bubble__meta--support'
+                  "
+                >
+                  <span>{{ message.createdAt }}</span>
+
+                  <template v-if="message.sender === 'user' && message.status">
+                    <span>•</span>
+
+                    <span
+                      class="support-bubble__status-icon"
+                      :title="
+                        message.status === 'seen'
+                          ? 'دیده شد'
+                          : message.status === 'sending'
+                            ? 'در حال ارسال...'
+                            : 'ارسال شد'
+                      "
+                    >
+                      <BasicIcon
+                        v-if="message.status === 'sending'"
+                        icon="vuesax-linear:clock-1"
+                        class="support-bubble__status-base-icon"
+                        size="16"
+                      />
+                      <BasicIcon
+                        v-if="message.status === 'sent'"
+                        icon="custom:single-check"
+                        class="support-bubble__status-svg"
+                        size="16"
+                      />
+                      <BasicIcon
+                        v-if="message.status === 'seen'"
+                        icon="custom:double-check"
+                        class="support-bubble__status-svg"
+                        size="16"
+                      />
+                    </span>
+                  </template>
+                </div>
+              </div>
+            </div>
+            <BasicButton
+              type="primary"
+              class="support-reply-button"
+              :class="
+                message.sender === 'user'
+                  ? 'support-reply-button--user'
+                  : 'support-reply-button--support'
+              "
+              title="پاسخ"
+              @click.stop="emit('reply', message)"
+            >
+              <!--              <BasicIcon icon="vuesax-linear:message-text" size="17" />-->
+              <div class="w-1rem h-1rem flex justify-center">↩</div>
+            </BasicButton>
+          </div>
+        </section>
+
+        <div v-if="supportTyping" class="support-row support-row--support">
+          <div class="support-row__inner support-row__inner--support">
+            <div class="support-avatar">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="support-avatar__svg"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M8 10.5h8M8 14h5M7 20l-3 1 1-3V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-2 3Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+
+            <div class="support-bubble support-bubble--support">
+              <div class="support-typing">
+                <span class="typing-dot" />
+                <span class="typing-dot" />
+                <span class="typing-dot" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch, onBeforeUnmount } from 'vue'
+import type { ChatMessage } from '@/models/support'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+
+const props = defineProps<{
+  messages: ChatMessage[]
+  supportTyping: boolean
+  hasMore: boolean
+  loadingOlder: boolean
+  loading?: boolean
+  loadingLabel?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'load-older'): void
+  (e: 'reply', message: ChatMessage): void
+  (e: 'bottom-state-change', value: boolean): void
+}>()
+
+const scrollContainer = ref<HTMLElement | null>(null)
+
+const previewImageUrl = ref('')
+const previewScrollTop = ref(0)
+
+const isAtBottom = ref(true)
+const unseenCount = ref(0)
+
+const prependAnchorId = ref<string | null>(null)
+const prependAnchorTop = ref(0)
+const prependInProgress = ref(false)
+const shouldKeepBottom = ref(true)
+
+let mediaLoadScrollTimer: number | null = null
+
+let lastBottomState: boolean | null = null
+
+let smoothScrollTimer: number | null = null
+
+type SwipeState = {
+  messageId: string
+  startX: number
+  startY: number
+  deltaX: number
+  previewUrl?: string
+}
+
+const REPLY_SWIPE_TRIGGER_X = 56
+const REPLY_SWIPE_MAX_X = 74
+
+const CLICK_DRAG_TOLERANCE_X = 8
+
+const swipeState = ref<SwipeState | null>(null)
+
+const emitBottomState = (value: boolean) => {
+  if (lastBottomState === value) return
+
+  lastBottomState = value
+  emit('bottom-state-change', value)
+}
+
+const getReplySenderLabel = (sender: string) => {
+  if (sender === 'user') return 'شما'
+  if (sender === 'support') return 'پشتیبانی'
+  return 'پیام'
+}
+
+const getReplyPreviewText = (text: string | undefined) => {
+  const value = String(text || '').trim()
+  return value || 'پیام'
+}
+
+const shouldIgnoreSwipe = (event: PointerEvent) => {
+  const target = event.target as HTMLElement | null
+
+  return Boolean(target?.closest('button,a,input,textarea,audio'))
+}
+
+const getSwipeDelta = (messageId: string) => {
+  if (swipeState.value?.messageId !== messageId) return 0
+  return Math.min(Math.max(swipeState.value.deltaX, 0), REPLY_SWIPE_MAX_X)
+}
+
+const getSwipeStyle = (messageId: string) => {
+  const delta = getSwipeDelta(messageId)
+
+  return {
+    transform: delta ? `translateX(${delta}px)` : 'translateX(0)',
+    transition: swipeState.value?.messageId === messageId ? 'none' : 'transform 0.18s ease'
+  }
+}
+
+const getSwipeOpacity = (messageId: string) => {
+  const delta = getSwipeDelta(messageId)
+  return String(Math.min(delta / REPLY_SWIPE_TRIGGER_X, 1))
+}
+
+const resetSwipe = () => {
+  swipeState.value = null
+}
+
+const forceBottomAfterMediaLoad = () => {
+  if (mediaLoadScrollTimer !== null) {
+    window.clearTimeout(mediaLoadScrollTimer)
+  }
+
+  mediaLoadScrollTimer = window.setTimeout(() => {
+    requestAnimationFrame(() => {
+      const el = scrollContainer.value
+      if (!el) return
+
+      el.scrollTop = el.scrollHeight + 9999
+
+      requestAnimationFrame(() => {
+        const latestEl = scrollContainer.value
+        if (!latestEl) return
+
+        latestEl.scrollTop = latestEl.scrollHeight + 9999
+
+        isAtBottom.value = true
+        shouldKeepBottom.value = true
+        unseenCount.value = 0
+        mediaLoadScrollTimer = null
+      })
+    })
+  }, 0)
+}
+
+const handleMessageMediaLoad = (message: ChatMessage) => {
+  const isOwnMessage = message.sender === 'user'
+
+  if (!shouldKeepBottom.value && !isAtBottom.value && !isOwnMessage) return
+
+  forceBottomAfterMediaLoad()
+}
+
+const getImagePreviewUrlFromEvent = (event: PointerEvent) => {
+  const target = event.target as HTMLElement | null
+  const imageWrap = target?.closest<HTMLElement>('.support-bubble__image-wrap')
+
+  return String(imageWrap?.dataset.previewUrl || '').trim()
+}
+
+const openImagePreview = (url: string) => {
+  const el = scrollContainer.value
+  previewScrollTop.value = el?.scrollTop || 0
+  previewImageUrl.value = url
+}
+
+const handlePreviewVisibleChange = (visible: boolean) => {
+  if (visible) return
+
+  previewImageUrl.value = ''
+
+  requestAnimationFrame(() => {
+    const el = scrollContainer.value
+    if (!el) return
+
+    el.scrollTop = previewScrollTop.value
+  })
+}
+
+const onMessagePointerDown = (event: PointerEvent, message: ChatMessage) => {
+  if (event.pointerType === 'mouse' && event.button !== 0) return
+  if (shouldIgnoreSwipe(event)) return
+
+  const previewUrl = getImagePreviewUrlFromEvent(event)
+
+  const target = event.currentTarget as HTMLElement | null
+  target?.setPointerCapture?.(event.pointerId)
+
+  swipeState.value = {
+    messageId: message.id,
+    startX: event.clientX,
+    startY: event.clientY,
+    deltaX: 0,
+    previewUrl
+  }
+}
+const onMessagePointerMove = (event: PointerEvent) => {
+  if (!swipeState.value) return
+
+  const dx = event.clientX - swipeState.value.startX
+  const dy = event.clientY - swipeState.value.startY
+
+  if (Math.abs(dy) > 18 && Math.abs(dy) > Math.abs(dx)) {
+    resetSwipe()
+    return
+  }
+
+  if (dx <= 0) {
+    swipeState.value.deltaX = 0
+    return
+  }
+
+  if (dx > 8 && Math.abs(dx) > Math.abs(dy)) {
+    event.preventDefault()
+  }
+
+  swipeState.value.deltaX = Math.min(dx, REPLY_SWIPE_MAX_X)
+}
+
+const onMessagePointerEnd = (event: PointerEvent, message: ChatMessage) => {
+  const currentSwipe = swipeState.value
+  const delta = currentSwipe?.messageId === message.id ? currentSwipe.deltaX : 0
+
+  const target = event.currentTarget as HTMLElement | null
+  target?.releasePointerCapture?.(event.pointerId)
+
+  if (delta <= CLICK_DRAG_TOLERANCE_X && currentSwipe?.previewUrl) {
+    openImagePreview(currentSwipe.previewUrl)
+    resetSwipe()
+    return
+  }
+
+  if (delta >= REPLY_SWIPE_TRIGGER_X) {
+    emit('reply', message)
+  }
+
+  resetSwipe()
+}
+const onMessagePointerCancel = () => {
+  resetSwipe()
+}
+
+const getDateObject = (message: ChatMessage) => {
+  const raw = message.createdAtRaw
+  const value = raw ? new Date(raw) : new Date()
+  return Number.isNaN(value.getTime()) ? new Date() : value
+}
+
+const getDayKey = (date: Date) => {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+const isSameDay = (a: Date, b: Date) => {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
+
+const formatDayLabel = (date: Date) => {
+  const today = new Date()
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+
+  if (isSameDay(date, today)) return 'امروز'
+  if (isSameDay(date, yesterday)) return 'دیروز'
+
+  return new Intl.DateTimeFormat('fa-IR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'long'
+  }).format(date)
+}
+
+const groupedMessages = computed(() => {
+  const groups: Array<{
+    dayKey: string
+    label: string
+    messages: ChatMessage[]
+  }> = []
+
+  for (const message of props.messages) {
+    const date = getDateObject(message)
+    const dayKey = getDayKey(date)
+    const lastGroup = groups[groups.length - 1]
+
+    if (!lastGroup || lastGroup.dayKey !== dayKey) {
+      groups.push({
+        dayKey,
+        label: formatDayLabel(date),
+        messages: [message]
+      })
+    } else {
+      lastGroup.messages.push(message)
+    }
+  }
+
+  return groups
+})
+
+const showJumpButton = computed(() => {
+  return props.messages.length > 0 && (!isAtBottom.value || unseenCount.value > 0)
+})
+
+const isNearBottom = () => {
+  const el = scrollContainer.value
+  if (!el) return true
+
+  const distanceFromBottom = el.scrollHeight - el.clientHeight - el.scrollTop
+  return distanceFromBottom < 120
+}
+
+const finishBottomState = (delay = 450) => {
+  window.setTimeout(() => {
+    if (!shouldKeepBottom.value) return
+
+    isAtBottom.value = true
+    unseenCount.value = 0
+    smoothScrollTimer = null
+    emitBottomState(true)
+  }, delay)
+}
+
+const scheduleScrollToBottom = (smooth = true, delay = 0) => {
+  if (smoothScrollTimer !== null) {
+    window.clearTimeout(smoothScrollTimer)
+  }
+
+  shouldKeepBottom.value = true
+
+  smoothScrollTimer = window.setTimeout(() => {
+    requestAnimationFrame(() => {
+      const el = scrollContainer.value
+      if (!el) return
+
+      const top = el.scrollHeight - el.clientHeight
+
+      if (smooth) {
+        el.scrollTo({
+          top,
+          behavior: 'smooth'
+        })
+
+        finishBottomState()
+        return
+      }
+
+      el.scrollTop = top
+      isAtBottom.value = true
+      shouldKeepBottom.value = true
+      unseenCount.value = 0
+      smoothScrollTimer = null
+      emitBottomState(true)
+    })
+  }, delay)
+}
+
+const scrollToBottom = (smooth = true) => {
+  scheduleScrollToBottom(smooth, smooth ? 80 : 0)
+}
+
+const handleJumpToBottom = () => {
+  unseenCount.value = 0
+  shouldKeepBottom.value = true
+  scrollToBottom(true)
+}
+
+const prepareForPrepend = () => {
+  const el = scrollContainer.value
+  if (!el) return
+
+  const candidates = Array.from(el.querySelectorAll<HTMLElement>('[data-message-id]'))
+
+  const firstVisible = candidates.find((node) => node.offsetTop >= el.scrollTop) || candidates[0]
+
+  if (!firstVisible) return
+
+  prependAnchorId.value = firstVisible.dataset.messageId || null
+  prependAnchorTop.value = firstVisible.offsetTop
+  prependInProgress.value = true
+}
+
+const restoreAfterPrepend = async () => {
+  const el = scrollContainer.value
+  if (!el || !prependInProgress.value || !prependAnchorId.value) {
+    prependInProgress.value = false
+    return
+  }
+
+  await nextTick()
+
+  const anchor = el.querySelector<HTMLElement>(`[data-message-id="${prependAnchorId.value}"]`)
+
+  if (!anchor) {
+    prependInProgress.value = false
+    return
+  }
+
+  const newTop = anchor.offsetTop
+  const delta = newTop - prependAnchorTop.value
+
+  el.scrollTop += delta
+
+  prependInProgress.value = false
+  prependAnchorId.value = null
+}
+
+const handleScroll = () => {
+  const el = scrollContainer.value
+  if (!el) return
+
+  const nearBottom = isNearBottom()
+
+  emitBottomState(nearBottom)
+
+  isAtBottom.value = nearBottom
+  shouldKeepBottom.value = nearBottom
+
+  if (nearBottom) {
+    unseenCount.value = 0
+  }
+
+  if (el.scrollTop <= 80 && props.hasMore && !props.loadingOlder) {
+    emit('load-older')
+  }
+}
+
+onBeforeUnmount(() => {
+  if (smoothScrollTimer !== null) {
+    window.clearTimeout(smoothScrollTimer)
+  }
+
+  if (mediaLoadScrollTimer !== null) {
+    window.clearTimeout(mediaLoadScrollTimer)
+  }
+
+  emitBottomState(false)
+})
+
+watch(
+  () => props.messages.map((item) => item.id).join('|'),
+  async (newIds, oldIds) => {
+    const el = scrollContainer.value
+    if (!el) return
+
+    const oldList = oldIds ? oldIds.split('|').filter(Boolean) : []
+    const newList = newIds ? newIds.split('|').filter(Boolean) : []
+
+    await nextTick()
+
+    if (prependInProgress.value || props.loadingOlder) return
+
+    if (oldList.length === 0 && newList.length > 0) {
+      scheduleScrollToBottom(false, 0)
+      return
+    }
+
+    if (newList.length > oldList.length) {
+      const addedIds = newList.filter((id) => !oldList.includes(id))
+      const lastAddedId = addedIds[addedIds.length - 1]
+      const lastAddedMessage = props.messages.find((item) => item.id === lastAddedId)
+
+      // اگر پیام جدید از سمت خود کاربر بود، همیشه برو پایین
+      if (lastAddedMessage?.sender === 'user') {
+        unseenCount.value = 0
+        scheduleScrollToBottom(true, 120)
+        return
+      }
+
+      const addedCount = newList.length - oldList.length
+
+      if (isAtBottom.value) {
+        scheduleScrollToBottom(true, 200)
+      } else {
+        unseenCount.value += addedCount
+      }
+    }
+  },
+  { immediate: true }
+)
+
+defineExpose({
+  scrollToBottom,
+  prepareForPrepend,
+  restoreAfterPrepend
+})
+</script>
+
+<style scoped lang="less">
+.support-chat-wrap {
+  position: relative;
+  min-height: 0;
+  height: 100%;
+  font-family: var(--font-family, iran-sans);
+}
+
+.support-chat-wrap,
+.support-chat-wrap * {
+  box-sizing: border-box;
+}
+
+.support-chat-loading {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 4;
+  border-radius: 999px;
+  background: var(--bg, #fff);
+  border: 1px solid rgb(var(--colorPrimaryRGB) / 0.18);
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--colorText, #111827);
+  backdrop-filter: blur(8px);
+}
+
+.support-jump-wrap {
+  position: absolute;
+  right: 0;
+  bottom: 18px;
+  transform: translateX(-50%);
+  z-index: 4;
+}
+
+.support-jump-badge-wrap {
+  display: inline-flex;
+}
+.support-hidden-preview-image {
+  position: fixed !important;
+  left: -99999px !important;
+  top: -99999px !important;
+  width: 1px !important;
+  height: 1px !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.support-bubble__image-wrap {
+  position: relative;
+  overflow: hidden;
+  border-radius: 18px;
+  width: 100%;
+  max-width: 100%;
+  line-height: 0;
+  cursor: zoom-in;
+  background: rgba(15, 23, 42, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.support-bubble__image {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  max-height: 320px;
+  object-fit: contain;
+  object-position: center;
+  border-radius: 18px;
+  margin-inline: auto;
+}
+
+.support-bubble__image-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18px;
+  background: rgba(15, 23, 42, 0.34);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 900;
+  opacity: 0;
+  transition: opacity 0.16s ease;
+  pointer-events: none;
+}
+
+.support-bubble__image-wrap:hover .support-bubble__image-mask {
+  opacity: 1;
+}
+
+.support-bubble:has(.support-bubble__image-wrap) {
+  padding: 6px;
+  width: fit-content;
+  max-width: min(78vw, 360px);
+}
+
+.support-bubble:has(.support-bubble__image-wrap):not(:has(.support-bubble__reply)) {
+  min-width: 0;
+}
+
+.support-bubble:has(.support-bubble__image-wrap) .support-bubble__attachments {
+  margin-bottom: 8px;
+  width: 100%;
+  align-items: center;
+}
+
+.support-bubble:has(.support-bubble__image-wrap) .support-bubble__meta {
+  padding-inline: 8px;
+  padding-bottom: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.support-bubble__reply-thumb {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+  overflow: hidden;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.support-bubble__reply-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.support-uploading-image {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-height: 160px;
+  overflow: hidden;
+  border-radius: 18px;
+  background: rgba(15, 23, 42, 0.18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.support-uploading-image__img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 320px;
+  object-fit: contain;
+  object-position: center;
+  filter: blur(1px);
+  opacity: 0.95;
+}
+
+.support-uploading-image__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 11px;
+  background: rgba(15, 23, 42, 0.36);
+  color: #fff;
+}
+
+.support-uploading-image__circle {
+  width: 58px;
+  height: 58px;
+  border-radius: 999px;
+  border: 4px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: support-upload-spin 0.9s linear infinite;
+}
+
+.support-uploading-image__circle span {
+  animation: support-upload-spin-reverse 0.9s linear infinite;
+  font-size: 13px;
+  font-weight: 900;
+  direction: ltr;
+}
+
+.support-uploading-image__text {
+  font-size: 12px;
+  font-weight: 900;
+}
+
+@keyframes support-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes support-upload-spin-reverse {
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+@media (max-width: 767px) {
+  .support-bubble__image {
+    max-height: 260px;
+  }
+
+  .support-bubble__image-wrap,
+  .support-uploading-image {
+    width: min(250px, 74vw);
+  }
+
+  .support-bubble__image {
+    max-height: 260px;
+  }
+
+  .support-bubble__image-mask {
+    display: none;
+  }
+
+  .support-uploading-image {
+    width: 210px;
+    height: 160px;
+  }
+
+  .support-uploading-image__circle {
+    width: 52px;
+    height: 52px;
+  }
+
+  .support-bubble__reply-thumb {
+    width: 38px;
+    height: 38px;
+    flex-basis: 38px;
+    border-radius: 9px;
+  }
+}
+.support-jump-button {
+  width: 46px;
+  height: 46px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(var(--colorPrimaryRGB) / 0.18);
+  background: rgb(var(--colorPrimaryRGB) / 0.12);
+  color: var(--colorPrimary, #2563eb);
+  border-radius: 999px;
+  box-shadow: 0 10px 15px rgb(var(--colorPrimaryRGB) / 0.12);
+  backdrop-filter: blur(5px);
+}
+
+.support-jump-badge-wrap :deep(.ant-badge-count) {
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding-inline: 6px;
+  border-radius: 999px;
+  background: var(--colorPrimary, #2563eb);
+  color: var(--color6, #fff);
+  box-shadow: none;
+  font-size: 11px;
+  font-weight: 400;
+  top: 1px !important;
+  left: 5px !important;
+  border: 2px white solid;
+  aspect-ratio: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.support-chat-scroll {
+  min-height: 0;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  padding: 16px 12px 16px;
+  background: radial-gradient(
+      circle at top right,
+      rgb(var(--colorPrimaryRGB) / 0.08),
+      transparent 22%
+    ),
+    radial-gradient(circle at bottom left, rgb(var(--colorPrimaryRGB) / 0.05), transparent 24%),
+    var(--bg, #fafafa);
+  scrollbar-width: thin;
+  scrollbar-color: #cfcfd4 #f3f3f5;
+}
+
+.support-chat-scroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.support-chat-scroll::-webkit-scrollbar-track {
+  background: #f3f3f5;
+  border-radius: 999px;
+}
+
+.support-chat-scroll::-webkit-scrollbar-thumb {
+  background: #cfcfd4;
+  border-radius: 999px;
+  border: 2px solid #f3f3f5;
+}
+
+.support-chat-list {
+  width: 100%;
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.support-day-group {
+  display: block;
+}
+
+.support-day-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  margin-bottom: 12px;
+}
+
+.support-day-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 14px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bg, #fff) 72%, transparent);
+  border: 1px solid rgb(var(--colorPrimaryRGB) / 0.18);
+  color: var(--colorText, #111827);
+  backdrop-filter: blur(8px);
+  font-size: 12px;
+  font-weight: 700;
+  box-shadow: 0 6px 20px rgb(var(--colorPrimaryRGB) / 0.08);
+}
+
+.support-row {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  margin-bottom: 12px;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.support-row--user {
+  justify-content: flex-start;
+}
+
+.support-row--support {
+  justify-content: flex-end;
+}
+
+.support-row__inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  min-width: 0;
+  flex: 0 1 auto;
+  max-width: calc(100% - 42px);
+  touch-action: pan-y;
+  will-change: transform;
+}
+
+.support-row__inner--support {
+  flex-direction: row-reverse;
+}
+
+.support-row__inner--support .support-bubble {
+  max-width: calc(100% - 40px);
+}
+
+.support-reply-button {
+  position: static;
+  z-index: 2;
+  flex: 0 0 34px;
+  width: 34px !important;
+  min-width: 34px !important;
+  height: 34px !important;
+  padding: 0 !important;
+  border: 1px solid rgb(var(--colorPrimaryRGB) / 0.18) !important;
+  border-radius: 999px !important;
+  background: color-mix(in srgb, var(--bg, #fff) 92%, transparent) !important;
+  color: var(--colorPrimary, #2563eb) !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 18px rgb(var(--colorPrimaryRGB) / 0.1);
+  backdrop-filter: blur(8px);
+  opacity: 1;
+  transform: scale(0.96);
+}
+
+.support-reply-button--user {
+  order: 0;
+}
+
+.support-reply-button--support {
+  order: -1;
+}
+
+.support-avatar {
+  margin-bottom: 4px;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  border-radius: 16px;
+  border: 1px solid rgb(var(--colorPrimaryRGB) / 0.18);
+  background: rgb(var(--colorPrimaryRGB) / 0.08);
+  color: var(--colorPrimary, #2563eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.support-avatar__svg {
+  width: 16px;
+  height: 16px;
+}
+
+.support-bubble {
+  min-width: 0;
+  flex: 0 1 auto;
+  width: auto;
+  max-width: min(78vw, 420px);
+  overflow: hidden;
+  border-radius: 24px;
+  padding: 12px 16px;
+  background: var(--color6, #fff);
+  box-shadow: 0 8px 18px rgb(var(--colorPrimaryRGB) / 0.08);
+  direction: rtl;
+  text-align: right;
+}
+
+.support-bubble--has-reply {
+  min-width: min(260px, 72vw);
+}
+
+.support-bubble--user .support-bubble__image-wrap {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.support-bubble--support {
+  border-bottom-left-radius: 10px;
+  background: var(--bg2, #fff);
+  color: var(--colorText, #111827);
+  border: 1px solid var(--colorPrimary, #2563eb);
+}
+
+.support-bubble__reply {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  margin-bottom: 9px;
+  padding: 8px 10px;
+  border-radius: 14px;
+  overflow: hidden;
+  min-width: 10rem;
+}
+
+.support-bubble__reply--user {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.support-bubble__reply--support {
+  background: rgb(var(--colorPrimaryRGB) / 0.08);
+}
+
+.support-bubble__reply-line {
+  width: 3px;
+  border-radius: 999px;
+  flex: 0 0 3px;
+  background: currentColor;
+  opacity: 0.75;
+}
+
+.support-bubble__reply-content {
+  min-width: 0;
+  width: 0;
+  flex: 1;
+}
+
+.support-bubble__reply-title {
+  margin-bottom: 2px;
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 1.6;
+}
+
+.support-bubble__reply-text {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  unicode-bidi: plaintext;
+  font-size: 12px;
+  line-height: 1.7;
+  opacity: 0.86;
+}
+
+.support-bubble--user .support-bubble__reply-text,
+.support-bubble--user .support-bubble__reply-title {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.support-bubble--support .support-bubble__reply-title {
+  color: var(--colorPrimary, #2563eb);
+}
+
+.support-bubble--support .support-bubble__reply-text {
+  color: color-mix(in srgb, var(--colorText, #111827) 72%, transparent);
+}
+
+.support-bubble__attachments {
+  margin-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+.support-bubble__audio {
+  border-radius: 16px;
+  padding: 8px;
+  max-width: 100%;
+}
+
+.support-bubble__audio--user {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.support-bubble__audio--support {
+  background: rgb(var(--colorPrimaryRGB) / 0.08);
+}
+
+.support-bubble__audio-el {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+.support-bubble__text {
+  margin: 0;
+  white-space: pre-line;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  font-size: 14px;
+  line-height: 1.9;
+  direction: rtl;
+  text-align: right;
+}
+
+.support-bubble__meta {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  font-size: 11px;
+  direction: rtl;
+  text-align: right;
+}
+
+.support-bubble__meta--user {
+  color: rgba(255, 255, 255, 0.78);
+  justify-content: end;
+}
+
+.support-bubble__meta--support {
+  color: color-mix(in srgb, var(--colorText, #111827) 50%, transparent);
+}
+
+.support-bubble__status-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+}
+
+.support-bubble__status-base-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.support-bubble__status-svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.support-reply-swipe-cue {
+  position: absolute;
+  z-index: 0;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  background: rgb(var(--colorPrimaryRGB) / 0.12);
+  color: var(--colorPrimary, #2563eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 900;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+
+.support-reply-swipe-cue--user {
+  right: 8px;
+}
+
+.support-reply-swipe-cue--support {
+  right: 8px;
+}
+
+.support-empty-state {
+  min-height: 320px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 24px;
+}
+
+.support-empty-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 22px;
+  background: var(--bg2, #ffffff);
+  color: var(--colorText, #111827);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 30px rgb(var(--colorPrimaryRGB) / 0.08);
+}
+
+.support-empty-icon--loading {
+  background: rgb(var(--colorPrimaryRGB) / 0.08);
+  color: var(--colorPrimary, #2563eb);
+}
+
+.support-empty-svg {
+  width: 28px;
+  height: 28px;
+}
+
+.support-empty-title {
+  margin: 18px 0 0;
+  font-size: 1.5rem;
+  font-weight: 900;
+  color: var(--colorText, #111827);
+}
+
+.support-empty-text {
+  margin: 12px 0 0;
+  max-width: 26rem;
+  font-size: 0.95rem;
+  line-height: 2;
+  color: color-mix(in srgb, var(--colorText, #111827) 68%, transparent);
+}
+
+.support-spinner {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: 3px solid rgb(var(--colorPrimaryRGB) / 0.2);
+  border-top-color: var(--colorPrimary, #2563eb);
+  animation: support-spin 0.9s linear infinite;
+}
+
+.support-typing {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.typing-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--colorPrimary, #2563eb);
+  display: inline-block;
+  animation: typing-bounce 1.2s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.typing-dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes support-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes typing-bounce {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+
+  40% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+@media (max-width: 767px) {
+  .support-chat-scroll {
+    padding: 14px 8px 16px;
+  }
+
+  .support-row {
+    gap: 5px;
+    margin-bottom: 12px;
+    align-items: flex-end;
+  }
+
+  .support-bubble--has-reply {
+    min-width: min(230px, 68vw);
+  }
+
+  .support-row--user {
+    justify-content: flex-start;
+  }
+
+  .support-row--support {
+    justify-content: flex-end;
+  }
+
+  .support-row__inner {
+    gap: 5px;
+    min-width: 0;
+    max-width: calc(100% - 38px);
+  }
+
+  .support-row__inner--support {
+    flex-direction: row-reverse;
+  }
+
+  .support-row__inner--support .support-bubble {
+    max-width: calc(100% - 32px);
+  }
+
+  .support-avatar {
+    width: 28px;
+    height: 28px;
+    flex: 0 0 28px;
+    margin-bottom: 2px;
+  }
+
+  .support-avatar__svg {
+    width: 15px;
+    height: 15px;
+  }
+
+  .support-bubble {
+    min-width: 0;
+    max-width: 100%;
+    padding: 10px 12px;
+    border-radius: 20px;
+  }
+
+  .support-bubble--user {
+    border-bottom-right-radius: 9px;
+  }
+
+  .support-bubble--support {
+    border-bottom-left-radius: 9px;
+  }
+
+  .support-bubble__text {
+    font-size: 13px;
+    line-height: 1.8;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .support-bubble__reply {
+    padding: 7px 9px;
+    max-width: 100%;
+  }
+
+  .support-bubble__reply-content {
+    min-width: 0;
+  }
+
+  .support-bubble__reply-text {
+    max-width: 100%;
+  }
+
+  .support-bubble__image {
+    max-height: 260px;
+  }
+
+  .support-bubble__audio-el {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .support-bubble__meta {
+    font-size: 10px;
+  }
+
+  .support-reply-button {
+    display: inline-flex !important;
+    flex: 0 0 32px;
+    width: 32px !important;
+    min-width: 32px !important;
+    height: 32px !important;
+    transform: none;
+  }
+
+  .support-reply-button--user {
+    order: 0;
+  }
+
+  .support-reply-button--support {
+    order: -1;
+  }
+
+  .support-reply-swipe-cue {
+    display: none;
+  }
+
+  .support-jump-wrap {
+    right: 10px;
+    bottom: 14px;
+    transform: none;
+  }
+
+  .support-jump-button {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+@media (min-width: 768px) {
+  .support-chat-scroll {
+    padding: 24px 24px 16px;
+  }
+
+  .support-row__inner {
+    max-width: min(80%, calc(100% - 42px));
+  }
+
+  .support-row__inner--support .support-bubble {
+    max-width: calc(100% - 40px);
+  }
+
+  .support-bubble__text {
+    font-size: 15px;
+  }
+}
+</style>
diff --git a/src/views/support/index.vue b/src/views/support/index.vue
new file mode 100644
index 0000000..ee00960
--- /dev/null
+++ b/src/views/support/index.vue
@@ -0,0 +1,702 @@
+<template>
+  <div class="support-page main-with-bottom-chrome-inner--contained">
+    <div class="support-shell">
+      <SupportChatHeader title="پشتیبانی" />
+
+      <SupportChatMessages
+        ref="messagesRef"
+        :messages="messages"
+        :support-typing="supportTyping"
+        :has-more="hasMoreMessages"
+        :loading-older="isFetchingOlderMessages"
+        :loading="chatLoading"
+        :loading-label="loadingLabel"
+        @load-older="loadOlderMessages"
+        @reply="handleReply"
+        @bottom-state-change="setSupportChatAtBottom"
+      />
+
+      <SupportChatComposer
+        v-model="draft"
+        :disabled="isSending"
+        :replying-to="replyingTo"
+        @cancel-reply="clearReply"
+        @send="sendMessage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onBeforeUnmount, ref } from 'vue'
+import SupportChatHeader from './components/SupportChatHeader.vue'
+import SupportChatMessages from './components/SupportChatMessages.vue'
+import SupportChatComposer from './components/SupportChatComposer.vue'
+import type {
+  ChatAttachment,
+  ChatMessage,
+  ChatReplyPreview,
+  ComposerSendPayload
+} from '@/models/support'
+import {
+  connectChatIfExists,
+  ensureChatAndConnect,
+  fetchChatMessages,
+  fetchOlderChatMessages,
+  sendTextMessage,
+  sendMediaMessage,
+  getExistingChatSession,
+  useChatService,
+  chatLoading,
+  setSupportChatPageOpen
+} from '@/utils/chat'
+import { useSettingsStore } from '@/store/settingsStore'
+
+const draft = ref('')
+const isSending = ref(false)
+const supportTyping = ref(false)
+const replyingTo = ref<ChatReplyPreview | null>(null)
+const uploadingMessagesByRoom = ref<Record<string, ChatMessage[]>>({})
+
+const IMAGE_MAX_WIDTH = 1600
+const IMAGE_MAX_HEIGHT = 1600
+const IMAGE_WEBP_QUALITY = 0.85
+
+const messagesRef = ref<InstanceType<typeof SupportChatMessages> | null>(null)
+
+const {
+  messages: rawMessages,
+  currentRoomId,
+  currentChatUserId,
+  status,
+  hasMoreMessages,
+  isFetchingOlderMessages,
+  setSupportChatAtBottom
+} = useChatService()
+
+const loadingLabel = computed(() => {
+  if (!chatLoading.value) return ''
+
+  if (status.value === 'CONNECTING') {
+    return 'در حال دریافت پیام‌ها و اتصال به پشتیبانی...'
+  }
+
+  return 'در حال دریافت پیام‌ها...'
+})
+
+const formatTime = (date: Date | string | number | null | undefined) => {
+  const value = date ? new Date(date) : new Date()
+
+  return new Intl.DateTimeFormat('fa-IR', {
+    hour: '2-digit',
+    minute: '2-digit'
+  }).format(value)
+}
+
+const getSettingValue = (key: string) => {
+  const setting = useSettingsStore().getSettingByKey(key)
+  if (setting == null) return ''
+  if (typeof setting === 'string') return setting.trim()
+  return String(setting).trim()
+}
+
+const getChatUploadUrl = () => getSettingValue('chat_upload_url')
+const getChatDownloadUrl = () => getSettingValue('chat_download_url')
+
+const buildChatFileUrl = (value: string) => {
+  const raw = String(value || '').trim()
+  if (!raw) return ''
+
+  if (/^(https?:\/\/|blob:|data:)/i.test(raw)) {
+    return raw
+  }
+
+  const downloadUrl = getChatDownloadUrl()
+
+  if (!downloadUrl) {
+    console.error('chat_download_url is empty')
+    return raw
+  }
+
+  const cleanRaw = raw.replace(/^\/+/, '')
+
+  try {
+    const baseUrl = new URL(downloadUrl)
+    const basePath = baseUrl.pathname.replace(/^\/+|\/+$/g, '')
+    const baseParts = basePath.split('/').filter(Boolean)
+    const rawParts = cleanRaw.split('/').filter(Boolean)
+
+    if (basePath && cleanRaw.startsWith(`${basePath}/`)) {
+      return `${baseUrl.origin}/${cleanRaw}`
+    }
+
+    const lastBasePart = baseParts[baseParts.length - 1]
+
+    if (lastBasePart && rawParts[0] === lastBasePart) {
+      const parentPath = baseParts.slice(0, -1).join('/')
+      return `${baseUrl.origin}/${[parentPath, cleanRaw].filter(Boolean).join('/')}`
+    }
+
+    return `${downloadUrl.replace(/\/+$/, '')}/${cleanRaw}`
+  } catch (error) {
+    console.error('invalid chat_download_url:', downloadUrl, error)
+    return raw
+  }
+}
+
+const extractUploadedPath = (result: any) => {
+  const value =
+    result?.path ||
+    result?.url ||
+    result?.file_url ||
+    result?.fileUrl ||
+    result?.data?.path ||
+    result?.data?.url ||
+    result?.data?.file_url ||
+    result?.data?.fileUrl ||
+    result?.file?.path ||
+    result?.file?.url
+
+  return String(value || '').trim()
+}
+
+const getCompressedImageName = (fileName: string) => {
+  const cleanName = String(fileName || `image-${Date.now()}`)
+    .replace(/\.[^/.]+$/, '')
+    .replace(/[^\w\u0600-\u06FF.-]+/g, '-')
+
+  return `${cleanName}.webp`
+}
+
+const canvasToBlob = (canvas: HTMLCanvasElement, type: string, quality: number) => {
+  return new Promise<Blob | null>((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), type, quality)
+  })
+}
+
+const loadImageFromFile = (file: File) => {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const url = URL.createObjectURL(file)
+    const img = new Image()
+
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+      resolve(img)
+    }
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('image load failed'))
+    }
+
+    img.src = url
+  })
+}
+
+const shouldCompressImage = (file: File) => {
+  if (!file.type.startsWith('image/')) return false
+
+  // gif متحرک خراب میشه، svg هم نیازی به canvas/webp نداره
+  if (file.type === 'image/gif') return false
+  if (file.type === 'image/svg+xml') return false
+
+  return true
+}
+
+const compressImageToWebp = async (file: File) => {
+  if (!shouldCompressImage(file)) return file
+
+  try {
+    const img = await loadImageFromFile(file)
+
+    const ratio = Math.min(
+      IMAGE_MAX_WIDTH / img.naturalWidth,
+      IMAGE_MAX_HEIGHT / img.naturalHeight,
+      1
+    )
+
+    const width = Math.round(img.naturalWidth * ratio)
+    const height = Math.round(img.naturalHeight * ratio)
+
+    const canvas = document.createElement('canvas')
+    canvas.width = width
+    canvas.height = height
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return file
+
+    ctx.drawImage(img, 0, 0, width, height)
+
+    const blob = await canvasToBlob(canvas, 'image/webp', IMAGE_WEBP_QUALITY)
+    if (!blob) return file
+
+    const webpFile = new File([blob], getCompressedImageName(file.name), {
+      type: 'image/webp',
+      lastModified: Date.now()
+    })
+
+    // اگر WebP بزرگ‌تر شد، فایل اصلی رو آپلود کن
+    if (webpFile.size >= file.size) return file
+
+    return webpFile
+  } catch (error) {
+    console.error('compress image to webp failed:', error)
+    return file
+  }
+}
+
+
+const uploadChatFile = (file: File, onProgress?: (percent: number) => void) => {
+  return new Promise<string>((resolve, reject) => {
+    const uploadUrl = getChatUploadUrl()
+
+    if (!uploadUrl) {
+      reject(new Error('chat_upload_url is empty'))
+      return
+    }
+
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const xhr = new XMLHttpRequest()
+    xhr.open('POST', uploadUrl)
+
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable) return
+      const percent = Math.round((event.loaded / event.total) * 100)
+      onProgress?.(Math.min(percent, 99))
+    }
+
+    xhr.onload = () => {
+      if (xhr.status < 200 || xhr.status >= 300) {
+        reject(new Error(`chat file upload failed: ${xhr.status}`))
+        return
+      }
+
+      try {
+        const contentType = xhr.getResponseHeader('content-type') || ''
+
+        if (contentType.includes('application/json')) {
+          const result = JSON.parse(xhr.responseText)
+          const uploadedPath = extractUploadedPath(result)
+
+          if (!uploadedPath) {
+            console.error('upload response has no path/url:', result)
+            reject(new Error('upload response has no path/url'))
+            return
+          }
+
+          resolve(uploadedPath)
+          return
+        }
+
+        const uploadedPath = xhr.responseText.trim()
+
+        if (!uploadedPath) {
+          reject(new Error('upload response is empty'))
+          return
+        }
+
+        resolve(uploadedPath)
+      } catch (error) {
+        reject(error)
+      }
+    }
+
+    xhr.onerror = () => {
+      reject(new Error('chat file upload network error'))
+    }
+
+    xhr.send(formData)
+  })
+}
+
+const createId = () => `${Date.now()}-${Math.floor(Math.random() * 100000)}`
+
+const mapRawAttachment = (item: any): ChatAttachment | null => {
+  if (!item) return null
+
+  const type = String(item.type || item.file_type || item.kind || '').toLowerCase()
+  const rawUrl = item.url || item.file_url || item.fileUrl || item.path || item.content
+  const url = buildChatFileUrl(rawUrl)
+  const name = item.name || item.file_name || 'file'
+
+  if (!url) return null
+
+  if (type === 'image') {
+    return {
+      id: item.id || createId(),
+      type: 'image',
+      url,
+      name
+    }
+  }
+
+  if (type === 'audio' || type === 'voice') {
+    return {
+      id: item.id || createId(),
+      type: 'audio',
+      url,
+      name
+    }
+  }
+
+  return null
+}
+
+const getMessageType = (normalized: any) => {
+  return String(normalized.type_content ?? normalized.type ?? 'text').toLowerCase()
+}
+
+const getMessagePreviewText = (message: Pick<ChatMessage, 'text' | 'attachments'>) => {
+  const text = String(message.text || '').trim()
+  const firstAttachment = message.attachments?.[0]
+
+  if (text) return text
+  if (firstAttachment?.type === 'image') return 'تصویر'
+  if (firstAttachment?.type === 'audio') return 'ویس'
+
+  return 'پیام'
+}
+
+const toReplyPreview = (message: ChatMessage): ChatReplyPreview => {
+  const firstAttachment = message.attachments?.[0] || null
+
+  return {
+    id: message.id,
+    sender: message.sender,
+    text: getMessagePreviewText(message),
+    attachment: firstAttachment
+      ? {
+          type: firstAttachment.type,
+          url: firstAttachment.url,
+          name: firstAttachment.name
+        }
+      : null
+  }
+}
+
+const handleReply = async (message: ChatMessage) => {
+  replyingTo.value = toReplyPreview(message)
+
+  console.log('replying to:', replyingTo.value)
+
+  await nextTick()
+}
+
+const clearReply = () => {
+  replyingTo.value = null
+}
+
+const messages = computed<ChatMessage[]>(() => {
+  const baseMessages = rawMessages.value
+    .map((item: any) => {
+      const normalized = item.message ?? item
+
+      const senderId =
+        normalized.sender_id ??
+        normalized.user_id ??
+        normalized.from_user_id ??
+        normalized.sender?.id
+
+      const typeContent = getMessageType(normalized)
+      const rawContent = normalized.content ?? normalized.text ?? normalized.body ?? ''
+
+      const fileContent =
+        typeContent === 'image' || typeContent === 'voice' || typeContent === 'audio'
+          ? buildChatFileUrl(rawContent)
+          : ''
+
+      let attachments: ChatAttachment[] = []
+
+      if (typeContent === 'image' && fileContent) {
+        attachments = [
+          {
+            id: normalized.id || normalized.message_id || createId(),
+            type: 'image',
+            url: fileContent,
+            name: normalized.file_name || normalized.name || 'image'
+          }
+        ]
+      } else if ((typeContent === 'voice' || typeContent === 'audio') && fileContent) {
+        attachments = [
+          {
+            id: normalized.id || normalized.message_id || createId(),
+            type: 'audio',
+            url: fileContent,
+            name: normalized.file_name || normalized.name || 'voice'
+          }
+        ]
+      } else {
+        const rawAttachments = normalized.attachments ?? normalized.files ?? normalized.media ?? []
+
+        attachments = Array.isArray(rawAttachments)
+          ? (rawAttachments.map(mapRawAttachment).filter(Boolean) as ChatAttachment[])
+          : []
+      }
+
+      const text = typeContent === 'text' ? String(rawContent || '').trim() : ''
+
+      if (!text && attachments.length === 0) return null
+
+      const isUserMessage = String(senderId) === String(currentChatUserId.value)
+      const realMessageId = normalized.id || normalized.message_id
+
+      const messageId =
+        realMessageId ||
+        normalized._client_key ||
+        `${normalized.room_id || 'room'}-${senderId || 'sender'}-${
+          normalized.created_at || normalized.timestamp || ''
+        }-${rawContent}`
+
+      const reply = normalized.reply ?? normalized.reply_id ?? normalized.reply_to_id ?? null
+
+      return {
+        id: String(messageId),
+        text,
+        sender: isUserMessage ? 'user' : 'support',
+        createdAt: formatTime(
+          normalized.created_at || normalized.createdAt || normalized.timestamp
+        ),
+        createdAtRaw: normalized.created_at || normalized.createdAt || normalized.timestamp,
+        status: isUserMessage
+          ? normalized._optimistic
+            ? 'sending'
+            : normalized.read_at
+              ? 'seen'
+              : 'sent'
+          : undefined,
+        attachments,
+        reply: reply ? String(reply) : null,
+        replyTo: null
+      }
+    })
+    .filter(Boolean) as ChatMessage[]
+
+  const messageMap = new Map(baseMessages.map((item) => [String(item.id), item]))
+
+  const mappedMessages = baseMessages.map((message) => {
+    const replyId = message.reply ? String(message.reply) : ''
+
+    if (!replyId) return message
+
+    const repliedMessage = messageMap.get(replyId)
+
+    if (!repliedMessage) {
+      return {
+        ...message,
+        replyTo: {
+          id: replyId,
+          sender: 'support',
+          text: 'پیام پاسخ داده‌شده',
+          attachment: null
+        }
+      }
+    }
+
+    return {
+      ...message,
+      replyTo: toReplyPreview(repliedMessage)
+    }
+  })
+
+  const roomId = currentRoomId.value || ''
+  const uploadingMessages = uploadingMessagesByRoom.value[roomId] || []
+
+  return [...mappedMessages, ...uploadingMessages]
+})
+
+onMounted(async () => {
+  setSupportChatPageOpen(true)
+
+  try {
+    const existing = getExistingChatSession()
+
+    if (!existing) {
+      chatLoading.value = false
+      return
+    }
+
+    await connectChatIfExists()
+    await fetchChatMessages()
+    await nextTick()
+    messagesRef.value?.scrollToBottom(false)
+  } catch (error) {
+    chatLoading.value = false
+    console.error('chat page init failed:', error)
+  }
+})
+
+onBeforeUnmount(() => {
+  setSupportChatPageOpen(false)
+})
+
+const loadOlderMessages = async () => {
+  try {
+    messagesRef.value?.prepareForPrepend()
+    await fetchOlderChatMessages()
+    await messagesRef.value?.restoreAfterPrepend()
+  } catch (error) {
+    console.error('load older messages failed:', error)
+  }
+}
+
+const sendMessage = async (payload: ComposerSendPayload) => {
+  const text = payload.text.trim()
+  const attachments = payload.attachments?.map((item) => ({ ...item })) || []
+  const hasAttachments = attachments.length > 0
+  const replyId = payload.reply
+    ? String(payload.reply)
+    : replyingTo.value?.id
+      ? String(replyingTo.value.id)
+      : null
+
+  if (!text && !hasAttachments) return
+  if (isSending.value) return
+
+  try {
+    isSending.value = true
+
+    const existing = getExistingChatSession()
+
+    if (!existing) {
+      await ensureChatAndConnect()
+    } else if (status.value !== 'OPEN') {
+      await connectChatIfExists()
+    }
+
+    const roomId = currentRoomId.value || getExistingChatSession()?.roomId || ''
+
+    if (text) {
+      await sendTextMessage(text, replyId)
+    }
+
+    for (const attachment of attachments) {
+      if (!attachment.file) {
+        if (attachment.url) {
+          await sendMediaMessage(
+            attachment.url,
+            attachment.type === 'audio' ? 'voice' : 'image',
+            replyId
+          )
+        }
+
+        continue
+      }
+
+      const tempMessageId = `uploading-${createId()}`
+      const previewUrl = attachment.url || URL.createObjectURL(attachment.file)
+
+      const uploadingMessage: ChatMessage = {
+        id: tempMessageId,
+        sender: 'user',
+        text: '',
+        createdAt: formatTime(new Date()),
+        createdAtRaw: new Date().toISOString(),
+        status: 'sending',
+        reply: replyId,
+        replyTo: replyingTo.value,
+        attachments: [
+          {
+            ...attachment,
+            id: attachment.id || createId(),
+            url: previewUrl,
+            uploading: true,
+            uploadProgress: 0
+          }
+        ]
+      }
+
+      uploadingMessagesByRoom.value[roomId] = [
+        ...(uploadingMessagesByRoom.value[roomId] || []),
+        uploadingMessage
+      ]
+
+      uploadingMessagesByRoom.value = { ...uploadingMessagesByRoom.value }
+
+      await nextTick()
+      messagesRef.value?.scrollToBottom(true)
+
+      const setUploadProgress = (percent: number) => {
+        const list = uploadingMessagesByRoom.value[roomId] || []
+        const target = list.find((message) => message.id === tempMessageId)
+        const targetAttachment = target?.attachments?.[0]
+
+        if (targetAttachment) {
+          targetAttachment.uploadProgress = percent
+          uploadingMessagesByRoom.value = { ...uploadingMessagesByRoom.value }
+        }
+      }
+      try {
+        setUploadProgress(5)
+
+        const fileForUpload =
+          attachment.type === 'image' ? await compressImageToWebp(attachment.file) : attachment.file
+
+        setUploadProgress(12)
+
+        const uploadedPath = await uploadChatFile(fileForUpload, setUploadProgress)
+
+        setUploadProgress(99)
+
+        await sendMediaMessage(
+          uploadedPath,
+          attachment.type === 'audio' ? 'voice' : 'image',
+          replyId
+        )
+      } finally {
+        uploadingMessagesByRoom.value[roomId] = (
+          uploadingMessagesByRoom.value[roomId] || []
+        ).filter((message) => message.id !== tempMessageId)
+
+        uploadingMessagesByRoom.value = { ...uploadingMessagesByRoom.value }
+      }
+    }
+
+    clearReply()
+
+    await nextTick()
+    messagesRef.value?.scrollToBottom(true)
+  } catch (error) {
+    console.error('send message failed:', error)
+  } finally {
+    draft.value = ''
+    isSending.value = false
+  }
+}
+</script>
+
+<style scoped lang="less">
+.support-page {
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: var(--font-family, iran-sans), serif;
+}
+
+.support-shell {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  background: var(--bg, #fff);
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+@media (min-width: 768px) {
+  .support-page {
+    height: calc(100dvh - 4.5rem);
+    padding: 12px 16px;
+  }
+
+  .support-shell {
+    border-radius: 16px;
+    border: 1px solid rgb(var(--colorPrimaryRGB, 37 99 235) / 0.12);
+    box-shadow: 0 16px 48px rgb(15 23 42 / 0.06);
+  }
+}
+</style>