Add hover transparency effect to collaboration caret name bubbles

When hovering over a collaboration caret name bubble with the mouse,
it now becomes highly transparent (20% opacity) to improve UX by
allowing users to see through the label when it's covering content.

Changes:
- Changed pointer-events from none to auto to enable hover interactions
- Added opacity: 0.2 on hover for the label bubble and tail (80% transparent)
- Consolidated duplicate hover effects into single rule
- Maintains existing hover transform and shadow effects
- Added cursor: pointer to indicate interactivity

Author: jhodapp

src/styles/simple-editor.scss

@@ -432,11 +432,11 @@
   /* Smooth transitions */
   transition: all 0.2s ease;
   transform: translateY(-2px);
-  
+
   /* CRITICAL: Prevent any animations or opacity changes */
   animation: none !important;
   opacity: 1 !important;
-  
+
   /* Pointer tail */
   &::after {
     content: '';
@@ -448,13 +448,21 @@
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-top: 6px solid var(--collaboration-user-color, #6366f1);
+    transition: opacity 0.2s ease;
   }
-  
-  /* Hover effect for better visibility */
+
+  /* Hover effect - make highly transparent with enhanced shadow */
   &:hover {
+    opacity: 0.2 !important;
+    cursor: pointer;
     transform: translateY(-4px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   }
+
+  /* Make tail transparent on hover too */
+  &:hover::after {
+    opacity: 0.2;
+  }
 
   /* Dark theme adjustments */
   .dark & {
@@ -490,7 +498,7 @@
 
 .ProseMirror .collaboration-cursor__label {
   z-index: 100;
-  pointer-events: none;
+  pointer-events: auto; /* Allow hover interactions */
 }
 
 /* Mobile responsiveness for collaboration carets */