feat: implement advanced access control system with user blocking, rate limiting, and enhanced login security; update UI components for improved user experience and documentation

apps/web/src/lib/components/chat/NotificationBell.svelte

@@ -59,22 +59,39 @@
   });
 </script>
 
+<style>
+  @keyframes badge-bounce {
+    0%, 100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+  }
+</style>
+
 <div class="dropdown dropdown-end notification-bell">
   <button
     type="button"
     tabindex="0"
-    class="btn btn-ghost btn-circle relative"
+    class="btn btn-ghost btn-circle relative hover:bg-gradient-to-br hover:from-primary/10 hover:to-primary/5 transition-all duration-500 group"
     onclick={toggleDropdown}
     aria-label="Notificações"
   >
-    <!-- Ícone do sino -->
+    <!-- Glow effect -->
+    {#if count && count > 0}
+      <div class="absolute inset-0 rounded-full bg-error/20 blur-xl animate-pulse"></div>
+    {/if}
+    
+    <!-- Ícone do sino premium -->
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      stroke-width="1.5"
+      stroke-width="2.5"
       stroke="currentColor"
-      class="w-6 h-6"
+      class="w-7 h-7 relative z-10 transition-all duration-500 group-hover:scale-110 group-hover:-rotate-12 {count && count > 0 ? 'text-error drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]' : 'text-primary'}"
+      style="filter: {count && count > 0 ? 'drop-shadow(0 0 4px rgba(239,68,68,0.4))' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'}"
     >
       <path
         stroke-linecap="round"
@@ -83,10 +100,11 @@
       />
     </svg>
 
-    <!-- Badge de contador -->
+    <!-- Badge premium com gradiente -->
     {#if count && count > 0}
       <span
-        class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-error text-error-content text-xs font-bold"
+        class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br from-red-500 via-error to-red-600 text-white text-[10px] font-black shadow-xl ring-2 ring-white z-20"
+        style="animation: badge-bounce 2s ease-in-out infinite;"
       >
         {count > 9 ? "9+" : count}
       </span>