From 66edeb84bf1c0f14bbbcee69894618767dedb302 Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Thu, 9 Jul 2026 07:02:02 +0000
Subject: [PATCH] style: update the chat widget

---
 .../src/features/support/SupportWidget.tsx    | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/edr-passenger-web/portal/src/features/support/SupportWidget.tsx b/apps/edr-passenger-web/portal/src/features/support/SupportWidget.tsx
index 2b46a97b6..96ecc7276 100644
--- a/apps/edr-passenger-web/portal/src/features/support/SupportWidget.tsx
+++ b/apps/edr-passenger-web/portal/src/features/support/SupportWidget.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Headset, MessageCircle } from 'lucide-react';
+import { Headset } from 'lucide-react';
 import { useState } from 'react';
 
 import { SupportPanel } from './SupportPanel';
@@ -8,6 +8,7 @@ import { useUnreadCount } from './useSupport';
 import { useSupportSocket } from './useSupportSocket';
 
 const GREEN = 'rgb(20 113 76)';
+const GRADIENT = `linear-gradient(135deg, ${GREEN}, rgb(30 140 96))`;
 
 /**
  * Floating support launcher for the portal. One device-scoped thread — opens
@@ -28,10 +29,27 @@ export function SupportWidget() {
         <button
           onClick={() => setOpen(true)}
           aria-label="Open support chat"
-          className="relative flex h-14 w-14 items-center justify-center rounded-full text-white shadow-lg transition hover:scale-105"
-          style={{ background: GREEN, boxShadow: '0 8px 24px rgba(20,113,76,0.4)' }}
+          className="group relative flex items-center gap-2.5 rounded-full p-2 pr-2 text-white transition-transform duration-150 hover:-translate-y-0.5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 sm:pr-5"
+          style={{ background: GRADIENT, boxShadow: '0 10px 28px rgba(20,113,76,0.4)' }}
         >
-          {unread > 0 ? <Headset size={26} /> : <MessageCircle size={26} />}
+          {/* Faint breathing ring; the unread badge is loud enough on its own. */}
+          {unread === 0 && (
+            <span className="pointer-events-none absolute -inset-1 animate-pulse rounded-full ring-2 ring-primary/50 motion-reduce:animate-none" />
+          )}
+
+          <span className="relative grid h-[42px] w-[42px] shrink-0 place-items-center rounded-full bg-white/20">
+            <Headset size={22} />
+          </span>
+
+          <span className="relative hidden text-left leading-tight sm:block">
+            <span className="block whitespace-nowrap text-sm font-semibold">
+              👋 Need help?
+            </span>
+            <span className="block whitespace-nowrap text-[11px] opacity-85">
+              Chat with our team
+            </span>
+          </span>
+
           {unread > 0 && (
             <span className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-white bg-red-500 px-1 text-xs font-bold text-white">
               {unread > 9 ? '9+' : unread}