refactor: make FAB fully transparent when no text selected

- Change opacity from 0.4 to 0 when no selection (fully transparent)
- Remove shadow when transparent for cleaner look
- Use pointerEvents: none to prevent interaction when invisible
- Remove disabled attribute, handle interaction via pointer events
- Button smoothly fades in/scales up when text is selected

src/components/HighlightButton.tsx

@@ -54,20 +54,20 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
           backgroundColor: highlightColor,
           color: '#000',
           border: 'none',
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-          cursor: hasSelection ? 'pointer' : 'not-allowed',
+          boxShadow: hasSelection ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
+          cursor: hasSelection ? 'pointer' : 'default',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           transition: 'all 0.3s ease',
-          opacity: hasSelection ? 1 : 0.4,
-          transform: hasSelection ? 'scale(1)' : 'scale(0.9)',
+          opacity: hasSelection ? 1 : 0,
+          transform: hasSelection ? 'scale(1)' : 'scale(0.8)',
+          pointerEvents: hasSelection ? 'auto' : 'none',
           userSelect: 'none'
         }}
         onClick={handleClick}
-        disabled={!hasSelection}
         aria-label="Create highlight from selection"
-        title={hasSelection ? 'Create highlight' : 'Select text to highlight'}
+        title={hasSelection ? 'Create highlight' : ''}
       >
         <FontAwesomeIcon icon={faHighlighter} size="lg" />
       </button>