Match highlights sheet: flush to player bottom + non-blocking coach caption

- Sheet top now pins to the player's exact bottom edge (JS measures #ytpWrap
  height into --hl-sheet-top; 56.25vw fallback), so no title/actions row shows
  between the video and the sheet. Recomputes on open and on resize/rotate.
- Coach-note overlay on mobile is now a slim 2-line caption pinned to the very
  bottom of the player instead of a 16px block mid-frame, so it no longer
  covers the video. Full note stays readable in the sheet.

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

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

@@ -1896,9 +1896,13 @@
             .events-sidebar {
                 display: flex !important;   /* override desktop display:none so it can slide */
                 position: fixed;
-                left: 0; right: 0; bottom: 0; top: auto;
+                left: 0; right: 0; bottom: 0;
+                /* Top sits exactly at the player's bottom edge so nothing (title,
+                   actions, channel row) shows between the video and the sheet. JS
+                   sets the precise px; the 56.25vw fallback = a full-width 16:9 player. */
+                top: var(--hl-sheet-top, 56.25vw);
                 width: 100% !important;
-                height: 62vh; max-height: 62vh;
+                height: auto; max-height: none;
                 margin: 0 !important;
                 border-radius: 18px 18px 0 0;
                 box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.55);
@@ -1942,6 +1946,24 @@
                !important overrides the base `.yt-bottom-nav { transform: none !important }`. */
             .yt-bottom-nav { transition: transform 0.3s ease; }
             body.hl-sheet-open .yt-bottom-nav { transform: translateY(100%) !important; }
+
+            /* Coach-note overlay on the small mobile player: a slim caption pinned to
+               the very bottom edge (max 2 lines) so it never blocks the view. The full
+               note stays readable in the sheet. */
+            .coach-note-overlay {
+                bottom: 6px;
+                font-size: 12px;
+                font-weight: 600;
+                line-height: 1.3;
+                padding: 5px 10px;
+                max-width: 94%;
+            }
+            .coach-note-overlay.show {
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+            }
         }
         @media (max-width: 991px) and (prefers-reduced-motion: reduce) {
             .events-sidebar,
@@ -2294,6 +2316,17 @@
                         const mainScroll = document.getElementById('main');
                         const isMobile = () => window.matchMedia('(max-width: 991px)').matches;
 
+                        // Pin the sheet's top edge to the player's exact bottom so the
+                        // gap between them is zero on any device/orientation.
+                        const positionSheet = () => {
+                            if (!isMobile()) { sidebar.style.removeProperty('--hl-sheet-top'); return; }
+                            const wrap = document.getElementById('ytpWrap');
+                            if (wrap) {
+                                const h = Math.round(wrap.getBoundingClientRect().height);
+                                if (h > 0) sidebar.style.setProperty('--hl-sheet-top', h + 'px');
+                            }
+                        };
+
                         const setOpen = (open) => {
                             sidebar.classList.toggle('show', open);
                             toggleBtn.classList.toggle('expanded', open);
@@ -2304,7 +2337,10 @@
                                 localStorage.setItem(`highlights_${videoId}`, 'open');
                                 // 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' });
+                                if (isMobile()) {
+                                    if (mainScroll) mainScroll.scrollTo({ top: 0, behavior: 'smooth' });
+                                    positionSheet();
+                                }
                             } else {
                                 localStorage.removeItem(`highlights_${videoId}`);
                             }
@@ -2326,6 +2362,7 @@
                             const openMobile = sidebar.classList.contains('show') && isMobile();
                             if (backdrop) backdrop.classList.toggle('show', openMobile);
                             document.body.classList.toggle('hl-sheet-open', openMobile);
+                            positionSheet();
                         });
                     }
                 });