support ui changed

src/App.vue

@@ -90,16 +90,15 @@
       class="draggable-support-button"
       :class="{ 'is-dragging': supportDragging }"
       :style="supportButtonStyle"
+      title="پشتیبانی"
       @pointerdown="onSupportPointerDown"
       @pointermove="onSupportPointerMove"
       @pointerup="handleSupportPointerUp"
       @pointercancel="onSupportPointerCancel"
     >
-      <div class="bg-green-100 text-green-800 flex gap-2 p-2 rounded-lg">
-        <span>پشتیبانی</span>
-        <div class="w-5">
-          <img src="/logo-montzar.png" alt="" draggable="false" />
-        </div>
+      <div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
+        <BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
+        <span class="support-button-label">پشتیبانی</span>
       </div>
     </div>
   </div>
@@ -168,6 +167,40 @@ const supportLink = computed(() => {
 
 const showSupportButton = computed(() => !!supportLink.value)
 
+const supportIcon = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return 'vuesax-linear:whatsapp'
+    case 'telegram':
+      return 'vuesax-linear:send-2'
+    case 'bale':
+      return 'vuesax-linear:messages-2'
+    default:
+      return 'vuesax-linear:messages-2'
+  }
+})
+
+const supportAccentColor = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return '#22c55e'
+    case 'telegram':
+      return '#0ea5e9'
+    case 'bale':
+      return '#16a34a'
+    case 'rubika':
+      return '#7c3aed'
+    case 'eitaa':
+      return '#f59e0b'
+    case 'soroush':
+      return '#2563eb'
+    default:
+      return config.config?.color || '#334155'
+  }
+})
+
 const {
   dragging: supportDragging,
   fabStyle: supportButtonStyle,
@@ -176,8 +209,8 @@ const {
   handlePointerUp: supportPointerUp,
   handlePointerCancel: onSupportPointerCancel
 } = useDraggableFloatingButton('khaneghi_support_button_position', {
-  width: 110,
-  height: 44,
+  width: 118,
+  height: 42,
   defaultBottomOffset: 120
 })
 
@@ -292,19 +325,48 @@ function update() {
   z-index: 9999;
   cursor: grab;
   user-select: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 0.5rem;
+  border-radius: 9999px;
 
   &.is-dragging {
     cursor: grabbing;
-    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
+  }
+}
+
+.support-button-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px 9px 12px;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 9999px;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  direction: rtl;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  .support-button-icon {
+    color: var(--support-accent, #334155);
+    flex-shrink: 0;
   }
 
-  img {
-    pointer-events: none;
+  .support-button-label {
+    white-space: nowrap;
   }
 }
 
+#support-button:not(.is-dragging):hover .support-button-inner {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+}
+
+#support-button.is-dragging .support-button-inner {
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
+}
+
 @media screen and (min-width: 426px) {
   .desktopConfig {
     width: 426px;