fix: improve highlights panel collapse behavior

- Flip chevron icon direction (left when collapsed, right when expanded)
- Match bookmarks sidebar styling for collapsed state
- Remove background/border when collapsed for cleaner look
- Ensure toggle button stays at top of panel
- Add proper hover states for collapsed button

The highlights panel now behaves consistently with the bookmarks sidebar,
with the chevron pointing in the correct direction and proper visual feedback.

src/components/HighlightsPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faChevronLeft, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 
@@ -28,7 +28,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           title="Expand highlights panel"
           aria-label="Expand highlights panel"
         >
-          <FontAwesomeIcon icon={faChevronRight} />
+          <FontAwesomeIcon icon={faChevronLeft} />
         </button>
       </div>
     )
@@ -48,7 +48,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           title="Collapse highlights panel"
           aria-label="Collapse highlights panel"
         >
-          <FontAwesomeIcon icon={faChevronRight} />
+          <FontAwesomeIcon icon={faChevronRight} rotation={180} />
         </button>
       </div>
 

src/index.css

@@ -1081,6 +1081,32 @@ body {
   align-items: flex-start;
   justify-content: center;
   padding-top: 1rem;
+  background: transparent;
+  border: none;
+}
+
+.highlights-container.collapsed .toggle-highlights-btn {
+  background: #2a2a2a;
+  color: #ddd;
+  border: 1px solid #444;
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+
+.highlights-container.collapsed .toggle-highlights-btn:hover {
+  background: #333;
+  color: #fff;
+}
+
+.highlights-container.collapsed .toggle-highlights-btn:active {
+  transform: translateY(1px);
 }
 
 .highlights-header {