Match highlights: mobile bottom sheet (Option A)

On mobile (<=991px) the Points/Coach-review pane no longer stacks below the
comments. Tapping "Highlights" now slides it up as a bottom sheet over the
lower ~62vh, and scrolls the player back to the top so the user can watch and
read at once. Includes a drag handle, a light tap-to-dismiss scrim, and
internal scrolling. Desktop keeps its side pane exactly as before — all new
CSS is inside the max-width:991px media query.

- Sheet only restores its open state on desktop; on mobile it stays closed on
  load so it never pops open unexpectedly.
- Scrim sits above the fixed bottom nav (z-index 1400 > 1000).
- Honors prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

resources/views/videos/types/match.blade.php

@@ -1882,6 +1882,57 @@
                 font-size: 0.75rem;
             }
         }
+
+        /* ============================================================
+           MATCH HIGHLIGHTS — mobile bottom sheet (Option A)
+           Desktop keeps its side pane untouched. Below 991px the pane
+           becomes a bottom sheet so the player stays visible up top
+           while points / coach reviews scroll in the lower half.
+           ============================================================ */
+        .hl-sheet-backdrop { display: none; }
+        .hl-sheet-grab { display: none; }
+
+        @media (max-width: 991px) {
+            .events-sidebar {
+                display: flex !important;   /* override desktop display:none so it can slide */
+                position: fixed;
+                left: 0; right: 0; bottom: 0; top: auto;
+                width: 100% !important;
+                height: 62vh; max-height: 62vh;
+                margin: 0 !important;
+                border-radius: 18px 18px 0 0;
+                box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.55);
+                transform: translateY(100%);
+                transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
+                pointer-events: none;
+                z-index: 1400;              /* above the fixed bottom nav (z-index 1000) */
+            }
+            .events-sidebar.show {
+                display: flex !important;
+                transform: translateY(0);
+                pointer-events: auto;
+            }
+            /* Drag affordance at the top of the sheet */
+            .hl-sheet-grab {
+                display: block; flex-shrink: 0;
+                width: 40px; height: 4px; border-radius: 3px;
+                background: rgba(255, 255, 255, 0.3);
+                margin: 10px auto 4px; cursor: pointer;
+            }
+            /* Light tap-to-dismiss scrim — faint so the video stays watchable */
+            .hl-sheet-backdrop {
+                display: block;
+                position: fixed; inset: 0;
+                background: rgba(0, 0, 0, 0.32);
+                opacity: 0; visibility: hidden;
+                transition: opacity 0.28s ease, visibility 0.28s;
+                z-index: 1399;
+            }
+            .hl-sheet-backdrop.show { opacity: 1; visibility: visible; }
+        }
+        @media (max-width: 991px) and (prefers-reduced-motion: reduce) {
+            .events-sidebar { transition: none; }
+        }
     </style>
 @endsection
 
@@ -2222,25 +2273,38 @@
                     const videoId = @json(isset($video) ? $video->getRouteKey() : '');
 
                     if (toggleBtn && sidebar) {
-                        // Load saved state on page load
+                        const backdrop = document.getElementById('hlSheetBackdrop');
-                        const savedState = localStorage.getItem(`highlights_${videoId}`);
+                        const grab = sidebar.querySelector('.hl-sheet-grab');
-                        if (savedState === 'open') {
+                        const mainScroll = document.getElementById('main');
-                            sidebar.classList.add('show');
+                        const isMobile = () => window.matchMedia('(max-width: 991px)').matches;
-                            toggleBtn.classList.add('expanded');
-                            toggleBtn.textContent = 'Highlights';
-                        }
 
-                        toggleBtn.addEventListener('click', function() {
+                        const setOpen = (open) => {
-                            const isOpen = sidebar.classList.toggle('show');
+                            sidebar.classList.toggle('show', open);
-                            toggleBtn.classList.toggle('expanded');
+                            toggleBtn.classList.toggle('expanded', open);
-
+                            if (backdrop) backdrop.classList.toggle('show', open && isMobile());
-                            // Save state to localStorage
+                            if (open) {
-                            if (isOpen) {
                                 localStorage.setItem(`highlights_${videoId}`, 'open');
-                                toggleBtn.textContent = 'Highlights';
+                                // Mobile: the pane is a bottom sheet — bring the player back
+                                // to the top so the user can watch while reading highlights.
+                                if (isMobile() && mainScroll) mainScroll.scrollTo({ top: 0, behavior: 'smooth' });
                             } else {
                                 localStorage.removeItem(`highlights_${videoId}`);
                             }
+                        };
+
+                        // Restore last state on DESKTOP only — a sheet auto-popping open on
+                        // every mobile page load would be jarring.
+                        if (localStorage.getItem(`highlights_${videoId}`) === 'open' && !isMobile()) {
+                            setOpen(true);
+                        }
+
+                        toggleBtn.addEventListener('click', () => setOpen(!sidebar.classList.contains('show')));
+                        if (backdrop) backdrop.addEventListener('click', () => setOpen(false));
+                        if (grab) grab.addEventListener('click', () => setOpen(false));
+
+                        // Keep the scrim honest if the viewport crosses the mobile boundary.
+                        window.addEventListener('resize', () => {
+                            if (backdrop) backdrop.classList.toggle('show', sidebar.classList.contains('show') && isMobile());
                         });
                     }
                 });
@@ -2253,7 +2317,11 @@
 
         <!-- Sidebar - Match Highlights -->
         <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
+            {{-- Mobile-only scrim behind the bottom sheet (tap to dismiss) --}}
+            <div class="hl-sheet-backdrop" id="hlSheetBackdrop"></div>
             <aside class="events-sidebar">
+                {{-- Mobile-only drag handle at the top of the sheet --}}
+                <div class="hl-sheet-grab"></div>
                 <div class="events-sidebar-header" style="justify-content: center;">
                     <h3>Match Highlights</h3>
                 </div>