diff --git a/src/App.vue b/src/App.vue
index 792692d..611f3b2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -94,6 +94,7 @@ import { getDisplayAppVersion } from '@/config/config-cache'
 import { computed, defineAsyncComponent, h, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
+import { showBrowserNotification } from '@/utils/browserNotification'
 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'
@@ -231,9 +232,20 @@ watch(latestIncomingNotification, (payload) => {
   if (!payload) return
   if (payload.at === lastSupportToastAt) return
   lastSupportToastAt = payload.at
-  message.info({
-    content: `پیام جدید پشتیبانی: ${payload.body}`,
-    duration: 3,
+
+  // فقط وقتی خارج از صفحهٔ چت (گیت داخل chat.ts)؛ داخل چت نوتیف نمی‌آید
+  if (typeof document === 'undefined' || document.visibilityState === 'visible') {
+    message.info({
+      content: `پیام جدید پشتیبانی: ${payload.body}`,
+      duration: 3,
+    })
+  }
+
+  void showBrowserNotification({
+    title: payload.title || 'پشتیبانی',
+    body: payload.body || 'پیام جدید',
+    tag: 'support-chat-message',
+    url: '/support',
   })
 })
 
diff --git a/src/views/support/components/SupportChatComposer.vue b/src/views/support/components/SupportChatComposer.vue
index 563acbd..eb54086 100644
--- a/src/views/support/components/SupportChatComposer.vue
+++ b/src/views/support/components/SupportChatComposer.vue
@@ -173,8 +173,9 @@
 
         <div class="support-composer__row flex items-end gap-2">
           <BasicButton
+            type="primary"
             :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"
+            class="support-send-btn !h-12 !w-12 shrink-0 !p-0"
             @mousedown.prevent
             @click="submit"
           >
@@ -577,14 +578,14 @@ watch(
 
 <style scoped lang="less">
 .support-composer {
-  position: sticky;
-  bottom: 0;
+  position: relative;
   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);
+  padding: 10px 12px 12px;
+  background: color-mix(in srgb, var(--bg, #fff) 82%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--colorPrimary, #2563eb) 12%, transparent);
+  box-shadow: none;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   font-family: var(--font-family, iran-sans), serif;
 }
 
@@ -664,9 +665,9 @@ watch(
 }
 
 .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);
+  background: var(--bg, #fff);
+  border: 1px solid color-mix(in srgb, var(--colorPrimary, #2563eb) 16%, transparent);
+  box-shadow: 0 6px 16px color-mix(in srgb, var(--colorPrimary, #2563eb) 8%, transparent);
 }
 
 .composer-textarea {
@@ -708,14 +709,27 @@ watch(
 }
 
 .support-send-btn {
+  border-radius: 16px !important;
   background: var(--colorPrimary, #2563eb) !important;
-  color: var(--color6, #fff) !important;
-  box-shadow: 0 8px 18px rgb(var(--colorPrimaryRGB, 37 99 235) / 0.28);
+  border-color: var(--colorPrimary, #2563eb) !important;
+  color: #fff !important;
+  box-shadow: 0 10px 22px color-mix(in srgb, var(--colorPrimary, #2563eb) 34%, transparent) !important;
 }
 
-.support-send-btn:disabled {
-  opacity: 0.45;
-  box-shadow: none;
+.support-send-btn.ant-btn-primary:not(:disabled):not(.ant-btn-disabled) {
+  background: var(--colorPrimary, #2563eb) !important;
+  border-color: var(--colorPrimary, #2563eb) !important;
+  color: #fff !important;
+}
+
+.support-send-btn:disabled,
+.support-send-btn.ant-btn-disabled,
+.support-send-btn.ant-btn-primary:disabled {
+  opacity: 1 !important;
+  background: color-mix(in srgb, var(--colorPrimary, #2563eb) 38%, #fff) !important;
+  border-color: transparent !important;
+  color: #fff !important;
+  box-shadow: none !important;
 }
 
 .support-drop-zone {
@@ -800,7 +814,13 @@ watch(
 
 @media (min-width: 768px) {
   .support-composer {
-    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
+    padding: 12px 16px 14px;
+  }
+}
+
+@media (max-width: 767px) {
+  .support-composer {
+    padding: 10px 12px calc(10px + 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
index 7f737c7..e632787 100644
--- a/src/views/support/components/SupportChatHeader.vue
+++ b/src/views/support/components/SupportChatHeader.vue
@@ -5,7 +5,14 @@
         <BasicIcon icon="vuesax-linear:arrow-right" />
       </div>
       <div class="support-header__icon">
+        <img
+          v-if="logoUrl"
+          :src="logoUrl"
+          alt=""
+          class="support-header__logo"
+        />
         <svg
+          v-else
           xmlns="http://www.w3.org/2000/svg"
           class="support-header__icon-svg"
           viewBox="0 0 24 24"
@@ -23,19 +30,23 @@
 
       <div class="support-header__content">
         <h1 class="support-header__title">{{ title }}</h1>
-
       </div>
     </div>
   </header>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useConfigStore } from '@/store/configStore'
 
 defineProps<{
   title: string
   subtitle?: string
 }>()
+
+const config = useConfigStore()
+const logoUrl = computed(() => String(config.config?.avatar || '').trim())
 </script>
 
 <style scoped lang="less">
@@ -43,14 +54,15 @@ defineProps<{
   position: sticky;
   top: 0;
   z-index: 2;
-  border-bottom: 1px solid rgb(var(--colorPrimaryRGB, 37 99 235) / 0.16);
+  border-bottom: 1px solid color-mix(in srgb, var(--colorPrimary, #2563eb) 10%, transparent);
   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);
+    180deg,
+    color-mix(in srgb, var(--bg, #fff) 55%, transparent) 0%,
+    color-mix(in srgb, var(--bg, #fff) 22%, transparent) 70%,
+    transparent 100%
+  );
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
 
 .support-header__inner {
@@ -68,12 +80,24 @@ defineProps<{
   justify-content: center;
   width: 52px;
   height: 52px;
+  flex: 0 0 52px;
+  overflow: hidden;
   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__logo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  padding: 6px;
+  background: #fff;
+}
+
 .support-header__icon-svg {
   width: 22px;
   height: 22px;
@@ -124,7 +148,8 @@ defineProps<{
   .support-header__icon {
     width: 48px;
     height: 48px;
+    flex-basis: 48px;
     border-radius: 16px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/support/components/SupportChatMessages.vue b/src/views/support/components/SupportChatMessages.vue
index 128ac45..abe604f 100644
--- a/src/views/support/components/SupportChatMessages.vue
+++ b/src/views/support/components/SupportChatMessages.vue
@@ -11,7 +11,12 @@
           class="support-jump-badge-wrap"
         >
           <button type="button" class="support-jump-button" @click="handleJumpToBottom">
-            <BasicIcon icon="vuesax-linear:arrow-down-1" class="text-black" />
+            <BasicIcon
+              icon="vuesax-linear:arrow-down-1"
+              size="20"
+              color="#fff"
+              stroke-width="2.6"
+            />
           </button>
         </a-badge>
       </div>
@@ -102,7 +107,14 @@
               @pointercancel="onMessagePointerCancel"
             >
               <div v-if="message.sender === 'support'" class="support-avatar">
+                <img
+                  v-if="supportLogoUrl"
+                  :src="supportLogoUrl"
+                  alt=""
+                  class="support-avatar__logo"
+                />
                 <svg
+                  v-else
                   xmlns="http://www.w3.org/2000/svg"
                   class="support-avatar__svg"
                   viewBox="0 0 24 24"
@@ -280,7 +292,14 @@
         <div v-if="supportTyping" class="support-row support-row--support">
           <div class="support-row__inner support-row__inner--support">
             <div class="support-avatar">
+              <img
+                v-if="supportLogoUrl"
+                :src="supportLogoUrl"
+                alt=""
+                class="support-avatar__logo"
+              />
               <svg
+                v-else
                 xmlns="http://www.w3.org/2000/svg"
                 class="support-avatar__svg"
                 viewBox="0 0 24 24"
@@ -315,6 +334,7 @@ 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'
+import { useConfigStore } from '@/store/configStore'
 
 const props = defineProps<{
   messages: ChatMessage[]
@@ -331,6 +351,9 @@ const emit = defineEmits<{
   (e: 'bottom-state-change', value: boolean): void
 }>()
 
+const config = useConfigStore()
+const supportLogoUrl = computed(() => String(config.config?.avatar || '').trim())
+
 const scrollContainer = ref<HTMLElement | null>(null)
 
 const previewImageUrl = ref('')
@@ -817,9 +840,10 @@ defineExpose({
 
 .support-jump-wrap {
   position: absolute;
-  right: 0;
-  bottom: 18px;
-  transform: translateX(-50%);
+  inset-inline-start: 12px;
+  right: auto;
+  bottom: 14px;
+  transform: none;
   z-index: 4;
 }
 
@@ -1030,17 +1054,26 @@ defineExpose({
   }
 }
 .support-jump-button {
-  width: 46px;
-  height: 46px;
+  width: 44px;
+  height: 44px;
   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: 1.5px solid color-mix(in srgb, var(--colorPrimary, #2563eb) 45%, transparent);
+  background: color-mix(in srgb, var(--colorPrimary, #2563eb) 42%, transparent);
+  color: #fff;
   border-radius: 999px;
-  box-shadow: 0 10px 15px rgb(var(--colorPrimaryRGB) / 0.12);
-  backdrop-filter: blur(5px);
+  box-shadow:
+    0 10px 24px color-mix(in srgb, var(--colorPrimary, #2563eb) 28%, transparent),
+    inset 0 1px 0 rgb(255 255 255 / 0.28);
+  backdrop-filter: blur(14px) saturate(1.2);
+  -webkit-backdrop-filter: blur(14px) saturate(1.2);
+}
+
+.support-jump-button :deep(svg),
+.support-jump-button :deep(i),
+.support-jump-button :deep(.iconify) {
+  color: #fff !important;
 }
 
 .support-jump-badge-wrap :deep(.ant-badge-count) {
@@ -1069,15 +1102,9 @@ defineExpose({
   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);
+  background: transparent;
   scrollbar-width: thin;
-  scrollbar-color: #cfcfd4 #f3f3f5;
+  scrollbar-color: #cfcfd4 transparent;
 }
 
 .support-chat-scroll::-webkit-scrollbar {
@@ -1102,13 +1129,13 @@ defineExpose({
 }
 
 .support-day-group {
-  display: block;
+  display: contents;
 }
 
 .support-day-sticky {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 6;
   display: flex;
   justify-content: center;
   pointer-events: none;
@@ -1177,17 +1204,28 @@ defineExpose({
   min-width: 34px !important;
   height: 34px !important;
   padding: 0 !important;
-  border: 1px solid rgb(var(--colorPrimaryRGB) / 0.18) !important;
+  border: 1px solid color-mix(in srgb, var(--colorPrimary, #2563eb) 18%, transparent) !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);
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--colorPrimary, #2563eb) 10%, transparent);
   backdrop-filter: blur(8px);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.92);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.support-row:hover .support-reply-button,
+.support-row:focus-within .support-reply-button {
   opacity: 1;
-  transform: scale(0.96);
+  pointer-events: auto;
+  transform: scale(1);
 }
 
 .support-reply-button--user {
@@ -1200,16 +1238,30 @@ defineExpose({
 
 .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);
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  overflow: hidden;
+  border-radius: 999px;
+  border: 1.5px solid color-mix(in srgb, var(--colorPrimary, #2563eb) 28%, transparent);
+  background: #fff;
   color: var(--colorPrimary, #2563eb);
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow:
+    0 6px 14px color-mix(in srgb, var(--colorPrimary, #2563eb) 16%, transparent),
+    inset 0 0 0 1px rgb(255 255 255 / 0.7);
+}
+
+.support-avatar__logo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  padding: 4px;
+  background: #fff;
 }
 
 .support-avatar__svg {
@@ -1225,8 +1277,8 @@ defineExpose({
   overflow: hidden;
   border-radius: 24px;
   padding: 12px 16px;
-  background: var(--color6, #fff);
-  box-shadow: 0 8px 18px rgb(var(--colorPrimaryRGB) / 0.08);
+  background: var(--bg2, #fff);
+  box-shadow: 0 8px 18px rgb(var(--colorPrimaryRGB, 37 99 235) / 0.08);
   direction: rtl;
   text-align: right;
 }
@@ -1235,6 +1287,17 @@ defineExpose({
   min-width: min(260px, 72vw);
 }
 
+.support-bubble--user {
+  border-bottom-right-radius: 10px;
+  background: var(--colorPrimary, #2563eb);
+  color: #fff;
+  border: none;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--colorPrimary, #2563eb) 24%, transparent),
+    0 12px 32px color-mix(in srgb, var(--colorPrimary, #2563eb) 38%, transparent),
+    0 4px 12px color-mix(in srgb, var(--colorPrimary, #2563eb) 22%, transparent);
+}
+
 .support-bubble--user .support-bubble__image-wrap {
   background: rgba(255, 255, 255, 0.12);
 }
@@ -1243,7 +1306,10 @@ defineExpose({
   border-bottom-left-radius: 10px;
   background: var(--bg2, #fff);
   color: var(--colorText, #111827);
-  border: 1px solid var(--colorPrimary, #2563eb);
+  border: 1px solid color-mix(in srgb, var(--colorPrimary, #2563eb) 28%, transparent);
+  box-shadow:
+    0 10px 24px color-mix(in srgb, var(--colorPrimary, #2563eb) 12%, transparent),
+    0 2px 6px color-mix(in srgb, var(--colorPrimary, #2563eb) 8%, transparent);
 }
 
 .support-bubble__reply {
@@ -1566,12 +1632,16 @@ defineExpose({
   }
 
   .support-avatar {
-    width: 28px;
-    height: 28px;
-    flex: 0 0 28px;
+    width: 30px;
+    height: 30px;
+    flex: 0 0 30px;
     margin-bottom: 2px;
   }
 
+  .support-avatar__logo {
+    padding: 3px;
+  }
+
   .support-avatar__svg {
     width: 15px;
     height: 15px;
@@ -1646,15 +1716,20 @@ defineExpose({
     display: none;
   }
 
+  .support-reply-button {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+  }
+
   .support-jump-wrap {
-    right: 10px;
-    bottom: 14px;
-    transform: none;
+    inset-inline-start: 10px;
+    bottom: 12px;
   }
 
   .support-jump-button {
-    width: 44px;
-    height: 44px;
+    width: 40px;
+    height: 40px;
   }
 }
 
diff --git a/src/views/support/index.vue b/src/views/support/index.vue
index ee00960..564fcc6 100644
--- a/src/views/support/index.vue
+++ b/src/views/support/index.vue
@@ -51,6 +51,10 @@ import {
   setSupportChatPageOpen
 } from '@/utils/chat'
 import { useSettingsStore } from '@/store/settingsStore'
+import {
+  canRequestBrowserNotification,
+  requestBrowserNotificationPermission,
+} from '@/utils/browserNotification'
 
 const draft = ref('')
 const isSending = ref(false)
@@ -509,6 +513,10 @@ const messages = computed<ChatMessage[]>(() => {
 onMounted(async () => {
   setSupportChatPageOpen(true)
 
+  if (canRequestBrowserNotification()) {
+    void requestBrowserNotificationPermission()
+  }
+
   try {
     const existing = getExistingChatSession()
 
@@ -681,7 +689,23 @@ const sendMessage = async (payload: ComposerSendPayload) => {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   overflow: hidden;
-  background: var(--bg, #fff);
+  background:
+    radial-gradient(
+      ellipse 110% 70% at 100% -5%,
+      color-mix(in srgb, var(--colorPrimary, #2563eb) 28%, transparent),
+      transparent 68%
+    ),
+    radial-gradient(
+      ellipse 95% 60% at -5% 105%,
+      color-mix(in srgb, var(--colorPrimary, #2563eb) 18%, transparent),
+      transparent 62%
+    ),
+    radial-gradient(
+      circle at 50% 45%,
+      color-mix(in srgb, var(--colorPrimary, #2563eb) 8%, transparent),
+      transparent 55%
+    ),
+    var(--bg, #f7f8fb);
   border: 0;
   border-radius: 0;
   box-shadow: none;