From a0029183d38abea83b748ec3629c864b9cb64a54 Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 3 Jun 2026 16:07:26 +0700
Subject: [PATCH] style(sidebar): improve mascot tooltip arrow appearance

Replace the clip-path based triangle with a CSS border-based implementation to create a more refined arrow with a border effect.
---
 services/frontend/src/widgets/Sidebar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/services/frontend/src/widgets/Sidebar.tsx b/services/frontend/src/widgets/Sidebar.tsx
index ebc311c..7b8bdc3 100644
--- a/services/frontend/src/widgets/Sidebar.tsx
+++ b/services/frontend/src/widgets/Sidebar.tsx
@@ -120,7 +120,10 @@ export function Sidebar({
                 {mascotChatMessage ||
                   "Halo! Saya mascot mu. Klik aku kalau mau tanya soal obrolan atau moderasi ✨"}
               </p>
-              <div className="absolute -left-3 bottom-2 h-5 w-5 bg-white/95 [clip-path:polygon(100%_0,0_100%,100%_70%)]" />
+                                          {/* Border triangle (outer) — points left */}
+                                          <div className="absolute -left-[16px] bottom-[9px] z-10 h-0 w-0 border-b-[10px] border-r-[16px] border-t-[10px] border-b-transparent border-r-sky-200/80 border-t-transparent" />
+                                          {/* Fill triangle (inner) — offset 1px right for border effect */}
+                                          <div className="absolute -left-[14px] bottom-[10px] z-20 h-0 w-0 border-b-[9px] border-r-[15px] border-t-[9px] border-b-transparent border-r-white/95 border-t-transparent" />
             </div>
           </motion.div>
         )}