From 84fcbd84dcb81aabf9588df57319c980ffae734a Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Sat, 21 Mar 2026 02:24:27 +0300
Subject: [PATCH] latest update

---
 .../Http/Controllers/VideoController.php\n"   |    0
 .../types/match_upnext.blade.php</parameter>" | 2200 ---------
 app/Http/Controllers/MatchEventController.php |   29 +-
 app/Http/Controllers/VideoController.php      |    2 +-
 app/Models/MatchRound.php                     |    5 +
 config/app.php                                |    4 +-
 ...art_time_seconds_to_match_rounds_table.php |   32 +
 .../views/components/channel-row.blade.php    |   66 +
 .../views/components/video-actions.blade.php  |  200 +
 .../views/components/video-comments.blade.php |  150 +
 .../partials/edit-video-modal.blade.php       | 1854 ++++----
 .../views/videos/partials/comment.blade.php   |  123 +-
 .../videos/types/backup/generic.blade.php     | 1116 +++++
 .../views/videos/types/backup/match.blade.php | 4184 +++++++++++++++++
 .../views/videos/types/backup/music.blade.php | 1069 +++++
 .../views/videos/types/generic.blade.php      |  159 +-
 .../views/videos/types/match.blade copy.php   | 3515 ++++++++++++++
 .../views/videos/types/match.blade.backup.php |    9 +
 resources/views/videos/types/match.blade.php  | 3880 ++++++++-------
 .../types/match.blade.php.bak_20260316_025638 | 3615 ++++++++++++++
 .../match.blade.pre_coach_review_backup.php   | 3682 +++++++++++++++
 resources/views/videos/types/music.blade.php  |  571 +--
 routes/web.php                                |    2 -
 23 files changed, 21195 insertions(+), 5272 deletions(-)
 delete mode 100644 "\n/var/www/videoplatform/app/Http/Controllers/VideoController.php\n"
 delete mode 100644 "<parameter name=\"absolute_path\">/var/www/videoplatform/resources/views/videos/types/match_upnext.blade.php</parameter>"
 create mode 100644 database/migrations/2026_03_21_000003_add_start_time_seconds_to_match_rounds_table.php
 create mode 100644 resources/views/components/channel-row.blade.php
 create mode 100644 resources/views/components/video-actions.blade.php
 create mode 100644 resources/views/components/video-comments.blade.php
 create mode 100644 resources/views/videos/types/backup/generic.blade.php
 create mode 100644 resources/views/videos/types/backup/match.blade.php
 create mode 100644 resources/views/videos/types/backup/music.blade.php
 create mode 100644 resources/views/videos/types/match.blade copy.php
 create mode 100644 resources/views/videos/types/match.blade.backup.php
 create mode 100644 resources/views/videos/types/match.blade.php.bak_20260316_025638
 create mode 100644 resources/views/videos/types/match.blade.pre_coach_review_backup.php

diff --git "a/\n/var/www/videoplatform/app/Http/Controllers/VideoController.php\n" "b/\n/var/www/videoplatform/app/Http/Controllers/VideoController.php\n"
deleted file mode 100644
index e69de29..0000000
diff --git "a/<parameter name=\"absolute_path\">/var/www/videoplatform/resources/views/videos/types/match_upnext.blade.php</parameter>" "b/<parameter name=\"absolute_path\">/var/www/videoplatform/resources/views/videos/types/match_upnext.blade.php</parameter>"
deleted file mode 100644
index f5e7f5f..0000000
--- "a/<parameter name=\"absolute_path\">/var/www/videoplatform/resources/views/videos/types/match_upnext.blade.php</parameter>"	
+++ /dev/null
@@ -1,2200 +0,0 @@
-<parameter name="content">@extends('layouts.app')
-
-@section('title', $video->title . ' | ' . config('app.name'))
-
-@section('extra_styles')
-    <style>
-        /* Video Section */
-        .yt-video-section { flex: 1; min-width: 0; }
-
-        /* Video Player */
-        .video-container {
-            position: relative;
-            aspect-ratio: 16/9;
-            background: #000;
-            border-radius: 12px;
-            overflow: hidden;
-            max-height: 70vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-        }
-
-        .video-container.portrait,
-        .video-container.square,
-        .video-container.ultrawide {
-            margin: 0 auto;
-            width: auto;
-        }
-
-        .video-container.portrait { aspect-ratio: 9/16; max-width: 50vh; }
-        .video-container.square { aspect-ratio: 1/1; max-width: 70vh; }
-        .video-container.ultrawide { aspect-ratio: 21/9; max-width: 100%; }
-
-.video-container video { width: 100%; height: 100%; object-fit: contain; }
-
-        /* Playlist Navigation Controls */
-        .playlist-controls {
-            position: absolute;
-            bottom: 60px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            background: rgba(0, 0, 0, 0.8);
-            padding: 8px 16px;
-            border-radius: 24px;
-            z-index: 10;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-
-        .video-container:hover .playlist-controls,
-        .playlist-controls.visible { opacity: 1; }
-
-        .playlist-nav-btn {
-            background: transparent;
-            border: none;
-            color: white;
-            cursor: pointer;
-            padding: 8px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background 0.2s ease;
-        }
-
-        .playlist-nav-btn:hover { background: rgba(255, 255, 255, 0.2); }
-        .playlist-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-        .playlist-nav-btn:disabled:hover { background: transparent; }
-        .playlist-nav-btn i { font-size: 20px; }
-
-        .playlist-nav-label {
-            font-size: 12px;
-            color: #aaa;
-            max-width: 120px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        /* Autoplay Toggle */
-        .autoplay-toggle {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 0 8px;
-            border-left: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .autoplay-toggle label {
-            font-size: 12px;
-            color: #aaa;
-            cursor: pointer;
-            white-space: nowrap;
-        }
-
-        .autoplay-switch { position: relative; width: 36px; height: 20px; }
-        .autoplay-switch input { opacity: 0; width: 0; height: 0; }
-
-        .autoplay-slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0; left: 0; right: 0; bottom: 0;
-            background-color: #666;
-            transition: 0.3s;
-            border-radius: 20px;
-        }
-
-        .autoplay-slider:before {
-            position: absolute;
-            content: "";
-            height: 14px;
-            width: 14px;
-            left: 3px;
-            bottom: 3px;
-            background-color: white;
-            transition: 0.3s;
-            border-radius: 50%;
-        }
-
-        .autoplay-switch input:checked + .autoplay-slider { background-color: var(--brand-red); }
-        .autoplay-switch input:checked + .autoplay-slider:before { transform: translateX(16px); }
-
-        /* Keyboard hint */
-        .keyboard-hint {
-            position: absolute;
-            bottom: 10px;
-            right: 10px;
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.5);
-            background: rgba(0, 0, 0, 0.6);
-            padding: 4px 8px;
-            border-radius: 4px;
-        }
-
-        /* Video Info */
-        .video-title {
-            font-size: 20px;
-            font-weight: 500;
-            margin: 16px 0 8px;
-            line-height: 1.3;
-        }
-
-        .video-stats-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding-bottom: 12px;
-            border-bottom: 1px solid var(--border-color);
-            flex-wrap: wrap;
-            gap: 12px;
-        }
-
-        .video-stats-left { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); }
-
-        .video-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .yt-action-btn {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            border-radius: 20px;
-            border: none;
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .yt-action-btn:hover { background: var(--border-color); }
-
-        .yt-action-btn.liked { color: var(--brand-red); }
-
-        /* Channel Row */
-        .channel-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 16px 0;
-        }
-
-        .channel-info {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .channel-avatar {
-            width: 48px; height: 48px; border-radius: 50%; background: #555;
-        }
-
-        .channel-name {
-            font-size: 16px;
-            font-weight: 500;
-        }
-
-        .channel-subs {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-
-        .subscribe-btn {
-            background: white;
-            color: black;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 18px;
-            font-weight: 600;
-            font-size: 14px;
-            cursor: pointer;
-            white-space: nowrap;
-        }
-
-        /* Description */
-        .video-description {
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            padding: 16px;
-            margin-top: 16px;
-        }
-
-        .description-text {
-            white-space: pre-wrap;
-            font-size: 14px;
-            line-height: 1.5;
-        }
-
-        /* Sidebar */
-        .yt-sidebar-container {
-            width: 400px;
-            flex-shrink: 0;
-        }
-
-        /* Match Events Sidebar */
-        .events-sidebar {
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            overflow: hidden;
-            width: 400px;
-            flex-shrink: 0;
-        }
-
-        .events-sidebar-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 16px;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .events-sidebar-header h3 {
-            font-size: 16px;
-            font-weight: 600;
-            margin: 0;
-        }
-
-        .close-btn {
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            font-size: 24px;
-            cursor: pointer;
-            padding: 0;
-            line-height: 1;
-        }
-
-        .close-btn:hover {
-            color: var(--text-primary);
-        }
-
-        .tab-header {
-            display: flex;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .tab-button {
-            flex: 1;
-            padding: 12px 16px;
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            border-bottom: 2px solid transparent;
-        }
-
-        .tab-button:hover {
-            color: var(--text-primary);
-            background: rgba(255, 255, 255, 0.05);
-        }
-
-        .tab-button.active {
-            color: var(--brand-red);
-            border-bottom-color: var(--brand-red);
-        }
-
-        .tab-panels {
-            max-height: 500px;
-            overflow-y: auto;
-        }
-
-        .tab-panel {
-            display: none;
-            padding: 16px;
-        }
-
-        .tab-panel.active {
-            display: block;
-        }
-
-        .section-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            font-weight: 500;
-        }
-
-        .btn-icon {
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 14px;
-        }
-
-        .btn-icon:hover {
-            background: var(--border-color);
-            color: var(--text-primary);
-        }
-
-        .btn-add {
-            background: var(--brand-red);
-            color: white;
-            border: none;
-            padding: 4px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .btn-add:hover {
-            background: #dc2626;
-        }
-
-        .event-list {
-            margin-top: 12px;
-        }
-
-        .round-marker {
-            font-size: 11px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            padding: 8px 0;
-            margin-top: 8px;
-            border-top: 1px solid var(--border-color);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .round-marker:first-child {
-            border-top: none;
-            margin-top: 0;
-        }
-
-        /* Round badge styling - yellow background with black bold text */
-        .round-badge {
-            background-color: #fbbf24;
-            color: #000000;
-            font-weight: 700;
-            padding: 4px 12px;
-            border-radius: 6px;
-            font-size: 12px;
-            display: inline-block;
-        }
-
-        .round-actions {
-            display: flex;
-            gap: 4px;
-        }
-
-        .round-action-btn {
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-size: 12px;
-        }
-
-        .round-action-btn:hover {
-            background: var(--border-color);
-            color: var(--text-primary);
-        }
-
-        .event-item {
-            display: flex;
-            gap: 12px;
-            padding: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: background 0.2s ease;
-            margin-bottom: 4px;
-            position: relative;
-        }
-
-        .event-item:hover {
-            background: var(--border-color);
-        }
-
-        .event-item:hover .event-actions {
-            opacity: 1;
-        }
-
-        .event-actions {
-            position: absolute;
-            right: 8px;
-            top: 8px;
-            display: flex;
-            gap: 4px;
-            opacity: 0;
-            transition: opacity 0.2s ease;
-        }
-
-        .event-action-btn {
-            background: var(--bg-primary);
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            padding: 4px 6px;
-            border-radius: 4px;
-            font-size: 10px;
-        }
-
-        .event-action-btn:hover {
-            background: var(--border-color);
-            color: var(--text-primary);
-        }
-
-        .event-action-btn.delete:hover {
-            color: var(--brand-red);
-        }
-
-        .event-time {
-            font-size: 12px;
-            color: #3ea6ff;
-            font-weight: 500;
-            min-width: 55px;
-            text-align: center;
-        }
-
-        .event-label {
-            font-size: 14px;
-            font-weight: 500;
-            margin-bottom: 4px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-
-        .event-meta {
-            font-size: 12px;
-           text-secondary);
-            color: var(-- line-height: 1.4;
-        }
-
-        .pill {
-            font-size: 10px;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-
-        .pill-blue {
-            background: #3b82f6;
-            color: white;
-        }
-
-        .pill-red {
-            background: #ef4444;
-            color: white;
-        }
-
-        .comment-avatar {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            overflow: hidden;
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 4px;
-        }
-
-        .comment-avatar img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        /* Modal Styles */
-        .modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.7);
-            z-index: 9999;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .modal-overlay.active {
-            display: flex;
-        }
-
-        .modal-content {
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            padding: 24px;
-            width: 90%;
-            max-width: 500px;
-            max-height: 90vh;
-            overflow-y: auto;
-        }
-
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-
-        .modal-header h3 {
-            font-size: 18px;
-            font-weight: 600;
-            margin: 0;
-        }
-
-        .modal-close {
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            font-size: 24px;
-            cursor: pointer;
-            padding: 0;
-            line-height: 1;
-        }
-
-        .modal-close:hover {
-            color: var(--text-primary);
-        }
-
-        .form-group {
-            margin-bottom: 16px;
-        }
-
-        .form-group label {
-            display: block;
-            font-size: 14px;
-            font-weight: 500;
-            margin-bottom: 6px;
-            color: var(--text-primary);
-        }
-
-        .form-group input,
-        .form-group select,
-        .form-group textarea {
-            width: 100%;
-            padding: 10px 12px;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            font-size: 14px;
-        }
-
-        .form-group input:focus,
-        .form-group select:focus,
-        .form-group textarea:focus {
-            outline: none;
-            border-color: var(--brand-red);
-        }
-
-        .form-row {
-            display: flex;
-            gap: 12px;
-        }
-
-        .form-row .form-group {
-            flex: 1;
-        }
-
-        .modal-actions {
-            display: flex;
-            gap: 12px;
-            justify-content: flex-end;
-            margin-top: 20px;
-        }
-
-        .btn-cancel {
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            padding: 10px 20px;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .btn-cancel:hover {
-            background: var(--border-color);
-        }
-
-        .btn-save {
-            background: var(--brand-red);
-            border: none;
-            color: white;
-            padding: 10px 20px;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .btn-save:hover {
-            background: #dc2626;
-        }
-
-        .btn-delete {
-            background: transparent;
-            border: 1px solid var(--brand-red);
-            color: var(--brand-red);
-            padding: 10px 20px;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .btn-delete:hover {
-            background: var(--brand-red);
-            color: white;
-        }
-
-        /* Responsive */
-        @media (max-width: 1300px) {
-            .yt-sidebar-container { width: 300px; }
-            .events-sidebar { width: 300px; }
-        }
-
-        @media (max-width: 991px) {
-            .yt-main { margin-left: 0; flex-direction: column; }
-            .yt-sidebar-container { width: 100%; }
-            .sidebar-video-card { flex-direction: column; }
-            .sidebar-thumb { width: 100%; }
-            .events-sidebar { width: 100%; }
-
-            .video-layout-container {
-                flex-direction: column !important;
-            }
-            .yt-video-section {
-                width: 100% !important;
-                flex: none !important;
-            }
-            .yt-sidebar-container {
-                width: 100% !important;
-                margin-top: 16px;
-            }
-        }
-
-        @media (max-width: 576px) {
-            .video-stats-row { flex-direction: column; align-items: flex-start; }
-            .video-actions { width: 100%; overflow-x: auto; justify-content: flex-start; }
-            .yt-main { padding: 12px !important; }
-
-            .video-container {
-                max-height: 50vh !important;
-                border-radius: 0 !important;
-            }
-            .video-container video {
-                object-fit: contain !important;
-            }
-            .video-title {
-                font-size: 16px !important;
-                margin: 12px 0 6px !important;
-            }
-            .channel-row {
-                flex-direction: column;
-                align-items: flex-start !important;
-                gap: 12px;
-            }
-            .channel-info {
-                width: 100%;
-            }
-            .subscribe-btn {
-                width: 100%;
-            }
-            .video-description {
-                padding: 12px !important;
-            }
-        }
-    </style>
-@endsection
-
-@section('content')
-
-    <!-- Video Layout Container -->
-    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
-
-        <!-- Video Section -->
-        <div class="yt-video-section">
-            <!-- Video Player -->
-            <div class="video-container @if($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif" id="videoContainer">
-                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
-                    <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
-                </video>
-
-                <!-- Playlist Navigation Controls (only show when in playlist) -->
-                @if($nextVideo || $previousVideo)
-                <div class="playlist-controls" id="playlistControls">
-                    <!-- Previous Video -->
-                    @if($previousVideo)
-                    <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
-                        <i class="bi bi-skip-backward-fill"></i>
-                    </button>
-                    <span class="playlist-nav-label">{{ Str::limit($previousVideo->title, 20) }}</span>
-                    @else
-                    <button class="playlist-nav-btn" disabled title="No previous video">
-                        <i class="bi bi-skip-backward-fill"></i>
-                    </button>
-                    @endif
-
-                    <!-- Autoplay Toggle -->
-                    <div class="autoplay-toggle">
-                        <label for="autoplayToggle">Autoplay</label>
-                        <label class="autoplay-switch">
-                            <input type="checkbox" id="autoplayToggle" checked>
-                            <span class="autoplay-slider"></span>
-                        </label>
-                    </div>
-
-                    <!-- Next Video -->
-                    @if($nextVideo)
-                    <span class="playlist-nav-label">{{ Str::limit($nextVideo->title, 20) }}</span>
-                    <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
-                        <i class="bi bi-skip-forward-fill"></i>
-                    </button>
-                    @else
-                    <button class="playlist-nav-btn" disabled title="No next video">
-                        <i class="bi bi-skip-forward-fill"></i>
-                    </button>
-                    @endif
-                </div>
-                <div class="keyboard-hint">
-                    <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
-                </div>
-                @endif
-            </div>
-
-            <!-- Video Title with Trophy Icon (Match Type) -->
-            <h1 class="video-title" style="display: flex; align-items: center; gap: 10px; margin: 8px 0 6px;">
-                <i class="bi bi-trophy" style="color: #ef4444;"></i>
-                <span>{{ $video->title }}</span>
-            </h1>
-
-            <!-- Stats Row - Hidden, shown in description box -->
-            <div class="video-stats-row" style="display: none;">
-                <div class="video-stats-left">
-                    <span>{{ number_format($video->view_count) }} views</span>
-                    <span>•</span>
-                    <span>{{ $video->created_at->format('M d, Y') }}</span>
-                </div>
-
-            <!-- Channel Row - All in one line -->
-            <div class="channel-row" style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
-                <div style="display: flex; align-items: center; gap: 12px;">
-                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none" style="color: inherit; display: flex; align-items: center; gap: 12px;">
-                        @if($video->user)
-                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
-                        @else
-                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
-                        @endif
-                        <div>
-                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
-                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
-                    </a>
-                </div>
-
-                <div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
-                    @auth
-                        @if(Auth::id() !== $video->user_id)
-                            <button class="subscribe-btn">Subscribe</button>
-                        @else
-                            <button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
-                                <i class="bi bi-pencil"></i> Edit
-                            </button>
-                        @endif
-                    @else
-                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
-                    @endauth
-
-                    @auth
-                        <form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline">
-                            @csrf
-                            <button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
-                                <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
-                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
-                            </button>
-                        </form>
-                    @else
-                        <a href="{{ route('login') }}" class="yt-action-btn">
-                            <i class="bi bi-hand-thumbs-up"></i> Like
-                        </a>
-                    @endauth
-
-                    @if($video->isShareable())
-                        <button class="yt-action-btn" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
-                            <i class="bi bi-share"></i> Share
-                        </button>
-                    @endif
-                </div>
-
-            <!-- Description Box -->
-            @if($video->description)
-            @php
-                $fullDescription = $video->description;
-                $shortDescription = Str::limit($fullDescription, 200);
-                $needsExpand = strlen($fullDescription) > 200;
-            @endphp
-
-            <div class="video-description-box" style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-bottom: 16px;">
-                <div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
-                    <span>{{ number_format($video->view_count) }} views</span>
-                    <span>•</span>
-                    <span>{{ $video->created_at->format('M d, Y') }}</span>
-                </div>
-                <div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
-                <div class="description-content" id="descriptionContent">
-                    @if($needsExpand)
-                        <div class="description-short" id="descShort">
-                            <span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
-                            <span class="description-ellipsis" style="color: var(--text-secondary);">... </span>
-                        </div>
-                        <div class="description-full" id="descFull" style="display: none;">
-                            <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
-                        </div>
-                        <button onclick="toggleDescription()" id="descToggleBtn" style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">
-                            Show more
-                        </button>
-                    @else
-                        <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
-                    @endif
-                </div>
-
-            <script>
-            function toggleDescription() {
-                const descShort = document.getElementById('descShort');
-                const descFull = document.getElementById('descFull');
-                const toggleBtn = document.getElementById('descToggleBtn');
-
-                if (descShort.style.display !== 'none') {
-                    descShort.style.display = 'none';
-                    descFull.style.display = 'block';
-                    toggleBtn.textContent = 'Show less';
-                } else {
-                    descShort.style.display = 'block';
-                    descFull.style.display = 'none';
-                    toggleBtn.textContent = 'Show more';
-                }
-            }
-            </script>
-
-            <style>
-            .video-description-box .description-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); }
-            .video-description-box .description-text p { margin-bottom: 8px; }
-            .video-description-box .description-text a { color: #3ea6ff; }
-            </style>
-            @endif
-
-            <!-- <div class=" Comment Section -->
-           comments-section" style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
-                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
-                    Comments <span style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
-                </h3>
-
-                @auth
-                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
-                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;" alt="{{ Auth::user()->name }}">
-                        <div style="flex: 1;">
-                            <textarea
-                                id="commentBody"
-                                class="form-control"
-                                placeholder="Add a comment... Use @ to mention someone"
-                                rows="3"
-                                style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 12px; width: 100%; resize: none;"
-                            ></textarea>
-                            <div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
-                                <button type="button" class="yt-action-btn" onclick="document.getElementById('commentBody').value = ''">Cancel</button>
-                                <button type="button" class="yt-action-btn" style="background: var(--brand-red); color: white;" onclick="submitComment({{ $video->id }})">Comment</button>
-                            </div>
-                    </div>
-                @else
-                    <div style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
-                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
-                    </div>
-                @endauth
-
-                <div id="commentsList">
-                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
-                        @include('videos.partials.comment', ['comment' => $comment])
-                    @empty
-                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the first to comment!</p>
-                    @endforelse
-                </div>
-
-            <script>
-            function submitComment(videoId) {
-                const body = document.getElementById('commentBody').value.trim();
-                if (!body) return;
-
-                fetch(`/videos/${videoId}/comments`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    },
-                    body: JSON.stringify({ body: body })
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        document.getElementById('commentBody').value = '';
-                        location.reload();
-                    }
-                });
-            }
-
-            function deleteComment(commentId) {
-                if (!confirm('Are you sure you want to delete this comment?')) return;
-
-                fetch(`/comments/${commentId}`, {
-                    method: 'DELETE',
-                    headers: {
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    }
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        location.reload();
-                    }
-                });
-            }
-
-            document.addEventListener('DOMContentLoaded', function() {
-                const commentTexts = document.querySelectorAll('.comment-body');
-                commentTexts.forEach(text => {
-                    const html = text.innerHTML.replace(/@(\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
-                    text.innerHTML = html;
-                });
-            });
-
-            function submitReply(videoId, parentId) {
-                const textarea = document.querySelector(`#replyForm${parentId} textarea`);
-                const body = textarea.value.trim();
-                if (!body) return;
-
-                fetch(`/videos/${videoId}/comments`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    },
-                    body: JSON.stringify({ body: body, parent_id: parentId })
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        location.reload();
-                    }
-                });
-            }
-            </script>
-        </div>
-
-        <!-- Sidebar - Match Highlights -->
-        <div class="yt-sidebar-container">
-            <aside class="events-sidebar">
-                <div class="events-sidebar-header" style="justify-content: center;">
-                    <h3>Match Highlights</h3>
-                </div>
-
-                <div class="tab-header">
-                    <button class="tab-button active" data-tab="official">Points</button>
-                    <button class="tab-button" data-tab="review">Coach review</button>
-                </div>
-
-                <div class="tab-panels">
-                    <!-- Points Tab -->
-                    <div class="tab-panel active" id="tab-official">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
-                            <div>
-                                <div class="section-label">Rounds &amp; points</div>
-                            @auth
-                                @if(Auth::id() === $video->user_id)
-                                    <button class="btn-add" type="button" onclick="openAddRoundModal()">
-                                        <span>+</span> Add Round
-                                    </button>
-                                @endif
-                            @endauth
-                        </div>
-
-                        <div class="event-list" id="officialEvents">
-                            <!-- Round marker for Round 1 -->
-                            <div class="round-marker" data-round="1">
-                                <span class="round-badge">ROUND 1</span>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="round-actions">
-                                            <button class="round-action-btn" onclick="openAddPointModal(1)" title="Add point">+</button>
-                                            <button class="round-action-btn" onclick="editRound(1)" title="Edit round">✏️</button>
-                                            <button class="round-action-btn" onclick="deleteRound(1)" title="Delete round">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-
-                            <!-- Round 1 points -->
-                            <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
-                                <div class="event-time">@00:20</div>
-                                <div>
-                                    <div class="event-label">
-                                        Blue body kick (1 pt)
-                                        <span class="pill pill-blue">Blue</span>
-                                    </div>
-                                    <div class="event-meta">
-                                        Round 1 • Score 1 – 0 • Clean contact.
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editPoint('pt1')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deletePoint('pt1')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-                            <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
-                                <div class="event-time">@00:45</div>
-                                <div>
-                                    <div class="event-label">
-                                        Blue scores body kick
-                                        <span class="pill pill-blue">Blue</span>
-                                    </div>
-                                    <div class="event-meta">
-                                        Round 1 • Score 2 – 0 • Judge: Central.
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editPoint('pt2')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deletePoint('pt2')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-
-                            <!-- Round marker for Round 2 -->
-                            <div class="round-marker" data-round="2">
-                                <span class="round-badge">ROUND 2</span>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="round-actions">
-                                            <button class="round-action-btn" onclick="openAddPointModal(2)" title="Add point">+</button>
-                                            <button class="round-action-btn" onclick="editRound(2)" title="Edit round">✏️</button>
-                                            <button class="round-action-btn" onclick="deleteRound(2)" title="Delete round">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-
-                            <!-- Round 2 points -->
-                            <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
-                                <div class="event-time">@01:30</div>
-                                <div>
-                                    <div class="event-label">
-                                        Red head kick (3 pts)
-                                        <span class="pill pill-red">Red</span>
-                                    </div>
-                                    <div class="event-meta">
-                                        Round 2 • Score 2 – 3 • Video replay requested.
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editPoint('pt3')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deletePoint('pt3')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-
-                            <!-- Round marker for Round 3 -->
-                            <div class="round-marker" data-round="3">
-                                <span class="round-badge">ROUND 3</span>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="round-actions">
-                                            <button class="round-action-btn" onclick="openAddPointModal(3)" title="Add point">+</button>
-                                            <button class="round-action-btn" onclick="editRound(3)" title="Edit round">✏️</button>
-                                            <button class="round-action-btn" onclick="deleteRound(3)" title="Delete round">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-
-                            <!-- Round 3 points -->
-                            <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
-                                <div class="event-time">@02:30</div>
-                                <div>
-                                    <div class="event-label">
-                                        Blue spinning backfist (2 pts)
-                                        <span class="pill pill-blue">Blue</span>
-                                    </div>
-                                    <div class="event-meta">
-                                        Round 3 • Score 4 – 3 • Close round.
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editPoint('pt4')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deletePoint('pt4')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-                            <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
-                                <div class="event-time">@03:00</div>
-                                <div>
-                                    <div class="event-label">
-                                        Red leg kick (1 pt)
-                                        <span class="pill pill-red">Red</span>
-                                    </div>
-                                    <div class="event-meta">
-                                        Round 3 • Score 4 – 4 • Tied!
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editPoint('pt5')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deletePoint('pt5')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-                    </div>
-
-                    <!-- Coach Review Tab -->
-                    <div class="tab-panel" id="tab-review">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
-                            <div class="section-label">Private notes</div>
-                            @auth
-                                @if(Auth::id() === $video->user_id)
-                                    <button class="btn-add" type="button" onclick="openAddReviewModal()">
-                                        <span>+</span> Add Note
-                                    </button>
-                                @endif
-                            @endauth
-                        </div>
-                        <div class="event-list" id="reviewEvents">
-                            <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
-                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
-                                    <div style="font-size: 1.2rem; margin-bottom: 2px">🔥</div>
-                                    <div class="event-time">@00:32–00:50</div>
-                                <div>
-                                    <div class="event-label">
-                                        Good pressure, but guard too low after first kick
-                                    </div>
-                                    <div class="event-meta">
-                                        <div class="comment-avatar">
-                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
-                                        </div>
-                                        Coach Ahmed • Hands drop after scoring, drill guard recovery immediately.
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editReview('rev1')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deleteReview('rev1')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-                            <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
-                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
-                                    <div style="font-size: 1.2rem; margin-bottom: 2px">🤔</div>
-                                    <div class="event-time">@02:05–02:20</div>
-                                <div>
-                                    <div class="event-label">Missed counter opportunity</div>
-                                    <div class="event-meta">
-                                        Coach Sara • Great angle, but no follow up. Use this clip to discuss risk vs reward.
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editReview('rev2')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deleteReview('rev2')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-                            <div class="event-item" data-time-start="205" data-id="rev3">
-                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
-                                    <div style="font-size: 1.2rem; margin-bottom: 2px">😄</div>
-                                    <div class="event-time">@03:25</div>
-                                <div>
-                                    <div class="event-label">
-                                        Excellent angle change and follow-up
-                                    </div>
-                                    <div class="event-meta">
-                                        <div class="comment-avatar">
-                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
-                                        </div>
-                                        Coach Ahmed • Save as positive highlight, ideal example of exit and re-entry after scoring.
-                                    </div>
-                                @auth
-                                    @if(Auth::id() === $video->user_id)
-                                        <div class="event-actions">
-                                            <button class="event-action-btn" onclick="editReview('rev3')" title="Edit">✏️</button>
-                                            <button class="event-action-btn delete" onclick="deleteReview('rev3')" title="Delete">🗑️</button>
-                                        </div>
-                                    @endif
-                                @endauth
-                            </div>
-                    </div>
-            </aside>
-
-            <!-- Up Next Videos Section -->
-            @if(isset($recommendedVideos) && $recommendedVideos->count() > 0)
-            <div class="up-next-section" style="margin-top: 16px;">
-                <div class="up-next-header" style="padding: 12px 0; border-bottom: 1px solid var(--border-color);">
-                    <h3 style="font-size: 16px; font-weight: 600; margin: 0;">Up Next</h3>
-                </div>
-                <div class="up-next-list" style="display: flex; flex-direction: column; gap: 8px; padding-top: 12px;">
-                    @foreach($recommendedVideos->take(5) as $upNextVideo)
-                    <div class="up-next-item" style="display: flex; gap: 8px; cursor: pointer;" onclick="window.location.href='{{ route('videos.show', $upNextVideo->id) }}'">
-                        <div class="up-next-thumbnail" style="position: relative; width: 160px; flex-shrink: 0; border-radius: 8px; overflow: hidden;">
-                            @if($upNextVideo->thumbnail)
-                                <img src="{{ asset('storage/' . $upNextVideo->thumbnail) }}" alt="{{ $upNextVideo->title }}" style="width: 100%; height: 90px; object-fit: cover;">
-                            @else
-                                <div style="width: 100%; height: 90px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;">
-                                    <i class="bi bi-play-circle" style="font-size: 24px; color: var(--text-secondary);"></i>
-                                </div>
-                            @endif
-                            @if($upNextVideo->duration)
-                            <span class="video-duration" style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.8); color: white; font-size: 11px; padding: 2px 4px; border-radius: 4px;">{{ $upNextVideo->duration }}</span>
-                            @endif
-                        </div>
-                        <div class="up-next-info" style="flex: 1; min-width: 0;">
-                            <div class="up-next-title" style="font-size: 13px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
-                                {{ $upNextVideo->title }}
-                            </div>
-                            <div class="up-next-meta" style="font-size: 11px; color: var(--text-secondary); margin-top: 4px;">
-                                <div>{{ $upNextVideo->user->name ?? 'Unknown' }}</div>
-                                <div>{{ number_format($upNextVideo->view_count) }} views</div>
-                        </div>
-                    @endforeach
-                </div>
-            @endif
-
-            <!-- Playlist Videos (if in playlist) -->
-            @if(isset($playlistVideos) && $playlistVideos->count() > 0)
-            <div class="playlist-section" style="margin-top: 16px;">
-                <div class="playlist-header" style="padding: 12px 0; border-bottom: 1px solid var(--border-color);">
-                    <h3 style="font-size: 16px; font-weight: 600; margin: 0;">
-                        @if(isset($playlist)) {{ $playlist->title }} @else More Videos @endif
-                    </h3>
-                </div>
-                <div class="playlist-list" style="display: flex; flex-direction: column; gap: 8px; padding-top: 12px;">
-                    @foreach($playlistVideos->take(5) as $playlistVideo)
-                    <div class="playlist-item" style="display: flex; gap: 8px; cursor: pointer;" onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id ?? '' }}'">
-                        <div class="playlist-thumbnail" style="position: relative; width: 120px; flex-shrink: 0; border-radius: 8px; overflow: hidden;">
-                            @if($playlistVideo->thumbnail)
-                                <img src="{{ asset('storage/' . $playlistVideo->thumbnail) }}" alt="{{ $playlistVideo->title }}" style="width: 100%; height: 68px; object-fit: cover;">
-                            @else
-                                <div style="width: 100%; height: 68px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;">
-                                    <i class="bi bi-play-circle" style="font-size: 20px; color: var(--text-secondary);"></i>
-                                </div>
-                            @endif
-                            @if($playlistVideo->duration)
-                            <span class="video-duration" style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.8); color: white; font-size: 10px; padding: 2px 4px; border-radius: 4px;">{{ $playlistVideo->duration }}</span>
-                            @endif
-                        </div>
-                        <div class="playlist-info" style="flex: 1; min-width: 0;">
-                            <div class="playlist-title" style="font-size: 12px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
-                                {{ $playlistVideo->title }}
-                            </div>
-                            <div class="playlist-meta" style="font-size: 10px; color: var(--text-secondary); margin-top: 4px;">
-                                {{ number_format($playlistVideo->view_count) }} views
-                            </div>
-                    </div>
-                    @endforeach
-                </div>
-            @endif
-        </div>
-
-        <!-- Add Round Modal -->
-        <div class="modal-overlay" id="addRoundModal">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h3>Add New Round</h3>
-                    <button class="modal-close" onclick="closeModal('addRoundModal')">×</button>
-                </div>
-                <form id="addRoundForm">
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Round Number</label>
-                            <input type="number" id="roundNumber" min="1" required>
-                        </div>
-                        <div class="form-group">
-                            <label>Round Name (optional)</label>
-                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
-                        </div>
-                    <div class="modal-actions">
-                        <button type="button" class="btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
-                        <button type="submit" class="btn-save">Add Round</button>
-                    </div>
-                </form>
-            </div>
-
-        <!-- Add/Edit Point Modal -->
-        <div class="modal-overlay" id="pointModal">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h3 id="pointModalTitle">Add Point</h3>
-                    <button class="modal-close" onclick="closeModal('pointModal')">×</button>
-                </div>
-                <form id="pointForm">
-                    <input type="hidden" id="pointId">
-                    <input type="hidden" id="pointRoundId">
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Timestamp (seconds)</label>
-                            <input type="number" id="pointTimestamp" min="0" required>
-                        </div>
-                        <div class="form-group">
-                            <label>Round</label>
-                            <select id="pointRoundSelect">
-                                <option value="1">Round 1</option>
-                                <option value="2">Round 2</option>
-                                <option value="3">Round 3</option>
-                                <option value="4">Round 4</option>
-                                <option value="5">Round 5</option>
-                            </select>
-                        </div>
-                    <div class="form-group">
-                        <label>Action Description</label>
-                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Points</label>
-                            <input type="number" id="pointValue" min="1" value </div>
-                       ="1">
-                        <div class="form-group">
-                            <label>Competitor</label>
-                            <select id="pointCompetitor">
-                                <option value="blue">Blue</option>
-                                <option value="red">Red</option>
-                            </select>
-                        </div>
-                    <div class="form-group">
-                        <label>Notes</label>
-                        <textarea id="pointNotes" rows="2" placeholder="Optional notes"></textarea>
-                    </div>
-                    <div class="modal-actions">
-                        <button type="button" class="btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()" style="display: none;">Delete</button>
-                        <div style="flex: 1;"></div>
-                        <button type="button" class="btn-cancel" onclick="closeModal('pointModal')">Cancel</button>
-                        <button type="submit" class="btn-save">Save Point</button>
-                    </div>
-                </form>
-            </div>
-
-        <!-- Edit Round Modal -->
-        <div class="modal-overlay" id="editRoundModal">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h3>Edit Round</h3>
-                    <button class="modal-close" onclick="closeModal('editRoundModal')">×</button>
-                </div>
-                <form id="editRoundForm">
-                    <input type="hidden" id="editRoundNumber">
-                    <div class="form-group">
-                        <label>Round Name</label>
-                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
-                    </div>
-                    <div class="modal-actions">
-                        <button type="button" class="btn-delete" onclick="confirmDeleteRound()">Delete Round</button>
-                        <div style="flex: 1;"></div>
-                        <button type="button" class="btn-cancel" onclick="closeModal('editRoundModal')">Cancel</button>
-                        <button type="submit" class="btn-save">Save Changes</button>
-                    </div>
-                </form>
-            </div>
-
-        <!-- Add/Edit Review Modal -->
-        <div class="modal-overlay" id="reviewModal">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h3 id="reviewModalTitle">Add Coach Note</h3>
-                    <button class="modal-close" onclick="closeModal('reviewModal')">×</button>
-                </div>
-                <form id="reviewForm">
-                    <input type="hidden" id="reviewId">
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Start Time (seconds)</label>
-                            <input type="number" id="reviewStartTime" min="0" required>
-                        </div>
-                        <div class="form-group">
-                            <label>End Time (seconds)</label>
-                            <input type="number" id="reviewEndTime" min="0">
-                        </div>
-                    <div class="form-group">
-                        <label>Note</label>
-                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Coach Name</label>
-                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Emoji</label>
-                        <select id="reviewEmoji">
-                            <option value="🔥">🔥 Good</option>
-                            <option value="🤔">🤔 Needs Work</option>
-                            <option value="😄">😄 Excellent</option>
-                            <option value="💪">💪 Strong</option>
-                            <option value="⚠️">⚠️ Warning</option>
-                        </select>
-                    </div>
-                    <div class="modal-actions">
-                        <button type="button" class="btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()" style="display: none;">Delete</button>
-                        <div style="flex: 1;"></div>
-                        <button type="button" class="btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
-                        <button type="submit" class="btn-save">Save Note</button>
-                    </div>
-                </form>
-            </div>
-
-    </div>
-
-    @include('layouts.partials.share-modal')
-    @include('layouts.partials.edit-video-modal')
-
-    @if(Session::has('openEditModal') && Session::get('openEditModal'))
-    @auth
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            openEditVideoModal({{ $video->id }});
-        });
-    </script>
-    @endauth
-    @endif
-
-    <script>
-        // Playlist navigation URLs
-        const previousVideoUrl = @json($previousVideo ? route('videos.show', $previousVideo->id) . '?playlist=' . $playlist->id : null);
-        const nextVideoUrl = @json($nextVideo ? route('videos.show', $nextVideo->id) . '?playlist=' . $playlist->id : null);
-
-        // Video ID for API calls
-        const videoId = {{ $video->id }};
-        // Check if the current user is the owner of the video
-        const isOwner = {{ json_encode(Auth::check() && Auth::id() === $video->user_id) }};
-
-
-        // Autoplay management
-        let autoplayEnabled = true;
-
-        // Load match data on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            loadMatchData();
-        });
-
-        // Load match data from API
-        async function loadMatchData() {
-            try {
-                const response = await fetch(`/videos/${videoId}/match-data`);
-                const data = await response.json();
-                if (data.success && data.rounds && data.rounds.length > 0) {
-                    renderMatchData(data.rounds, data.reviews);
-                } else {
-                    // No database data, render static demo data
-                    renderStaticData();
-                }
-            } catch (error) {
-                // API not available, render static demo data
-                renderStaticData();
-            }
-        }
-
-        // Render static demo data
-        function renderStaticData() {
-            // Static demo rounds and points
-            const staticRounds = [
-                {
-                    id: 1,
-                    round_number: 1,
-                    name: 'ROUND 1',
-                    points: [
-                        { id: 1, timestamp_seconds: 20, action: 'Blue body kick', points: 1, competitor: 'blue', score_blue: 1, score_red: 0, notes: 'Clean contact.' },
-                        { id: 2, timestamp_seconds: 45, action: 'Blue scores body kick', points: 1, competitor: 'blue', score_blue: 2, score_red: 0, notes: 'Judge: Central.' }
-                    ]
-                },
-                {
-                    id: 2,
-                    round_number: 2,
-                    name: 'ROUND 2',
-                    points: [
-                        { id: 3, timestamp_seconds: 90, action: 'Red head kick', points: 3, competitor: 'red', score_blue: 2, score_red: 3, notes: 'Video replay requested.' }
-                    ]
-                },
-                {
-                    id: 3,
-                    round_number: 3,
-                    name: 'ROUND 3',
-                    points: [
-                        { id: 4, timestamp_seconds: 150, action: 'Blue spinning backfist', points: 2, competitor: 'blue', score_blue: 4, score_red: 3, notes: 'Close round.' },
-                        { id: 5, timestamp_seconds: 180, action: 'Red leg kick', points: 1, competitor: 'red', score_blue: 4, score_red: 4, notes: 'Tied!' }
-                    ]
-                }
-            ];
-
-            const staticReviews = [
-                { id: 1, start_time_seconds: 32, end_time_seconds: 50, note: 'Good pressure, but guard too low after first kick', coach_name: 'Coach Ahmed', emoji: '🔥' },
-                { id: 2, start_time_seconds: 125, end_time_seconds: 140, note: 'Missed counter opportunity', coach_name: 'Coach Sara', emoji: '🤔' },
-                { id: 3, start_time_seconds: 205, end_time_seconds: null, note: 'Excellent angle change and follow-up', coach_name: 'Coach Ahmed', emoji: '😄' }
-            ];
-
-            renderMatchData(staticRounds, staticReviews);
-        }
-
-        // Render match data
-        function renderMatchData(rounds, reviews) {
-            if (!rounds || rounds.length === 0) return;
-
-            const pointsContainer = document.getElementById('officialEvents');
-            const reviewsContainer = document.getElementById('reviewEvents');
-
-            let pointsHtml = '';
-            let reviewsHtml = '';
-
-            // Render rounds and points
-            rounds.forEach(round => {
-                pointsHtml += `
-                    <div class="round-marker" data-round="${round.round_number}">
-                        <span class="round-badge">${round.name}</span>
-                        ${isOwner ? `
-                            <div class="round-actions">
-                                <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
-                                <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${round.name}')" title="Edit round">✏️</button>
-                                <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
-                            </div>
-                        ` : ''}
-                    </div>
-                `;
-
-                if (round.points) {
-                    round.points.forEach(point => {
-                        const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
-                        const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
-                        const timeStr = formatTime(point.timestamp_seconds);
-
-                        pointsHtml += `
-                            <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
-                                <div class="event-time">@${timeStr}</div>
-                                <div>
-                                    <div class="event-label">
-                                        ${point.action} (${point.points} pt)
-                                        <span class="pill ${competitorClass}">${competitorLabel}</span>
-                                    </div>
-                                    <div class="event-meta">
-                                        ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
-                                    </div>
-                                ${isOwner ? `
-                                    <div class="event-actions">
-                                        <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
-                                        <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
-                                    </div>
-                                ` : ''}
-                            </div>
-                        `;
-                    });
-                }
-            });
-
-            // Render reviews
-            if (reviews) {
-                reviews.forEach(review => {
-                    const timeStart = formatTime(review.start_time_seconds);
-                    const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
-                    const timeDisplay = timeStart + timeEnd;
-
-                    reviewsHtml += `
-                        <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
-                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
-                                <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
-                                <div class="event-time">@${timeDisplay}</div>
-                            <div>
-                                <div class="event-label">
-                                    ${review.note}
-                                </div>
-                                <div class="event-meta">
-                                    <div class="comment-avatar">
-                                        <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
-                                    </div>
-                                    ${review.coach_name}
-                                </div>
-                            ${isOwner ? `
-                                <div class="event-actions">
-                                    <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
-                                    <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
-                                </div>
-                            ` : ''}
-                        </div>
-                    `;
-                });
-            }
-
-            if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
-            if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
-
-            // Re-attach event listeners
-            attachEventListeners();
-        }
-
-        // Format seconds to mm:ss
-        function formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = seconds % 60;
-            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-        }
-
-        // Tab switching functionality for Match Highlights
-        document.addEventListener('DOMContentLoaded', function() {
-            const tabButtons = document.querySelectorAll('.tab-button');
-            const tabPanels = document.querySelectorAll('.tab-panel');
-
-            tabButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    const targetTab = this.getAttribute('data-tab');
-
-                    // Remove active class from all buttons and panels
-                    tabButtons.forEach(btn => btn.classList.remove('active'));
-                    tabPanels.forEach(panel => panel.classList.remove('active'));
-
-                    // Add active class to clicked button and corresponding panel
-                    this.classList.add('active');
-                    document.getElementById('tab-' + targetTab).classList.add('active');
-                });
-            });
-
-            attachEventListeners();
-
-            // Modal form submissions
-            document.getElementById('addRoundForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                const roundNumber = document.getElementById('roundNumber').value;
-                const roundName = document.getElementById('roundName').value || 'ROUND ' + roundNumber;
-                storeRound(roundNumber, roundName);
-            });
-
-            document.getElementById('pointForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                savePoint();
-            });
-
-            document.getElementById('editRoundForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                updateRound();
-            });
-
-            document.getElementById('reviewForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                saveReview();
-            });
-        });
-
-        function attachEventListeners() {
-            // Event item click to seek video to timestamp
-            const eventItems = document.querySelectorAll('.event-item');
-            eventItems.forEach(item => {
-                item.addEventListener('click', function(e) {
-                    // Don't seek if clicking on action buttons
-                    if (e.target.closest('.event-actions')) return;
-
-                    const timeStart = this.getAttribute('data-time-start');
-                    if (timeStart) {
-                        const videoPlayer = document.getElementById('videoPlayer');
-                        if (videoPlayer) {
-                            videoPlayer.currentTime = parseInt(timeStart);
-                            videoPlayer.play();
-                        }
-                    }
-                });
-            });
-        }
-
-        // Modal Functions
-        function openModal(modalId) {
-            document.getElementById(modalId).classList.add('active');
-        }
-
-        function closeModal(modalId) {
-            document.getElementById(modalId).classList.remove('active');
-        }
-
-        // Close modal when clicking outside
-        document.querySelectorAll('.modal-overlay').forEach(modal => {
-            modal.addEventListener('click', function(e) {
-                if (e.target === this) {
-                    this.classList.remove('active');
-                }
-            });
-        });
-
-        // Get CSRF token - handle case where it might not be available
-        const csrfToken = '{{ Auth::check() ? csrf_token() : "" }}';
-
-        // Demo mode - disable API calls if not authenticated
-        const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
-
-        // ==================== ROUND FUNCTIONS ====================
-
-        function openAddRoundModal() {
-            // In demo mode, show a message
-            if (isDemoMode || !csrfToken) {
-                alert('Demo Mode: This feature requires authentication in production. The edit functionality is fully implemented and will work when logged in as the video owner.');
-                return;
-            }
-            document.getElementById('roundNumber').value = '';
-            document.getElementById('roundName').value = '';
-            openModal('addRoundModal');
-        }
-
-        async function storeRound(roundNumber, roundName) {
-            if (!csrfToken) {
-                alert('Demo Mode: API calls require authentication.');
-                return;
-            }
-            try {
-                const response = await fetch(`/videos/${videoId}/rounds`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': csrfToken
-                    },
-                    body: JSON.stringify({
-                        round_number: roundNumber,
-                        name: roundName
-                    })
-                });
-                const data = await response.json();
-                if (data.success) {
-                    closeModal('addRoundModal');
-                    loadMatchData();
-                } else {
-                    alert(data.message || 'Error adding round');
-                }
-            } catch (error) {
-                alert('Error: ' + error.message);
-            }
-        }
-
-        function editRound(roundNumber, roundId, currentName) {
-            if (isDemoMode || !csrfToken) {
-                alert('Demo Mode: This feature requires authentication in production.');
-                return;
-            }
-            document.getElementById('editRoundNumber').value = roundId;
-            document.getElementById('editRoundName').value = currentName;
-            openModal('editRoundModal');
-        }
-
-        async function updateRound() {
-            if (!csrfToken) {
-                alert('Demo Mode: API calls require authentication.');
-                return;
-            }
-            const roundId = document.getElementById('editRoundNumber').value;
-            const roundName = document.getElementById('editRoundName').value;
-
-            try {
-                const response = await fetch(`/rounds/${roundId}`, {
-                    method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': csrfToken
-                    },
-                    body: JSON.stringify({ name: roundName })
-                });
-                const data = await response.json();
-                if (data.success) {
-                    closeModal('editRoundModal');
-                    loadMatchData();
-                } else {
-                    alert(data.message || 'Error updating round');
-                }
-            } catch (error) {
-                alert('Error: ' + error.message);
-            }
-        }
-
-        async function deleteRound(roundId) {
-            if (!csrfToken) {
-                alert('Demo Mode: API calls require authentication.');
-                return;
-            }
-            if (!confirm('Are you sure you want to delete this round and all its points?')) return;
-
-            try {
-                const response = await fetch(`/rounds/${roundId}`, {
-                    method: 'DELETE',
-                    headers: {
-                        'X-CSRF-TOKEN': csrfToken
-                    }
-                });
-                const data = await response.json();
-                if (data.success) {
-                    loadMatchData();
-                } else {
-                    alert(data.message || 'Error deleting round');
-                }
-            } catch (error) {
-                alert('Error: ' + error.message);
-            }
-        }
-
-        // ==================== POINT FUNCTIONS ====================
-
-        function openAddPointModal(roundNumber, roundId) {
-            if (isDemoMode || !csrfToken) {
-                alert('Demo Mode: This feature requires authentication in production.');
-                return;
-            }
-            document.getElementById('pointModalTitle').textContent = 'Add Point';
-            document.getElementById('pointId').value = '';
-            document.getElementById('pointRoundId').value = roundId || '';
-            document.getElementById('pointTimestamp').value = '';
-            document.getElementById('pointRoundSelect').value = roundNumber || '1';
-            document.getElementById('pointAction').value = '';
-            document.getElementById('pointValue').value = '1';
-            document.getElementById('pointCompetitor').value = 'blue';
-            document.getElementById('pointNotes').value = '';
-            document.getElementById('deletePointBtn').style.display = 'none';
-            openModal('pointModal');
-        }
-
-        function editPoint(pointId) {
-            if (isDemoMode || !csrfToken) {
-                alert('Demo Mode: This feature requires authentication in production. The edit modal will open in production when logged in as the video owner.');
-                // Still open the modal in demo mode for visual preview
-            }
-            // Find point data from rendered HTML
-            const pointElement = document.querySelector(`.event-item[data-id="${pointId}"]`);
-            if (!pointElement) return;
-
-            document.getElementById('pointModalTitle').textContent = 'Edit Point';
-            document.getElementById('pointId').value = pointId;
-            document.getElementById('pointTimestamp').value = pointElement.dataset.timeStart || '';
-            document.getElementById('pointRoundSelect').value = pointElement.dataset.round || '1';
-            document.getElementById('pointAction').value = pointElement.querySelector('.event-label').textContent.split('(')[0].trim() || '';
-            document.getElementById('pointValue').value = '1';
-            document.getElementById('pointCompetitor').value = pointElement.querySelector('.pill')?.classList.contains('pill-blue') ? 'blue' : 'red';
-            document.getElementById('pointNotes').value = pointElement.querySelector('.event-meta')?.textContent.split('•').slice(2).join('').trim() || '';
-            document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
-            openModal('pointModal');
-        }
-
-        async function savePoint() {
-            if (!csrfToken) {
-                alert('Demo Mode: API calls require authentication. In production, this will save to the database when logged in as the video owner.');
-                closeModal('pointModal');
-                return;
-            }
-            const pointId = document.getElementById('pointId').value;
-            const roundId = document.getElementById('pointRoundId').value;
-            const timestamp = document.getElementById('pointTimestamp').value;
-            const round = document.getElementById('pointRoundSelect').value;
-            const action = document.getElementById('pointAction').value;
-            const value = document.getElementById('pointValue').value;
-            const competitor = document.getElementById('pointCompetitor').value;
-            const notes = document.getElementById('pointNotes').value;
-
-            try {
-                if (pointId) {
-                    // Update existing point
-                    const response = await fetch(`/points/${pointId}`, {
-                        method: 'PUT',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': csrfToken
-                        },
-                        body: JSON.stringify({
-                            timestamp_seconds: parseInt(timestamp),
-                            action: action,
-                            points: parseInt(value),
-                            competitor: competitor,
-                            notes: notes
-                        })
-                    });
-                    const data = await response.json();
-                    if (data.success) {
-                        closeModal('pointModal');
-                        loadMatchData();
-                    } else {
-                        alert(data.message || 'Error updating point');
-                    }
-                } else {
-                    // Create new point
-                    const response = await fetch(`/videos/${videoId}/points`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': csrfToken
-                        },
-                        body: JSON.stringify({
-                            round_id: roundId,
-                            timestamp_seconds: parseInt(timestamp),
-                            action: action,
-                            points: parseInt(value),
-                            competitor: competitor,
-                            notes: notes
-                        })
-                    });
-                    const data = await response.json();
-                    if (data.success) {
-                        closeModal('pointModal');
-                        loadMatchData();
-                    } else {
-                        alert(data.message || 'Error adding point');
-                    }
-                }
-            } catch (error) {
-                alert('Error: ' + error.message);
-            }
-        }
-
-        async function deletePoint(pointId) {
-            if (!csrfToken) {
-                alert('Demo Mode: API calls require authentication.');
-                return;
-            }
-            if (!confirm('Are you sure you want to delete this point?')) return;
-
-            try {
-                const response = await fetch(`/points/${pointId}`, {
-                    method: 'DELETE',
-                    headers: {
-                        'X-CSRF-TOKEN': csrfToken
-                    }
-                });
-                const data = await response.json();
-                if (data.success) {
-                    closeModal('pointModal');
-                    loadMatchData();
-                } else {
-                    alert(data.message || 'Error deleting point');
-                }
-            } catch (error) {
-                alert('Error: ' + error.message);
-            }
-        }
-
-        // ==================== REVIEW FUNCTIONS ====================
-
-        function openAddReviewModal() {
-            if (isDemoMode || !csrfToken) {
-                alert('Demo Mode: This feature requires authentication in production.');
-                return;
-            }
-            document.getElementById('reviewModalTitle').textContent = 'Add Coach Note';
-            document.getElementById('reviewId').value = '';
-            document.getElementById('reviewStartTime').value = '';
-            document.getElementById('reviewEndTime').value = '';
-            document.getElementById('reviewNote').value = '';
-            document.getElementById('reviewCoach').value = '';
-            document.getElementById('reviewEmoji').value = '🔥';
-            document.getElementById('deleteReviewBtn').style.display = 'none';
-            openModal('reviewModal');
-        }
-
-        function editReview(reviewId) {
-            if (isDemoMode || !csrfToken) {
-                alert('Demo Mode: This feature requires authentication in production.');
-                return;
-            }
-            const reviewElement = document.querySelector(`.event-item[data-id="${reviewId}"]`);
-            if (!reviewElement) return;
-
-            document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note';
-            document.getElementById('reviewId').value = reviewId;
-            document.getElementById('reviewStartTime').value = reviewElement.dataset.timeStart || '';
-            document.getElementById('reviewEndTime').value = reviewElement.dataset.timeEnd || '';
-            document.getElementById('reviewNote').value = reviewElement.querySelector('.event-label')?.textContent.trim() || '';
-            document.getElementById('reviewCoach').value = reviewElement.querySelector('.event-meta')?.textContent.trim() || '';
-            document.getElementById('reviewEmoji').value = reviewElement.querySelector('div:first-child')?.textContent || '🔥';
-            document.getElementById('deleteReviewBtn').style.display = 'block';
-            openModal('reviewModal');
-        }
-
-        async function saveReview() {
-            if (!csrfToken) {
-                alert('Demo Mode: API calls require authentication.');
-                return;
-            }
-            const reviewId = document.getElementById('reviewId').value;
-            const startTime = document.getElementById('reviewStartTime').value;
-            const endTime = document.getElementById('reviewEndTime').value;
-            const note = document.getElementById('reviewNote').value;
-            const coach = document.getElementById('reviewCoach').value;
-            const emoji = document.getElementById('reviewEmoji').value;
-
-            try {
-                if (reviewId) {
-                    // Update existing review
-                    const response = await fetch(`/reviews/${reviewId}`, {
-                        method: 'PUT',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': csrfToken
-                        },
-                        body: JSON.stringify({
-                            start_time_seconds: parseInt(startTime),
-                            end_time_seconds: endTime ? parseInt(endTime) : null,
-                            note: note,
-                            coach_name: coach,
-                            emoji: emoji
-                        })
-                    });
-                    const data = await response.json();
-                    if (data.success) {
-                        closeModal('reviewModal');
-                        loadMatchData();
-                    } else {
-                        alert(data.message || 'Error updating note');
-                    }
-                } else {
-                    // Create new review
-                    const response = await fetch(`/videos/${videoId}/reviews`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': csrfToken
-                        },
-                        body: JSON.stringify({
-                            start_time_seconds: parseInt(startTime),
-                            end_time_seconds: endTime ? parseInt(endTime) : null,
-                            note: note,
-                            coach_name: coach,
-                            emoji: emoji
-                        })
-                    });
-                    const data = await response.json();
-                    if (data.success) {
-                        closeModal('reviewModal');
-                        loadMatchData();
-                    } else {
-                        alert(data.message || 'Error adding note');
-                    }
-                }
-            } catch (error) {
-                alert('Error: ' + error.message);
-            }
-        }
-
-        async function deleteReview(reviewId) {
-            if (!csrfToken) {
-                alert('Demo Mode: API calls require authentication.');
-                return;
-            }
-            if (!confirm('Are you sure you want to delete this coach note?')) return;
-
-            try {
-                const response = await fetch(`/reviews/${reviewId}`, {
-                    method: 'DELETE',
-                    headers: {
-                        'X-CSRF-TOKEN': csrfToken
-                    }
-                });
-                const data = await response.json();
-                if (data.success) {
-                    closeModal('reviewModal');
-                    loadMatchData();
-                } else {
-                    alert(data.message || 'Error deleting note');
-                }
-            } catch (error) {
-                alert('Error: ' + error.message);
-            }
-        }
-
-        // Playlist navigation (existing code)
-        document.addEventListener('DOMContentLoaded', function() {
-            var videoPlayer = document.getElementById('videoPlayer');
-            var playlistControls = document.getElementById('playlistControls');
-            var autoplayToggle = document.getElementById('autoplayToggle');
-
-            if (videoPlayer) {
-                videoPlayer.volume = 0.5;
-                var playPromise = videoPlayer.play();
-                if (playPromise !== undefined) {
-                    playPromise.then(function() { console.log('Video autoplayed'); }).catch(function(error) { console.log('Autoplay blocked'); });
-                }
-
-                // Handle video ended - autoplay next
-                if (nextVideoUrl) {
-                    videoPlayer.addEventListener('ended', function() {
-                        if (autoplayEnabled) {
-                            console.log('Video ended, going to next...');
-                            window.location.href = nextVideoUrl;
-                        }
-                    });
-                }
-            }
-
-            // Show playlist controls on hover
-            if (playlistControls) {
-                const videoContainer = document.getElementById('videoContainer');
-                videoContainer.addEventListener('mouseenter', function() {
-                    playlistControls.classList.add('visible');
-                });
-                videoContainer.addEventListener('mouseleave', function() {
-                    playlistControls.classList.remove('visible');
-                });
-
-                // Initially show for a few seconds
-                setTimeout(function() { playlistControls.classList.add('visible'); }, 2000);
-                setTimeout(function() { playlistControls.classList.remove('visible'); }, 6000);
-            }
-
-            // Autoplay toggle handler
-            if (autoplayToggle) {
-                autoplayToggle.addEventListener('change', function() {
-                    autoplayEnabled = this.checked;
-                    localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
-                });
-
-                // Load saved preference
-                const savedAutoplay = localStorage.getItem('playlistAutoplay');
-                if (savedAutoplay !== null) {
-                    autoplayEnabled = savedAutoplay === '1';
-                    autoplayToggle.checked = autoplayEnabled;
-                }
-            }
-
-            // Keyboard navigation
-            document.addEventListener('keydown', function(e) {
-                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { return; }
-                if (e.key === 'ArrowLeft') { e.preventDefault(); goToPreviousVideo(); }
-                else if (e.key === 'ArrowRight') { e.preventDefault(); goToNextVideo(); }
-            });
-        });
-
-        function goToPreviousVideo() {
-            if (previousVideoUrl) { window.location.href = previousVideoUrl; }
-        }
-
-        function goToNextVideo() {
-            if (nextVideoUrl) { window.location.href = nextVideoUrl; }
-        }
-    </script>
-@endsection
-</parameter>
diff --git a/app/Http/Controllers/MatchEventController.php b/app/Http/Controllers/MatchEventController.php
index 20bde5c..0471a27 100644
--- a/app/Http/Controllers/MatchEventController.php
+++ b/app/Http/Controllers/MatchEventController.php
@@ -18,6 +18,7 @@ class MatchEventController extends Controller
         $request->validate([
             'round_number' => 'required|integer|min:1',
             'name' => 'nullable|string|max:50',
+            'start_time_seconds' => 'nullable|integer|min:0',
         ]);
 
         // Check if user owns the video
@@ -29,6 +30,7 @@ class MatchEventController extends Controller
             'video_id' => $video->id,
             'round_number' => $request->round_number,
             'name' => $request->name ?? 'ROUND '.$request->round_number,
+            'start_time_seconds' => $request->start_time_seconds,
         ]);
 
         return response()->json([
@@ -41,7 +43,9 @@ class MatchEventController extends Controller
     public function updateRound(Request $request, MatchRound $round)
     {
         $request->validate([
+            'round_number' => 'sometimes|integer|min:1',
             'name' => 'required|string|max:50',
+            'start_time_seconds' => 'nullable|integer|min:0',
         ]);
 
         // Check if user owns the video
@@ -50,7 +54,9 @@ class MatchEventController extends Controller
         }
 
         $round->update([
+            'round_number' => $request->round_number ?? $round->round_number,
             'name' => $request->name,
+            'start_time_seconds' => $request->start_time_seconds,
         ]);
 
         return response()->json([
@@ -93,16 +99,25 @@ class MatchEventController extends Controller
             return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
         }
 
-        // Calculate scores
-        $previousPoints = MatchPoint::where('video_id', $video->id)
-            ->where('match_round_id', $request->round_id)
+        // Get ALL previous points in this round (ordered by timestamp)
+        $previousPoints = MatchPoint::where('match_round_id', $request->round_id)
             ->where('timestamp_seconds', '<', $request->timestamp_seconds)
-            ->orderBy('timestamp_seconds', 'desc')
-            ->first();
+            ->orderBy('timestamp_seconds', 'asc')
+            ->pluck('points', 'competitor')
+            ->toArray();
 
-        $scoreBlue = $previousPoints ? $previousPoints->score_blue : 0;
-        $scoreRed = $previousPoints ? $previousPoints->score_red : 0;
+        // Calculate cumulative scores by summing each point value
+        $scoreBlue = 0;
+        $scoreRed = 0;
 
+        if (isset($previousPoints['blue'])) {
+            $scoreBlue += $previousPoints['blue'];
+        }
+        if (isset($previousPoints['red'])) {
+            $scoreRed += $previousPoints['red'];
+        }
+
+        // Add current point
         if ($request->competitor === 'blue') {
             $scoreBlue += $request->points;
         } else {
diff --git a/app/Http/Controllers/VideoController.php b/app/Http/Controllers/VideoController.php
index eccd69b..3a8f9b6 100644
--- a/app/Http/Controllers/VideoController.php
+++ b/app/Http/Controllers/VideoController.php
@@ -18,7 +18,7 @@ class VideoController extends Controller
 {
     public function __construct()
     {
-        $this->middleware('auth')->except(['index', 'show', 'search', 'stream']);
+        $this->middleware('auth')->except(['index', 'show', 'search', 'stream', 'trending', 'shorts']);
     }
 
     public function index()
diff --git a/app/Models/MatchRound.php b/app/Models/MatchRound.php
index 67c955b..9140267 100644
--- a/app/Models/MatchRound.php
+++ b/app/Models/MatchRound.php
@@ -15,6 +15,11 @@ class MatchRound extends Model
         'video_id',
         'round_number',
         'name',
+        'start_time_seconds',
+    ];
+
+    protected $casts = [
+        'start_time_seconds' => 'integer',
     ];
 
     public function video(): BelongsTo
diff --git a/config/app.php b/config/app.php
index 61de974..db091d8 100755
--- a/config/app.php
+++ b/config/app.php
@@ -57,7 +57,7 @@ return [
 
     'url' => env('APP_URL', 'http://localhost'),
 
-    'asset_url' => env('ASSET_URL'),
+    'asset_url' => env('APP_URL'),
 
     /*
     |--------------------------------------------------------------------------
@@ -70,7 +70,7 @@ return [
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => 'Asia/Bahrain',
 
     /*
     |--------------------------------------------------------------------------
diff --git a/database/migrations/2026_03_21_000003_add_start_time_seconds_to_match_rounds_table.php b/database/migrations/2026_03_21_000003_add_start_time_seconds_to_match_rounds_table.php
new file mode 100644
index 0000000..a72b6be
--- /dev/null
+++ b/database/migrations/2026_03_21_000003_add_start_time_seconds_to_match_rounds_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('match_rounds', function (Blueprint $table) {
+            if (! Schema::hasColumn('match_rounds', 'start_time_seconds')) {
+                $table->integer('start_time_seconds')->nullable()->after('name');
+            }
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('match_rounds', function (Blueprint $table) {
+            if (Schema::hasColumn('match_rounds', 'start_time_seconds')) {
+                $table->dropColumn('start_time_seconds');
+            }
+        });
+    }
+};
diff --git a/resources/views/components/channel-row.blade.php b/resources/views/components/channel-row.blade.php
new file mode 100644
index 0000000..e223bc0
--- /dev/null
+++ b/resources/views/components/channel-row.blade.php
@@ -0,0 +1,66 @@
+<div class="channel-row">
+    <div style="display: flex; align-items: center; gap: 12px;">
+        <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none"
+            style="color: inherit; display: flex; align-items: center; gap: 12px;">
+            @if ($video->user)
+                <img src="{{ $video->user->avatar_url }}" class="channel-avatar" alt="{{ $video->user->name }}">
+            @else
+                <div class="channel-avatar"></div>
+            @endif
+            <div>
+                <div class="channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
+                <div class="channel-subs">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
+            </div>
+        </a>
+    </div>
+    <x-video-actions :video="$video" />
+</div>
+
+<style>
+    /* Channel Row */
+    .channel-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 0;
+        overflow: visible;
+    }
+
+    .channel-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .channel-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: #555;
+    }
+
+    .channel-name {
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .channel-subs {
+        font-size: 12px;
+        color: var(--text-secondary);
+    }
+
+    /* Responsive */
+    @media (max-width: 576px) {
+        .channel-row {
+            flex-direction: column;
+            align-items: flex-start !important;
+            gap: 12px;
+        }
+
+        .channel-info {
+            width: 100%;
+        }
+    }
+</style>
+
+@props(['video'])
diff --git a/resources/views/components/video-actions.blade.php b/resources/views/components/video-actions.blade.php
new file mode 100644
index 0000000..ff72de8
--- /dev/null
+++ b/resources/views/components/video-actions.blade.php
@@ -0,0 +1,200 @@
+@props(['video'])
+
+<style>
+    .action-btn {
+        border: none;
+        border-radius: 8px;
+        padding: 8px 14px;
+        font-size: 0.82rem;
+        font-weight: 500;
+        cursor: pointer;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        color: var(--text-primary);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        transition: all 0.2s ease;
+        text-decoration: none;
+    }
+
+    .action-btn:hover {
+        background: var(--border-color);
+        transform: translateY(-1px);
+    }
+
+    .action-btn:active {
+        transform: translateY(0);
+    }
+
+    .action-btn svg,
+    .action-btn i {
+        flex-shrink: 0;
+    }
+
+    .action-btn.comment-btn {
+        background: var(--brand-red);
+        color: white;
+        border-color: var(--brand-red);
+    }
+
+    .action-btn.liked {
+        color: var(--brand-red) !important;
+    }
+
+    .mobile-action-dropdown .dropdown-item.liked {
+        color: var(--brand-red) !important;
+    }
+
+    .mobile-action-dropdown {
+        display: none;
+        position: relative;
+    }
+
+    .mobile-action-dropdown .dropdown-menu {
+        right: 0;
+        left: auto;
+        min-width: 200px;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 10px;
+        padding: 6px 0;
+        z-index: 1200;
+    }
+
+    .mobile-action-dropdown .dropdown-item {
+        color: var(--text-primary);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        padding: 8px 12px;
+        background: transparent;
+        border: none;
+        width: 100%;
+        text-align: left;
+        text-decoration: none;
+    }
+
+    .mobile-action-dropdown .dropdown-item:hover {
+        background: var(--border-color);
+    }
+
+    @media (max-width: 576px) {
+        .video-actions>.desktop-action {
+            display: none !important;
+        }
+
+        .mobile-action-dropdown {
+            display: block;
+            margin-left: auto;
+        }
+
+        .action-btn {
+            width: 100%;
+        }
+    }
+</style>
+
+<div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow: visible;">
+    @auth
+        @if (Auth::id() === $video->user_id)
+            <button class="action-btn desktop-action" onclick="openEditVideoModal({{ $video->id }})">
+                <i class="bi bi-pencil"></i>
+                <span>Edit</span>
+            </button>
+        @elseif (Auth::id() !== $video->user_id)
+            <button class="action-btn desktop-action"><i class="bi bi-bell"></i><span>Subscribe</span></button>
+        @endif
+    @else
+        <button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action"><i
+                class="bi bi-bell"></i><span>Subscribe</span></button>
+    @endauth
+
+    @auth
+        <form method="POST"
+            action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+            class="d-inline desktop-action">
+            @csrf
+            <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
+                <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+            </button>
+        </form>
+    @else
+        <button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action">
+            <i class="bi bi-hand-thumbs-up"></i>
+            {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+        </button>
+    @endauth
+
+    @if ($video->isShareable())
+        <button class="action-btn desktop-action"
+            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
+            <i class="bi bi-share"></i> Share
+        </button>
+    @endif
+
+    <!-- Save to Playlist Button -->
+    <button class="action-btn desktop-action" onclick="openAddToPlaylistModal({{ $video->id }})">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+        </svg>
+        <span>Save</span>
+    </button>
+
+    <div class="dropdown mobile-action-dropdown">
+        <button class="action-btn dropdown-toggle" type="button" id="dropdownMenuLinkMusic{{ $video->id }}"
+            data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="bi bi-lightning-charge-fill"></i>
+            <span>Action</span>
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuLinkMusic{{ $video->id }}">
+            @auth
+                @if (Auth::id() !== $video->user_id)
+                    <button type="button" class="dropdown-item">
+                        <i class="bi bi-bell"></i> Subscribe
+                    </button>
+                @else
+                    <button type="button" class="dropdown-item" onclick="openEditVideoModal({{ $video->id }})">
+                        <i class="bi bi-pencil"></i> Edit
+                    </button>
+                @endif
+            @else
+                <button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
+                    <i class="bi bi-bell"></i> Subscribe
+                </button>
+            @endauth
+
+            @auth
+                <form method="POST"
+                    action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                    class="d-inline w-100">
+                    @csrf
+                    <button type="submit" class="dropdown-item {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
+                        <i
+                            class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                        {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+                    </button>
+                </form>
+            @else
+                <button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
+                    <i class="bi bi-hand-thumbs-up"></i>
+                    {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+                </button>
+            @endauth
+
+            @if ($video->isShareable())
+                <button class="dropdown-item"
+                    onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
+                    <i class="bi bi-share"></i> Share
+                </button>
+            @endif
+
+            <button class="dropdown-item" onclick="openAddToPlaylistModal({{ $video->id }})">
+                <i class="bi bi-bookmark"></i> Save
+            </button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/video-comments.blade.php b/resources/views/components/video-comments.blade.php
new file mode 100644
index 0000000..fb55723
--- /dev/null
+++ b/resources/views/components/video-comments.blade.php
@@ -0,0 +1,150 @@
+<div class="comments-section" style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+    <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+        Comments <span style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
+    </h3>
+
+    @auth
+        <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+            <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                alt="{{ Auth::user()->name }}">
+            <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                <textarea id="commentBody{{ $video->id }}" class="form-control"
+                    placeholder="Add a comment... Use @ to mention someone" rows="1"
+                    style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                <button type="button" class="action-btn comment-btn" onclick="submitComment({{ $video->id }})"
+                    style="flex-shrink: 0;">
+                    <span>Send</span>
+                </button>
+            </div>
+        </div>
+    @else
+        <div
+            style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+            <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+        </div>
+    @endauth
+
+    <div id="commentsList{{ $video->id }}">
+        @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+            @include('videos.partials.comment', ['comment' => $comment])
+        @empty
+            <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the first to
+                comment!</p>
+        @endforelse
+    </div>
+</div>
+
+<script>
+    function submitComment(videoId) {
+        const body = document.getElementById('commentBody' + videoId).value.trim();
+        if (!body) return;
+
+        fetch(`/videos/${videoId}/comments`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: JSON.stringify({
+                    body: body
+                })
+            })
+            .then(response => response.json())
+            .catch(error => {
+                console.error('Error:', error);
+                alert('Failed to post comment: ' + error);
+            })
+            .then(data => {
+                if (data & amp; & amp; data.success) {
+                    document.getElementById('commentBody' + videoId).value = '';
+                    addCommentToList(data.comment, videoId);
+                } else {
+                    alert('Failed to post comment');
+                }
+            });
+    }
+
+    function addCommentToList(comment, videoId) {
+        const commentsList = document.getElementById('commentsList' + videoId);
+        const commentHtml = `
+        <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
+            <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
+            <div style="flex: 1;">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+                    <span style="font-weight: 600; font-size: 14px;">${comment.user.name}</span>
+                    <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
+                </div>
+                <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
+                    ${comment.body.replace(/@(\\\\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>')}
+                </div>
+                <div style="display: flex; gap: 12px; margin-top: 8px;">
+                    <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                        Reply
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+        commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+        const commentCount = commentsList.closest('.comments-section').querySelector('h3 span');
+        if (commentCount) {
+            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+            commentCount.textContent = `(${count})`;
+        }
+    }
+
+    function deleteComment(commentId) {
+        if (confirm('Are you sure you want to delete this comment?')) {
+            fetch(`/comments/${commentId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.getElementById('comment-' + commentId).remove();
+                        // Update comment count for all comment sections (simplified)
+                        document.querySelectorAll('.comments-section h3 span').forEach(span => {
+                            const count = parseInt(span.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                            span.textContent = `(${Math.max(0, count)})`;
+                        });
+                    }
+                });
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const commentTexts = document.querySelectorAll('.comment-body');
+        commentTexts.forEach(text => {
+            const html = text.innerHTML.replace(/@(\\w+)/g,
+                '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+            text.innerHTML = html;
+        });
+    });
+
+    function submitReply(videoId, parentId) {
+        const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+        const body = textarea.value.trim();
+        if (!body) return;
+
+        fetch(`/videos/${videoId}/comments`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: JSON.stringify({
+                    body: body,
+                    parent_id: parentId
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    location.reload();
+                }
+            });
+    }
+</script>
diff --git a/resources/views/layouts/partials/edit-video-modal.blade.php b/resources/views/layouts/partials/edit-video-modal.blade.php
index e5891bf..3c1dffe 100644
--- a/resources/views/layouts/partials/edit-video-modal.blade.php
+++ b/resources/views/layouts/partials/edit-video-modal.blade.php
@@ -1,5 +1,6 @@
 <!-- Edit Video Modal - Cute Staged Pop-up -->
-<div class="modal fade" id="editVideoModal" tabindex="-1" aria-labelledby="editVideoModalLabel" aria-hidden="true" data-bs-backdrop="static">
+<div class="modal fade" id="editVideoModal" tabindex="-1" aria-labelledby="editVideoModalLabel" aria-hidden="true"
+    data-bs-backdrop="static">
     <div class="modal-dialog modal-dialog-centered modal-lg">
         <div class="modal-content edit-modal-content">
             <!-- Header -->
@@ -13,9 +14,10 @@
                         <span class="edit-subtitle">Update your video</span>
                     </div>
                 </div>
-                <button type="button" class="btn-close btn-close-white" onclick="closeEditVideoModal()" aria-label="Close"></button>
+                <button type="button" class="btn-close btn-close-white" onclick="closeEditVideoModal()"
+                    aria-label="Close"></button>
             </div>
-            
+
             <!-- Body -->
             <div class="modal-body edit-modal-body">
                 <!-- Progress Steps -->
@@ -44,12 +46,12 @@
                         <span class="step-label">Privacy</span>
                     </div>
                 </div>
-                
+
                 <!-- Form -->
                 <form id="edit-video-form-modal" enctype="multipart/form-data">
                     @csrf
                     @method('PUT')
-                    
+
                     <!-- Step 1: Details -->
                     <div class="edit-step-content active" data-step="1">
                         <!-- Current Thumbnail Preview -->
@@ -58,29 +60,28 @@
                                 <i class="bi bi-image"></i> Current Thumbnail
                             </label>
                             <div class="current-thumbnail-wrapper" id="current-thumbnail-wrapper">
-                                <img id="current-thumbnail-preview" src="" alt="Current thumbnail" class="current-thumbnail-img">
+                                <img id="current-thumbnail-preview" src="" alt="Current thumbnail"
+                                    class="current-thumbnail-img">
                                 <div class="thumbnail-placeholder" id="thumbnail-placeholder">
                                     <i class="bi bi-card-image"></i>
                                     <span>No thumbnail</span>
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="form-group">
                             <label class="form-label">
                                 <i class="bi bi-card-heading"></i> Title *
                             </label>
-                            <input type="text" name="title" id="edit-video-title" required 
-                                class="form-input"
+                            <input type="text" name="title" id="edit-video-title" required class="form-input"
                                 placeholder="Give your video a catchy title">
                         </div>
-                        
+
                         <div class="form-group">
                             <label class="form-label">
                                 <i class="bi bi-text-paragraph"></i> Description
                             </label>
-                            <textarea name="description" id="edit-video-description" rows="3" 
-                                class="form-textarea"
+                            <textarea name="description" id="edit-video-description" rows="3" class="form-textarea"
                                 placeholder="Tell viewers about your video"></textarea>
                         </div>
 
@@ -112,7 +113,7 @@
                                 </label>
                             </div>
                         </div>
-                        
+
                         <div class="step-navigation">
                             <div></div>
                             <button type="button" class="btn-next" onclick="editNextStep(2)">
@@ -120,7 +121,7 @@
                             </button>
                         </div>
                     </div>
-                    
+
                     <!-- Step 2: Thumbnail -->
                     <div class="edit-step-content" data-step="2">
                         <div class="form-group">
@@ -144,13 +145,14 @@
                                         <p class="filename" id="edit-thumbnail-filename"></p>
                                         <p id="edit-thumbnail-filesize"></p>
                                     </div>
-                                    <button type="button" class="btn-remove-file" onclick="removeEditThumbnail(event)">
+                                    <button type="button" class="btn-remove-file"
+                                        onclick="removeEditThumbnail(event)">
                                         <i class="bi bi-x-lg"></i>
                                     </button>
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="step-navigation">
                             <button type="button" class="btn-prev" onclick="editPrevStep(1)">
                                 <i class="bi bi-arrow-left"></i> Back
@@ -160,7 +162,7 @@
                             </button>
                         </div>
                     </div>
-                    
+
                     <!-- Step 3: Privacy -->
                     <div class="edit-step-content" data-step="3">
                         <div class="form-group">
@@ -200,10 +202,10 @@
                                 </label>
                             </div>
                         </div>
-                        
+
                         <!-- Status Message -->
                         <div id="edit-status-message" class="status-message-modal"></div>
-                        
+
                         <div class="step-navigation">
                             <button type="button" class="btn-prev" onclick="editPrevStep(2)">
                                 <i class="bi bi-arrow-left"></i> Back
@@ -220,942 +222,968 @@
 </div>
 
 <style>
-/* Modal Base Styles */
-.edit-modal-content {
-    background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%);
-    border: 1px solid #3a3a3a;
-    border-radius: 24px;
-    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(230, 30, 30, 0.1);
-    overflow: hidden;
-}
+    /* Modal Base Styles */
+    .edit-modal-content {
+        background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%);
+        border: 1px solid #3a3a3a;
+        border-radius: 24px;
+        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(230, 30, 30, 0.1);
+        overflow: hidden;
+    }
 
-/* Cute Staged Animation */
-#editVideoModal .modal-dialog {
-    max-width: 600px;
-    transform: scale(0.8) translateY(20px);
-    opacity: 0;
-    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-#editVideoModal.show .modal-dialog {
-    transform: scale(1) translateY(0);
-    opacity: 1;
-}
-
-#editVideoModal.show .modal-dialog {
-    animation: editModalBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
-}
-
-@keyframes editModalBounce {
-    0% {
-        transform: scale(0.9) translateY(10px);
+    /* Cute Staged Animation */
+    #editVideoModal .modal-dialog {
+        max-width: 600px;
+        transform: scale(0.8) translateY(20px);
         opacity: 0;
+        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
-    60% {
-        transform: scale(1.02) translateY(-5px);
-    }
-    100% {
+
+    #editVideoModal.show .modal-dialog {
         transform: scale(1) translateY(0);
         opacity: 1;
     }
-}
 
-/* Header */
-.edit-modal-header {
-    background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
-    border-bottom: none;
-    padding: 20px 24px;
-    position: relative;
-    overflow: hidden;
-}
-
-.edit-modal-header::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -50%;
-    width: 100%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-    pointer-events: none;
-}
-
-.edit-modal-header .btn-close {
-    position: relative;
-    z-index: 1;
-}
-
-.edit-icon-wrapper {
-    width: 48px;
-    height: 48px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 22px;
-    color: white;
-    backdrop-filter: blur(10px);
-}
-
-.edit-modal-header .modal-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: white;
-    margin: 0;
-}
-
-.edit-subtitle {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.8);
-}
-
-/* Body */
-.edit-modal-body {
-    padding: 24px;
-    background: #1a1a1a;
-}
-
-/* Progress Steps */
-.edit-steps {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 28px;
-    padding: 0 10px;
-}
-
-.edit-step {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-}
-
-.edit-step .step-circle {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: #2a2a2a;
-    border: 2px solid #404040;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-    font-size: 14px;
-    color: #888;
-    transition: all 0.3s;
-    position: relative;
-}
-
-.edit-step .step-circle i {
-    display: none;
-    font-size: 18px;
-    color: #4ade80;
-}
-
-.edit-step.active .step-circle {
-    background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
-    border-color: #e61e1e;
-    color: white;
-    box-shadow: 0 4px 15px rgba(230, 30, 30, 0.4);
-}
-
-.edit-step.completed .step-circle {
-    background: #22c55e;
-    border-color: #22c55e;
-    color: white;
-}
-
-.edit-step.completed .step-circle span {
-    display: none;
-}
-
-.edit-step.completed .step-circle i {
-    display: block;
-}
-
-.step-label {
-    font-size: 12px;
-    color: #888;
-    font-weight: 500;
-}
-
-.edit-step.active .step-label {
-    color: #e61e1e;
-}
-
-.step-line {
-    width: 60px;
-    height: 2px;
-    background: #333;
-    margin: 0 8px;
-    margin-bottom: 24px;
-    transition: background 0.3s;
-}
-
-.step-line.active {
-    background: linear-gradient(90deg, #e61e1e, #22c55e);
-}
-
-/* Step Content */
-.edit-step-content {
-    display: none;
-    animation: fadeSlideIn 0.4s ease;
-}
-
-.edit-step-content.active {
-    display: block;
-}
-
-@keyframes fadeSlideIn {
-    from {
-        opacity: 0;
-        transform: translateX(20px);
+    #editVideoModal.show .modal-dialog {
+        animation: editModalBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
     }
-    to {
-        opacity: 1;
-        transform: translateX(0);
+
+    @keyframes editModalBounce {
+        0% {
+            transform: scale(0.9) translateY(10px);
+            opacity: 0;
+        }
+
+        60% {
+            transform: scale(1.02) translateY(-5px);
+        }
+
+        100% {
+            transform: scale(1) translateY(0);
+            opacity: 1;
+        }
     }
-}
 
-/* Current Thumbnail */
-.current-thumbnail-section {
-    margin-bottom: 20px;
-}
+    /* Header */
+    .edit-modal-header {
+        background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
+        border-bottom: none;
+        padding: 20px 24px;
+        position: relative;
+        overflow: hidden;
+    }
 
-.current-thumbnail-wrapper {
-    width: 100%;
-    height: 140px;
-    border-radius: 12px;
-    overflow: hidden;
-    background: #151515;
-    border: 2px dashed #333;
-    position: relative;
-}
+    .edit-modal-header::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        right: -50%;
+        width: 100%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+        pointer-events: none;
+    }
 
-.current-thumbnail-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
+    .edit-modal-header .btn-close {
+        position: relative;
+        z-index: 1;
+    }
 
-.thumbnail-placeholder {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #555;
-}
+    .edit-icon-wrapper {
+        width: 48px;
+        height: 48px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        color: white;
+        backdrop-filter: blur(10px);
+    }
 
-.thumbnail-placeholder i {
-    font-size: 32px;
-    margin-bottom: 8px;
-}
+    .edit-modal-header .modal-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: white;
+        margin: 0;
+    }
 
-.thumbnail-placeholder span {
-    font-size: 13px;
-}
+    .edit-subtitle {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.8);
+    }
 
-.current-thumbnail-wrapper.has-thumbnail .thumbnail-placeholder {
-    display: none;
-}
-
-.current-thumbnail-wrapper.has-thumbnail .current-thumbnail-img {
-    display: block;
-}
-
-.current-thumbnail-wrapper:not(.has-thumbnail) .current-thumbnail-img {
-    display: none;
-}
-
-/* Form Elements */
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 10px;
-    font-weight: 500;
-    font-size: 14px;
-    color: #e5e5e5;
-}
-
-.form-label i {
-    color: #e61e1e;
-    font-size: 16px;
-}
-
-.form-input, .form-textarea {
-    width: 100%;
-    background: #121212;
-    border: 1px solid #333;
-    border-radius: 12px;
-    padding: 14px 16px;
-    color: #f1f1f1;
-    font-size: 14px;
-    transition: all 0.2s;
-}
-
-.form-input:focus, .form-textarea:focus {
-    outline: none;
-    border-color: #e61e1e;
-    box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.15);
-}
-
-.form-input::placeholder, .form-textarea::placeholder {
-    color: #666;
-}
-
-/* Video Type Options */
-.video-type-options {
-    display: flex;
-    gap: 12px;
-}
-
-.video-type-option {
-    flex: 1;
-    cursor: pointer;
-}
-
-.video-type-option input {
-    display: none;
-}
-
-.video-type-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 16px 12px;
-    background: #1a1a1a;
-    border: 2px solid #333;
-    border-radius: 12px;
-    transition: all 0.2s;
-}
-
-.video-type-option:hover .video-type-content {
-    border-color: #555;
-    background: #1f1f1f;
-}
-
-.video-type-option.active .video-type-content {
-    border-color: #e61e1e;
-    background: rgba(230, 30, 30, 0.1);
-}
-
-.video-type-content i {
-    font-size: 24px;
-    color: #666;
-    transition: color 0.2s;
-}
-
-.video-type-option.active .video-type-content i {
-    color: #e61e1e;
-}
-
-.video-type-content span {
-    font-size: 13px;
-    font-weight: 500;
-    color: #aaa;
-}
-
-.video-type-option.active .video-type-content span {
-    color: #e5e5e5;
-}
-
-/* Dropzone */
-.dropzone-modal {
-    border: 2px dashed #404040;
-    border-radius: 16px;
-    padding: 32px 20px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.3s;
-    position: relative;
-    background: #151515;
-}
-
-.dropzone-modal:hover {
-    border-color: #e61e1e;
-    background: rgba(230, 30, 30, 0.05);
-}
-
-.dropzone-modal.dragover {
-    border-color: #e61e1e;
-    background: rgba(230, 30, 30, 0.1);
-    transform: scale(1.01);
-}
-
-.dropzone-modal input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-}
-
-.dropzone-icon {
-    font-size: 48px;
-    color: #e61e1e;
-    margin-bottom: 12px;
-    animation: float 3s ease-in-out infinite;
-}
-
-@keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-8px); }
-}
-
-.dropzone-title {
-    color: #e5e5e5;
-    font-size: 16px;
-    font-weight: 500;
-    margin: 8px 0;
-}
-
-.dropzone-hint {
-    color: #666;
-    font-size: 13px;
-    margin: 0;
-}
-
-/* File Info */
-.file-info-modal {
-    display: none;
-    align-items: center;
-    gap: 16px;
-    padding: 16px;
-    background: #1f1f1f;
-    border-radius: 12px;
-    border: 1px solid #333;
-}
-
-.file-info-modal.active {
-    display: flex;
-}
-
-.file-preview {
-    width: 56px;
-    height: 56px;
-    background: linear-gradient(135deg, #e61e1e 0%, #ff6b6b 100%);
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    color: white;
-    overflow: hidden;
-}
-
-.file-preview.thumbnail-preview img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.file-details {
-    flex: 1;
-    text-align: left;
-}
-
-.file-details .filename {
-    color: #e5e5e5;
-    font-weight: 500;
-    font-size: 14px;
-    margin: 0 0 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 250px;
-}
-
-.file-details p {
-    color: #888;
-    font-size: 13px;
-    margin: 0;
-}
-
-.btn-remove-file {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: #333;
-    border: none;
-    color: #888;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-}
-
-.btn-remove-file:hover {
-    background: #e61e1e;
-    color: white;
-}
-
-/* Visibility Options */
-.visibility-options-modal {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.visibility-option-modal {
-    cursor: pointer;
-}
-
-.visibility-option-modal input {
-    display: none;
-}
-
-.visibility-content-modal {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 16px;
-    background: #1a1a1a;
-    border: 2px solid #333;
-    border-radius: 14px;
-    transition: all 0.2s;
-}
-
-.visibility-option-modal:hover .visibility-content-modal {
-    border-color: #555;
-    background: #1f1f1f;
-}
-
-.visibility-option-modal.active .visibility-content-modal {
-    border-color: #e61e1e;
-    background: rgba(230, 30, 30, 0.1);
-}
-
-.visibility-content-modal i {
-    font-size: 22px;
-    color: #666;
-    width: 32px;
-    text-align: center;
-    transition: color 0.2s;
-}
-
-.visibility-option-modal.active .visibility-content-modal i {
-    color: #e61e1e;
-}
-
-.visibility-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.visibility-title {
-    font-weight: 500;
-    font-size: 15px;
-    color: #e5e5e5;
-}
-
-.visibility-desc {
-    color: #777;
-    font-size: 13px;
-}
-
-/* Step Navigation */
-.step-navigation {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 24px;
-    padding-top: 20px;
-    border-top: 1px solid #2a2a2a;
-}
-
-.btn-prev, .btn-next, .btn-save-changes {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
-    border-radius: 12px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    border: none;
-}
-
-.btn-prev {
-    background: transparent;
-    border: 1px solid #404040;
-    color: #aaa;
-}
-
-.btn-prev:hover {
-    border-color: #666;
-    color: #fff;
-}
-
-.btn-next, .btn-save-changes {
-    background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
-    color: white;
-    box-shadow: 0 4px 15px rgba(230, 30, 30, 0.3);
-}
-
-.btn-next:hover, .btn-save-changes:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(230, 30, 30, 0.4);
-}
-
-.btn-next:disabled, .btn-save-changes:disabled {
-    background: #444;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-/* Status Message */
-.status-message-modal {
-    display: none;
-    padding: 14px 18px;
-    border-radius: 10px;
-    margin-top: 16px;
-    font-size: 14px;
-}
-
-.status-message-modal.success {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background: rgba(34, 197, 94, 0.15);
-    color: #4ade80;
-    border: 1px solid rgba(34, 197, 94, 0.3);
-}
-
-.status-message-modal.error {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background: rgba(239, 68, 68, 0.15);
-    color: #f87171;
-    border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-/* Responsive */
-@media (max-width: 576px) {
+    /* Body */
     .edit-modal-body {
-        padding: 20px 16px;
+        padding: 24px;
+        background: #1a1a1a;
     }
-    
+
+    /* Progress Steps */
     .edit-steps {
-        transform: scale(0.85);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 28px;
+        padding: 0 10px;
     }
-    
-    .step-line {
-        width: 30px;
-    }
-    
-    .video-type-options {
+
+    .edit-step {
+        display: flex;
         flex-direction: column;
+        align-items: center;
+        gap: 8px;
     }
-    
-    .step-navigation {
-        flex-direction: column-reverse;
+
+    .edit-step .step-circle {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: #2a2a2a;
+        border: 2px solid #404040;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 14px;
+        color: #888;
+        transition: all 0.3s;
+        position: relative;
+    }
+
+    .edit-step .step-circle i {
+        display: none;
+        font-size: 18px;
+        color: #4ade80;
+    }
+
+    .edit-step.active .step-circle {
+        background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
+        border-color: #e61e1e;
+        color: white;
+        box-shadow: 0 4px 15px rgba(230, 30, 30, 0.4);
+    }
+
+    .edit-step.completed .step-circle {
+        background: #22c55e;
+        border-color: #22c55e;
+        color: white;
+    }
+
+    .edit-step.completed .step-circle span {
+        display: none;
+    }
+
+    .edit-step.completed .step-circle i {
+        display: block;
+    }
+
+    .step-label {
+        font-size: 12px;
+        color: #888;
+        font-weight: 500;
+    }
+
+    .edit-step.active .step-label {
+        color: #e61e1e;
+    }
+
+    .step-line {
+        width: 60px;
+        height: 2px;
+        background: #333;
+        margin: 0 8px;
+        margin-bottom: 24px;
+        transition: background 0.3s;
+    }
+
+    .step-line.active {
+        background: linear-gradient(90deg, #e61e1e, #22c55e);
+    }
+
+    /* Step Content */
+    .edit-step-content {
+        display: none;
+        animation: fadeSlideIn 0.4s ease;
+    }
+
+    .edit-step-content.active {
+        display: block;
+    }
+
+    @keyframes fadeSlideIn {
+        from {
+            opacity: 0;
+            transform: translateX(20px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    /* Current Thumbnail */
+    .current-thumbnail-section {
+        margin-bottom: 20px;
+    }
+
+    .current-thumbnail-wrapper {
+        width: 100%;
+        height: 140px;
+        border-radius: 12px;
+        overflow: hidden;
+        background: #151515;
+        border: 2px dashed #333;
+        position: relative;
+    }
+
+    .current-thumbnail-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .thumbnail-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #555;
+    }
+
+    .thumbnail-placeholder i {
+        font-size: 32px;
+        margin-bottom: 8px;
+    }
+
+    .thumbnail-placeholder span {
+        font-size: 13px;
+    }
+
+    .current-thumbnail-wrapper.has-thumbnail .thumbnail-placeholder {
+        display: none;
+    }
+
+    .current-thumbnail-wrapper.has-thumbnail .current-thumbnail-img {
+        display: block;
+    }
+
+    .current-thumbnail-wrapper:not(.has-thumbnail) .current-thumbnail-img {
+        display: none;
+    }
+
+    /* Form Elements */
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 10px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #e5e5e5;
+    }
+
+    .form-label i {
+        color: #e61e1e;
+        font-size: 16px;
+    }
+
+    .form-input,
+    .form-textarea {
+        width: 100%;
+        background: #121212;
+        border: 1px solid #333;
+        border-radius: 12px;
+        padding: 14px 16px;
+        color: #f1f1f1;
+        font-size: 14px;
+        transition: all 0.2s;
+    }
+
+    .form-input:focus,
+    .form-textarea:focus {
+        outline: none;
+        border-color: #e61e1e;
+        box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.15);
+    }
+
+    .form-input::placeholder,
+    .form-textarea::placeholder {
+        color: #666;
+    }
+
+    /* Video Type Options */
+    .video-type-options {
+        display: flex;
         gap: 12px;
     }
-    
-    .btn-prev, .btn-next, .btn-save-changes {
-        width: 100%;
-        justify-content: center;
+
+    .video-type-option {
+        flex: 1;
+        cursor: pointer;
+    }
+
+    .video-type-option input {
+        display: none;
+    }
+
+    .video-type-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        padding: 16px 12px;
+        background: #1a1a1a;
+        border: 2px solid #333;
+        border-radius: 12px;
+        transition: all 0.2s;
+    }
+
+    .video-type-option:hover .video-type-content {
+        border-color: #555;
+        background: #1f1f1f;
+    }
+
+    .video-type-option.active .video-type-content {
+        border-color: #e61e1e;
+        background: rgba(230, 30, 30, 0.1);
+    }
+
+    .video-type-content i {
+        font-size: 24px;
+        color: #666;
+        transition: color 0.2s;
+    }
+
+    .video-type-option.active .video-type-content i {
+        color: #e61e1e;
+    }
+
+    .video-type-content span {
+        font-size: 13px;
+        font-weight: 500;
+        color: #aaa;
+    }
+
+    .video-type-option.active .video-type-content span {
+        color: #e5e5e5;
+    }
+
+    /* Dropzone */
+    .dropzone-modal {
+        border: 2px dashed #404040;
+        border-radius: 16px;
+        padding: 32px 20px;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s;
+        position: relative;
+        background: #151515;
+    }
+
+    .dropzone-modal:hover {
+        border-color: #e61e1e;
+        background: rgba(230, 30, 30, 0.05);
+    }
+
+    .dropzone-modal.dragover {
+        border-color: #e61e1e;
+        background: rgba(230, 30, 30, 0.1);
+        transform: scale(1.01);
+    }
+
+    .dropzone-modal input[type="file"] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+    }
+
+    .dropzone-icon {
+        font-size: 48px;
+        color: #e61e1e;
+        margin-bottom: 12px;
+        animation: float 3s ease-in-out infinite;
+    }
+
+    @keyframes float {
+
+        0%,
+        100% {
+            transform: translateY(0);
+        }
+
+        50% {
+            transform: translateY(-8px);
+        }
+    }
+
+    .dropzone-title {
+        color: #e5e5e5;
+        font-size: 16px;
+        font-weight: 500;
+        margin: 8px 0;
+    }
+
+    .dropzone-hint {
+        color: #666;
+        font-size: 13px;
+        margin: 0;
+    }
+
+    /* File Info */
+    .file-info-modal {
+        display: none;
+        align-items: center;
+        gap: 16px;
+        padding: 16px;
+        background: #1f1f1f;
+        border-radius: 12px;
+        border: 1px solid #333;
+    }
+
+    .file-info-modal.active {
+        display: flex;
+    }
+
+    .file-preview {
+        width: 56px;
+        height: 56px;
+        background: linear-gradient(135deg, #e61e1e 0%, #ff6b6b 100%);
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        color: white;
+        overflow: hidden;
+    }
+
+    .file-preview.thumbnail-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .file-details {
+        flex: 1;
+        text-align: left;
+    }
+
+    .file-details .filename {
+        color: #e5e5e5;
+        font-weight: 500;
+        font-size: 14px;
+        margin: 0 0 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 250px;
+    }
+
+    .file-details p {
+        color: #888;
+        font-size: 13px;
+        margin: 0;
+    }
+
+    .btn-remove-file {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: #333;
+        border: none;
+        color: #888;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+    }
+
+    .btn-remove-file:hover {
+        background: #e61e1e;
+        color: white;
+    }
+
+    /* Visibility Options */
+    .visibility-options-modal {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .visibility-option-modal {
+        cursor: pointer;
+    }
+
+    .visibility-option-modal input {
+        display: none;
+    }
+
+    .visibility-content-modal {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 16px;
+        background: #1a1a1a;
+        border: 2px solid #333;
+        border-radius: 14px;
+        transition: all 0.2s;
+    }
+
+    .visibility-option-modal:hover .visibility-content-modal {
+        border-color: #555;
+        background: #1f1f1f;
+    }
+
+    .visibility-option-modal.active .visibility-content-modal {
+        border-color: #e61e1e;
+        background: rgba(230, 30, 30, 0.1);
+    }
+
+    .visibility-content-modal i {
+        font-size: 22px;
+        color: #666;
+        width: 32px;
+        text-align: center;
+        transition: color 0.2s;
+    }
+
+    .visibility-option-modal.active .visibility-content-modal i {
+        color: #e61e1e;
+    }
+
+    .visibility-text {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .visibility-title {
+        font-weight: 500;
+        font-size: 15px;
+        color: #e5e5e5;
+    }
+
+    .visibility-desc {
+        color: #777;
+        font-size: 13px;
+    }
+
+    /* Step Navigation */
+    .step-navigation {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 24px;
+        padding-top: 20px;
+        border-top: 1px solid #2a2a2a;
+    }
+
+    .btn-prev,
+    .btn-next,
+    .btn-save-changes {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 24px;
+        border-radius: 12px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+    }
+
+    .btn-prev {
+        background: transparent;
+        border: 1px solid #404040;
+        color: #aaa;
+    }
+
+    .btn-prev:hover {
+        border-color: #666;
+        color: #fff;
+    }
+
+    .btn-next,
+    .btn-save-changes {
+        background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
+        color: white;
+        box-shadow: 0 4px 15px rgba(230, 30, 30, 0.3);
+    }
+
+    .btn-next:hover,
+    .btn-save-changes:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(230, 30, 30, 0.4);
+    }
+
+    .btn-next:disabled,
+    .btn-save-changes:disabled {
+        background: #444;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+    }
+
+    /* Status Message */
+    .status-message-modal {
+        display: none;
+        padding: 14px 18px;
+        border-radius: 10px;
+        margin-top: 16px;
+        font-size: 14px;
+    }
+
+    .status-message-modal.success {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        background: rgba(34, 197, 94, 0.15);
+        color: #4ade80;
+        border: 1px solid rgba(34, 197, 94, 0.3);
+    }
+
+    .status-message-modal.error {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+        border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+
+    /* Responsive */
+    @media (max-width: 576px) {
+        .edit-modal-body {
+            padding: 20px 16px;
+        }
+
+        .edit-steps {
+            transform: scale(0.85);
+        }
+
+        .step-line {
+            width: 30px;
+        }
+
+        .video-type-options {
+            flex-direction: column;
+        }
+
+        .step-navigation {
+            flex-direction: column-reverse;
+            gap: 12px;
+        }
+
+        .btn-prev,
+        .btn-next,
+        .btn-save-changes {
+            width: 100%;
+            justify-content: center;
+        }
     }
-}
 </style>
 
 <script>
-let currentEditStep = 1;
-const totalEditSteps = 3;
-let currentVideoId = null;
+    window.currentEditStep = window.currentEditStep ?? 1;
+    window.totalEditSteps = window.totalEditSteps ?? 3;
+    window.currentVideoId = window.currentVideoId ?? null;
 
-// Open modal and load video data
-function openEditVideoModal(videoId) {
-    currentVideoId = videoId;
-    
-    // Fetch video data
-    fetch(`/videos/${videoId}/edit`, {
-        headers: {
-            'X-CSRF-TOKEN': '{{ csrf_token() }}',
-            'Accept': 'application/json',
-            'X-Requested-With': 'XMLHttpRequest'
+    // Open modal and load video data
+    function openEditVideoModal(videoId) {
+        window.currentVideoId = videoId;
+
+        // Fetch video data
+        fetch(`/videos/${videoId}/edit`, {
+                headers: {
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    const video = data.video;
+
+                    // Set form values
+                    document.getElementById('edit-video-title').value = video.title || '';
+                    document.getElementById('edit-video-description').value = video.description || '';
+
+                    // Set thumbnail preview
+                    const thumbnailWrapper = document.getElementById('current-thumbnail-wrapper');
+                    const thumbnailImg = document.getElementById('current-thumbnail-preview');
+
+                    if (video.thumbnail) {
+                        thumbnailImg.src = video.thumbnail_url;
+                        thumbnailWrapper.classList.add('has-thumbnail');
+                    } else {
+                        thumbnailWrapper.classList.remove('has-thumbnail');
+                    }
+
+                    // Set video type
+                    const videoType = video.type || 'generic';
+                    document.querySelectorAll('.video-type-option').forEach(opt => {
+                        opt.classList.remove('active');
+                        const radio = opt.querySelector('input[type="radio"]');
+                        if (radio.value === videoType) {
+                            radio.checked = true;
+                            opt.classList.add('active');
+                        }
+                    });
+
+                    // Set visibility
+                    const visibility = video.visibility || 'public';
+                    document.querySelectorAll('.visibility-option-modal').forEach(opt => {
+                        opt.classList.remove('active');
+                        const radio = opt.querySelector('input[type="radio"]');
+                        if (radio.value === visibility) {
+                            radio.checked = true;
+                            opt.classList.add('active');
+                        }
+                    });
+
+                    // Reset file inputs
+                    document.getElementById('edit-thumbnail-default').style.display = 'block';
+                    document.getElementById('edit-thumbnail-info').classList.remove('active');
+                    document.getElementById('edit-status-message').className = 'status-message-modal';
+
+                    // Reset step to 1
+                    window.currentEditStep = 1;
+                    updateEditStepDisplay();
+
+                    // Update form action
+                    document.getElementById('edit-video-form-modal').action = `/videos/${videoId}`;
+
+                    // Show modal
+                    const modal = new bootstrap.Modal(document.getElementById('editVideoModal'));
+                    modal.show();
+
+                    setTimeout(() => {
+                        document.getElementById('editVideoModal').classList.add('show');
+                    }, 10);
+                } else {
+                    alert('Failed to load video data');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('Failed to load video data');
+            });
+    }
+
+    function closeEditVideoModal() {
+        const modalEl = document.getElementById('editVideoModal');
+        const modal = bootstrap.Modal.getInstance(modalEl);
+
+        if (modal) {
+            modal.hide();
         }
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            const video = data.video;
-            
-            // Set form values
-            document.getElementById('edit-video-title').value = video.title || '';
-            document.getElementById('edit-video-description').value = video.description || '';
-            
-            // Set thumbnail preview
-            const thumbnailWrapper = document.getElementById('current-thumbnail-wrapper');
-            const thumbnailImg = document.getElementById('current-thumbnail-preview');
-            
-            if (video.thumbnail) {
-                thumbnailImg.src = video.thumbnail_url;
-                thumbnailWrapper.classList.add('has-thumbnail');
+
+        modalEl.addEventListener('hidden.bs.modal', function() {
+            modalEl.classList.remove('show');
+            window.currentVideoId = null;
+        }, {
+            once: true
+        });
+    }
+
+    // Step Navigation
+    function editNextStep(step) {
+        // Validate current step before moving
+        if (step === 2) {
+            const title = document.getElementById('edit-video-title').value.trim();
+            if (!title) {
+                alert('Please enter a title for your video');
+                return;
+            }
+        }
+
+        window.currentEditStep = step;
+        updateEditStepDisplay();
+    }
+
+    function editPrevStep(step) {
+        window.currentEditStep = step;
+        updateEditStepDisplay();
+    }
+
+    function updateEditStepDisplay() {
+        // Update step indicators
+        document.querySelectorAll('.edit-step').forEach((el, index) => {
+            const stepNum = index + 1;
+            el.classList.remove('active', 'completed');
+
+            if (stepNum === window.currentEditStep) {
+                el.classList.add('active');
+            } else if (stepNum < window.currentEditStep) {
+                el.classList.add('completed');
+            }
+        });
+
+        // Update step lines
+        document.querySelectorAll('.step-line').forEach((el, index) => {
+            if (index < window.currentEditStep - 1) {
+                el.classList.add('active');
             } else {
-                thumbnailWrapper.classList.remove('has-thumbnail');
+                el.classList.remove('active');
             }
-            
-            // Set video type
-            const videoType = video.type || 'generic';
-            document.querySelectorAll('.video-type-option').forEach(opt => {
-                opt.classList.remove('active');
-                const radio = opt.querySelector('input[type="radio"]');
-                if (radio.value === videoType) {
-                    radio.checked = true;
-                    opt.classList.add('active');
-                }
-            });
-            
-            // Set visibility
-            const visibility = video.visibility || 'public';
-            document.querySelectorAll('.visibility-option-modal').forEach(opt => {
-                opt.classList.remove('active');
-                const radio = opt.querySelector('input[type="radio"]');
-                if (radio.value === visibility) {
-                    radio.checked = true;
-                    opt.classList.add('active');
-                }
-            });
-            
-            // Reset file inputs
-            document.getElementById('edit-thumbnail-default').style.display = 'block';
-            document.getElementById('edit-thumbnail-info').classList.remove('active');
-            document.getElementById('edit-status-message').className = 'status-message-modal';
-            
-            // Reset step to 1
-            currentEditStep = 1;
-            updateEditStepDisplay();
-            
-            // Update form action
-            document.getElementById('edit-video-form-modal').action = `/videos/${videoId}`;
-            
-            // Show modal
-            const modal = new bootstrap.Modal(document.getElementById('editVideoModal'));
-            modal.show();
-            
-            setTimeout(() => {
-                document.getElementById('editVideoModal').classList.add('show');
-            }, 10);
-        } else {
-            alert('Failed to load video data');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        alert('Failed to load video data');
-    });
-}
+        });
 
-function closeEditVideoModal() {
-    const modalEl = document.getElementById('editVideoModal');
-    const modal = bootstrap.Modal.getInstance(modalEl);
-    
-    if (modal) {
-        modal.hide();
-    }
-    
-    modalEl.addEventListener('hidden.bs.modal', function() {
-        modalEl.classList.remove('show');
-        currentVideoId = null;
-    }, { once: true });
-}
-
-// Step Navigation
-function editNextStep(step) {
-    // Validate current step before moving
-    if (step === 2) {
-        const title = document.getElementById('edit-video-title').value.trim();
-        if (!title) {
-            alert('Please enter a title for your video');
-            return;
-        }
-    }
-    
-    currentEditStep = step;
-    updateEditStepDisplay();
-}
-
-function editPrevStep(step) {
-    currentEditStep = step;
-    updateEditStepDisplay();
-}
-
-function updateEditStepDisplay() {
-    // Update step indicators
-    document.querySelectorAll('.edit-step').forEach((el, index) => {
-        const stepNum = index + 1;
-        el.classList.remove('active', 'completed');
-        
-        if (stepNum === currentEditStep) {
-            el.classList.add('active');
-        } else if (stepNum < currentEditStep) {
-            el.classList.add('completed');
-        }
-    });
-    
-    // Update step lines
-    document.querySelectorAll('.step-line').forEach((el, index) => {
-        if (index < currentEditStep - 1) {
-            el.classList.add('active');
-        } else {
+        // Update step content
+        document.querySelectorAll('.edit-step-content').forEach(el => {
             el.classList.remove('active');
-        }
-    });
-    
-    // Update step content
-    document.querySelectorAll('.edit-step-content').forEach(el => {
-        el.classList.remove('active');
-        if (parseInt(el.dataset.step) === currentEditStep) {
-            el.classList.add('active');
-        }
-    });
-}
-
-// Thumbnail dropzone handling
-const editThumbnailDropzone = document.getElementById('edit-thumbnail-dropzone');
-const editThumbnailInput = document.getElementById('edit-thumbnail-input');
-
-if (editThumbnailInput) {
-    editThumbnailInput.addEventListener('change', function() {
-        handleEditThumbnailSelect(this);
-    });
-
-    if (editThumbnailDropzone) {
-        editThumbnailDropzone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            editThumbnailDropzone.classList.add('dragover');
-        });
-
-        editThumbnailDropzone.addEventListener('dragleave', () => {
-            editThumbnailDropzone.classList.remove('dragover');
-        });
-
-        editThumbnailDropzone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            editThumbnailDropzone.classList.remove('dragover');
-            if (e.dataTransfer.files.length) {
-                editThumbnailInput.files = e.dataTransfer.files;
-                handleEditThumbnailSelect(editThumbnailInput);
+            if (parseInt(el.dataset.step) === window.currentEditStep) {
+                el.classList.add('active');
             }
         });
     }
-}
 
-function handleEditThumbnailSelect(input) {
-    if (input.files && input.files[0]) {
-        const file = input.files[0];
-        document.getElementById('edit-thumbnail-filename').textContent = file.name;
-        document.getElementById('edit-thumbnail-filesize').textContent = (file.size / 1024 / 1024).toFixed(2) + ' MB';
-        
-        // Show thumbnail preview
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            document.getElementById('edit-thumbnail-preview-img').src = e.target.result;
-        };
-        reader.readAsDataURL(file);
-        
-        document.getElementById('edit-thumbnail-default').style.display = 'none';
-        document.getElementById('edit-thumbnail-info').classList.add('active');
+    // Thumbnail dropzone handling
+    const editThumbnailDropzone = document.getElementById('edit-thumbnail-dropzone');
+    const editThumbnailInput = document.getElementById('edit-thumbnail-input');
+
+    if (editThumbnailInput) {
+        editThumbnailInput.addEventListener('change', function() {
+            handleEditThumbnailSelect(this);
+        });
+
+        if (editThumbnailDropzone) {
+            editThumbnailDropzone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                editThumbnailDropzone.classList.add('dragover');
+            });
+
+            editThumbnailDropzone.addEventListener('dragleave', () => {
+                editThumbnailDropzone.classList.remove('dragover');
+            });
+
+            editThumbnailDropzone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                editThumbnailDropzone.classList.remove('dragover');
+                if (e.dataTransfer.files.length) {
+                    editThumbnailInput.files = e.dataTransfer.files;
+                    handleEditThumbnailSelect(editThumbnailInput);
+                }
+            });
+        }
     }
-}
 
-function removeEditThumbnail(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    editThumbnailInput.value = '';
-    document.getElementById('edit-thumbnail-default').style.display = 'block';
-    document.getElementById('edit-thumbnail-info').classList.remove('active');
-}
+    function handleEditThumbnailSelect(input) {
+        if (input.files && input.files[0]) {
+            const file = input.files[0];
+            document.getElementById('edit-thumbnail-filename').textContent = file.name;
+            document.getElementById('edit-thumbnail-filesize').textContent = (file.size / 1024 / 1024).toFixed(2) +
+                ' MB';
 
-// Video type options
-const videoTypeOptions = document.querySelectorAll('.video-type-option');
-videoTypeOptions.forEach(option => {
-    const radio = option.querySelector('input[type="radio"]');
-    radio.addEventListener('change', function() {
-        videoTypeOptions.forEach(opt => opt.classList.remove('active'));
-        option.classList.add('active');
-    });
-});
+            // Show thumbnail preview
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                document.getElementById('edit-thumbnail-preview-img').src = e.target.result;
+            };
+            reader.readAsDataURL(file);
 
-// Visibility options
-const editVisibilityOptions = document.querySelectorAll('.visibility-option-modal');
-editVisibilityOptions.forEach(option => {
-    const radio = option.querySelector('input[type="radio"]');
-    radio.addEventListener('change', function() {
-        editVisibilityOptions.forEach(opt => opt.classList.remove('active'));
-        option.classList.add('active');
-    });
-});
-
-// Form submission
-document.getElementById('edit-video-form-modal').addEventListener('submit', function(e) {
-    e.preventDefault();
-    
-    const formData = new FormData(this);
-    const submitBtn = document.getElementById('edit-submit-btn');
-    
-    // Disable button and show loading
-    submitBtn.disabled = true;
-    submitBtn.innerHTML = '<i class="bi bi-arrow-repeat"></i> Saving...';
-    document.getElementById('edit-status-message').className = 'status-message-modal';
-    
-    fetch(`/videos/${currentVideoId}`, {
-        method: 'POST',
-        body: formData,
-        headers: {
-            'X-CSRF-TOKEN': '{{ csrf_token() }}',
-            'Accept': 'application/json',
-            'X-Requested-With': 'XMLHttpRequest'
+            document.getElementById('edit-thumbnail-default').style.display = 'none';
+            document.getElementById('edit-thumbnail-info').classList.add('active');
         }
-    })
-    .then(response => {
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
-        }
-        return response.json();
-    })
-    .then(data => {
-        if (data.success) {
-            document.getElementById('edit-status-message').innerHTML = '<i class="bi bi-check-circle-fill"></i> ' + data.message;
-            document.getElementById('edit-status-message').className = 'status-message-modal success';
-            
-            // Close modal and reload page after short delay
-            setTimeout(() => {
-                closeEditVideoModal();
-                window.location.reload();
-            }, 1000);
-        } else {
-            throw new Error(data.message || 'Update failed');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        document.getElementById('edit-status-message').innerHTML = '<i class="bi bi-exclamation-circle-fill"></i> ' + error.message;
-        document.getElementById('edit-status-message').className = 'status-message-modal error';
-        
-        submitBtn.disabled = false;
-        submitBtn.innerHTML = '<i class="bi bi-check-lg"></i> Save Changes';
+    }
+
+    function removeEditThumbnail(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        editThumbnailInput.value = '';
+        document.getElementById('edit-thumbnail-default').style.display = 'block';
+        document.getElementById('edit-thumbnail-info').classList.remove('active');
+    }
+
+    // Video type options
+    const videoTypeOptions = document.querySelectorAll('.video-type-option');
+    videoTypeOptions.forEach(option => {
+        const radio = option.querySelector('input[type="radio"]');
+        radio.addEventListener('change', function() {
+            videoTypeOptions.forEach(opt => opt.classList.remove('active'));
+            option.classList.add('active');
+        });
+    });
+
+    // Visibility options
+    const editVisibilityOptions = document.querySelectorAll('.visibility-option-modal');
+    editVisibilityOptions.forEach(option => {
+        const radio = option.querySelector('input[type="radio"]');
+        radio.addEventListener('change', function() {
+            editVisibilityOptions.forEach(opt => opt.classList.remove('active'));
+            option.classList.add('active');
+        });
+    });
+
+    // Form submission
+    document.getElementById('edit-video-form-modal').addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const formData = new FormData(this);
+        const submitBtn = document.getElementById('edit-submit-btn');
+
+        // Disable button and show loading
+        submitBtn.disabled = true;
+        submitBtn.innerHTML = '<i class="bi bi-arrow-repeat"></i> Saving...';
+        document.getElementById('edit-status-message').className = 'status-message-modal';
+
+        fetch(`/videos/${window.currentVideoId}`, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success) {
+                    document.getElementById('edit-status-message').innerHTML =
+                        '<i class="bi bi-check-circle-fill"></i> ' + data.message;
+                    document.getElementById('edit-status-message').className =
+                        'status-message-modal success';
+
+                    // Close modal and reload page after short delay
+                    setTimeout(() => {
+                        closeEditVideoModal();
+                        window.location.reload();
+                    }, 1000);
+                } else {
+                    throw new Error(data.message || 'Update failed');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                document.getElementById('edit-status-message').innerHTML =
+                    '<i class="bi bi-exclamation-circle-fill"></i> ' + error.message;
+                document.getElementById('edit-status-message').className = 'status-message-modal error';
+
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = '<i class="bi bi-check-lg"></i> Save Changes';
+            });
     });
-});
 </script>
diff --git a/resources/views/videos/partials/comment.blade.php b/resources/views/videos/partials/comment.blade.php
index 23d9768..32ce7b6 100644
--- a/resources/views/videos/partials/comment.blade.php
+++ b/resources/views/videos/partials/comment.blade.php
@@ -1,46 +1,69 @@
 <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-{{ $comment->id }}">
-    <img src="{{ $comment->user->avatar_url }}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="{{ $comment->user->name }}">
+    <img src="{{ $comment->user->avatar_url }}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;"
+        alt="{{ $comment->user->name }}">
     <div style="flex: 1;">
         <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
             <span style="font-weight: 600; font-size: 14px;">{{ $comment->user->name }}</span>
-            <span style="color: var(--text-secondary); font-size: 12px;">{{ $comment->created_at->diffForHumans() }}</span>
+            <span
+                style="color: var(--text-secondary); font-size: 12px;">{{ $comment->created_at->diffForHumans() }}</span>
         </div>
         <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
             {{ $comment->body }}
         </div>
+        @auth
+            @if (Auth::id() === $comment->user_id)
+                <div id="commentEditWrap{{ $comment->id }}" style="display:none; margin-top:8px;">
+                    <textarea id="commentEditInput{{ $comment->id }}" class="form-control" rows="3"
+                        style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px; width: 100%; resize: vertical; font-size: 14px;">{{ $comment->body }}</textarea>
+                    <div style="display:flex; gap:8px; justify-content:flex-end; margin-top:8px;">
+                        <button type="button" class="yt-action-btn" style="font-size: 12px; padding: 6px 12px;"
+                            onclick="cancelEditComment({{ $comment->id }})">Cancel</button>
+                        <button type="button" class="yt-action-btn"
+                            style="background: var(--brand-red); color: white; font-size: 12px; padding: 6px 12px;"
+                            onclick="saveEditComment({{ $comment->id }})">Save</button>
+                    </div>
+                </div>
+            @endif
+        @endauth
         <div style="display: flex; gap: 12px; margin-top: 8px;">
             @auth
-                <button onclick="toggleReplyForm({{ $comment->id }})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                <button onclick="toggleReplyForm({{ $comment->id }})"
+                    style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
                     Reply
                 </button>
-                @if(Auth::id() === $comment->user_id)
-                    <button onclick="deleteComment({{ $comment->id }})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                @if (Auth::id() === $comment->user_id)
+                    <button onclick="startEditComment({{ $comment->id }})"
+                        style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                        Edit
+                    </button>
+                    <button onclick="deleteComment({{ $comment->id }})"
+                        style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
                         Delete
                     </button>
                 @endif
             @endauth
         </div>
-        
+
         <!-- Reply Form -->
         <div id="replyForm{{ $comment->id }}" style="display: none; margin-top: 12px;">
             <div style="display: flex; gap: 8px;">
-                <textarea 
-                    class="form-control" 
-                    placeholder="Write a reply..."
-                    rows="2"
-                    style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px; width: 100%; resize: none; font-size: 14px;"
-                ></textarea>
+                <textarea class="form-control" placeholder="Write a reply..." rows="2"
+                    style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px; width: 100%; resize: none; font-size: 14px;"></textarea>
             </div>
             <div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
-                <button type="button" class="yt-action-btn" style="font-size: 12px; padding: 6px 12px;" onclick="toggleReplyForm({{ $comment->id }})">Cancel</button>
-                <button type="button" class="yt-action-btn" style="background: var(--brand-red); color: white; font-size: 12px; padding: 6px 12px;" onclick="submitReply({{ $video->id ?? $comment->video_id }}, {{ $comment->id }})">Reply</button>
+                <button type="button" class="yt-action-btn" style="font-size: 12px; padding: 6px 12px;"
+                    onclick="toggleReplyForm({{ $comment->id }})">Cancel</button>
+                <button type="button" class="yt-action-btn"
+                    style="background: var(--brand-red); color: white; font-size: 12px; padding: 6px 12px;"
+                    onclick="submitReply({{ $video->id ?? $comment->video_id }}, {{ $comment->id }})">Reply</button>
             </div>
         </div>
-        
+
         <!-- Replies -->
-        @if($comment->replies && $comment->replies->count() > 0)
-            <div style="margin-left: 24px; margin-top: 12px; border-left: 2px solid var(--border-color); padding-left: 12px;">
-                @foreach($comment->replies as $reply)
+        @if ($comment->replies && $comment->replies->count() > 0)
+            <div
+                style="margin-left: 24px; margin-top: 12px; border-left: 2px solid var(--border-color); padding-left: 12px;">
+                @foreach ($comment->replies as $reply)
                     @include('videos.partials.comment', ['comment' => $reply, 'video' => $video ?? null])
                 @endforeach
             </div>
@@ -49,8 +72,64 @@
 </div>
 
 <script>
-function toggleReplyForm(commentId) {
-    const form = document.getElementById('replyForm' + commentId);
-    form.style.display = form.style.display === 'none' ? 'block' : 'none';
-}
+    function toggleReplyForm(commentId) {
+        const form = document.getElementById('replyForm' + commentId);
+        form.style.display = form.style.display === 'none' ? 'block' : 'none';
+    }
+
+    function startEditComment(commentId) {
+        const wrap = document.getElementById('commentEditWrap' + commentId);
+        const body = document.querySelector('#comment-' + commentId + ' .comment-body');
+        const input = document.getElementById('commentEditInput' + commentId);
+        if (!wrap || !body || !input) return;
+
+        input.value = body.textContent.trim();
+        wrap.style.display = 'block';
+        body.style.display = 'none';
+    }
+
+    function cancelEditComment(commentId) {
+        const wrap = document.getElementById('commentEditWrap' + commentId);
+        const body = document.querySelector('#comment-' + commentId + ' .comment-body');
+        if (wrap) wrap.style.display = 'none';
+        if (body) body.style.display = 'block';
+    }
+
+    async function saveEditComment(commentId) {
+        const input = document.getElementById('commentEditInput' + commentId);
+        const bodyEl = document.querySelector('#comment-' + commentId + ' .comment-body');
+        const wrap = document.getElementById('commentEditWrap' + commentId);
+        if (!input || !bodyEl || !wrap) return;
+
+        const body = input.value.trim();
+        if (!body) return;
+
+        try {
+            const res = await fetch(`/comments/${commentId}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: JSON.stringify({
+                    body
+                })
+            });
+
+            const data = await res.json();
+            if (res.ok) {
+                bodyEl.textContent = data.body || body;
+                bodyEl.dataset.timeEnhanced = '';
+                if (typeof enhanceCommentBodyWithTimeBadges === 'function') {
+                    enhanceCommentBodyWithTimeBadges(document.getElementById('comment-' + commentId));
+                }
+                wrap.style.display = 'none';
+                bodyEl.style.display = 'block';
+            } else {
+                alert(data.error || 'Failed to update comment');
+            }
+        } catch (e) {
+            alert('Failed to update comment: ' + e.message);
+        }
+    }
 </script>
diff --git a/resources/views/videos/types/backup/generic.blade.php b/resources/views/videos/types/backup/generic.blade.php
new file mode 100644
index 0000000..6d36a5f
--- /dev/null
+++ b/resources/views/videos/types/backup/generic.blade.php
@@ -0,0 +1,1116 @@
+@extends('layouts.app')
+
+@section('title', $video->title . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* Video Section */
+        .yt-video-section {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* Video Player */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait {
+            aspect-ratio: 9/16;
+            max-width: 50vh;
+        }
+
+        .video-container.square {
+            aspect-ratio: 1/1;
+            max-width: 70vh;
+        }
+
+        .video-container.ultrawide {
+            aspect-ratio: 21/9;
+            max-width: 100%;
+        }
+
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        /* Playlist Navigation Controls */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible {
+            opacity: 1;
+        }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .playlist-nav-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .playlist-nav-btn:disabled:hover {
+            background: transparent;
+        }
+
+        .playlist-nav-btn i {
+            font-size: 20px;
+        }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* Autoplay Toggle */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch {
+            position: relative;
+            width: 36px;
+            height: 20px;
+        }
+
+        .autoplay-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider {
+            background-color: var(--brand-red);
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider:before {
+            transform: translateX(16px);
+        }
+
+        /* Keyboard hint */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* Video Info */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            color: var(--text-secondary);
+        }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover {
+            background: var(--border-color);
+        }
+
+        .action-btn,
+        .comments-section .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+
+        .action-btn:hover,
+        .comments-section .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .action-btn:active,
+        .comments-section .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .action-btn svg,
+        .action-btn i,
+        .comments-section .action-btn svg,
+        .comments-section .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .action-btn.comment-btn {
+            background: var(--brand-red);
+            color: white;
+            border-color: var(--brand-red);
+        }
+
+        .yt-action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        /* Channel Row */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+            white-space: nowrap;
+        }
+
+        .subscribe-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .mobile-action-dropdown {
+            display: none;
+            position: relative;
+        }
+
+        .mobile-action-dropdown .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 200px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 10px;
+            padding: 6px 0;
+            z-index: 1200;
+        }
+
+        .mobile-action-dropdown .dropdown-item {
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            padding: 8px 12px;
+            background: transparent;
+            border: none;
+            width: 100%;
+            text-align: left;
+        }
+
+        .mobile-action-dropdown .dropdown-item:hover {
+            background: var(--border-color);
+        }
+
+        /* Description */
+        .video-description {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 16px;
+        }
+
+        .description-text {
+            white-space: pre-wrap;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        /* Sidebar */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .sidebar-video-card {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+        }
+
+        .sidebar-thumb {
+            width: 168px;
+            aspect-ratio: 16/9;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #1a1a1a;
+            flex-shrink: 0;
+        }
+
+        .sidebar-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .sidebar-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .sidebar-title {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .sidebar-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        /* Responsive */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container {
+                width: 300px;
+            }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main {
+                margin-left: 0;
+                flex-direction: column;
+            }
+
+            .yt-sidebar-container {
+                width: 100%;
+            }
+
+            .sidebar-video-card {
+                flex-direction: column;
+            }
+
+            .sidebar-thumb {
+                width: 100%;
+            }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .video-actions {
+                width: 100%;
+                overflow-x: auto;
+                justify-content: flex-start;
+            }
+
+            .yt-main {
+                padding: 12px !important;
+            }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+
+            .video-container video {
+                object-fit: contain !important;
+            }
+
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+
+            .channel-info {
+                width: 100%;
+            }
+
+            .subscribe-btn {
+                width: 100%;
+            }
+
+            .video-description {
+                padding: 12px !important;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if ($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif"
+                id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
+                </video>
+
+                <!-- Playlist Navigation Controls (only show when in playlist) -->
+                @if ($nextVideo || $previousVideo)
+                    <div class="playlist-controls" id="playlistControls">
+                        <!-- Previous Video -->
+                        @if ($previousVideo)
+                            <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                            <span class="playlist-nav-label">{{ Str::limit($previousVideo->title, 20) }}</span>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                        @endif
+
+                        <!-- Autoplay Toggle -->
+                        <div class="autoplay-toggle">
+                            <label for="autoplayToggle">Autoplay</label>
+                            <label class="autoplay-switch">
+                                <input type="checkbox" id="autoplayToggle" checked>
+                                <span class="autoplay-slider"></span>
+                            </label>
+                        </div>
+
+                        <!-- Next Video -->
+                        @if ($nextVideo)
+                            <span class="playlist-nav-label">{{ Str::limit($nextVideo->title, 20) }}</span>
+                            <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @endif
+                    </div>
+                    <div class="keyboard-hint">
+                        <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                    </div>
+                @endif
+            </div>
+
+            <!-- Video Title with Film Icon (Generic Type) -->
+            <h1 class="video-title" style="display: flex; align-items: center; gap: 10px; margin: 8px 0 6px;">
+                <i class="bi bi-film" style="color: #ef4444;"></i>
+                <span>{{ $video->title }}</span>
+            </h1>
+
+            <!-- Stats Row - Hidden, shown in description box -->
+            <div class="video-stats-row" style="display: none;">
+                <div class="video-stats-left">
+                    <span>{{ number_format($video->view_count) }} views</span>
+                    <span>•</span>
+                    <span>{{ $video->created_at->format('M d, Y') }}</span>
+                </div>
+            </div>
+
+            <!-- Channel Row - All in one line -->
+            <div class="channel-row"
+                style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none"
+                        style="color: inherit; display: flex; align-items: center; gap: 12px;">
+                        @if ($video->user)
+                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar"
+                                style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
+                        @else
+                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+                        @endif
+                        <div>
+                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
+                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">
+                                {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="video-actions"
+                    style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow: visible;">
+                    @auth
+                        @if (Auth::id() !== $video->user_id)
+                            <button class="subscribe-btn desktop-action">
+                                <i class="bi bi-bell"></i>
+                                <span>Subscribe</span>
+                            </button>
+                        @else
+                            <!-- Edit button only in mobile dropdown now -->
+                        @endif
+                    @else
+                        <a href="{{ route('login') }}" class="subscribe-btn desktop-action">
+                            <i class="bi bi-bell"></i>
+                            <span>Subscribe</span>
+                        </a>
+                    @endauth
+
+                    @auth
+                        <form method="POST"
+                            action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                            class="d-inline">
+                            @csrf
+                            <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
+                                <i
+                                    class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+                            </button>
+                        </form>
+                    @else
+                        <a href="{{ route('login') }}" class="yt-action-btn">
+                            <i class="bi bi-hand-thumbs-up"></i> Like
+                        </a>
+                    @endauth
+
+                    @if ($video->isShareable())
+                        <button class="action-btn"
+                            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
+                            <i class="bi bi-share"></i> Share
+                        </button>
+                    @endif
+
+                    <!-- Save to Playlist Button -->
+                    <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                        </svg>
+                        <span>Save</span>
+                    </button>
+
+
+                </div>
+            </div>
+
+            <!-- Description Box -->
+            @if ($video->description)
+                @php
+                    $fullDescription = $video->description;
+                    $shortDescription = Str::limit($fullDescription, 200);
+                    $needsExpand = strlen($fullDescription) > 200;
+                @endphp
+
+                <div class="video-description-box"
+                    style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-bottom: 16px;">
+                    <div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
+                        <span>{{ number_format($video->view_count) }} views</span>
+                        <span>•</span>
+                        <span>{{ $video->created_at->format('M d, Y') }}</span>
+                    </div>
+                    <div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
+                    <div class="description-content" id="descriptionContent">
+                        @if ($needsExpand)
+                            <div class="description-short" id="descShort">
+                                <span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
+                                <span class="description-ellipsis" style="color: var(--text-secondary);">... </span>
+                            </div>
+                            <div class="description-full" id="descFull" style="display: none;">
+                                <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                            </div>
+                            <button onclick="toggleDescription()" id="descToggleBtn"
+                                style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">
+                                Show more
+                            </button>
+                        @else
+                            <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                        @endif
+                    </div>
+                </div>
+
+                <script>
+                    function toggleDescription() {
+                        const descShort = document.getElementById('descShort');
+                        const descFull = document.getElementById('descFull');
+                        const toggleBtn = document.getElementById('descToggleBtn');
+
+                        if (descShort.style.display !== 'none') {
+                            descShort.style.display = 'none';
+                            descFull.style.display = 'block';
+                            toggleBtn.textContent = 'Show less';
+                        } else {
+                            descShort.style.display = 'block';
+                            descFull.style.display = 'none';
+                            toggleBtn.textContent = 'Show more';
+                        }
+                    }
+                </script>
+
+                <style>
+                    .video-description-box .description-text {
+                        font-size: 14px;
+                        line-height: 1.5;
+                        color: var(--text-primary);
+                    }
+
+                    .video-description-box .description-text p {
+                        margin-bottom: 8px;
+                    }
+
+                    .video-description-box .description-text a {
+                        color: #3ea6ff;
+                    }
+                </style>
+            @endif
+
+            <!-- Comment Section -->
+            <div class="comments-section"
+                style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                    Comments <span
+                        style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
+                </h3>
+
+                @auth
+                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                            alt="{{ Auth::user()->name }}">
+                        <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                            <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
+                                rows="1"
+                                style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                            <button type="button" class="action-btn"
+                                onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
+                                <i class="bi bi-x-lg"></i>
+                                <span>Cancel</span>
+                            </button>
+                            <button type="button" class="action-btn comment-btn"
+                                onclick="submitComment({{ $video->id }})" style="flex-shrink: 0;">
+                                <i class="bi bi-chat-dots"></i>
+                                <span>Comment</span>
+                            </button>
+                        </div>
+                    </div>
+                @else
+                    <div
+                        style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                    </div>
+                @endauth
+
+                <div id="commentsList">
+                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                        @include('videos.partials.comment', ['comment' => $comment])
+                    @empty
+                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the
+                            first to comment!</p>
+                    @endforelse
+                </div>
+            </div>
+
+            <script>
+                function submitComment(videoId) {
+                    const body = document.getElementById('commentBody').value.trim();
+                    if (!body) return;
+
+                    fetch(`/videos/${videoId}/comments`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                            },
+                            body: JSON.stringify({
+                                body: body
+                            })
+                        })
+                        .then(response => response.json())
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Failed to post comment: ' + error);
+                        })
+                        .then(data => {
+                            if (data && data.success) {
+                                document.getElementById('commentBody').value = '';
+                                addCommentToList(data.comment);
+                            } else {
+                                alert('Failed to post comment');
+                            }
+                        });
+                }
+
+                function addCommentToList(comment) {
+                    const commentsList = document.getElementById('commentsList');
+                    const commentHtml = `
+                    <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
+                        <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
+                        <div style="flex: 1;">
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+                                <span style="font-weight: 600; font-size: 14px;">${comment.user.name}</span>
+                                <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
+                            </div>
+                            <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
+                                ${comment.body.replace(/@(\\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>')}
+                            </div>
+                            <div style="display: flex; gap: 12px; margin-top: 8px;">
+                                <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                                    Reply
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                    commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                    const commentCount = document.querySelector('h3 span');
+                    if (commentCount) {
+                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                        commentCount.textContent = `(${count})`;
+                    }
+                }
+
+                function deleteComment(commentId) {
+                    if (confirm('Are you sure you want to delete this comment?')) {
+                        fetch(`/comments/${commentId}`, {
+                                method: 'DELETE',
+                                headers: {
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                }
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    document.getElementById('comment-' + commentId).remove();
+                                    const commentCount = document.querySelector('h3 span');
+                                    if (commentCount) {
+                                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                        commentCount.textContent = `(${count})`;
+                                    }
+                                }
+                            });
+                    }
+                }
+
+                document.addEventListener('DOMContentLoaded', function() {
+                    const commentTexts = document.querySelectorAll('.comment-body');
+                    commentTexts.forEach(text => {
+                        const html = text.innerHTML.replace(/@(\w+)/g,
+                            '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                        text.innerHTML = html;
+                    });
+                });
+
+                function submitReply(videoId, parentId) {
+                    const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                    const body = textarea.value.trim();
+                    if (!body) return;
+
+                    fetch(`/videos/${videoId}/comments`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                            },
+                            body: JSON.stringify({
+                                body: body,
+                                parent_id: parentId
+                            })
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                location.reload();
+                            }
+                        });
+                }
+            </script>
+        </div>
+
+        <!-- Sidebar - Up Next / Recommendations -->
+        <div class="yt-sidebar-container">
+            @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                    <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                    {{ $playlist->name }}
+                    <span
+                        style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                        videos)</span>
+                </h3>
+                <div class="recommended-videos-list">
+                    @foreach ($playlistVideos as $index => $playlistVideo)
+                        @if ($playlistVideo->id !== $video->id)
+                            <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                                onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                                <div class="sidebar-thumb" style="position: relative;">
+                                    @if ($playlistVideo->thumbnail)
+                                        <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                            alt="{{ $playlistVideo->title }}">
+                                    @else
+                                        <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                            alt="{{ $playlistVideo->title }}">
+                                    @endif
+                                    @if ($playlistVideo->duration)
+                                        <span
+                                            class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                    @endif
+                                    @if ($playlistVideo->is_shorts)
+                                        <span class="yt-shorts-badge"
+                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                            <i class="bi bi-collection-play-fill"></i> SHORTS
+                                        </span>
+                                    @endif
+                                    <!-- Playlist position indicator -->
+                                    <span
+                                        style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                        {{ $index + 1 }}
+                                    </span>
+                                </div>
+                                <div class="sidebar-info">
+                                    <div class="sidebar-title">
+                                        <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                        {{ Str::limit($playlistVideo->title, 60) }}
+                                    </div>
+                                    <div class="sidebar-meta">
+                                        <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                        <div>{{ number_format($playlistVideo->view_count) }} views •
+                                            {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        @endif
+                    @endforeach
+                </div>
+                @if ($playlist->canEdit(Auth::user()))
+                    <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                        style="margin-top: 12px; display: inline-block;">
+                        <i class="bi bi-pencil"></i> Edit Playlist
+                    </a>
+                @endif
+            @else
+                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                    <div class="recommended-videos-list">
+                        @foreach ($recommendedVideos as $recVideo)
+                            <div class="sidebar-video-card"
+                                onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                                <div class="sidebar-thumb">
+                                    @if ($recVideo->thumbnail)
+                                        <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                            alt="{{ $recVideo->title }}">
+                                    @else
+                                        <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                            alt="{{ $recVideo->title }}">
+                                    @endif
+                                    @if ($recVideo->duration)
+                                        <span class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                    @endif
+                                    @if ($recVideo->is_shorts)
+                                        <span class="yt-shorts-badge"
+                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                            <i class="bi bi-collection-play-fill"></i> SHORTS
+                                        </span>
+                                    @endif
+                                </div>
+                                <div class="sidebar-info">
+                                    <div class="sidebar-title">
+                                        <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                        {{ Str::limit($recVideo->title, 60) }}
+                                    </div>
+                                    <div class="sidebar-meta">
+                                        <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                        <div>{{ number_format($recVideo->view_count) }} views •
+                                            {{ $recVideo->created_at->diffForHumans() }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                @else
+                    <div class="text-secondary">No recommendations available yet. Check back later!</div>
+                @endif
+            @endif
+        </div>
+
+    </div>
+
+    @include('layouts.partials.share-modal')
+    @include('layouts.partials.edit-video-modal')
+
+    @if (Session::has('openEditModal') && Session::get('openEditModal'))
+        @auth
+            <script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    openEditVideoModal({{ $video->id }});
+                });
+            </script>
+        @endauth
+    @endif
+
+    <script>
+        // Playlist navigation URLs
+        const previousVideoUrl = @json($previousVideo ? route('videos.show', $previousVideo->id) . '?playlist=' . $playlist->id : null);
+        const nextVideoUrl = @json($nextVideo ? route('videos.show', $nextVideo->id) . '?playlist=' . $playlist->id : null);
+
+        // Autoplay management
+        let autoplayEnabled = true;
+
+        document.addEventListener('DOMContentLoaded', function() {
+            var videoPlayer = document.getElementById('videoPlayer');
+            var playlistControls = document.getElementById('playlistControls');
+            var autoplayToggle = document.getElementById('autoplayToggle');
+
+            if (videoPlayer) {
+                videoPlayer.volume = 0.5;
+                var playPromise = videoPlayer.play();
+                if (playPromise !== undefined) {
+                    playPromise.then(function() {
+                        console.log('Video autoplayed');
+                    }).catch(function(error) {
+                        console.log('Autoplay blocked');
+                    });
+                }
+
+                // Handle video ended - autoplay next
+                if (nextVideoUrl) {
+                    videoPlayer.addEventListener('ended', function() {
+                        if (autoplayEnabled) {
+                            console.log('Video ended, going to next...');
+                            window.location.href = nextVideoUrl;
+                        }
+                    });
+                }
+            }
+
+            // Show playlist controls on hover
+            if (playlistControls) {
+                const videoContainer = document.getElementById('videoContainer');
+                videoContainer.addEventListener('mouseenter', function() {
+                    playlistControls.classList.add('visible');
+                });
+                videoContainer.addEventListener('mouseleave', function() {
+                    playlistControls.classList.remove('visible');
+                });
+
+                // Initially show for a few seconds
+                setTimeout(function() {
+                    playlistControls.classList.add('visible');
+                }, 2000);
+                setTimeout(function() {
+                    playlistControls.classList.remove('visible');
+                }, 6000);
+            }
+
+            // Autoplay toggle handler
+            if (autoplayToggle) {
+                autoplayToggle.addEventListener('change', function() {
+                    autoplayEnabled = this.checked;
+                    localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                });
+
+                // Load saved preference
+                const savedAutoplay = localStorage.getItem('playlistAutoplay');
+                if (savedAutoplay !== null) {
+                    autoplayEnabled = savedAutoplay === '1';
+                    autoplayToggle.checked = autoplayEnabled;
+                }
+            }
+
+            // Keyboard navigation
+            document.addEventListener('keydown', function(e) {
+                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+                    return;
+                }
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    goToPreviousVideo();
+                } else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    goToNextVideo();
+                }
+            });
+        });
+
+        function goToPreviousVideo() {
+            if (previousVideoUrl) {
+                window.location.href = previousVideoUrl;
+            }
+        }
+
+        function goToNextVideo() {
+            if (nextVideoUrl) {
+                window.location.href = nextVideoUrl;
+            }
+        }
+    </script>
+@endsection
diff --git a/resources/views/videos/types/backup/match.blade.php b/resources/views/videos/types/backup/match.blade.php
new file mode 100644
index 0000000..cc7e82a
--- /dev/null
+++ b/resources/views/videos/types/backup/match.blade.php
@@ -0,0 +1,4184 @@
+@extends('layouts.app')
+@section('title', ($video->title ?? 'Match Video') . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* ===== Video Section ===== */
+        .yt-video-section {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* ===== Sidebar (copied from music.blade.php) ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .sidebar-video-card {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+        }
+
+        .sidebar-thumb {
+            width: 168px;
+            aspect-ratio: 16/9;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #1a1a1a;
+            flex-shrink: 0;
+        }
+
+        .sidebar-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .sidebar-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .sidebar-title {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .sidebar-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        /* ===== Video Player ===== */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait {
+            aspect-ratio: 9/16;
+            max-width: 50vh;
+        }
+
+        .video-container.square {
+            aspect-ratio: 1/1;
+            max-width: 70vh;
+        }
+
+        .video-container.ultrawide {
+            aspect-ratio: 21/9;
+            max-width: 100%;
+        }
+
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        /* Coach note overlay (subtitle-style) */
+        .coach-note-overlay {
+            position: absolute;
+            left: 50%;
+            bottom: 48px;
+            transform: translateX(-50%);
+            max-width: min(80%, 900px);
+            width: fit-content;
+            padding: 10px 14px;
+            border-radius: 8px;
+            background: rgba(0, 0, 0, 0.68);
+            color: #fff;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 1.35;
+            text-align: center;
+            z-index: 14;
+            box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            display: none;
+            pointer-events: none;
+            backdrop-filter: blur(3px);
+        }
+
+        .coach-note-overlay.show {
+            display: block;
+        }
+
+        /* Match Highlights Toggle Button */
+        .match-highlights-toggle {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.85);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 16px;
+            width: 64px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            z-index: 15;
+            transition: all 0.2s ease;
+            backdrop-filter: blur(12px);
+            font-size: 9px;
+            font-weight: 600;
+            letter-spacing: 0.2px;
+            padding: 0 6px;
+        }
+
+        .match-highlights-toggle:hover {
+            background: rgba(255, 255, 255, 0.12);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-1px);
+        }
+
+        /* No rotation animation */
+
+        /* Hide sidebar by default */
+        .events-sidebar {
+            display: none;
+        }
+
+        .events-sidebar.show {
+            display: flex;
+        }
+
+        /* ===== Playlist Navigation Controls ===== */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible {
+            opacity: 1;
+        }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .playlist-nav-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .playlist-nav-btn:disabled:hover {
+            background: transparent;
+        }
+
+        .playlist-nav-btn i {
+            font-size: 20px;
+        }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* ===== Autoplay Toggle ===== */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch {
+            position: relative;
+            width: 36px;
+            height: 20px;
+        }
+
+        .autoplay-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider {
+            background-color: var(--brand-red);
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider:before {
+            transform: translateX(16px);
+        }
+
+        /* ===== Keyboard Hint ===== */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* ===== Video Info ===== */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            color: var(--text-secondary);
+        }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover {
+            background: var(--border-color);
+        }
+
+        .yt-action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        /* ===== Channel Row ===== */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+            white-space: nowrap;
+        }
+
+        .subscribe-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .mobile-action-dropdown {
+            display: none;
+            position: relative;
+        }
+
+        .mobile-action-dropdown .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 200px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 10px;
+            padding: 6px 0;
+            z-index: 1200;
+        }
+
+        .mobile-action-dropdown .dropdown-item {
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            padding: 8px 12px;
+            background: transparent;
+            border: none;
+            width: 100%;
+            text-align: left;
+        }
+
+        .mobile-action-dropdown .dropdown-item:hover {
+            background: var(--border-color);
+        }
+
+        /* ===== Event Header ===== */
+        .event-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-top: 16px;
+            padding: 12px 0;
+        }
+
+        .event-header-left {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-logo {
+            width: 56px;
+            height: 56px;
+            border-radius: 14px;
+            overflow: hidden;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .event-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .event-text {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-text .title {
+            font-size: 1.4rem;
+            margin: 0;
+            line-height: 1.3;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .event-text .title .trophy-icon {
+            color: #ef4444;
+            font-size: 1.2rem;
+        }
+
+        .event-text .title a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .event-text .title a:hover {
+            text-decoration: underline;
+            opacity: 0.85;
+        }
+
+        .event-text .meta-link {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .event-text .meta-link:hover {
+            color: var(--brand-red);
+        }
+
+        .event-text .meta-link a {
+            color: inherit;
+            font-weight: bold;
+            text-decoration: none;
+        }
+
+        .event-text .meta-link a:hover {
+            text-decoration: underline;
+        }
+
+        .event-header-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+
+        .event-header-actions .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .event-header-actions .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .event-header-actions .action-btn svg,
+        .event-header-actions .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        .action-btn,
+        .action-btn a,
+        .comment-section .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+            text-decoration: none;
+        }
+
+        .action-btn:hover,
+        .action-btn a:hover,
+        .comment-section .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+            text-decoration: none;
+        }
+
+        .action-btn:active,
+        .comment-section .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .action-btn svg,
+        .action-btn i,
+        .comment-section .action-btn svg,
+        .comment-section .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .action-btn.comment-btn {
+            background: var(--brand-red);
+            color: white;
+            border-color: var(--brand-red);
+        }
+
+        .event-header-actions .action-btn.disliked {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.15);
+            border-color: #ef4444;
+        }
+
+        .event-header-actions .action-btn.saved {
+            color: #f59e0b;
+            background: rgba(245, 158, 11, 0.15);
+            border-color: #f59e0b;
+        }
+
+        .event-header-actions .action-btn.subscribed {
+            color: #ffffff;
+            background: #6b7280;
+            border-color: #6b7280;
+        }
+
+        /* Video Owner Badge */
+        .video-owner-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
+        .video-owner-badge .owner-avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+
+        .video-owner-badge .owner-name {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+
+        /* ===== Description Panel ===== */
+        .description-panel {
+            margin-top: 16px;
+            border-radius: 12px;
+            padding: 8px 10px 10px;
+        }
+
+        .description-toggle {
+            width: 100%;
+            border: none;
+            background: transparent;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            cursor: pointer;
+            padding: 4px 0;
+        }
+
+        .description-toggle:hover {
+            color: #ffffff;
+        }
+
+        .description-body {
+            margin-top: 6px;
+            display: none;
+        }
+
+        .description-body.open {
+            display: block;
+        }
+
+        /* ===== Match Card ===== */
+        .match-card {
+            margin-top: 16px;
+            padding: 16px 18px;
+            border-radius: 14px;
+            border: 1px solid var(--border-color);
+            background: var(--bg-secondary);
+        }
+
+        .match-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .match-label {
+            font-size: 1.2rem;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--text-primary);
+            text-align: center;
+            font-weight: 600;
+        }
+
+        .fighters-row {
+            display: grid;
+            grid-template-columns: 1.1fr 0.8fr 1.1fr;
+            align-items: stretch;
+            gap: 16px;
+        }
+
+        .fighter-card {
+            border-radius: 14px;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .fighter-top {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+        }
+
+        .fighter-photo {
+            width: 110px;
+            height: 145px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .fighter-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .fighter-logo {
+            width: 64px;
+            height: 64px;
+            border-radius: 20px;
+            overflow: hidden;
+            background: var(--bg-primary);
+        }
+
+        .fighter-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .fighter-badge {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.12em;
+            padding: 3px 8px;
+            border-radius: 999px;
+            border: 1px solid #404040;
+            color: var(--text-primary);
+        }
+
+        .fighter-badge.blue {
+            background: rgba(37, 99, 235, 0.15);
+            border-color: #1d4ed8;
+        }
+
+        .fighter-badge.red {
+            background: rgba(239, 68, 68, 0.14);
+            border-color: #b91c1c;
+        }
+
+        .fighter-name.blue-corner {
+            color: #2563eb;
+            font-weight: bold;
+        }
+
+        .fighter-name.red-corner {
+            color: #ef4444;
+            font-weight: bold;
+        }
+
+        .fighter-name a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-name a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-info {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            width: 100%;
+            text-align: center;
+            font-size: 0.8rem;
+        }
+
+        .fighter-name {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .fighter-team {
+            color: var(--text-secondary);
+        }
+
+        .fighter-team a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-team a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-country {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .fighter-country-flag {
+            font-size: 0.9rem;
+        }
+
+        .match-center {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+        }
+
+        .score-pill {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+        }
+
+        .score-number {
+            font-size: 2rem;
+            font-weight: 700;
+        }
+
+        .score-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .referee-block {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .referee-photo {
+            width: 80px;
+            height: 115px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .referee-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .referee-block a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .referee-block a:hover {
+            text-decoration: underline;
+        }
+
+        .ref-label {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+        }
+
+        .match-footer {
+            margin-top: 12px;
+            font-size: 0.8rem;
+            color: #666666;
+            text-align: center;
+        }
+
+        .hall-link {
+            color: #e61e1e;
+            font-weight: 600;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .hall-link:hover {
+            color: #ff4757;
+            text-decoration: underline;
+        }
+
+        /* ===== Markdown Body ===== */
+        .markdown-body {
+            font-size: 0.95rem;
+            line-height: 1.6;
+            margin-top: 16px;
+        }
+
+        .markdown-body h2 {
+            font-size: 1.05rem;
+            margin-top: 14px;
+        }
+
+        .description-text {
+            font-size: 14px;
+            line-height: 1.5;
+            color: var(--text-primary);
+        }
+
+        .description-text p {
+            margin-bottom: 8px;
+        }
+
+        .description-text a {
+            color: #3ea6ff;
+        }
+
+        /* ===== Sidebar ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        /* ===== Match Events Sidebar ===== */
+        .events-sidebar {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            width: 400px;
+            flex-shrink: 0;
+            height: var(--video-height, 70vh);
+            display: none !important;
+            flex-direction: column;
+        }
+
+        .events-sidebar.show {
+            display: flex !important;
+        }
+
+        .events-sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .events-sidebar-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .close-btn:hover {
+            color: var(--text-primary);
+        }
+
+        .tab-header {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab-button {
+            flex: 1;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border-bottom: 2px solid transparent;
+        }
+
+        .tab-button:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .tab-button.active {
+            color: var(--brand-red);
+            border-bottom-color: var(--brand-red);
+        }
+
+        .tab-panels {
+            height: 100%;
+            overflow-y: auto;
+            flex: 1;
+        }
+
+        /* Custom Scrollbar for Match Highlights */
+        .tab-panels::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .tab-panels::-webkit-scrollbar-track {
+            background: var(--bg-primary);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb:hover {
+            background: var(--text-secondary);
+        }
+
+        .tab-panels::-webkit-scrollbar-corner {
+            background: var(--bg-primary);
+        }
+
+        .tab-panel {
+            display: none;
+            padding: 16px;
+        }
+
+        .tab-panel.active {
+            display: block;
+        }
+
+        .section-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 500;
+        }
+
+        .btn-icon {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .btn-icon:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .btn-add {
+            background: var(--brand-red);
+            color: white;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .btn-add:hover {
+            background: #dc2626;
+        }
+
+        .event-list {
+            margin-top: 12px;
+        }
+
+        .round-marker {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 8px;
+            margin-bottom: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .round-marker:first-child {
+            border-top: none;
+            margin-top: 0;
+        }
+
+        .round-badge {
+            background-color: #fbbf24;
+            color: #000000;
+            font-weight: 700;
+            padding: 4px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            display: inline-block;
+        }
+
+        .round-actions {
+            display: flex;
+            gap: 4px;
+        }
+
+        .round-action-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+
+        .round-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-item {
+            display: flex;
+            gap: 12px;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            margin-bottom: 4px;
+            position: relative;
+        }
+
+        .event-item:hover {
+            background: var(--border-color);
+        }
+
+        .event-item:hover .event-actions {
+            opacity: 1;
+        }
+
+        .event-actions {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .event-action-btn {
+            background: var(--bg-primary);
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+        }
+
+        .event-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-action-btn.delete:hover {
+            color: var(--brand-red);
+        }
+
+        .event-time {
+            font-size: 12px;
+            color: #3ea6ff;
+            font-weight: 500;
+            min-width: 55px;
+            text-align: center;
+        }
+
+        .event-label {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .event-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.4;
+        }
+
+        .pill {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .pill-blue {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .pill-red {
+            background: #ef4444;
+            color: white;
+        }
+
+        /* ===== Coach Review Tab Specific Styles ===== */
+        #tab-review .event-item {
+            position: relative;
+            display: block;
+            padding: 10px;
+            margin-bottom: 4px;
+            border-radius: 8px;
+            background: transparent;
+            border: none;
+            transition: background 0.2s ease;
+        }
+
+        #tab-review .event-item:hover {
+            background: var(--border-color);
+            transform: none;
+            box-shadow: none;
+        }
+
+        .review-primary-row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 4px;
+            padding: 0;
+            background: transparent;
+            border: none;
+            border-radius: 0;
+        }
+
+        .review-primary-row .emoji {
+            font-size: 16px;
+            line-height: 1;
+            flex-shrink: 0;
+        }
+
+        .review-time {
+            font-size: 12px;
+            font-weight: 500;
+            color: #3ea6ff;
+            line-height: 1.2;
+            white-space: nowrap;
+            flex-shrink: 0;
+        }
+
+        .review-content {
+            margin-left: 0;
+        }
+
+        .review-note-title {
+            color: var(--text-primary);
+            font-size: 14px;
+            font-weight: 700;
+            line-height: 1.35;
+            margin: 0;
+        }
+
+        .review-author-bar {
+            margin-top: 4px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--text-secondary);
+            font-size: 12px;
+            line-height: 1.3;
+        }
+
+        .review-author-avatar {
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 1px solid rgba(255, 255, 255, 0.25);
+            flex-shrink: 0;
+        }
+
+        .review-author-name {
+            color: var(--text-primary);
+            font-size: 12px;
+            font-weight: 500;
+        }
+
+        .review-note-text {
+            color: var(--text-secondary);
+            font-size: 12px;
+            font-weight: 400;
+        }
+
+        #tab-review .event-item .event-actions {
+            top: 8px;
+            right: 8px;
+        }
+
+        /* ===== Match Modal Styles ===== */
+        .match-modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(8px);
+            z-index: 9999;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .match-modal-overlay.active {
+            display: flex;
+        }
+
+        .match-modal-content {
+            background: linear-gradient(145deg, rgba(30, 30, 38, 0.95), rgba(24, 24, 31, 0.96));
+            border-radius: 16px;
+            padding: 18px;
+            width: 92%;
+            max-width: 420px;
+            max-height: 85vh;
+            overflow-y: auto;
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
+        }
+
+        .match-modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .match-modal-header h3 {
+            font-size: 16px;
+            font-weight: 700;
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #f8fafc;
+            background: none;
+            -webkit-text-fill-color: initial;
+        }
+
+        .modal-title-icon {
+            width: 22px;
+            height: 22px;
+            border-radius: 999px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            background: rgba(239, 68, 68, 0.16);
+            color: #fda4af;
+            border: 1px solid rgba(239, 68, 68, 0.35);
+        }
+
+        .match-modal-close {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .match-modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .match-form-group {
+            margin-bottom: 16px;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 6px;
+            color: var(--text-primary);
+        }
+
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+        }
+
+        .match-form-row {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 10px;
+        }
+
+        .match-form-row .match-form-group {
+            flex: 1;
+        }
+
+        .match-form-row .form-group {
+            flex: 1;
+        }
+
+        .match-form-row .form-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #d1d5db;
+            letter-spacing: 0.2px;
+        }
+
+        .match-form-row .form-group input,
+        .match-form-row .form-group select,
+        .match-form-row .form-group textarea {
+            width: 100%;
+            padding: 9px 11px;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.04);
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            backdrop-filter: blur(8px);
+        }
+
+        .match-form-row .form-group input:hover,
+        .match-form-row .form-group select:hover,
+        .match-form-row .form-group textarea:hover {
+            border-color: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.06);
+        }
+
+        .match-form-row .form-group input:focus,
+        .match-form-row .form-group select:focus,
+        .match-form-row .form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        /* Premium form input styles */
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 9px 11px;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.04);
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            backdrop-filter: blur(8px);
+        }
+
+        .match-form-group input:hover,
+        .match-form-group select:hover,
+        .match-form-group textarea:hover {
+            border-color: rgba(255, 255, 255, 0.15);
+            background: rgba(255, 255, 255, 0.05);
+            transform: translateY(-1px);
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15),
+                0 8px 25px rgba(239, 68, 68, 0.1);
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateY(-2px);
+        }
+
+        .match-form-group textarea {
+            resize: vertical;
+            min-height: 72px;
+            font-family: inherit;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #d1d5db;
+            letter-spacing: 0.2px;
+        }
+
+        /* Emoji option buttons (coach notes modal) */
+        .emoji-options {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .emoji-option-btn {
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            background: rgba(255, 255, 255, 0.05);
+            color: #fff;
+            border-radius: 10px;
+            padding: 8px 10px;
+            font-size: 18px;
+            line-height: 1;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            min-width: 42px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .emoji-option-btn:hover {
+            border-color: rgba(248, 113, 113, 0.55);
+            background: rgba(239, 68, 68, 0.12);
+            transform: translateY(-1px);
+        }
+
+        .emoji-option-btn.active {
+            border-color: rgba(248, 113, 113, 0.7);
+            background: rgba(239, 68, 68, 0.2);
+            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
+        }
+
+        /* Comment timestamp badge */
+        .comment-time-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 7px;
+            border-radius: 999px;
+            background: rgba(62, 166, 255, 0.15);
+            border: 1px solid rgba(62, 166, 255, 0.4);
+            color: #7dd3fc;
+            font-weight: 600;
+            font-size: 12px;
+            line-height: 1.2;
+            cursor: pointer;
+            text-decoration: none;
+            user-select: none;
+            margin: 0 2px;
+            transition: all 0.2s ease;
+        }
+
+        .comment-time-badge:hover {
+            background: rgba(62, 166, 255, 0.26);
+            border-color: rgba(125, 211, 252, 0.8);
+            color: #e0f2fe;
+            transform: translateY(-1px);
+        }
+
+        /* Custom scrollbar for modals - blended & subtle */
+        .match-modal-content::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.35);
+        }
+
+        /* Hide scrollbar for Firefox */
+        .match-modal-content {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+        }
+
+        /* Modal responsive */
+        @media (max-width: 500px) {
+            .match-modal-content {
+                width: calc(100% - 16px);
+                max-width: none;
+                padding: 14px;
+                border-radius: 14px;
+            }
+
+            .match-modal-header h3 {
+                font-size: 15px;
+            }
+
+            .match-form-row {
+                flex-direction: column;
+                gap: 6px;
+                margin-bottom: 8px;
+            }
+
+            .match-form-group {
+                margin-bottom: 10px;
+            }
+
+            .match-modal-actions {
+                gap: 6px;
+                margin-top: 10px;
+                padding-top: 8px;
+            }
+
+            .match-btn-cancel,
+            .match-btn-save {
+                font-size: 11px;
+                padding: 8px 10px;
+            }
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+            margin-top: 14px;
+            padding-top: 10px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+        }
+
+        .match-btn-cancel {
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            color: #e5e7eb;
+            padding: 8px 12px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            line-height: 1;
+        }
+
+        .match-btn-cancel:hover {
+            background: rgba(255, 255, 255, 0.11);
+            border-color: rgba(255, 255, 255, 0.24);
+        }
+
+        .match-btn-save {
+            background: linear-gradient(135deg, #ef4444, #f87171);
+            border: 1px solid rgba(248, 113, 113, 0.5);
+            color: #fff;
+            padding: 8px 13px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 700;
+            transition: all 0.2s ease;
+            line-height: 1;
+            box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
+        }
+
+        .match-btn-save:hover {
+            filter: brightness(1.04);
+            transform: translateY(-1px);
+        }
+
+        .match-btn-delete {
+            background: rgba(239, 68, 68, 0.1);
+            border: 2px solid var(--brand-red);
+            color: var(--brand-red);
+            padding: 14px 28px;
+            border-radius: 14px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            flex: 1;
+            max-width: 140px;
+        }
+
+        .match-btn-delete:hover {
+            background: var(--brand-red);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+        }
+
+        .delete-confirm-message {
+            color: var(--text-primary);
+            font-size: 14px;
+            line-height: 1.5;
+            margin-bottom: 6px;
+        }
+
+        .delete-confirm-sub {
+            color: var(--text-secondary);
+            font-size: 12px;
+            margin-bottom: 2px;
+        }
+
+        /* ===== Responsive ===== */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container {
+                width: 300px;
+            }
+
+            .events-sidebar {
+                width: 300px;
+            }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main {
+                margin-left: 0;
+                flex-direction: column;
+            }
+
+            .yt-sidebar-container,
+            .events-sidebar {
+                width: 100%;
+            }
+
+            .sidebar-video-card {
+                flex-direction: column;
+            }
+
+            .sidebar-thumb {
+                width: 100%;
+            }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+
+            .fighters-row {
+                grid-template-columns: 1fr !important;
+            }
+
+            .match-center {
+                order: -1;
+            }
+
+            .event-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .event-header-actions {
+                align-self: flex-end;
+                width: 100%;
+                justify-content: flex-end;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .video-actions {
+                width: 100%;
+                overflow-x: auto;
+                justify-content: flex-start;
+            }
+
+            .yt-main {
+                padding: 12px !important;
+            }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+
+            .video-container video {
+                object-fit: contain !important;
+            }
+
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+
+            .channel-info {
+                width: 100%;
+            }
+
+            .subscribe-btn {
+                width: 100%;
+            }
+
+            .description-panel {
+                padding: 8px !important;
+            }
+
+            .match-card {
+                padding: 12px !important;
+            }
+
+            .event-header {
+                padding: 8px 0;
+            }
+
+            .event-text .title {
+                font-size: 1.1rem;
+            }
+
+            .event-header-actions {
+                gap: 4px;
+            }
+
+            .event-header-actions .action-btn {
+                padding: 6px 10px;
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+    @php
+        // ===== DUMMY DATA FALLBACKS =====
+        $blueFighter =
+            $blueFighter ??
+            (object) [
+                'name' => 'Sami Al Manea',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_5.png?v=1773157950',
+                'team' => 'Emperor TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/1/branding/logo_1771488666.png',
+                'member_id' => 5,
+                'club_url' => 'https://takeone-dev.innovator.bh/mobile/eta',
+            ];
+        $redFighter =
+            $redFighter ??
+            (object) [
+                'name' => 'Hassan Al Shallan',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_11.png?t=1773268056907',
+                'team' => 'Legend TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/logos/logo_1773267551.png',
+                'member_id' => 11,
+                'club_url' => 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy',
+            ];
+        $match =
+            $match ??
+            (object) [
+                'number' => '103',
+                'court' => '2',
+                'weight_category' => 'U18',
+                'score_blue' => 7,
+                'score_red' => 5,
+                'features' =>
+                    'Electronic scoring system (PSS & head‑gear) • Video replay available for head kicks and gam-jeom appeals',
+            ];
+        $referee =
+            $referee ??
+            (object) [
+                'name' => 'Ghassan Yusuf',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_8.png?t=1773267305519',
+                'member_id' => 4,
+            ];
+        $championship =
+            $championship ??
+            (object) [
+                'name' => 'Championship 2026',
+                'url' => '/championship/2026',
+            ];
+        $venue =
+            $venue ??
+            (object) [
+                'name' => 'Manama Sports Hall',
+                'map_link' => 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain',
+            ];
+    @endphp
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if (isset($video->orientation) && $video->orientation === 'portrait') portrait @elseif(isset($video->orientation) && $video->orientation === 'square') square @elseif(isset($video->orientation) && $video->orientation === 'ultrawide') ultrawide @endif"
+                id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ isset($video) ? route('videos.stream', $video->id) : '#' }}" type="video/mp4">
+                </video>
+
+                <!-- Match Highlights Toggle Button -->
+                <button class="match-highlights-toggle" id="matchHighlightsToggle" title="Toggle Match Highlights">
+                    <span>Highlights</span>
+                </button>
+
+                <!-- Coach note overlay (subtitle-style) -->
+                <div class="coach-note-overlay" id="coachNoteOverlay"></div>
+
+                <!-- Playlist Navigation Controls -->
+                @if (isset($nextVideo) || isset($previousVideo))
+                    <div class="playlist-controls" id="playlistControls">
+                        @if (isset($previousVideo))
+                            <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                            <span
+                                class="playlist-nav-label">{{ Str::limit($previousVideo->title ?? 'Previous', 20) }}</span>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                        @endif
+
+                        <div class="autoplay-toggle">
+                            <label for="autoplayToggle">Autoplay</label>
+                            <label class="autoplay-switch">
+                                <input type="checkbox" id="autoplayToggle" checked>
+                                <span class="autoplay-slider"></span>
+                            </label>
+                        </div>
+
+                        @if (isset($nextVideo))
+                            <span class="playlist-nav-label">{{ Str::limit($nextVideo->title ?? 'Next', 20) }}</span>
+                            <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @endif
+                    </div>
+                    <div class="keyboard-hint">
+                        <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                    </div>
+                @endif
+            </div>
+
+            <!-- ===== EVENT HEADER ===== -->
+            <div class="event-header">
+                <div class="event-header-left">
+                    <div class="event-logo">
+                        <img src="https://picsum.photos/seed/event-logo/200/200" alt="Event logo">
+                    </div>
+                    <div class="event-text">
+                        <!-- Title with Trophy Icon BEFORE "Taekwondo Finals" -->
+                        <h1 class="title">
+                            <i class="bi bi-trophy trophy-icon" title="Match Type"></i>
+                            <span>{{ $video->title }} –</span>
+                            <span style="color: #2563eb; font-weight: bold">
+                                {{ $blueFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                </a>
+                            </span>
+                            <span>vs</span>
+                            <span style="color: #ef4444; font-weight: bold">
+                                {{ $redFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                </a>
+                            </span>
+                            <span>({{ $match->weight_category ?? 'U18' }})</span>
+                        </h1>
+
+                        <!-- Meta: Championship Link • Match# • Court • Referee (all inline) -->
+                        <a class="meta-link" href="{{ $championship->url ?? '/championship/2026' }}"
+                            style="white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.4;">
+                            <span
+                                style="color: #ffffff; font-weight: bold; font-size: 0.85rem;">{{ $championship->name ?? 'Championship 2026' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #ff00dd; font-weight: bold; font-size: 0.85rem;">Match#
+                                {{ $match->number ?? '103' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #00af09; font-weight: bold; font-size: 0.85rem;">Court
+                                {{ $match->court ?? '2' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span
+                                style="color: #ffd900; font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                {{ $referee->flag ?? '🇧🇭' }} {{ $referee->name ?? 'Ghassan Yusuf' }}
+                            </span>
+                            <span
+                                style="color: var(--text-secondary); font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                - {{ number_format($video->view_count) }} views •
+                                {{ $video->created_at->format('M d, Y') }}</span>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="event-header-actions">
+                    <!-- Like Button -->
+                    @auth
+                        @if (Auth::id() === $video->user_id)
+                            <button class="action-btn desktop-action" onclick="openEditVideoModal({{ $video->id }})"
+                                title="Edit">
+                                <i class="bi bi-pencil"></i>
+                                <span>Edit</span>
+                            </button>
+                        @endif
+                        @endif
+                        @auth
+                            @if (isset($video))
+                                <form method="POST"
+                                    action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                                    class="d-inline desktop-action">
+                                    @csrf
+                                    <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
+                                        title="Like">
+                                        <i
+                                            class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                        <span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
+                                    </button>
+                                </form>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn desktop-action" title="Like">
+                                <i class="bi bi-hand-thumbs-up"></i>
+                                <span>Like</span>
+                            </a>
+                        @endauth
+
+                        <!-- Subscribe Button -->
+                        @auth
+                            @if (isset($video) && $video->user && Auth::id() !== $video->user_id)
+                                <button
+                                    class="action-btn desktop-action {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'subscribed' : '' }}"
+                                    type="button"
+                                    title="{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}"
+                                    onclick="toggleSubscribe({{ $video->user_id ?? 0 }})">
+                                    <i
+                                        class="bi {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'bi-bell-fill' : 'bi-bell' }}"></i>
+                                    <span>{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}</span>
+                                </button>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn desktop-action" title="Subscribe">
+                                <i class="bi bi-bell"></i>
+                                <span>Subscribe</span>
+                            </a>
+                        @endauth
+
+                        <!-- Share Button -->
+                        @if (isset($video) && $video->isShareable())
+                            <button class="action-btn desktop-action"
+                                onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"
+                                style="flex:1;">
+                                <i class="bi bi-share"></i>
+                                <span>Share</span>
+                            </button>
+                        @endif
+
+                        <!-- Save to Playlist Button -->
+                        <button class="action-btn desktop-action" onclick="openAddToPlaylistModal({{ $video->id }})">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                            </svg>
+                            <span>Save</span>
+                        </button>
+
+                        <div class="dropdown mobile-action-dropdown">
+                            <button class="action-btn dropdown-toggle" type="button"
+                                id="dropdownMenuLinkMatch{{ $video->id }}" data-bs-toggle="dropdown"
+                                aria-expanded="false">
+                                <i class="bi bi-lightning-charge-fill"></i>
+                                <span>Action</span>
+                            </button>
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLinkMatch{{ $video->id }}">
+                                @auth
+                                    @if (Auth::id() === $video->user_id)
+                                        <button type="button" class="dropdown-item"
+                                            onclick="openEditVideoModal({{ $video->id }})">
+                                            <i class="bi bi-pencil"></i> Edit
+                                        </button>
+                                    @endif
+                                    @if (Auth::id() !== $video->user_id)
+                                        <button type="button" class="dropdown-item"
+                                            onclick="toggleSubscribe({{ $video->user_id ?? 0 }})">
+                                            <i class="bi bi-bell"></i> Subscribe
+                                        </button>
+                                    @endif
+                                @else
+                                    <a class="dropdown-item" href="{{ route('login') }}">
+                                        <i class="bi bi-bell"></i> Subscribe
+                                    </a>
+                                @endauth
+
+                                @auth
+                                    <form method="POST"
+                                        action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                                        class="d-inline w-100">
+                                        @csrf
+                                        <button type="submit" class="dropdown-item">
+                                            <i
+                                                class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                            Like
+                                        </button>
+                                    </form>
+                                @else
+                                    <a class="dropdown-item" href="{{ route('login') }}">
+                                        <i class="bi bi-hand-thumbs-up"></i> Like
+                                    </a>
+                                @endauth
+
+                                @if ($video->isShareable())
+                                    <button class="dropdown-item"
+                                        onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
+                                        <i class="bi bi-share"></i> Share
+                                    </button>
+                                @endif
+
+                                <button class="dropdown-item" onclick="openAddToPlaylistModal({{ $video->id }})">
+                                    <i class="bi bi-bookmark"></i> Save
+                                </button>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <!-- ===== END EVENT HEADER ===== -->
+
+                <!-- Description Box (Collapsible) -->
+                @if (isset($video) && $video->description)
+                    @php
+                        $fullDescription = $video->description;
+                        $shortDescription = Str::limit($fullDescription, 200);
+                        $needsExpand = strlen($fullDescription) > 200;
+                    @endphp
+
+                    <section class="description-panel">
+                        <button class="description-toggle" type="button" id="toggleDescription">
+                            <span id="descriptionToggleLabel">
+                                {{ $needsExpand ? 'Show description' : 'Hide description' }}
+                            </span>
+                            <span id="descriptionToggleIcon">{{ $needsExpand ? '▼' : '▲' }}</span>
+                        </button>
+
+                        <div class="description-body {{ $needsExpand ? '' : 'open' }}" id="descriptionBody">
+                            <!-- Match Card -->
+                            <section class="match-card">
+                                <div class="match-header">
+                                    <div class="match-label">Final • Male -63kg division</div>
+                                </div>
+
+                                <div class="fighters-row">
+                                    <!-- Blue Fighter (Sami Al Manea) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $blueFighter->photo ?? 'https://picsum.photos/seed/blue-competitor/200/260' }}"
+                                                        alt="{{ $blueFighter->name ?? 'Blue fighter' }}">
+                                                </div>
+                                            </a>
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $blueFighter->logo ?? 'https://picsum.photos/seed/blue-logo/160/160' }}"
+                                                            alt="{{ $blueFighter->team ?? 'Blue team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge blue">Blue</span>
+                                            </div>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name blue-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}">
+                                                    {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $blueFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $blueFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+
+                                    <!-- Score & Referee Center -->
+                                    <div class="match-center">
+                                        <div class="score-pill">
+                                            <span class="score-number">{{ $match->score_blue ?? 7 }}</span>
+                                            <span class="score-label">Final score</span>
+                                            <span class="score-number">{{ $match->score_red ?? 5 }}</span>
+                                        </div>
+                                        <div class="referee-block">
+                                            <!-- Referee Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="referee-photo">
+                                                    <img src="{{ $referee->photo ?? 'https://picsum.photos/seed/referee/200/260' }}"
+                                                        alt="Referee">
+                                                </div>
+                                            </a>
+                                            <div style="color: #ffd900; font-weight: bold">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                    style="color: inherit; text-decoration: none;"
+                                                    title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile">
+                                                    {{ $referee->name ?? 'Ghassan Yusuf' }}
+                                                </a>
+                                            </div>
+                                            <div class="ref-label">Center Referee</div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Red Fighter (Hassan Al Shallan) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $redFighter->logo ?? 'https://picsum.photos/seed/red-logo/160/160' }}"
+                                                            alt="{{ $redFighter->team ?? 'Red team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge red">Red</span>
+                                            </div>
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $redFighter->photo ?? 'https://picsum.photos/seed/red-competitor/200/260' }}"
+                                                        alt="{{ $redFighter->name ?? 'Red fighter' }}">
+                                                </div>
+                                            </a>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name red-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}">
+                                                    {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $redFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $redFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+                                </div>
+
+                                <div class="match-footer">
+                                    <a class="hall-link" id="hallLink" title="View venue details"
+                                        href="{{ $venue->map_link ?? 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain' }}"
+                                        target="_blank" rel="noopener noreferrer">
+                                        📍 {{ $venue->name ?? 'Manama Sports Hall' }}
+                                    </a>
+                                    @if (isset($match->features))
+                                        • {{ $match->features }}
+                                    @endif
+                                </div>
+                            </section>
+
+                            <!-- Match Overview -->
+                            <section class="markdown-body">
+                                <div
+                                    style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                                    <h2 style="font-size: 1.05rem; margin: 0;">Match Overview</h2>
+                                    @if (isset($video) && $video->user)
+                                        <div class="video-owner-badge"
+                                            style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary);">
+                                            <img src="{{ $video->user->avatar_url }}" class="owner-avatar"
+                                                style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover;"
+                                                alt="{{ $video->user->name }}">
+                                            <span class="owner-name"
+                                                style="color: var(--text-primary); font-weight: 500;">{{ $video->user->name }}</span>
+                                            <span>• {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</span>
+                                        </div>
+                                    @endif
+                                </div>
+                                <div class="description-text">
+                                    {!! Str::markdown($fullDescription) !!}
+                                </div>
+                            </section>
+                        </div>
+                    </section>
+
+                    <script>
+                        // Collapsible Description Toggle
+                        const descriptionBody = document.getElementById('descriptionBody');
+                        const descriptionToggle = document.getElementById('toggleDescription');
+                        const descriptionToggleLabel = document.getElementById('descriptionToggleLabel');
+                        const descriptionToggleIcon = document.getElementById('descriptionToggleIcon');
+
+                        if (descriptionToggle && descriptionBody) {
+                            descriptionToggle.addEventListener('click', () => {
+                                const isOpen = descriptionBody.classList.toggle('open');
+                                descriptionToggleLabel.textContent = isOpen ? 'Hide description' : 'Show description';
+                                descriptionToggleIcon.textContent = isOpen ? '▲' : '▼';
+                            });
+                        }
+
+                        // Hall/Venue Link Handler
+                        const hallLink = document.getElementById('hallLink');
+                        if (hallLink) {
+                            hallLink.addEventListener('click', () => {
+                                // Analytics tracking can be added here
+                            });
+                        }
+
+                        // Match Highlights Toggle with localStorage persistence
+                        document.addEventListener('DOMContentLoaded', function() {
+                            const toggleBtn = document.getElementById('matchHighlightsToggle');
+                            const sidebar = document.querySelector('.events-sidebar');
+                            const videoId = {{ isset($video) ? $video->id : 0 }};
+
+                            if (toggleBtn && sidebar) {
+                                // Load saved state on page load
+                                const savedState = localStorage.getItem(`highlights_${videoId}`);
+                                if (savedState === 'open') {
+                                    sidebar.classList.add('show');
+                                    toggleBtn.classList.add('expanded');
+                                    toggleBtn.textContent = 'Highlights';
+                                }
+
+                                toggleBtn.addEventListener('click', function() {
+                                    const isOpen = sidebar.classList.toggle('show');
+                                    toggleBtn.classList.toggle('expanded');
+
+                                    // Save state to localStorage
+                                    if (isOpen) {
+                                        localStorage.setItem(`highlights_${videoId}`, 'open');
+                                        toggleBtn.textContent = 'Highlights';
+                                    } else {
+                                        localStorage.removeItem(`highlights_${videoId}`);
+                                    }
+                                });
+                            }
+                        });
+                    </script>
+                @endif
+
+                <!-- Comment Section -->
+                <div class="comments-section"
+                    style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                    <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                        Comments <span
+                            style="color: var(--text-secondary); font-weight: 400;">({{ isset($video) ? $video->comment_count ?? 0 : 0 }})</span>
+                    </h3>
+                    @auth
+                        <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                            <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                                alt="{{ Auth::user()->name }}">
+                            <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                                <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
+                                    rows="1"
+                                    style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                                <button type="button" class="action-btn"
+                                    onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
+                                    <i class="bi bi-x-lg"></i>
+                                    <span>Cancel</span>
+                                </button>
+                                <button type="button" class="action-btn comment-btn"
+                                    onclick="submitComment({{ isset($video) ? $video->id : 0 }})" style="flex-shrink: 0;">
+                                    <i class="bi bi-chat-dots"></i>
+                                    <span>Comment</span>
+                                </button>
+                            </div>
+                        </div>
+                    @else
+                        <div
+                            style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                            <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                        </div>
+                    @endauth
+                    <div id="commentsList">
+                        @if (isset($video))
+                            @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                                @include('videos.partials.comment', ['comment' => $comment])
+                            @empty
+                                <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be
+                                    the first to comment!</p>
+                            @endforelse
+                        @endif
+                    </div>
+                </div>
+
+                <script>
+                    function submitComment(videoId) {
+                        const body = document.getElementById('commentBody').value.trim();
+                        if (!body) return;
+
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body
+                                })
+                            })
+                            .then(response => response.json())
+                            .catch(error => {
+                                console.error('Error:', error);
+                                alert('Failed to post comment: ' + error);
+                            })
+                            .then(data => {
+                                if (data && data.success) {
+                                    document.getElementById('commentBody').value = '';
+                                    addCommentToList(data.comment);
+                                } else {
+                                    alert('Failed to post comment');
+                                }
+                            });
+                    }
+
+                    let commentPlaybackStopHandler = null;
+                    let commentPlaybackEndTime = null;
+
+                    function parseDotTimeToSeconds(dotTime) {
+                        const parts = String(dotTime).trim().split('.');
+                        if (parts.length !== 2) return null;
+                        const mins = parseInt(parts[0], 10);
+                        const secs = parseInt(parts[1], 10);
+                        if (Number.isNaN(mins) || Number.isNaN(secs) || secs < 0 || secs > 59) return null;
+                        return mins * 60 + secs;
+                    }
+
+                    function clearCommentPlaybackHandler(videoPlayer) {
+                        if (videoPlayer && commentPlaybackStopHandler) {
+                            videoPlayer.removeEventListener('timeupdate', commentPlaybackStopHandler);
+                        }
+                        commentPlaybackStopHandler = null;
+                        commentPlaybackEndTime = null;
+                    }
+
+                    function playCommentTimeRange(startSec, endSec = null) {
+                        const videoPlayer = document.getElementById('videoPlayer');
+                        if (!videoPlayer) return;
+
+                        clearCommentPlaybackHandler(videoPlayer);
+
+                        const startPlayback = () => {
+                            // Start 1 second before the badge timestamp for context
+                            const playbackStart = Math.max(0, startSec - 1);
+                            videoPlayer.currentTime = playbackStart;
+                            videoPlayer.play();
+
+                            if (endSec !== null && endSec > startSec) {
+                                commentPlaybackEndTime = endSec;
+                                commentPlaybackStopHandler = function() {
+                                    if (videoPlayer.currentTime >= commentPlaybackEndTime) {
+                                        videoPlayer.pause();
+                                        videoPlayer.currentTime = commentPlaybackEndTime;
+                                        clearCommentPlaybackHandler(videoPlayer);
+                                    }
+                                };
+                                videoPlayer.addEventListener('timeupdate', commentPlaybackStopHandler);
+                            }
+                        };
+
+                        // Move viewport first, then start playback
+                        const videoContainer = document.getElementById('videoContainer');
+                        if (videoContainer) {
+                            videoContainer.scrollIntoView({
+                                behavior: 'smooth',
+                                block: 'center'
+                            });
+
+                            // Wait longer so user is fully positioned at video before playback starts
+                            setTimeout(startPlayback, 900);
+                        } else {
+                            startPlayback();
+                        }
+                    }
+
+                    function enhanceCommentBodyWithTimeBadges(root = document) {
+                        const commentBodies = root.querySelectorAll('.comment-body');
+                        const timeRangeRegex = /@(\d{1,2}\.\d{2})(?:-(\d{1,2}\.\d{2}))?/g;
+                        const mentionRegex = /@(\w+)/g;
+
+                        commentBodies.forEach(bodyEl => {
+                            // avoid re-processing if already enhanced
+                            if (bodyEl.dataset.timeEnhanced === '1') return;
+
+                            const originalText = bodyEl.textContent || '';
+                            if (!originalText.trim()) {
+                                bodyEl.dataset.timeEnhanced = '1';
+                                return;
+                            }
+
+                            // Build HTML with clickable time badges first
+                            let html = originalText.replace(timeRangeRegex, (match, start, end) => {
+                                const startSec = parseDotTimeToSeconds(start);
+                                const endSec = end ? parseDotTimeToSeconds(end) : null;
+                                if (startSec === null || (end && endSec === null)) return match;
+                                if (endSec !== null && endSec <= startSec) return match;
+
+                                const label = end ? `@${start}-${end}` : `@${start}`;
+                                return `<span class="comment-time-badge" data-start="${startSec}" data-end="${endSec ?? ''}">${label}</span>`;
+                            });
+
+                            // Then color regular @mentions but skip existing badge HTML
+                            html = html.replace(mentionRegex, (m, u) => `@${u}`);
+                            bodyEl.innerHTML = html.replace(/(^|[\s>])@(\w+)/g,
+                                '$1<span style="color: #3ea6ff; font-weight: 500;">@$2</span>');
+
+                            bodyEl.dataset.timeEnhanced = '1';
+                        });
+
+                        root.querySelectorAll('.comment-time-badge').forEach(badge => {
+                            if (badge.dataset.bound === '1') return;
+                            badge.addEventListener('click', function(e) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                const start = parseFloat(this.dataset.start || '');
+                                const end = this.dataset.end === '' ? null : parseFloat(this.dataset.end);
+                                if (Number.isNaN(start)) return;
+                                playCommentTimeRange(start, Number.isNaN(end) ? null : end);
+                            });
+                            badge.dataset.bound = '1';
+                        });
+                    }
+
+                    function addCommentToList(comment) {
+                        const commentsList = document.getElementById('commentsList');
+                        const commentHtml = `
+                <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
+                    <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
+                    <div style="flex: 1;">
+                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+                            <span style="font-weight: 600; font-size: 14px;">${comment.user.name}</span>
+                            <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
+                        </div>
+                        <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
+                            ${comment.body}
+                        </div>
+                        <div style="display: flex; gap: 12px; margin-top: 8px;">
+                            <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                                Reply
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+                        commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                        enhanceCommentBodyWithTimeBadges(commentsList);
+                        const commentCount = document.querySelector('h3 span');
+                        if (commentCount) {
+                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                            commentCount.textContent = `(${count})`;
+                        }
+                    }
+
+                    function deleteComment(commentId) {
+                        if (confirm('Are you sure you want to delete this comment?')) {
+                            fetch(`/comments/${commentId}`, {
+                                    method: 'DELETE',
+                                    headers: {
+                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                    }
+                                })
+                                .then(response => response.json())
+                                .then(data => {
+                                    if (data.success) {
+                                        document.getElementById('comment-' + commentId).remove();
+                                        const commentCount = document.querySelector('h3 span');
+                                        if (commentCount) {
+                                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                            commentCount.textContent = `(${count})`;
+                                        }
+                                    }
+                                });
+                        }
+                    }
+                    document.addEventListener('DOMContentLoaded', function() {
+                        enhanceCommentBodyWithTimeBadges(document);
+                    });
+
+                    function submitReply(videoId, parentId) {
+                        const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                        const body = textarea.value.trim();
+                        if (!body) return;
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body,
+                                    parent_id: parentId
+                                })
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    location.reload();
+                                }
+                            });
+                    }
+                </script>
+            </div>
+
+            <!-- Sidebar - Match Highlights -->
+            <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
+                <aside class="events-sidebar">
+                    <div class="events-sidebar-header" style="justify-content: center;">
+                        <h3>Match Highlights</h3>
+                    </div>
+                    <div class="tab-header">
+                        <button class="tab-button active" data-tab="official">Points</button>
+                        <button class="tab-button" data-tab="review">Coach review</button>
+                    </div>
+                    <div class="tab-panels">
+                        <!-- Points Tab -->
+                        <div class="tab-panel active" id="tab-official">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div>
+                                    <div class="section-label">Rounds & points</div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                                            <span>+</span> Add Round
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="officialEvents">
+                                <!-- Round markers and points (unchanged) -->
+                                <div class="round-marker" data-round="1">
+                                    <span class="round-badge">ROUND 1</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(1)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(1)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(1)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                                    <div class="event-time">@00:20</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue body kick (1 pt)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 1 – 0 • Clean contact.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                                    <div class="event-time">@00:45</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue scores body kick
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 2 – 0 • Judge: Central.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="2">
+                                    <span class="round-badge">ROUND 2</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(2)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(2)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(2)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                                    <div class="event-time">@01:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red head kick (3 pts)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 2 • Score 2 – 3 • Video replay requested.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="3">
+                                    <span class="round-badge">ROUND 3</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(3)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(3)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(3)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                                    <div class="event-time">@02:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue spinning backfist (2 pts)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 3 • Close round.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt4')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt4')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                                    <div class="event-time">@03:00</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red leg kick (1 pt)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 4 • Tied!
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt5')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt5')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Coach Review Tab -->
+                        <div class="tab-panel" id="tab-review">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div class="section-label">Private notes</div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                                            <span>+</span> Add Note
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="reviewEvents">
+                                <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                                    <div class="review-primary-row">
+                                        <span class="emoji">🔥</span>
+                                        <span>@00:32–00:50</span>
+                                        <div class="note-text">Good pressure, but guard too low after first kick</div>
+                                    </div>
+                                    <div class="review-secondary-row">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        <div class="coach-name">Coach Ahmed</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                                    <div class="review-primary-row">
+                                        <span class="emoji">🤔</span>
+                                        <span class="review-time">@02:05-02:20</span>
+                                    </div>
+                                    <div class="review-content">
+                                        <h4 class="review-note-title">Missed counter opportunity</h4>
+                                        <div class="review-author-bar">
+                                            <img class="review-author-avatar"
+                                                src="https://picsum.photos/seed/coach-sara/80/80" alt="Coach Sara">
+                                            <span class="review-author-name">Coach Sara</span>
+                                            <span>•</span>
+                                            <span class="review-note-text">Great angle, but no follow up.</span>
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="205" data-id="rev3">
+                                    <div class="review-primary-row">
+                                        <span class="emoji">😄</span>
+                                        <span class="review-time">@03:25</span>
+                                    </div>
+                                    <div class="review-content">
+                                        <h4 class="review-note-title">Excellent angle change and follow-up</h4>
+                                        <div class="review-author-bar">
+                                            <img class="review-author-avatar"
+                                                src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                            <span class="review-author-name">Coach Ahmed</span>
+                                            <span>•</span>
+                                            <span class="review-note-text">Ideal example of exit and re-entry.</span>
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+                <!-- Sidebar - Up Next / Recommendations -->
+                <div class="yt-sidebar-container">
+                    @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                            <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                            {{ $playlist->name }}
+                            <span
+                                style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                                videos)</span>
+                        </h3>
+                        <div class="recommended-videos-list">
+                            @foreach ($playlistVideos as $index => $playlistVideo)
+                                @if ($playlistVideo->id !== $video->id)
+                                    <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                                        onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                                        <div class="sidebar-thumb" style="position: relative;">
+                                            @if ($playlistVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @endif
+                                            @if ($playlistVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                            @endif
+                                            @if ($playlistVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                            <!-- Playlist position indicator -->
+                                            <span
+                                                style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                                {{ $index + 1 }}
+                                            </span>
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($playlistVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($playlistVideo->view_count) }} views •
+                                                    {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                        @if ($playlist->canEdit(Auth::user()))
+                            <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                                style="margin-top: 12px; display: inline-block;">
+                                <i class="bi bi-pencil"></i> Edit Playlist
+                            </a>
+                        @endif
+                    @else
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                        @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                            <div class="recommended-videos-list">
+                                @foreach ($recommendedVideos as $recVideo)
+                                    <div class="sidebar-video-card"
+                                        onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                                        <div class="sidebar-thumb">
+                                            @if ($recVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                                    alt="{{ $recVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                                    alt="{{ $recVideo->title }}">
+                                            @endif
+                                            @if ($recVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                            @endif
+                                            @if ($recVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($recVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($recVideo->view_count) }} views •
+                                                    {{ $recVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                            <div class="text-secondary">No recommendations available yet. Check back later!</div>
+                        @endif
+                    @endif
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Modals -->
+        @include('layouts.partials.share-modal')
+        @include('layouts.partials.edit-video-modal')
+
+        <!-- Add Round Modal -->
+        <div class="match-modal-overlay" id="addRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3><span class="modal-title-icon">➕</span> Add New Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('addRoundModal')">×</button>
+                </div>
+                <form id="addRoundForm">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Round Number</label>
+                            <input type="number" id="roundNumber" min="1" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round Name (optional)</label>
+                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Start Time (mm.ss, optional)</label>
+                        <input type="text" id="roundStartTime" inputmode="decimal" placeholder="e.g., 1.30 = 1m 30s">
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Add Round</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Point Modal -->
+        <div class="match-modal-overlay" id="pointModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3 id="pointModalTitle">Add Point</h3>
+                    <button class="match-modal-close" onclick="closeModal('pointModal')">×</button>
+                </div>
+                <form id="pointForm">
+                    <input type="hidden" id="pointId">
+                    <input type="hidden" id="pointRoundId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointTimestamp">Timestamp (mm.ss)</label>
+                            <input type="text" id="pointTimestamp" inputmode="decimal" placeholder="e.g., 0.45 = 45s"
+                                required>
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointRoundSelect">Round</label>
+                            <select id="pointRoundSelect">
+                                <option value="1">Round 1</option>
+                                <option value="2">Round 2</option>
+                                <option value="3">Round 3</option>
+                                <option value="4">Round 4</option>
+                                <option value="5">Round 5</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointAction">Action Description</label>
+                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+                    </div>
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointValue">Points</label>
+                            <input type="number" id="pointValue" min="1" value="1">
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointCompetitor">Competitor</label>
+                            <select id="pointCompetitor">
+                                <option value="blue">Blue</option>
+                                <option value="red">Red</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointNotes">Notes</label>
+                        <textarea id="pointNotes" rows="3" placeholder="Optional notes (e.g., Clean contact, Judge: Central)"></textarea>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()"
+                            style="display: none;">
+                            Delete Point
+                        </button>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('pointModal')">
+                            Cancel
+                        </button>
+                        <button type="submit" class="match-btn-save">
+                            Save Point
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Edit Round Modal -->
+        <div class="match-modal-overlay" id="editRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3><span class="modal-title-icon">✏️</span> Edit Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('editRoundModal')">×</button>
+                </div>
+                <form id="editRoundForm">
+                    <input type="hidden" id="editRoundId">
+                    <div class="match-form-group">
+                        <label>Round Number</label>
+                        <input type="number" id="editRoundNumber" min="1" required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Round Name</label>
+                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Start Time (mm.ss, optional)</label>
+                        <input type="text" id="editRoundStartTime" inputmode="decimal" placeholder="e.g., 2.05 = 2m 5s">
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-cancel"
+                            onclick="closeModal('editRoundModal')">Cancel</button>
+                        <button type="button" class="match-btn-save" onclick="confirmDeleteRound()">Delete Round</button>
+                        <button type="submit" class="match-btn-save">Save Changes</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Review Modal -->
+        <div class="match-modal-overlay" id="reviewModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3 id="reviewModalTitle"><span class="modal-title-icon">📝</span> Add Coach Note</h3>
+                    <button class="match-modal-close" onclick="closeModal('reviewModal')">×</button>
+                </div>
+                <form id="reviewForm">
+                    <input type="hidden" id="reviewId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Start Time (mm.ss)</label>
+                            <input type="text" id="reviewStartTime" inputmode="decimal" placeholder="e.g., 0.32 = 32s"
+                                required>
+                        </div>
+                        <div class="match-form-group">
+                            <label>End Time (mm.ss)</label>
+                            <input type="text" id="reviewEndTime" inputmode="decimal" placeholder="e.g., 0.50 = 50s">
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Note</label>
+                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Coach Name</label>
+                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Emoji</label>
+                        <input type="hidden" id="reviewEmoji" value="🔥">
+                        <div class="emoji-options" id="reviewEmojiOptions">
+                            <button type="button" class="emoji-option-btn active" data-emoji="🔥"
+                                onclick="setReviewEmoji('🔥', this)">🔥</button>
+                            <button type="button" class="emoji-option-btn" data-emoji="🤔"
+                                onclick="setReviewEmoji('🤔', this)">🤔</button>
+                            <button type="button" class="emoji-option-btn" data-emoji="😄"
+                                onclick="setReviewEmoji('😄', this)">😄</button>
+                            <button type="button" class="emoji-option-btn" data-emoji="💪"
+                                onclick="setReviewEmoji('💪', this)">💪</button>
+                            <button type="button" class="emoji-option-btn" data-emoji="⚠️"
+                                onclick="setReviewEmoji('⚠️', this)">⚠️</button>
+                        </div>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deleteReviewBtn"
+                            onclick="requestDelete('review', document.getElementById('reviewId').value)"
+                            style="display: none;">Delete</button>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Save Note</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Delete Confirmation Modal -->
+        <div class="match-modal-overlay" id="deleteConfirmModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3><span class="modal-title-icon">🗑️</span> Confirm Delete</h3>
+                    <button class="match-modal-close" onclick="closeModal('deleteConfirmModal')">×</button>
+                </div>
+                <div class="delete-confirm-message" id="deleteConfirmMessage">
+                    Are you sure you want to delete this item?
+                </div>
+                <div class="delete-confirm-sub" id="deleteConfirmSub">
+                    This action cannot be undone.
+                </div>
+                <div class="match-modal-actions">
+                    <button type="button" class="match-btn-cancel"
+                        onclick="closeModal('deleteConfirmModal')">Cancel</button>
+                    <button type="button" class="match-btn-delete" onclick="executeDelete()">Delete</button>
+                </div>
+            </div>
+        </div>
+
+        @if (Session::has('openEditModal') && Session::get('openEditModal'))
+            @auth
+                <script>
+                    document.addEventListener('DOMContentLoaded', function() {
+                        openEditVideoModal({{ isset($video) ? $video->id : 0 }});
+                    });
+                </script>
+            @endauth
+        @endif
+
+        <script>
+            // Subscribe Toggle Function
+            function toggleSubscribe(userId) {
+                if (!userId) return;
+                fetch(`/users/${userId}/toggle-subscribe`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            location.reload();
+                        }
+                    });
+            }
+
+            // Playlist navigation URLs
+            const previousVideoUrl = @json(isset($previousVideo) ? route('videos.show', $previousVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const nextVideoUrl = @json(isset($nextVideo) ? route('videos.show', $nextVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const videoId = {{ isset($video) ? $video->id : 0 }};
+            const isOwner = {{ json_encode(Auth::check() && isset($video) && Auth::id() === $video->user_id) }};
+            let autoplayEnabled = true;
+
+            document.addEventListener('DOMContentLoaded', function() {
+                loadMatchData();
+            });
+
+            async function loadMatchData() {
+                try {
+                    const response = await fetch(`/videos/${videoId}/match-data`);
+                    const data = await response.json();
+                    if (data.success) {
+                        renderMatchData(data.rounds || [], data.reviews || []);
+                    } else {
+                        console.warn('No match data:', data.message);
+                        renderStaticData();
+                    }
+                } catch (error) {
+                    console.error('Failed to load match data:', error);
+                    // Try to use server-side data first
+                    if (window.matchRounds && window.matchReviews) {
+                        renderMatchData(window.matchRounds, window.matchReviews);
+                    } else {
+                        renderStaticData();
+                    }
+                }
+            }
+
+            // Pass server-side data to JS if available
+            window.matchRounds = @json($video->matchRounds ?? []);
+            window.matchReviews = @json($video->coachReviews ?? []);
+            if (window.matchRounds.length > 0) {
+                renderMatchData(window.matchRounds, window.matchReviews);
+            }
+
+            function renderStaticData() {
+                // No static demo data - empty state
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                if (pointsContainer) pointsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No match data yet. <button class="btn-add" onclick="openAddRoundModal()">+ Add Round</button></div>';
+                if (reviewsContainer) reviewsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No coach notes yet. <button class="btn-add" onclick="openAddReviewModal()">+ Add Note</button></div>';
+            }
+
+            function renderMatchData(rounds, reviews) {
+                if (!rounds || rounds.length === 0) return;
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                let pointsHtml = '';
+                let reviewsHtml = '';
+
+                rounds.forEach(round => {
+                    const safeRoundName = String(round.name || '').replace(/'/g, "\\'");
+                    const roundStart = (round.start_time_seconds !== null && round.start_time_seconds !== undefined) ?
+                        Number(round.start_time_seconds) : '';
+                    pointsHtml += `
+        <div class="round-marker" data-round="${round.round_number}" data-round-id="${round.id}" data-start-time="${roundStart}">
+            <span class="round-badge" data-start-time="${roundStart}" title="Jump to ${roundStart !== '' ? formatTime(roundStart) : 'start'}">${round.name}</span>
+            ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div class="round-actions">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${safeRoundName}', ${roundStart === '' ? 'null' : roundStart})" title="Edit round">✏️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ` : ''}
+        </div>`;
+
+                    if (round.points) {
+                        round.points.forEach(point => {
+                            const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                            const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                            const timeStr = formatTime(point.timestamp_seconds);
+                            pointsHtml += `
+                <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
+                    <div class="event-time">@${timeStr}</div>
+                    <div>
+                        <div class="event-label">
+                            ${point.action} (${point.points} pt)
+                            <span class="pill ${competitorClass}">${competitorLabel}</span>
+                        </div>
+                        <div class="event-meta">
+                            ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
+                        </div>
+                    </div>
+                    ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div>` : ''}
+                </div>`;
+                        });
+                    }
+                });
+
+                if (reviews) {
+                    reviews.forEach(review => {
+                        const timeStart = formatTime(review.start_time_seconds);
+                        const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+                        const timeDisplay = timeStart + timeEnd;
+                        reviewsHtml += `
+            <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
+                <div class="review-primary-row">
+                    <span class="emoji">${review.emoji}</span>
+                    <span class="review-time">@${timeDisplay}</span>
+                </div>
+                <div class="review-content">
+                    <h4 class="review-note-title">${review.note}</h4>
+                    <div class="review-author-bar">
+                        <img class="review-author-avatar" src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                        <span class="review-author-name">${review.coach_name}</span>
+                    </div>
+                </div>
+                ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div>` : ''}
+            </div>`;
+                    });
+                }
+
+                if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+                if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+                attachEventListeners();
+            }
+
+            function formatTime(seconds) {
+                const mins = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+            }
+
+            function parseMinuteSecondInput(value) {
+                if (value === null || value === undefined) return null;
+                const raw = String(value).trim();
+                if (!raw) return null;
+
+                // allow plain integer seconds too
+                if (/^\d+$/.test(raw)) return parseInt(raw, 10);
+
+                // expected mm.ss (dot as separator)
+                const m = raw.match(/^(\d+)\.(\d{1,2})$/);
+                if (!m) return null;
+
+                const minutes = parseInt(m[1], 10);
+                const secPart = m[2].padStart(2, '0');
+                const secs = parseInt(secPart, 10);
+
+                if (Number.isNaN(minutes) || Number.isNaN(secs) || secs > 59) return null;
+                return (minutes * 60) + secs;
+            }
+
+            function toMinuteSecondInput(totalSeconds) {
+                if (totalSeconds === null || totalSeconds === undefined || totalSeconds === '') return '';
+                const s = Math.max(0, Math.floor(Number(totalSeconds)));
+                const mins = Math.floor(s / 60);
+                const secs = s % 60;
+                return `${mins}.${secs.toString().padStart(2, '0')}`;
+            }
+
+            function requireValidTimeInput(value, fieldLabel) {
+                const parsed = parseMinuteSecondInput(value);
+                if (parsed === null) {
+                    alert(`${fieldLabel} must be in mm.ss format (example: 1.30 for 1m 30s) or plain seconds.`);
+                    return null;
+                }
+                return parsed;
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const tabButtons = document.querySelectorAll('.tab-button');
+                const tabPanels = document.querySelectorAll('.tab-panel');
+                tabButtons.forEach(button => {
+                    button.addEventListener('click', function() {
+                        const targetTab = this.getAttribute('data-tab');
+                        tabButtons.forEach(btn => btn.classList.remove('active'));
+                        tabPanels.forEach(panel => panel.classList.remove('active'));
+                        this.classList.add('active');
+                        document.getElementById('tab-' + targetTab).classList.add('active');
+                    });
+                });
+                attachEventListeners();
+                document.getElementById('addRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    storeRound(
+                        document.getElementById('roundNumber').value,
+                        document.getElementById('roundName').value || 'ROUND ' + document.getElementById(
+                            'roundNumber').value,
+                        document.getElementById('roundStartTime').value
+                    );
+                });
+                document.getElementById('pointForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    savePoint();
+                });
+                document.getElementById('editRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    updateRound();
+                });
+                document.getElementById('reviewForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    saveReview();
+                });
+            });
+
+            let reviewPlaybackStopHandler = null;
+            let reviewPlaybackEndTime = null;
+
+            function showCoachNoteOverlay(text) {
+                const overlay = document.getElementById('coachNoteOverlay');
+                if (!overlay) return;
+                overlay.textContent = text || '';
+                overlay.classList.add('show');
+            }
+
+            function hideCoachNoteOverlay() {
+                const overlay = document.getElementById('coachNoteOverlay');
+                if (!overlay) return;
+                overlay.classList.remove('show');
+                overlay.textContent = '';
+            }
+
+            function clearReviewPlaybackHandler(videoPlayer) {
+                if (videoPlayer && reviewPlaybackStopHandler) {
+                    videoPlayer.removeEventListener('timeupdate', reviewPlaybackStopHandler);
+                }
+                reviewPlaybackStopHandler = null;
+                reviewPlaybackEndTime = null;
+            }
+
+            function attachEventListeners() {
+                document.querySelectorAll('.event-item').forEach(item => {
+                    item.addEventListener('click', function(e) {
+                        if (e.target.closest('.event-actions')) return;
+
+                        const timeStart = parseFloat(this.getAttribute('data-time-start'));
+                        const timeEndAttr = this.getAttribute('data-time-end');
+                        const timeEnd = timeEndAttr === null || timeEndAttr === '' ? null : parseFloat(
+                            timeEndAttr);
+
+                        if (timeStart || timeStart === 0) {
+                            const videoPlayer = document.getElementById('videoPlayer');
+                            if (videoPlayer) {
+                                const isReviewItem = this.closest('#tab-review') !== null;
+
+                                // clear any previous stop watcher
+                                clearReviewPlaybackHandler(videoPlayer);
+                                hideCoachNoteOverlay();
+
+                                if (isReviewItem) {
+                                    const noteText = this.querySelector('.review-note-title')?.textContent
+                                        ?.trim() ||
+                                        this.querySelector('.event-label')?.textContent?.trim() || '';
+                                    if (noteText) {
+                                        showCoachNoteOverlay(noteText);
+                                    }
+
+                                    // start exactly from review start time
+                                    videoPlayer.currentTime = Math.max(0, timeStart);
+
+                                    // if review has end time, stop playback at end and hide overlay
+                                    if (timeEnd !== null && !Number.isNaN(timeEnd) && timeEnd > timeStart) {
+                                        reviewPlaybackEndTime = timeEnd;
+                                        reviewPlaybackStopHandler = function() {
+                                            if (videoPlayer.currentTime >= reviewPlaybackEndTime) {
+                                                videoPlayer.pause();
+                                                videoPlayer.currentTime = reviewPlaybackEndTime;
+                                                hideCoachNoteOverlay();
+                                                clearReviewPlaybackHandler(videoPlayer);
+                                            }
+                                        };
+                                        videoPlayer.addEventListener('timeupdate', reviewPlaybackStopHandler);
+                                    }
+                                } else {
+                                    // non-review items keep previous behavior
+                                    videoPlayer.currentTime = Math.max(0, timeStart - 1.0);
+                                }
+
+                                videoPlayer.play();
+                            }
+                        }
+                    });
+                });
+
+                const mainVideoPlayer = document.getElementById('videoPlayer');
+                if (mainVideoPlayer && !mainVideoPlayer.dataset.reviewOverlayBound) {
+                    mainVideoPlayer.addEventListener('seeking', function() {
+                        if (!reviewPlaybackStopHandler) return;
+                        if (reviewPlaybackEndTime !== null && this.currentTime > reviewPlaybackEndTime + 0.15) {
+                            hideCoachNoteOverlay();
+                            clearReviewPlaybackHandler(this);
+                        }
+                    });
+
+                    mainVideoPlayer.addEventListener('ended', function() {
+                        hideCoachNoteOverlay();
+                        clearReviewPlaybackHandler(this);
+                    });
+
+                    mainVideoPlayer.dataset.reviewOverlayBound = '1';
+                }
+
+                document.querySelectorAll('.round-badge').forEach(badge => {
+                    badge.style.cursor = 'pointer';
+                    badge.addEventListener('click', function(e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (e.target.closest('.round-actions')) return;
+
+                        const marker = this.closest('.round-marker');
+                        const startAttr = this.getAttribute('data-start-time') ?? marker?.getAttribute(
+                            'data-start-time');
+                        const startTime = startAttr === '' || startAttr === null ? 0 : parseFloat(startAttr);
+
+                        if (!Number.isNaN(startTime)) {
+                            const videoPlayer = document.getElementById('videoPlayer');
+                            if (videoPlayer) {
+                                videoPlayer.currentTime = Math.max(0, startTime);
+                                videoPlayer.play();
+                            }
+                        }
+                    });
+                });
+            }
+
+            function openModal(modalId) {
+                document.getElementById(modalId).classList.add('active');
+            }
+
+            function closeModal(modalId) {
+                document.getElementById(modalId).classList.remove('active');
+            }
+
+            let pendingDeleteAction = null;
+            let pendingDeleteId = null;
+
+            function requestDelete(type, id) {
+                if (!id) return;
+                pendingDeleteAction = type;
+                pendingDeleteId = id;
+
+                const message = document.getElementById('deleteConfirmMessage');
+                const sub = document.getElementById('deleteConfirmSub');
+                if (message) {
+                    message.textContent = `Delete this ${type}?`;
+                }
+                if (sub) {
+                    sub.textContent = 'This action cannot be undone.';
+                }
+
+                openModal('deleteConfirmModal');
+            }
+
+            function executeDelete() {
+                if (!pendingDeleteAction || !pendingDeleteId) {
+                    closeModal('deleteConfirmModal');
+                    return;
+                }
+
+                if (pendingDeleteAction === 'round') {
+                    performDeleteRound(pendingDeleteId);
+                } else if (pendingDeleteAction === 'point') {
+                    performDeletePoint(pendingDeleteId);
+                } else if (pendingDeleteAction === 'review') {
+                    performDeleteReview(pendingDeleteId);
+                }
+
+                pendingDeleteAction = null;
+                pendingDeleteId = null;
+                closeModal('deleteConfirmModal');
+            }
+            document.querySelectorAll('.match-modal-overlay').forEach(modal => {
+                modal.addEventListener('click', function(e) {
+                    if (e.target === this) this.classList.remove('active');
+                });
+            });
+
+            const csrfToken = '{{ Auth::check() ? csrf_token() : '' }}';
+            const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+            // Round/Point/Review functions (abbreviated for brevity)
+            function openAddRoundModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode: Requires authentication');
+                    return;
+                }
+                document.getElementById('roundNumber').value = '';
+                document.getElementById('roundName').value = '';
+                document.getElementById('roundStartTime').value = '';
+                openModal('addRoundModal');
+            }
+            async function storeRound(roundNumber, roundName, roundStartTime) {
+                if (!csrfToken) return;
+                try {
+                    const res = await fetch(`/videos/${videoId}/rounds`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            round_number: parseInt(roundNumber),
+                            name: roundName,
+                            start_time_seconds: roundStartTime !== '' ? parseMinuteSecondInput(
+                                roundStartTime) : null
+                        })
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('addRoundModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function editRound(roundNumber, roundId, currentName, currentStartTime = null) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+
+                // Fallback to DOM values if params are missing
+                if (!roundId) {
+                    const marker = document.querySelector(`.round-marker[data-round="${roundNumber}"]`);
+                    if (marker) {
+                        roundId = marker.getAttribute('data-round-id') || roundId;
+                        currentStartTime = marker.getAttribute('data-start-time') ?? currentStartTime;
+                        currentName = marker.querySelector('.round-badge')?.textContent?.trim() || currentName;
+                    }
+                }
+
+                document.getElementById('editRoundId').value = roundId || '';
+                document.getElementById('editRoundNumber').value = roundNumber || '';
+                document.getElementById('editRoundName').value = currentName || '';
+                document.getElementById('editRoundStartTime').value = (currentStartTime === null || currentStartTime ===
+                    undefined || currentStartTime === '') ? '' : toMinuteSecondInput(currentStartTime);
+                openModal('editRoundModal');
+            }
+            async function updateRound() {
+                if (!csrfToken) return;
+                const roundId = document.getElementById('editRoundId').value;
+                const roundNumber = document.getElementById('editRoundNumber').value;
+                const roundName = document.getElementById('editRoundName').value;
+                const roundStartTime = document.getElementById('editRoundStartTime').value;
+
+                try {
+                    // Use method spoofing to avoid servers/proxies that block true PUT and return HTML error pages
+                    const payload = new URLSearchParams();
+                    payload.append('_method', 'PUT');
+                    payload.append('round_number', parseInt(roundNumber));
+                    payload.append('name', roundName);
+                    if (roundStartTime !== '') {
+                        const parsedRoundStart = requireValidTimeInput(roundStartTime, 'Round start time');
+                        if (parsedRoundStart === null) return;
+                        payload.append('start_time_seconds', parsedRoundStart);
+                    }
+
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                            'X-CSRF-TOKEN': csrfToken,
+                            'Accept': 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest'
+                        },
+                        body: payload.toString()
+                    });
+
+                    let data;
+                    const contentType = res.headers.get('content-type') || '';
+                    if (contentType.includes('application/json')) {
+                        data = await res.json();
+                    } else {
+                        const text = await res.text();
+                        throw new Error(`Server returned non-JSON response (status ${res.status}). ${text.slice(0, 180)}`);
+                    }
+
+                    if (res.ok && data.success) {
+                        closeModal('editRoundModal');
+                        loadMatchData();
+                    } else {
+                        throw new Error(data.message || `Update failed (status ${res.status})`);
+                    }
+                } catch (e) {
+                    console.error('updateRound error:', e);
+                    alert('Error updating round: ' + e.message);
+                }
+            }
+            async function deleteRound(roundId) {
+                requestDelete('round', roundId);
+            }
+
+            async function performDeleteRound(roundId) {
+                if (!csrfToken) return;
+                try {
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) loadMatchData();
+                    else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function openAddPointModal(roundNumber, roundId) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('pointModalTitle').textContent = 'Add Point';
+                document.getElementById('pointId').value = '';
+                document.getElementById('pointRoundId').value = roundId || '';
+                document.getElementById('pointTimestamp').value = '';
+                document.getElementById('pointRoundSelect').value = roundNumber || '1';
+                document.getElementById('pointAction').value = '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = 'blue';
+                document.getElementById('pointNotes').value = '';
+                document.getElementById('deletePointBtn').style.display = 'none';
+                openModal('pointModal');
+            }
+
+            function editPoint(pointId) {
+                const el = document.querySelector(`.event-item[data-id="${pointId}"]`);
+                if (!el) return;
+                document.getElementById('pointModalTitle').textContent = 'Edit Point';
+                document.getElementById('pointId').value = pointId;
+                document.getElementById('pointTimestamp').value = toMinuteSecondInput(el.dataset.timeStart || '');
+                document.getElementById('pointRoundSelect').value = el.dataset.round || '1';
+                document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0]
+                    .trim() || '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ?
+                    'blue' : 'red';
+                document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2)
+                    .join('').trim() || '';
+                document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+                openModal('pointModal');
+            }
+            async function savePoint() {
+                if (!csrfToken) {
+                    closeModal('pointModal');
+                    return;
+                }
+                const pointId = document.getElementById('pointId').value;
+                const roundId = document.getElementById('pointRoundId').value;
+                const timestamp = document.getElementById('pointTimestamp').value;
+                const round = document.getElementById('pointRoundSelect').value;
+                const action = document.getElementById('pointAction').value;
+                const value = document.getElementById('pointValue').value;
+                const competitor = document.getElementById('pointCompetitor').value;
+                const notes = document.getElementById('pointNotes').value;
+                const parsedPointTimestamp = requireValidTimeInput(timestamp, 'Point timestamp');
+                if (parsedPointTimestamp === null) return;
+
+                try {
+                    if (pointId) {
+                        const res = await fetch(`/points/${pointId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                timestamp_seconds: parsedPointTimestamp,
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/points`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                round_id: roundId,
+                                timestamp_seconds: parseInt(timestamp),
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deletePoint(pointId) {
+                requestDelete('point', pointId);
+            }
+
+            async function performDeletePoint(pointId) {
+                if (!csrfToken) return;
+                try {
+                    const res = await fetch(`/points/${pointId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function setReviewEmoji(emoji, btnEl = null) {
+                const emojiInput = document.getElementById('reviewEmoji');
+                if (emojiInput) emojiInput.value = emoji;
+
+                const optionsWrap = document.getElementById('reviewEmojiOptions');
+                if (optionsWrap) {
+                    optionsWrap.querySelectorAll('.emoji-option-btn').forEach(b => b.classList.remove('active'));
+                }
+
+                if (btnEl) {
+                    btnEl.classList.add('active');
+                } else if (optionsWrap) {
+                    const target = optionsWrap.querySelector(`.emoji-option-btn[data-emoji="${emoji}"]`);
+                    if (target) target.classList.add('active');
+                }
+            }
+
+            function openAddReviewModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                const titleEl = document.getElementById('reviewModalTitle');
+                if (titleEl) {
+                    titleEl.innerHTML = '<span class="modal-title-icon">📝</span> Add Coach Note';
+                }
+                document.getElementById('reviewId').value = '';
+                document.getElementById('reviewStartTime').value = '';
+                document.getElementById('reviewEndTime').value = '';
+                document.getElementById('reviewNote').value = '';
+                document.getElementById('reviewCoach').value = '';
+                setReviewEmoji('🔥');
+                document.getElementById('deleteReviewBtn').style.display = 'none';
+                openModal('reviewModal');
+            }
+
+            function editReview(reviewId) {
+                // scope strictly to coach review tab to avoid picking points items with same data-id
+                const el = document.querySelector(`#tab-review .event-item[data-id="${reviewId}"]`);
+                if (!el) return;
+
+                const titleEl = document.getElementById('reviewModalTitle');
+                if (titleEl) {
+                    titleEl.innerHTML = '<span class="modal-title-icon">📝</span> Edit Coach Note';
+                }
+
+                document.getElementById('reviewId').value = reviewId;
+                document.getElementById('reviewStartTime').value = toMinuteSecondInput(el.dataset.timeStart || '');
+                document.getElementById('reviewEndTime').value = toMinuteSecondInput(el.dataset.timeEnd || '');
+
+                // support both old and new review item markup
+                const noteText = el.querySelector('.review-note-title')?.textContent?.trim() ||
+                    el.querySelector('.event-label')?.textContent?.trim() || '';
+                const coachName = el.querySelector('.review-author-name')?.textContent?.trim() ||
+                    el.querySelector('.coach-name')?.textContent?.trim() || '';
+                const emojiText = el.querySelector('.review-primary-row .emoji')?.textContent?.trim() ||
+                    el.querySelector('.event-time-container .emoji')?.textContent?.trim() || '🔥';
+
+                document.getElementById('reviewNote').value = noteText;
+                document.getElementById('reviewCoach').value = coachName;
+                setReviewEmoji(emojiText || '🔥');
+
+                document.getElementById('deleteReviewBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+                openModal('reviewModal');
+            }
+            async function saveReview() {
+                if (!csrfToken) return;
+                const reviewId = document.getElementById('reviewId').value;
+                const startTime = document.getElementById('reviewStartTime').value;
+                const endTime = document.getElementById('reviewEndTime').value;
+                const note = document.getElementById('reviewNote').value;
+                const coach = document.getElementById('reviewCoach').value;
+                const emoji = document.getElementById('reviewEmoji').value;
+                const parsedReviewStart = requireValidTimeInput(startTime, 'Review start time');
+                if (parsedReviewStart === null) return;
+                const parsedReviewEnd = endTime ? requireValidTimeInput(endTime, 'Review end time') : null;
+                if (endTime && parsedReviewEnd === null) return;
+
+                try {
+                    if (reviewId) {
+                        const res = await fetch(`/reviews/${reviewId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parsedReviewStart,
+                                end_time_seconds: parsedReviewEnd,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/reviews`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parsedReviewStart,
+                                end_time_seconds: parsedReviewEnd,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deleteReview(reviewId) {
+                requestDelete('review', reviewId);
+            }
+
+            async function performDeleteReview(reviewId) {
+                if (!csrfToken) return;
+                try {
+                    const res = await fetch(`/reviews/${reviewId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            // Playlist navigation
+            document.addEventListener('DOMContentLoaded', function() {
+                const videoPlayer = document.getElementById('videoPlayer');
+                const playlistControls = document.getElementById('playlistControls');
+                const autoplayToggle = document.getElementById('autoplayToggle');
+                if (videoPlayer) {
+                    videoPlayer.volume = 0.5;
+                    const playPromise = videoPlayer.play();
+                    if (playPromise !== undefined) {
+                        playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked'));
+                    }
+                    if (nextVideoUrl) {
+                        videoPlayer.addEventListener('ended', () => {
+                            if (autoplayEnabled) window.location.href = nextVideoUrl;
+                        });
+                    }
+                }
+                if (playlistControls) {
+                    const videoContainer = document.getElementById('videoContainer');
+                    videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible'));
+                    videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible'));
+                    setTimeout(() => playlistControls.classList.add('visible'), 2000);
+                    setTimeout(() => playlistControls.classList.remove('visible'), 6000);
+                }
+                if (autoplayToggle) {
+                    autoplayToggle.addEventListener('change', function() {
+                        autoplayEnabled = this.checked;
+                        localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                    });
+                    const saved = localStorage.getItem('playlistAutoplay');
+                    if (saved !== null) {
+                        autoplayEnabled = saved === '1';
+                        autoplayToggle.checked = autoplayEnabled;
+                    }
+                }
+                document.addEventListener('keydown', function(e) {
+                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        if (previousVideoUrl) window.location.href = previousVideoUrl;
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        if (nextVideoUrl) window.location.href = nextVideoUrl;
+                    }
+                });
+            });
+
+            function goToPreviousVideo() {
+                if (previousVideoUrl) window.location.href = previousVideoUrl;
+            }
+
+            function goToNextVideo() {
+                if (nextVideoUrl) window.location.href = nextVideoUrl;
+            }
+        </script>
+    @endsection
diff --git a/resources/views/videos/types/backup/music.blade.php b/resources/views/videos/types/backup/music.blade.php
new file mode 100644
index 0000000..e23ce88
--- /dev/null
+++ b/resources/views/videos/types/backup/music.blade.php
@@ -0,0 +1,1069 @@
+@extends('layouts.app')
+
+@section('title', $video->title . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* Video Section */
+        .yt-video-section {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* Video Player */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait {
+            aspect-ratio: 9/16;
+            max-width: 50vh;
+        }
+
+        .video-container.square {
+            aspect-ratio: 1/1;
+            max-width: 70vh;
+        }
+
+        .video-container.ultrawide {
+            aspect-ratio: 21/9;
+            max-width: 100%;
+        }
+
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        /* Playlist Navigation Controls */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible {
+            opacity: 1;
+        }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .playlist-nav-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .playlist-nav-btn:disabled:hover {
+            background: transparent;
+        }
+
+        .playlist-nav-btn i {
+            font-size: 20px;
+        }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* Autoplay Toggle */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch {
+            position: relative;
+            width: 36px;
+            height: 20px;
+        }
+
+        .autoplay-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider {
+            background-color: var(--brand-red);
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider:before {
+            transform: translateX(16px);
+        }
+
+        /* Keyboard hint */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* Video Info */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            color: var(--text-secondary);
+        }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover {
+            background: var(--border-color);
+        }
+
+        .action-btn,
+        .comments-section .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+
+        .action-btn:hover,
+        .comments-section .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .action-btn:active,
+        .comments-section .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .action-btn svg,
+        .action-btn i,
+        .comments-section .action-btn svg,
+        .comments-section .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .action-btn.comment-btn {
+            background: var(--brand-red);
+            color: white;
+            border-color: var(--brand-red);
+        }
+
+        .yt-action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        /* Channel Row */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            background: white;
+            color: black;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 18px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        /* Description */
+        .video-description {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 16px;
+        }
+
+        .description-text {
+            white-space: pre-wrap;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        /* Sidebar */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .sidebar-video-card {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+        }
+
+        .sidebar-thumb {
+            width: 168px;
+            aspect-ratio: 16/9;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #1a1a1a;
+            flex-shrink: 0;
+        }
+
+        .sidebar-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .sidebar-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .sidebar-title {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .sidebar-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        /* Responsive */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container {
+                width: 300px;
+            }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main {
+                margin-left: 0;
+                flex-direction: column;
+            }
+
+            .yt-sidebar-container {
+                width: 100%;
+            }
+
+            .sidebar-video-card {
+                flex-direction: column;
+            }
+
+            .sidebar-thumb {
+                width: 100%;
+            }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .video-actions {
+                width: 100%;
+                overflow-x: auto;
+                justify-content: flex-start;
+            }
+
+            .yt-main {
+                padding: 12px !important;
+            }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+
+            .video-container video {
+                object-fit: contain !important;
+            }
+
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+
+            .channel-info {
+                width: 100%;
+            }
+
+            .subscribe-btn {
+                width: 100%;
+            }
+
+            .video-description {
+                padding: 12px !important;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if ($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif"
+                id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
+                </video>
+
+                <!-- Playlist Navigation Controls (only show when in playlist) -->
+                @if ($nextVideo || $previousVideo)
+                    <div class="playlist-controls" id="playlistControls">
+                        <!-- Previous Video -->
+                        @if ($previousVideo)
+                            <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                            <span class="playlist-nav-label">{{ Str::limit($previousVideo->title, 20) }}</span>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                        @endif
+
+                        <!-- Autoplay Toggle -->
+                        <div class="autoplay-toggle">
+                            <label for="autoplayToggle">Autoplay</label>
+                            <label class="autoplay-switch">
+                                <input type="checkbox" id="autoplayToggle" checked>
+                                <span class="autoplay-slider"></span>
+                            </label>
+                        </div>
+
+                        <!-- Next Video -->
+                        @if ($nextVideo)
+                            <span class="playlist-nav-label">{{ Str::limit($nextVideo->title, 20) }}</span>
+                            <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @endif
+                    </div>
+                    <div class="keyboard-hint">
+                        <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                    </div>
+                @endif
+            </div>
+
+            <!-- Video Title with Music Note Icon (Music Type) -->
+            <h1 class="video-title" style="display: flex; align-items: center; gap: 10px; margin: 8px 0 6px;">
+                <i class="bi bi-music-note" style="color: #ef4444;"></i>
+                <span>{{ $video->title }}</span>
+            </h1>
+
+            <!-- Stats Row - Hidden, shown in description box -->
+            <div class="video-stats-row" style="display: none;">
+                <div class="video-stats-left">
+                    <span>{{ number_format($video->view_count) }} views</span>
+                    <span>•</span>
+                    <span>{{ $video->created_at->format('M d, Y') }}</span>
+                </div>
+            </div>
+
+            <!-- Channel Row - All in one line -->
+            <div class="channel-row"
+                style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none"
+                        style="color: inherit; display: flex; align-items: center; gap: 12px;">
+                        @if ($video->user)
+                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar"
+                                style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
+                        @else
+                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+                        @endif
+                        <div>
+                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
+                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">
+                                {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+                    @auth
+                        @if (Auth::id() !== $video->user_id)
+                            <button class="subscribe-btn">Subscribe</button>
+                        @else
+                            <button class="action-btn" onclick="openEditVideoModal({{ $video->id }})">
+                                <i class="bi bi-pencil"></i>
+                                <span>Edit</span>
+                            </button>
+                        @endif
+                    @else
+                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
+                    @endauth
+
+                    @auth
+                        <form method="POST"
+                            action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                            class="d-inline">
+                            @csrf
+                            <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
+                                <i
+                                    class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+                            </button>
+                        </form>
+                    @else
+                        <a href="{{ route('login') }}" class="yt-action-btn">
+                            <i class="bi bi-hand-thumbs-up"></i> Like
+                        </a>
+                    @endauth
+
+                    @if ($video->isShareable())
+                        <button class="action-btn"
+                            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
+                            <i class="bi bi-share"></i> Share
+                        </button>
+                    @endif
+
+                    <!-- Save to Playlist Button -->
+                    <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                        </svg>
+                        <span>Save</span>
+                    </button>
+
+
+                </div>
+            </div>
+
+            <!-- Description Box -->
+            @if ($video->description)
+                @php
+                    $fullDescription = $video->description;
+                    $shortDescription = Str::limit($fullDescription, 200);
+                    $needsExpand = strlen($fullDescription) > 200;
+                @endphp
+
+                <div class="video-description-box"
+                    style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-bottom: 16px;">
+                    <div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
+                        <span>{{ number_format($video->view_count) }} views</span>
+                        <span>•</span>
+                        <span>{{ $video->created_at->format('M d, Y') }}</span>
+                    </div>
+                    <div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
+                    <div class="description-content" id="descriptionContent">
+                        @if ($needsExpand)
+                            <div class="description-short" id="descShort">
+                                <span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
+                                <span class="description-ellipsis" style="color: var(--text-secondary);">... </span>
+                            </div>
+                            <div class="description-full" id="descFull" style="display: none;">
+                                <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                            </div>
+                            <button onclick="toggleDescription()" id="descToggleBtn"
+                                style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">
+                                Show more
+                            </button>
+                        @else
+                            <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                        @endif
+                    </div>
+                </div>
+
+                <script>
+                    function toggleDescription() {
+                        const descShort = document.getElementById('descShort');
+                        const descFull = document.getElementById('descFull');
+                        const toggleBtn = document.getElementById('descToggleBtn');
+
+                        if (descShort.style.display !== 'none') {
+                            descShort.style.display = 'none';
+                            descFull.style.display = 'block';
+                            toggleBtn.textContent = 'Show less';
+                        } else {
+                            descShort.style.display = 'block';
+                            descFull.style.display = 'none';
+                            toggleBtn.textContent = 'Show more';
+                        }
+                    }
+                </script>
+
+                <style>
+                    .video-description-box .description-text {
+                        font-size: 14px;
+                        line-height: 1.5;
+                        color: var(--text-primary);
+                    }
+
+                    .video-description-box .description-text p {
+                        margin-bottom: 8px;
+                    }
+
+                    .video-description-box .description-text a {
+                        color: #3ea6ff;
+                    }
+                </style>
+            @endif
+
+            <!-- Comment Section -->
+            <div class="comments-section"
+                style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                    Comments <span
+                        style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
+                </h3>
+
+                @auth
+                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                            alt="{{ Auth::user()->name }}">
+                        <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                            <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
+                                rows="1"
+                                style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                            <button type="button" class="action-btn"
+                                onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
+                                <i class="bi bi-x-lg"></i>
+                                <span>Cancel</span>
+                            </button>
+                            <button type="button" class="action-btn comment-btn"
+                                onclick="submitComment({{ $video->id }})" style="flex-shrink: 0;">
+                                <i class="bi bi-chat-dots"></i>
+                                <span>Comment</span>
+                            </button>
+                        </div>
+                    </div>
+                @else
+                    <div
+                        style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                    </div>
+                @endauth
+
+                <div id="commentsList">
+                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                        @include('videos.partials.comment', ['comment' => $comment])
+                    @empty
+                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the
+                            first to comment!</p>
+                    @endforelse
+                </div>
+            </div>
+
+            <script>
+                function submitComment(videoId) {
+                    const body = document.getElementById('commentBody').value.trim();
+                    if (!body) return;
+
+                    fetch(`/videos/${videoId}/comments`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                            },
+                            body: JSON.stringify({
+                                body: body
+                            })
+                        })
+                        .then(response => response.json())
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Failed to post comment: ' + error);
+                        })
+                        .then(data => {
+                            if (data && data.success) {
+                                document.getElementById('commentBody').value = '';
+                                addCommentToList(data.comment);
+                            } else {
+                                alert('Failed to post comment');
+                            }
+                        });
+                }
+
+                function addCommentToList(comment) {
+                    const commentsList = document.getElementById('commentsList');
+                    const commentHtml = `
+                    <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
+                        <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
+                        <div style="flex: 1;">
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+                                <span style="font-weight: 600; font-size: 14px;">${comment.user.name}</span>
+                                <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
+                            </div>
+                            <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
+                                ${comment.body.replace(/@(\\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>')}
+                            </div>
+                            <div style="display: flex; gap: 12px; margin-top: 8px;">
+                                <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                                    Reply
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                    commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                    const commentCount = document.querySelector('h3 span');
+                    if (commentCount) {
+                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                        commentCount.textContent = `(${count})`;
+                    }
+                }
+
+                function deleteComment(commentId) {
+                    if (confirm('Are you sure you want to delete this comment?')) {
+                        fetch(`/comments/${commentId}`, {
+                                method: 'DELETE',
+                                headers: {
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                }
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    document.getElementById('comment-' + commentId).remove();
+                                    const commentCount = document.querySelector('h3 span');
+                                    if (commentCount) {
+                                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                        commentCount.textContent = `(${count})`;
+                                    }
+                                }
+                            });
+                    }
+                }
+
+                document.addEventListener('DOMContentLoaded', function() {
+                    const commentTexts = document.querySelectorAll('.comment-body');
+                    commentTexts.forEach(text => {
+                        const html = text.innerHTML.replace(/@(\w+)/g,
+                            '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                        text.innerHTML = html;
+                    });
+                });
+
+                function submitReply(videoId, parentId) {
+                    const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                    const body = textarea.value.trim();
+                    if (!body) return;
+
+                    fetch(`/videos/${videoId}/comments`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                            },
+                            body: JSON.stringify({
+                                body: body,
+                                parent_id: parentId
+                            })
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                location.reload();
+                            }
+                        });
+                }
+            </script>
+        </div>
+
+        <!-- Sidebar - Up Next / Recommendations -->
+        <div class="yt-sidebar-container">
+            @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                    <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                    {{ $playlist->name }}
+                    <span
+                        style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                        videos)</span>
+                </h3>
+                <div class="recommended-videos-list">
+                    @foreach ($playlistVideos as $index => $playlistVideo)
+                        @if ($playlistVideo->id !== $video->id)
+                            <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                                onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                                <div class="sidebar-thumb" style="position: relative;">
+                                    @if ($playlistVideo->thumbnail)
+                                        <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                            alt="{{ $playlistVideo->title }}">
+                                    @else
+                                        <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                            alt="{{ $playlistVideo->title }}">
+                                    @endif
+                                    @if ($playlistVideo->duration)
+                                        <span
+                                            class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                    @endif
+                                    @if ($playlistVideo->is_shorts)
+                                        <span class="yt-shorts-badge"
+                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                            <i class="bi bi-collection-play-fill"></i> SHORTS
+                                        </span>
+                                    @endif
+                                    <!-- Playlist position indicator -->
+                                    <span
+                                        style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                        {{ $index + 1 }}
+                                    </span>
+                                </div>
+                                <div class="sidebar-info">
+                                    <div class="sidebar-title">
+                                        <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                        {{ Str::limit($playlistVideo->title, 60) }}
+                                    </div>
+                                    <div class="sidebar-meta">
+                                        <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                        <div>{{ number_format($playlistVideo->view_count) }} views •
+                                            {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        @endif
+                    @endforeach
+                </div>
+                @if ($playlist->canEdit(Auth::user()))
+                    <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                        style="margin-top: 12px; display: inline-block;">
+                        <i class="bi bi-pencil"></i> Edit Playlist
+                    </a>
+                @endif
+            @else
+                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                    <div class="recommended-videos-list">
+                        @foreach ($recommendedVideos as $recVideo)
+                            <div class="sidebar-video-card"
+                                onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                                <div class="sidebar-thumb">
+                                    @if ($recVideo->thumbnail)
+                                        <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                            alt="{{ $recVideo->title }}">
+                                    @else
+                                        <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                            alt="{{ $recVideo->title }}">
+                                    @endif
+                                    @if ($recVideo->duration)
+                                        <span class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                    @endif
+                                    @if ($recVideo->is_shorts)
+                                        <span class="yt-shorts-badge"
+                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                            <i class="bi bi-collection-play-fill"></i> SHORTS
+                                        </span>
+                                    @endif
+                                </div>
+                                <div class="sidebar-info">
+                                    <div class="sidebar-title">
+                                        <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                        {{ Str::limit($recVideo->title, 60) }}
+                                    </div>
+                                    <div class="sidebar-meta">
+                                        <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                        <div>{{ number_format($recVideo->view_count) }} views •
+                                            {{ $recVideo->created_at->diffForHumans() }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                @else
+                    <div class="text-secondary">No recommendations available yet. Check back later!</div>
+                @endif
+            @endif
+        </div>
+
+    </div>
+
+    @include('layouts.partials.share-modal')
+    @include('layouts.partials.edit-video-modal')
+
+    @if (Session::has('openEditModal') && Session::get('openEditModal'))
+        @auth
+            <script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    openEditVideoModal({{ $video->id }});
+                });
+            </script>
+        @endauth
+    @endif
+
+    <script>
+        // Playlist navigation URLs
+        const previousVideoUrl = @json($previousVideo ? route('videos.show', $previousVideo->id) . '?playlist=' . $playlist->id : null);
+        const nextVideoUrl = @json($nextVideo ? route('videos.show', $nextVideo->id) . '?playlist=' . $playlist->id : null);
+
+        // Autoplay management
+        let autoplayEnabled = true;
+
+        document.addEventListener('DOMContentLoaded', function() {
+            var videoPlayer = document.getElementById('videoPlayer');
+            var playlistControls = document.getElementById('playlistControls');
+            var autoplayToggle = document.getElementById('autoplayToggle');
+
+            if (videoPlayer) {
+                videoPlayer.volume = 0.5;
+                var playPromise = videoPlayer.play();
+                if (playPromise !== undefined) {
+                    playPromise.then(function() {
+                        console.log('Video autoplayed');
+                    }).catch(function(error) {
+                        console.log('Autoplay blocked');
+                    });
+                }
+
+                // Handle video ended - autoplay next
+                if (nextVideoUrl) {
+                    videoPlayer.addEventListener('ended', function() {
+                        if (autoplayEnabled) {
+                            console.log('Video ended, going to next...');
+                            window.location.href = nextVideoUrl;
+                        }
+                    });
+                }
+            }
+
+            // Show playlist controls on hover
+            if (playlistControls) {
+                const videoContainer = document.getElementById('videoContainer');
+                videoContainer.addEventListener('mouseenter', function() {
+                    playlistControls.classList.add('visible');
+                });
+                videoContainer.addEventListener('mouseleave', function() {
+                    playlistControls.classList.remove('visible');
+                });
+
+                // Initially show for a few seconds
+                setTimeout(function() {
+                    playlistControls.classList.add('visible');
+                }, 2000);
+                setTimeout(function() {
+                    playlistControls.classList.remove('visible');
+                }, 6000);
+            }
+
+            // Autoplay toggle handler
+            if (autoplayToggle) {
+                autoplayToggle.addEventListener('change', function() {
+                    autoplayEnabled = this.checked;
+                    localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                });
+
+                // Load saved preference
+                const savedAutoplay = localStorage.getItem('playlistAutoplay');
+                if (savedAutoplay !== null) {
+                    autoplayEnabled = savedAutoplay === '1';
+                    autoplayToggle.checked = autoplayEnabled;
+                }
+            }
+
+            // Keyboard navigation
+            document.addEventListener('keydown', function(e) {
+                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+                    return;
+                }
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    goToPreviousVideo();
+                } else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    goToNextVideo();
+                }
+            });
+        });
+
+        function goToPreviousVideo() {
+            if (previousVideoUrl) {
+                window.location.href = previousVideoUrl;
+            }
+        }
+
+        function goToNextVideo() {
+            if (nextVideoUrl) {
+                window.location.href = nextVideoUrl;
+            }
+        }
+    </script>
+@endsection
diff --git a/resources/views/videos/types/generic.blade.php b/resources/views/videos/types/generic.blade.php
index 778b9fc..353eece 100644
--- a/resources/views/videos/types/generic.blade.php
+++ b/resources/views/videos/types/generic.blade.php
@@ -210,75 +210,6 @@
             color: var(--text-secondary);
         }
 
-        .video-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .yt-action-btn {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            border-radius: 20px;
-            border: none;
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .yt-action-btn:hover {
-            background: var(--border-color);
-        }
-
-        .action-btn,
-        .comments-section .action-btn {
-            border: none;
-            border-radius: 8px;
-            padding: 8px 14px;
-            font-size: 0.82rem;
-            font-weight: 500;
-            cursor: pointer;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            transition: all 0.2s ease;
-        }
-
-        .action-btn:hover,
-        .comments-section .action-btn:hover {
-            background: var(--border-color);
-            transform: translateY(-1px);
-        }
-
-        .action-btn:active,
-        .comments-section .action-btn:active {
-            transform: translateY(0);
-        }
-
-        .action-btn svg,
-        .action-btn i,
-        .comments-section .action-btn svg,
-        .comments-section .action-btn i {
-            flex-shrink: 0;
-        }
-
-        .action-btn.comment-btn {
-            background: var(--brand-red);
-            color: white;
-            border-color: var(--brand-red);
-        }
-
-        .yt-action-btn.liked {
-            color: var(--brand-red);
-        }
-
         /* Channel Row */
         .channel-row {
             display: flex;
@@ -310,18 +241,6 @@
             color: var(--text-secondary);
         }
 
-        .subscribe-btn {
-            background: white;
-            color: black;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 18px;
-            font-weight: 600;
-            font-size: 14px;
-            cursor: pointer;
-            white-space: nowrap;
-        }
-
         /* Description */
         .video-description {
             background: var(--bg-secondary);
@@ -546,76 +465,7 @@
                 </div>
             </div>
 
-            <!-- Channel Row - All in one line -->
-            <div class="channel-row"
-                style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
-                <div style="display: flex; align-items: center; gap: 12px;">
-                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none"
-                        style="color: inherit; display: flex; align-items: center; gap: 12px;">
-                        @if ($video->user)
-                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar"
-                                style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
-                        @else
-                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
-                        @endif
-                        <div>
-                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
-                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">
-                                {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
-                        </div>
-                    </a>
-                </div>
-
-                <div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
-                    @auth
-                        @if (Auth::id() !== $video->user_id)
-                            <button class="subscribe-btn">Subscribe</button>
-                        @else
-                            <button class="action-btn" onclick="openEditVideoModal({{ $video->id }})">
-                                <i class="bi bi-pencil"></i>
-                                <span>Edit</span>
-                            </button>
-                        @endif
-                    @else
-                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
-                    @endauth
-
-                    @auth
-                        <form method="POST"
-                            action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
-                            class="d-inline">
-                            @csrf
-                            <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
-                                <i
-                                    class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
-                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
-                            </button>
-                        </form>
-                    @else
-                        <a href="{{ route('login') }}" class="yt-action-btn">
-                            <i class="bi bi-hand-thumbs-up"></i> Like
-                        </a>
-                    @endauth
-
-                    @if ($video->isShareable())
-                        <button class="action-btn"
-                            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
-                            <i class="bi bi-share"></i> Share
-                        </button>
-                    @endif
-
-                    <!-- Save to Playlist Button -->
-                    <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
-                        </svg>
-                        <span>Save</span>
-                    </button>
-
-
-                </div>
-            </div>
+            <x-channel-row :video="$video" />
 
             <!-- Description Box -->
             @if ($video->description)
@@ -700,16 +550,15 @@
                         <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
                             alt="{{ Auth::user()->name }}">
                         <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
-                            <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
-                                rows="1"
+                            <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone" rows="1"
                                 style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
                             <button type="button" class="action-btn"
                                 onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
                                 <i class="bi bi-x-lg"></i>
                                 <span>Cancel</span>
                             </button>
-                            <button type="button" class="action-btn comment-btn"
-                                onclick="submitComment({{ $video->id }})" style="flex-shrink: 0;">
+                            <button type="button" class="action-btn comment-btn" onclick="submitComment({{ $video->id }})"
+                                style="flex-shrink: 0;">
                                 <i class="bi bi-chat-dots"></i>
                                 <span>Comment</span>
                             </button>
diff --git a/resources/views/videos/types/match.blade copy.php b/resources/views/videos/types/match.blade copy.php
new file mode 100644
index 0000000..363051a
--- /dev/null
+++ b/resources/views/videos/types/match.blade copy.php	
@@ -0,0 +1,3515 @@
+@extends('layouts.app')
+@section('title', ($video->title ?? 'Match Video') . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* ===== Video Section ===== */
+        .yt-video-section {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* ===== Sidebar (copied from music.blade.php) ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .sidebar-video-card {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+        }
+
+        .sidebar-thumb {
+            width: 168px;
+            aspect-ratio: 16/9;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #1a1a1a;
+            flex-shrink: 0;
+        }
+
+        .sidebar-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .sidebar-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .sidebar-title {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .sidebar-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        /* ===== Video Player ===== */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait {
+            aspect-ratio: 9/16;
+            max-width: 50vh;
+        }
+
+        .video-container.square {
+            aspect-ratio: 1/1;
+            max-width: 70vh;
+        }
+
+        .video-container.ultrawide {
+            aspect-ratio: 21/9;
+            max-width: 100%;
+        }
+
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        /* Match Highlights Toggle Button */
+        .match-highlights-toggle {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.85);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 16px;
+            width: 64px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            z-index: 15;
+            transition: all 0.2s ease;
+            backdrop-filter: blur(12px);
+            font-size: 9px;
+            font-weight: 600;
+            letter-spacing: 0.2px;
+            padding: 0 6px;
+        }
+
+        .match-highlights-toggle:hover {
+            background: rgba(255, 255, 255, 0.12);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-1px);
+        }
+
+        /* No rotation animation */
+
+        /* Hide sidebar by default */
+        .events-sidebar {
+            display: none;
+        }
+
+        .events-sidebar.show {
+            display: flex;
+        }
+
+        /* ===== Playlist Navigation Controls ===== */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible {
+            opacity: 1;
+        }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .playlist-nav-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .playlist-nav-btn:disabled:hover {
+            background: transparent;
+        }
+
+        .playlist-nav-btn i {
+            font-size: 20px;
+        }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* ===== Autoplay Toggle ===== */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch {
+            position: relative;
+            width: 36px;
+            height: 20px;
+        }
+
+        .autoplay-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider {
+            background-color: var(--brand-red);
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider:before {
+            transform: translateX(16px);
+        }
+
+        /* ===== Keyboard Hint ===== */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* ===== Video Info ===== */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            color: var(--text-secondary);
+        }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover {
+            background: var(--border-color);
+        }
+
+        .yt-action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        /* ===== Channel Row ===== */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            background: white;
+            color: black;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 18px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        /* ===== Event Header ===== */
+        .event-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-top: 16px;
+            padding: 12px 0;
+        }
+
+        .event-header-left {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-logo {
+            width: 56px;
+            height: 56px;
+            border-radius: 14px;
+            overflow: hidden;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .event-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .event-text {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-text .title {
+            font-size: 1.4rem;
+            margin: 0;
+            line-height: 1.3;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .event-text .title .trophy-icon {
+            color: #ef4444;
+            font-size: 1.2rem;
+        }
+
+        .event-text .title a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .event-text .title a:hover {
+            text-decoration: underline;
+            opacity: 0.85;
+        }
+
+        .event-text .meta-link {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .event-text .meta-link:hover {
+            color: var(--brand-red);
+        }
+
+        .event-text .meta-link a {
+            color: inherit;
+            font-weight: bold;
+            text-decoration: none;
+        }
+
+        .event-text .meta-link a:hover {
+            text-decoration: underline;
+        }
+
+        .event-header-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+
+        .event-header-actions .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .event-header-actions .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .event-header-actions .action-btn svg,
+        .event-header-actions .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        .action-btn,
+        .action-btn a,
+        .comment-section .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+            text-decoration: none;
+        }
+
+        .action-btn:hover,
+        .action-btn a:hover,
+        .comment-section .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+            text-decoration: none;
+        }
+
+        .action-btn:active,
+        .comment-section .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .action-btn svg,
+        .action-btn i,
+        .comment-section .action-btn svg,
+        .comment-section .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .action-btn.comment-btn {
+            background: var(--brand-red);
+            color: white;
+            border-color: var(--brand-red);
+        }
+
+        .event-header-actions .action-btn.disliked {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.15);
+            border-color: #ef4444;
+        }
+
+        .event-header-actions .action-btn.saved {
+            color: #f59e0b;
+            background: rgba(245, 158, 11, 0.15);
+            border-color: #f59e0b;
+        }
+
+        .event-header-actions .action-btn.subscribed {
+            color: #ffffff;
+            background: #6b7280;
+            border-color: #6b7280;
+        }
+
+        /* Video Owner Badge */
+        .video-owner-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
+        .video-owner-badge .owner-avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+
+        .video-owner-badge .owner-name {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+
+        /* ===== Description Panel ===== */
+        .description-panel {
+            margin-top: 16px;
+            border-radius: 12px;
+            padding: 8px 10px 10px;
+        }
+
+        .description-toggle {
+            width: 100%;
+            border: none;
+            background: transparent;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            cursor: pointer;
+            padding: 4px 0;
+        }
+
+        .description-toggle:hover {
+            color: #ffffff;
+        }
+
+        .description-body {
+            margin-top: 6px;
+            display: none;
+        }
+
+        .description-body.open {
+            display: block;
+        }
+
+        /* ===== Match Card ===== */
+        .match-card {
+            margin-top: 16px;
+            padding: 16px 18px;
+            border-radius: 14px;
+            border: 1px solid var(--border-color);
+            background: var(--bg-secondary);
+        }
+
+        .match-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .match-label {
+            font-size: 1.2rem;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--text-primary);
+            text-align: center;
+            font-weight: 600;
+        }
+
+        .fighters-row {
+            display: grid;
+            grid-template-columns: 1.1fr 0.8fr 1.1fr;
+            align-items: stretch;
+            gap: 16px;
+        }
+
+        .fighter-card {
+            border-radius: 14px;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .fighter-top {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+        }
+
+        .fighter-photo {
+            width: 110px;
+            height: 145px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .fighter-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .fighter-logo {
+            width: 64px;
+            height: 64px;
+            border-radius: 20px;
+            overflow: hidden;
+            background: var(--bg-primary);
+        }
+
+        .fighter-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .fighter-badge {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.12em;
+            padding: 3px 8px;
+            border-radius: 999px;
+            border: 1px solid #404040;
+            color: var(--text-primary);
+        }
+
+        .fighter-badge.blue {
+            background: rgba(37, 99, 235, 0.15);
+            border-color: #1d4ed8;
+        }
+
+        .fighter-badge.red {
+            background: rgba(239, 68, 68, 0.14);
+            border-color: #b91c1c;
+        }
+
+        .fighter-name.blue-corner {
+            color: #2563eb;
+            font-weight: bold;
+        }
+
+        .fighter-name.red-corner {
+            color: #ef4444;
+            font-weight: bold;
+        }
+
+        .fighter-name a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-name a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-info {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            width: 100%;
+            text-align: center;
+            font-size: 0.8rem;
+        }
+
+        .fighter-name {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .fighter-team {
+            color: var(--text-secondary);
+        }
+
+        .fighter-team a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-team a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-country {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .fighter-country-flag {
+            font-size: 0.9rem;
+        }
+
+        .match-center {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+        }
+
+        .score-pill {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+        }
+
+        .score-number {
+            font-size: 2rem;
+            font-weight: 700;
+        }
+
+        .score-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .referee-block {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .referee-photo {
+            width: 80px;
+            height: 115px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .referee-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .referee-block a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .referee-block a:hover {
+            text-decoration: underline;
+        }
+
+        .ref-label {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+        }
+
+        .match-footer {
+            margin-top: 12px;
+            font-size: 0.8rem;
+            color: #666666;
+            text-align: center;
+        }
+
+        .hall-link {
+            color: #e61e1e;
+            font-weight: 600;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .hall-link:hover {
+            color: #ff4757;
+            text-decoration: underline;
+        }
+
+        /* ===== Markdown Body ===== */
+        .markdown-body {
+            font-size: 0.95rem;
+            line-height: 1.6;
+            margin-top: 16px;
+        }
+
+        .markdown-body h2 {
+            font-size: 1.05rem;
+            margin-top: 14px;
+        }
+
+        .description-text {
+            font-size: 14px;
+            line-height: 1.5;
+            color: var(--text-primary);
+        }
+
+        .description-text p {
+            margin-bottom: 8px;
+        }
+
+        .description-text a {
+            color: #3ea6ff;
+        }
+
+        /* ===== Sidebar ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        /* ===== Match Events Sidebar ===== */
+        .events-sidebar {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            width: 400px;
+            flex-shrink: 0;
+            height: var(--video-height, 70vh);
+            display: none !important;
+            flex-direction: column;
+        }
+
+        .events-sidebar.show {
+            display: flex !important;
+        }
+
+        .events-sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .events-sidebar-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .close-btn:hover {
+            color: var(--text-primary);
+        }
+
+        .tab-header {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab-button {
+            flex: 1;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border-bottom: 2px solid transparent;
+        }
+
+        .tab-button:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .tab-button.active {
+            color: var(--brand-red);
+            border-bottom-color: var(--brand-red);
+        }
+
+        .tab-panels {
+            height: 100%;
+            overflow-y: auto;
+            flex: 1;
+        }
+
+        /* Custom Scrollbar for Match Highlights */
+        .tab-panels::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .tab-panels::-webkit-scrollbar-track {
+            background: var(--bg-primary);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb:hover {
+            background: var(--text-secondary);
+        }
+
+        .tab-panels::-webkit-scrollbar-corner {
+            background: var(--bg-primary);
+        }
+
+        .tab-panel {
+            display: none;
+            padding: 16px;
+        }
+
+        .tab-panel.active {
+            display: block;
+        }
+
+        .section-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 500;
+        }
+
+        .btn-icon {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .btn-icon:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .btn-add {
+            background: var(--brand-red);
+            color: white;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .btn-add:hover {
+            background: #dc2626;
+        }
+
+        .event-list {
+            margin-top: 12px;
+        }
+
+        .round-marker {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 8px;
+            margin-bottom: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .round-marker:first-child {
+            border-top: none;
+            margin-top: 0;
+        }
+
+        .round-badge {
+            background-color: #fbbf24;
+            color: #000000;
+            font-weight: 700;
+            padding: 4px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            display: inline-block;
+        }
+
+        .round-actions {
+            display: flex;
+            gap: 4px;
+        }
+
+        .round-action-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+
+        .round-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-item {
+            display: flex;
+            gap: 12px;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            margin-bottom: 4px;
+            position: relative;
+        }
+
+        .event-item:hover {
+            background: var(--border-color);
+        }
+
+        .event-item:hover .event-actions {
+            opacity: 1;
+        }
+
+        .event-actions {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .event-action-btn {
+            background: var(--bg-primary);
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+        }
+
+        .event-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-action-btn.delete:hover {
+            color: var(--brand-red);
+        }
+
+        .event-time {
+            font-size: 12px;
+            color: #3ea6ff;
+            font-weight: 500;
+            min-width: 55px;
+            text-align: center;
+        }
+
+        .event-label {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .event-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.4;
+        }
+
+        .pill {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .pill-blue {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .pill-red {
+            background: #ef4444;
+            color: white;
+        }
+
+        /* ===== Coach Review Tab Specific Styles ===== */
+        /* ===== PROFESSIONAL CREATIVE COACH REVIEW ===== */
+        #tab-review .event-item {
+            position: relative;
+            padding: 0;
+            margin-bottom: 16px;
+            border-radius: 16px;
+            overflow: hidden;
+            background: linear-gradient(145deg, rgba(20,20,20,0.8), rgba(30,30,30,0.6));
+            border: 1px solid rgba(255,255,255,0.08);
+            backdrop-filter: blur(12px);
+            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            cursor: pointer;
+        }
+
+        #tab-review .event-item:hover {
+            transform: translateY(-4px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
+        }
+
+        /* Creative Timeline Badge */
+        .review-badge {
+            position: absolute;
+            left: -8px;
+            top: 12px;
+            width: 16px;
+            height: 16px;
+            background: linear-gradient(135deg, #3ea6ff, #60a5fa);
+            border-radius: 50%;
+            border: 3px solid var(--bg-secondary);
+            box-shadow: 0 0 0 4px rgba(62,166,255,0.3);
+            z-index: 2;
+            transition: all 0.3s ease;
+        }
+
+        #tab-review .event-item:hover .review-badge {
+            transform: scale(1.2);
+            box-shadow: 0 0 0 6px rgba(62,166,255,0.4);
+        }
+
+        /* Main Content Area */
+        .review-content {
+            padding: 20px 24px 24px;
+            position: relative;
+        }
+
+        /* Top Bar: Emoji + Time - Compact & Elegant */
+        .review-top-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .review-emoji {
+            font-size: 20px;
+            line-height: 1;
+        }
+
+        .review-time {
+            background: rgba(62,166,255,0.12);
+            color: #60a5fa;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 13px;
+            white-space: nowrap;
+        }
+
+        /* Note - Prominent & Readable */
+        .review-note-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 6px;
+            line-height: 1.3;
+        }
+
+        .review-note-text {
+            color: var(--text-secondary);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        /* Bottom Bar: Avatar + Name - Professional */
+        .review-author-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding-top: 12px;
+            margin-top: 12px;
+            border-top: 1px solid rgba(255,255,255,0.08);
+            opacity: 0.9;
+        }
+
+        .review-author-avatar {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 1px solid rgba(255,255,255,0.4);
+            flex-shrink: 0;
+        }
+
+        .review-author-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        /* Review item hover improvements */
+        #tab-review .event-item:hover {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 12px;
+            margin: -2px 0 -2px -8px;
+            border-left: 3px solid var(--brand-red);
+        }
+
+        /* Ensure consistency with points tab on mobile */
+        @media (max-width: 768px) {
+            #tab-review .event-item {
+                flex-direction: column;
+                gap: 8px;
+            }
+
+            #tab-review .event-time {
+                align-self: flex-start;
+                order: -1;
+            }
+        }
+
+        /* ===== Match Modal Styles ===== */
+        .match-modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(8px);
+            z-index: 9999;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .match-modal-overlay.active {
+            display: flex;
+        }
+
+        .match-modal-content {
+            background: linear-gradient(145deg, var(--bg-secondary), rgba(20,20,20,0.95));
+            border-radius: 20px;
+            padding: 32px;
+            width: 90%;
+            max-width: 480px;
+            max-height: 85vh;
+            overflow-y: auto;
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255,255,255,0.08);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
+                        0 0 0 1px rgba(255, 255, 255, 0.05);
+        }
+
+        .match-modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .match-modal-header h3 {
+            font-size: 22px;
+            font-weight: 700;
+            margin: 0;
+            background: linear-gradient(135deg, var(--text-primary), #ffffff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .match-modal-close {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .match-modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .match-form-group {
+            margin-bottom: 16px;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 6px;
+            color: var(--text-primary);
+        }
+
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+        }
+
+        .match-form-row {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 16px;
+        }
+
+        .match-form-row .match-form-group {
+            flex: 1;
+        }
+
+        /* Premium form input styles */
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 16px 20px;
+            border: 2px solid rgba(255,255,255,0.08);
+            border-radius: 16px;
+            background: rgba(255,255,255,0.03);
+            color: var(--text-primary);
+            font-size: 15px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-sizing: border-box;
+            backdrop-filter: blur(10px);
+        }
+
+        .match-form-group input:hover,
+        .match-form-group select:hover,
+        .match-form-group textarea:hover {
+            border-color: rgba(255,255,255,0.15);
+            background: rgba(255,255,255,0.05);
+            transform: translateY(-1px);
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15),
+                        0 8px 25px rgba(239, 68, 68, 0.1);
+            background: rgba(255,255,255,0.08);
+            transform: translateY(-2px);
+        }
+
+        .match-form-group textarea {
+            resize: vertical;
+            min-height: 100px;
+            font-family: inherit;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: var(--text-primary);
+            letter-spacing: 0.5px;
+        }
+
+        /* Custom scrollbar for modals - blended & subtle */
+        .match-modal-content::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.35);
+        }
+
+        /* Hide scrollbar for Firefox */
+        .match-modal-content {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255,255,255,0.2) transparent;
+        }
+
+        /* Modal responsive */
+        @media (max-width: 500px) {
+            .match-form-row {
+                flex-direction: column;
+                gap: 0;
+            }
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            margin-top: 28px;
+            padding-top: 20px;
+            border-top: 1px solid rgba(255,255,255,0.08);
+        }
+
+        .match-btn-cancel {
+            background: rgba(255,255,255,0.05);
+            border: 2px solid rgba(255,255,255,0.12);
+            color: var(--text-primary);
+            padding: 14px 28px;
+            border-radius: 14px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            flex: 1;
+            max-width: 140px;
+        }
+
+        .match-btn-cancel:hover {
+            background: rgba(255,255,255,0.1);
+            border-color: rgba(255,255,255,0.25);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+        }
+
+        .match-btn-save {
+            background: linear-gradient(135deg, var(--brand-red), #dc2626);
+            border: none;
+            color: white;
+            padding: 14px 32px;
+            border-radius: 14px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 700;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+        }
+
+        .match-btn-save:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 35px rgba(239, 68, 68, 0.4);
+        }
+
+        .match-btn-delete {
+            background: rgba(239, 68, 68, 0.1);
+            border: 2px solid var(--brand-red);
+            color: var(--brand-red);
+            padding: 14px 28px;
+            border-radius: 14px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            flex: 1;
+            max-width: 140px;
+        }
+
+        .match-btn-delete:hover {
+            background: var(--brand-red);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+        }
+
+        /* ===== Responsive ===== */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container {
+                width: 300px;
+            }
+
+            .events-sidebar {
+                width: 300px;
+            }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main {
+                margin-left: 0;
+                flex-direction: column;
+            }
+
+            .yt-sidebar-container,
+            .events-sidebar {
+                width: 100%;
+            }
+
+            .sidebar-video-card {
+                flex-direction: column;
+            }
+
+            .sidebar-thumb {
+                width: 100%;
+            }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+
+            .fighters-row {
+                grid-template-columns: 1fr !important;
+            }
+
+            .match-center {
+                order: -1;
+            }
+
+            .event-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .event-header-actions {
+                align-self: flex-end;
+                width: 100%;
+                justify-content: flex-end;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .video-actions {
+                width: 100%;
+                overflow-x: auto;
+                justify-content: flex-start;
+            }
+
+            .yt-main {
+                padding: 12px !important;
+            }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+
+            .video-container video {
+                object-fit: contain !important;
+            }
+
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+
+            .channel-info {
+                width: 100%;
+            }
+
+            .subscribe-btn {
+                width: 100%;
+            }
+
+            .description-panel {
+                padding: 8px !important;
+            }
+
+            .match-card {
+                padding: 12px !important;
+            }
+
+            .event-header {
+                padding: 8px 0;
+            }
+
+            .event-text .title {
+                font-size: 1.1rem;
+            }
+
+            .event-header-actions {
+                gap: 4px;
+            }
+
+            .event-header-actions .action-btn {
+                padding: 6px 10px;
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+    @php
+        // ===== DUMMY DATA FALLBACKS =====
+        $blueFighter =
+            $blueFighter ??
+            (object) [
+                'name' => 'Sami Al Manea',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_5.png?v=1773157950',
+                'team' => 'Emperor TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/1/branding/logo_1771488666.png',
+                'member_id' => 5,
+                'club_url' => 'https://takeone-dev.innovator.bh/mobile/eta',
+            ];
+        $redFighter =
+            $redFighter ??
+            (object) [
+                'name' => 'Hassan Al Shallan',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_11.png?t=1773268056907',
+                'team' => 'Legend TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/logos/logo_1773267551.png',
+                'member_id' => 11,
+                'club_url' => 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy',
+            ];
+        $match =
+            $match ??
+            (object) [
+                'number' => '103',
+                'court' => '2',
+                'weight_category' => 'U18',
+                'score_blue' => 7,
+                'score_red' => 5,
+                'features' =>
+                    'Electronic scoring system (PSS & head‑gear) • Video replay available for head kicks and gam-jeom appeals',
+            ];
+        $referee =
+            $referee ??
+            (object) [
+                'name' => 'Ghassan Yusuf',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_8.png?t=1773267305519',
+                'member_id' => 4,
+            ];
+        $championship =
+            $championship ??
+            (object) [
+                'name' => 'Championship 2026',
+                'url' => '/championship/2026',
+            ];
+        $venue =
+            $venue ??
+            (object) [
+                'name' => 'Manama Sports Hall',
+                'map_link' => 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain',
+            ];
+    @endphp
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if (isset($video->orientation) && $video->orientation === 'portrait') portrait @elseif(isset($video->orientation) && $video->orientation === 'square') square @elseif(isset($video->orientation) && $video->orientation === 'ultrawide') ultrawide @endif"
+                id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ isset($video) ? route('videos.stream', $video->id) : '#' }}" type="video/mp4">
+                </video>
+
+                <!-- Match Highlights Toggle Button -->
+                <button class="match-highlights-toggle" id="matchHighlightsToggle" title="Toggle Match Highlights">
+                    <span>Highlights</span>
+                </button>
+
+                <!-- Playlist Navigation Controls -->
+                @if (isset($nextVideo) || isset($previousVideo))
+                    <div class="playlist-controls" id="playlistControls">
+                        @if (isset($previousVideo))
+                            <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                            <span
+                                class="playlist-nav-label">{{ Str::limit($previousVideo->title ?? 'Previous', 20) }}</span>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                        @endif
+
+                        <div class="autoplay-toggle">
+                            <label for="autoplayToggle">Autoplay</label>
+                            <label class="autoplay-switch">
+                                <input type="checkbox" id="autoplayToggle" checked>
+                                <span class="autoplay-slider"></span>
+                            </label>
+                        </div>
+
+                        @if (isset($nextVideo))
+                            <span class="playlist-nav-label">{{ Str::limit($nextVideo->title ?? 'Next', 20) }}</span>
+                            <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @endif
+                    </div>
+                    <div class="keyboard-hint">
+                        <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                    </div>
+                @endif
+            </div>
+
+            <!-- ===== EVENT HEADER ===== -->
+            <div class="event-header">
+                <div class="event-header-left">
+                    <div class="event-logo">
+                        <img src="https://picsum.photos/seed/event-logo/200/200" alt="Event logo">
+                    </div>
+                    <div class="event-text">
+                        <!-- Title with Trophy Icon BEFORE "Taekwondo Finals" -->
+                        <h1 class="title">
+                            <i class="bi bi-trophy trophy-icon" title="Match Type"></i>
+                            <span>{{ $video->title }} –</span>
+                            <span style="color: #2563eb; font-weight: bold">
+                                {{ $blueFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                </a>
+                            </span>
+                            <span>vs</span>
+                            <span style="color: #ef4444; font-weight: bold">
+                                {{ $redFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                </a>
+                            </span>
+                            <span>({{ $match->weight_category ?? 'U18' }})</span>
+                        </h1>
+
+                        <!-- Meta: Championship Link • Match# • Court • Referee (all inline) -->
+                        <a class="meta-link" href="{{ $championship->url ?? '/championship/2026' }}"
+                            style="white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.4;">
+                            <span
+                                style="color: #ffffff; font-weight: bold; font-size: 0.85rem;">{{ $championship->name ?? 'Championship 2026' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #ff00dd; font-weight: bold; font-size: 0.85rem;">Match#
+                                {{ $match->number ?? '103' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #00af09; font-weight: bold; font-size: 0.85rem;">Court
+                                {{ $match->court ?? '2' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span
+                                style="color: #ffd900; font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                {{ $referee->flag ?? '🇧🇭' }} {{ $referee->name ?? 'Ghassan Yusuf' }}
+                            </span>
+                            <span
+                                style="color: var(--text-secondary); font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                - {{ number_format($video->view_count) }} views •
+                                {{ $video->created_at->format('M d, Y') }}</span>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="event-header-actions">
+                    <!-- Like Button -->
+                    @auth
+                        @if (Auth::id() === $video->user_id)
+                            <button class="action-btn" onclick="openEditVideoModal({{ $video->id }})" title="Edit">
+                                <i class="bi bi-pencil"></i>
+                                <span>Edit</span>
+                            </button>
+                        @endif
+                        @endif
+                        @auth
+                            @if (isset($video))
+                                <form method="POST"
+                                    action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                                    class="d-inline">
+                                    @csrf
+                                    <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
+                                        title="Like">
+                                        <i
+                                            class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                        <span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
+                                    </button>
+                                </form>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn" title="Like">
+                                <i class="bi bi-hand-thumbs-up"></i>
+                                <span>Like</span>
+                            </a>
+                        @endauth
+
+                        <!-- Subscribe Button -->
+                        @auth
+                            @if (isset($video) && $video->user && Auth::id() !== $video->user_id)
+                                <button
+                                    class="action-btn {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'subscribed' : '' }}"
+                                    type="button"
+                                    title="{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}"
+                                    onclick="toggleSubscribe({{ $video->user_id ?? 0 }})">
+                                    <i
+                                        class="bi {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'bi-bell-fill' : 'bi-bell' }}"></i>
+                                    <span>{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}</span>
+                                </button>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn" title="Subscribe">
+                                <i class="bi bi-bell"></i>
+                                <span>Subscribe</span>
+                            </a>
+                        @endauth
+
+                        <!-- Share Button -->
+                        @if (isset($video) && $video->isShareable())
+                            <button class="action-btn"
+                                onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"
+                                style="flex:1;">
+                                <i class="bi bi-share"></i>
+                                <span>Share</span>
+                            </button>
+                        @endif
+
+                        <!-- Save to Playlist Button -->
+                        <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                            </svg>
+                            <span>Save</span>
+                        </button>
+
+                    </div>
+                </div>
+                <!-- ===== END EVENT HEADER ===== -->
+
+                <!-- Description Box (Collapsible) -->
+                @if (isset($video) && $video->description)
+                    @php
+                        $fullDescription = $video->description;
+                        $shortDescription = Str::limit($fullDescription, 200);
+                        $needsExpand = strlen($fullDescription) > 200;
+                    @endphp
+
+                    <section class="description-panel">
+                        <button class="description-toggle" type="button" id="toggleDescription">
+                            <span id="descriptionToggleLabel">
+                                {{ $needsExpand ? 'Show description' : 'Hide description' }}
+                            </span>
+                            <span id="descriptionToggleIcon">{{ $needsExpand ? '▼' : '▲' }}</span>
+                        </button>
+
+                        <div class="description-body {{ $needsExpand ? '' : 'open' }}" id="descriptionBody">
+                            <!-- Match Card -->
+                            <section class="match-card">
+                                <div class="match-header">
+                                    <div class="match-label">Final • Male -63kg division</div>
+                                </div>
+
+                                <div class="fighters-row">
+                                    <!-- Blue Fighter (Sami Al Manea) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $blueFighter->photo ?? 'https://picsum.photos/seed/blue-competitor/200/260' }}"
+                                                        alt="{{ $blueFighter->name ?? 'Blue fighter' }}">
+                                                </div>
+                                            </a>
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $blueFighter->logo ?? 'https://picsum.photos/seed/blue-logo/160/160' }}"
+                                                            alt="{{ $blueFighter->team ?? 'Blue team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge blue">Blue</span>
+                                            </div>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name blue-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}">
+                                                    {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $blueFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $blueFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+
+                                    <!-- Score & Referee Center -->
+                                    <div class="match-center">
+                                        <div class="score-pill">
+                                            <span class="score-number">{{ $match->score_blue ?? 7 }}</span>
+                                            <span class="score-label">Final score</span>
+                                            <span class="score-number">{{ $match->score_red ?? 5 }}</span>
+                                        </div>
+                                        <div class="referee-block">
+                                            <!-- Referee Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="referee-photo">
+                                                    <img src="{{ $referee->photo ?? 'https://picsum.photos/seed/referee/200/260' }}"
+                                                        alt="Referee">
+                                                </div>
+                                            </a>
+                                            <div style="color: #ffd900; font-weight: bold">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                    style="color: inherit; text-decoration: none;"
+                                                    title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile">
+                                                    {{ $referee->name ?? 'Ghassan Yusuf' }}
+                                                </a>
+                                            </div>
+                                            <div class="ref-label">Center Referee</div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Red Fighter (Hassan Al Shallan) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $redFighter->logo ?? 'https://picsum.photos/seed/red-logo/160/160' }}"
+                                                            alt="{{ $redFighter->team ?? 'Red team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge red">Red</span>
+                                            </div>
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $redFighter->photo ?? 'https://picsum.photos/seed/red-competitor/200/260' }}"
+                                                        alt="{{ $redFighter->name ?? 'Red fighter' }}">
+                                                </div>
+                                            </a>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name red-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}">
+                                                    {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $redFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $redFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+                                </div>
+
+                                <div class="match-footer">
+                                    <a class="hall-link" id="hallLink" title="View venue details"
+                                        href="{{ $venue->map_link ?? 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain' }}"
+                                        target="_blank" rel="noopener noreferrer">
+                                        📍 {{ $venue->name ?? 'Manama Sports Hall' }}
+                                    </a>
+                                    @if (isset($match->features))
+                                        • {{ $match->features }}
+                                    @endif
+                                </div>
+                            </section>
+
+                            <!-- Match Overview -->
+                            <section class="markdown-body">
+                                <div
+                                    style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                                    <h2 style="font-size: 1.05rem; margin: 0;">Match Overview</h2>
+                                    @if (isset($video) && $video->user)
+                                        <div class="video-owner-badge"
+                                            style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary);">
+                                            <img src="{{ $video->user->avatar_url }}" class="owner-avatar"
+                                                style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover;"
+                                                alt="{{ $video->user->name }}">
+                                            <span class="owner-name"
+                                                style="color: var(--text-primary); font-weight: 500;">{{ $video->user->name }}</span>
+                                            <span>• {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</span>
+                                        </div>
+                                    @endif
+                                </div>
+                                <div class="description-text">
+                                    {!! Str::markdown($fullDescription) !!}
+                                </div>
+                            </section>
+                        </div>
+                    </section>
+
+                    <script>
+                        // Collapsible Description Toggle
+                        const descriptionBody = document.getElementById('descriptionBody');
+                        const descriptionToggle = document.getElementById('toggleDescription');
+                        const descriptionToggleLabel = document.getElementById('descriptionToggleLabel');
+                        const descriptionToggleIcon = document.getElementById('descriptionToggleIcon');
+
+                        if (descriptionToggle && descriptionBody) {
+                            descriptionToggle.addEventListener('click', () => {
+                                const isOpen = descriptionBody.classList.toggle('open');
+                                descriptionToggleLabel.textContent = isOpen ? 'Hide description' : 'Show description';
+                                descriptionToggleIcon.textContent = isOpen ? '▲' : '▼';
+                            });
+                        }
+
+                        // Hall/Venue Link Handler
+                        const hallLink = document.getElementById('hallLink');
+                        if (hallLink) {
+                            hallLink.addEventListener('click', () => {
+                                // Analytics tracking can be added here
+                            });
+                        }
+
+                        // Match Highlights Toggle with localStorage persistence
+                        document.addEventListener('DOMContentLoaded', function() {
+                            const toggleBtn = document.getElementById('matchHighlightsToggle');
+                            const sidebar = document.querySelector('.events-sidebar');
+                            const videoId = {{ isset($video) ? $video->id : 0 }};
+
+                            if (toggleBtn && sidebar) {
+                                // Load saved state on page load
+                                const savedState = localStorage.getItem(`highlights_${videoId}`);
+                                if (savedState === 'open') {
+                                    sidebar.classList.add('show');
+                                    toggleBtn.classList.add('expanded');
+                                    toggleBtn.textContent = 'Highlights';
+                                }
+
+                                toggleBtn.addEventListener('click', function() {
+                                    const isOpen = sidebar.classList.toggle('show');
+                                    toggleBtn.classList.toggle('expanded');
+
+                                    // Save state to localStorage
+                                    if (isOpen) {
+                                        localStorage.setItem(`highlights_${videoId}`, 'open');
+                                        toggleBtn.textContent = 'Highlights';
+                                    } else {
+                                        localStorage.removeItem(`highlights_${videoId}`);
+                                    }
+                                });
+                            }
+                        });
+                    </script>
+                @endif
+
+                <!-- Comment Section -->
+                <div class="comments-section"
+                    style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                    <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                        Comments <span
+                            style="color: var(--text-secondary); font-weight: 400;">({{ isset($video) ? $video->comment_count ?? 0 : 0 }})</span>
+                    </h3>
+                    @auth
+                        <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                            <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                                alt="{{ Auth::user()->name }}">
+                            <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                                <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
+                                    rows="1"
+                                    style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                                <button type="button" class="action-btn"
+                                    onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
+                                    <i class="bi bi-x-lg"></i>
+                                    <span>Cancel</span>
+                                </button>
+                                <button type="button" class="action-btn comment-btn"
+                                    onclick="submitComment({{ isset($video) ? $video->id : 0 }})" style="flex-shrink: 0;">
+                                    <i class="bi bi-chat-dots"></i>
+                                    <span>Comment</span>
+                                </button>
+                            </div>
+                        </div>
+                    @else
+                        <div
+                            style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                            <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                        </div>
+                    @endauth
+                    <div id="commentsList">
+                        @if (isset($video))
+                            @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                                @include('videos.partials.comment', ['comment' => $comment])
+                            @empty
+                                <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be
+                                    the first to comment!</p>
+                            @endforelse
+                        @endif
+                    </div>
+                </div>
+
+                <script>
+                    function submitComment(videoId) {
+                        const body = document.getElementById('commentBody').value.trim();
+                        if (!body) return;
+
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body
+                                })
+                            })
+                            .then(response => response.json())
+                            .catch(error => {
+                                console.error('Error:', error);
+                                alert('Failed to post comment: ' + error);
+                            })
+                            .then(data => {
+                                if (data && data.success) {
+                                    document.getElementById('commentBody').value = '';
+                                    addCommentToList(data.comment);
+                                } else {
+                                    alert('Failed to post comment');
+                                }
+                            });
+                    }
+
+                    function addCommentToList(comment) {
+                        const commentsList = document.getElementById('commentsList');
+                        const commentHtml = `
+                <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
+                    <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
+                    <div style="flex: 1;">
+                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+                            <span style="font-weight: 600; font-size: 14px;">${comment.user.name}</span>
+                            <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
+                        </div>
+                        <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
+                            ${comment.body.replace(/@(\\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>')}
+                        </div>
+                        <div style="display: flex; gap: 12px; margin-top: 8px;">
+                            <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                                Reply
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+                        commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                        const commentCount = document.querySelector('h3 span');
+                        if (commentCount) {
+                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                            commentCount.textContent = `(${count})`;
+                        }
+                    }
+
+                    function deleteComment(commentId) {
+                        if (confirm('Are you sure you want to delete this comment?')) {
+                            fetch(`/comments/${commentId}`, {
+                                    method: 'DELETE',
+                                    headers: {
+                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                    }
+                                })
+                                .then(response => response.json())
+                                .then(data => {
+                                    if (data.success) {
+                                        document.getElementById('comment-' + commentId).remove();
+                                        const commentCount = document.querySelector('h3 span');
+                                        if (commentCount) {
+                                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                            commentCount.textContent = `(${count})`;
+                                        }
+                                    }
+                                });
+                        }
+                    }
+                    document.addEventListener('DOMContentLoaded', function() {
+                        const commentTexts = document.querySelectorAll('.comment-body');
+                        commentTexts.forEach(text => {
+                            const html = text.innerHTML.replace(/@(\w+)/g,
+                                '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                            text.innerHTML = html;
+                        });
+                    });
+
+                    function submitReply(videoId, parentId) {
+                        const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                        const body = textarea.value.trim();
+                        if (!body) return;
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body,
+                                    parent_id: parentId
+                                })
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    location.reload();
+                                }
+                            });
+                    }
+                </script>
+            </div>
+
+            <!-- Sidebar - Match Highlights -->
+            <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
+                <aside class="events-sidebar">
+                    <div class="events-sidebar-header" style="justify-content: center;">
+                        <h3>Match Highlights</h3>
+                    </div>
+                    <div class="tab-header">
+                        <button class="tab-button active" data-tab="official">Points</button>
+                        <button class="tab-button" data-tab="review">Coach review</button>
+                    </div>
+                    <div class="tab-panels">
+                        <!-- Points Tab -->
+                        <div class="tab-panel active" id="tab-official">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div>
+                                    <div class="section-label">Rounds & points</div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                                            <span>+</span> Add Round
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="officialEvents">
+                                <!-- Round markers and points (unchanged) -->
+                                <div class="round-marker" data-round="1">
+                                    <span class="round-badge">ROUND 1</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(1)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(1)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(1)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                                    <div class="event-time">@00:20</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue body kick (1 pt)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 1 – 0 • Clean contact.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                                    <div class="event-time">@00:45</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue scores body kick
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 2 – 0 • Judge: Central.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="2">
+                                    <span class="round-badge">ROUND 2</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(2)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(2)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(2)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                                    <div class="event-time">@01:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red head kick (3 pts)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 2 • Score 2 – 3 • Video replay requested.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="3">
+                                    <span class="round-badge">ROUND 3</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(3)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(3)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(3)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                                    <div class="event-time">@02:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue spinning backfist (2 pts)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 3 • Close round.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt4')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt4')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                                    <div class="event-time">@03:00</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red leg kick (1 pt)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 4 • Tied!
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt5')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt5')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Coach Review Tab -->
+                        <div class="tab-panel" id="tab-review">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div class="section-label">Private notes</div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                                            <span>+</span> Add Note
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="reviewEvents">
+                                <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                                    <div class="review-primary-row">
+                                        <span class="emoji">🔥</span>
+                                        <span>@00:32–00:50</span>
+                                        <div class="note-text">Good pressure, but guard too low after first kick</div>
+                                    </div>
+                                    <div class="review-secondary-row">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        <div class="coach-name">Coach Ahmed</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                                    <div class="event-time-container">
+                                        <span class="emoji">🤔</span>
+                                        <span>@02:05–02:20</span>
+                                    </div>
+                                    <div class="event-label">Missed counter opportunity</div>
+                                    <div class="event-meta">
+                                        <div class="review-header">
+                                            <div class="comment-avatar">
+                                                <img src="https://picsum.photos/seed/coach-sara/80/80" alt="Coach Sara">
+                                            </div>
+                                            <div class="coach-info">
+                                                <div class="coach-name">Coach Sara</div>
+                                            </div>
+                                        </div>
+                                        <div class="review-note">Great angle, but no follow up. Use this clip to discuss risk vs reward.</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="205" data-id="rev3">
+                                    <div class="event-time-container">
+                                        <span class="emoji">😄</span>
+                                        <span>@03:25</span>
+                                    </div>
+                                    <div class="event-label">Excellent angle change and follow-up</div>
+                                    <div class="event-meta">
+                                        <div class="review-header">
+                                            <div class="comment-avatar">
+                                                <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                            </div>
+                                            <div class="coach-info">
+                                                <div class="coach-name">Coach Ahmed</div>
+                                            </div>
+                                        </div>
+                                        <div class="review-note">Save as positive highlight, ideal example of exit and re-entry after scoring.</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+                <!-- Sidebar - Up Next / Recommendations -->
+                <div class="yt-sidebar-container">
+                    @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                            <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                            {{ $playlist->name }}
+                            <span
+                                style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                                videos)</span>
+                        </h3>
+                        <div class="recommended-videos-list">
+                            @foreach ($playlistVideos as $index => $playlistVideo)
+                                @if ($playlistVideo->id !== $video->id)
+                                    <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                                        onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                                        <div class="sidebar-thumb" style="position: relative;">
+                                            @if ($playlistVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @endif
+                                            @if ($playlistVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                            @endif
+                                            @if ($playlistVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                            <!-- Playlist position indicator -->
+                                            <span
+                                                style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                                {{ $index + 1 }}
+                                            </span>
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($playlistVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($playlistVideo->view_count) }} views •
+                                                    {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                        @if ($playlist->canEdit(Auth::user()))
+                            <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                                style="margin-top: 12px; display: inline-block;">
+                                <i class="bi bi-pencil"></i> Edit Playlist
+                            </a>
+                        @endif
+                    @else
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                        @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                            <div class="recommended-videos-list">
+                                @foreach ($recommendedVideos as $recVideo)
+                                    <div class="sidebar-video-card"
+                                        onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                                        <div class="sidebar-thumb">
+                                            @if ($recVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                                    alt="{{ $recVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                                    alt="{{ $recVideo->title }}">
+                                            @endif
+                                            @if ($recVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                            @endif
+                                            @if ($recVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($recVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($recVideo->view_count) }} views •
+                                                    {{ $recVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                            <div class="text-secondary">No recommendations available yet. Check back later!</div>
+                        @endif
+                    @endif
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Modals -->
+        @include('layouts.partials.share-modal')
+        @include('layouts.partials.edit-video-modal')
+
+        <!-- Add Round Modal -->
+        <div class="match-modal-overlay" id="addRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3>Add New Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('addRoundModal')">×</button>
+                </div>
+                <form id="addRoundForm">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Round Number</label>
+                            <input type="number" id="roundNumber" min="1" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round Name (optional)</label>
+                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
+                        </div>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Add Round</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Point Modal -->
+        <div class="match-modal-overlay" id="pointModal">
+<div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3 id="pointModalTitle">Add Point</h3>
+                    <button class="match-modal-close" onclick="closeModal('pointModal')">×</button>
+                </div>
+                <form id="pointForm">
+                    <input type="hidden" id="pointId">
+                    <input type="hidden" id="pointRoundId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointTimestamp">Timestamp (seconds)</label>
+                            <input type="number" id="pointTimestamp" min="0" required>
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointRoundSelect">Round</label>
+                            <select id="pointRoundSelect">
+                                <option value="1">Round 1</option>
+                                <option value="2">Round 2</option>
+                                <option value="3">Round 3</option>
+                                <option value="4">Round 4</option>
+                                <option value="5">Round 5</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointAction">Action Description</label>
+                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+                    </div>
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointValue">Points</label>
+                            <input type="number" id="pointValue" min="1" value="1">
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointCompetitor">Competitor</label>
+                            <select id="pointCompetitor">
+                                <option value="blue">Blue</option>
+                                <option value="red">Red</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointNotes">Notes</label>
+                        <textarea id="pointNotes" rows="3" placeholder="Optional notes (e.g., Clean contact, Judge: Central)"></textarea>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()" style="display: none;">
+                            Delete Point
+                        </button>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('pointModal')">
+                            Cancel
+                        </button>
+                        <button type="submit" class="match-btn-save">
+                            Save Point
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Edit Round Modal -->
+        <div class="match-modal-overlay" id="editRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3>Edit Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('editRoundModal')">×</button>
+                </div>
+                <form id="editRoundForm">
+                    <input type="hidden" id="editRoundNumber">
+                    <div class="match-form-group">
+                        <label>Round Name</label>
+                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" onclick="confirmDeleteRound()">Delete Round</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="match-btn-cancel"
+                            onclick="closeModal('editRoundModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Save Changes</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Review Modal -->
+        <div class="match-modal-overlay" id="reviewModal">
+            <div class="modal-content">
+                <div class="match-modal-header">
+                    <h3 id="reviewModalTitle">Add Coach Note</h3>
+                    <button class="match-modal-close" onclick="closeModal('reviewModal')">×</button>
+                </div>
+                <form id="reviewForm">
+                    <input type="hidden" id="reviewId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Start Time (seconds)</label>
+                            <input type="number" id="reviewStartTime" min="0" required>
+                        </div>
+                        <div class="form-group">
+                            <label>End Time (seconds)</label>
+                            <input type="number" id="reviewEndTime" min="0">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Note</label>
+                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Coach Name</label>
+                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Emoji</label>
+                        <select id="reviewEmoji">
+                            <option value="🔥">🔥 Good</option>
+                            <option value="🤔">🤔 Needs Work</option>
+                            <option value="😄">😄 Excellent</option>
+                            <option value="💪">💪 Strong</option>
+                            <option value="⚠️">⚠️ Warning</option>
+                        </select>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()"
+                            style="display: none;">Delete</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Save Note</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        @if (Session::has('openEditModal') && Session::get('openEditModal'))
+            @auth
+                <script>
+                    document.addEventListener('DOMContentLoaded', function() {
+                        openEditVideoModal({{ isset($video) ? $video->id : 0 }});
+                    });
+                </script>
+            @endauth
+        @endif
+
+        <script>
+            // Subscribe Toggle Function
+            function toggleSubscribe(userId) {
+                if (!userId) return;
+                fetch(`/users/${userId}/toggle-subscribe`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            location.reload();
+                        }
+                    });
+            }
+
+            // Playlist navigation URLs
+            const previousVideoUrl = @json(isset($previousVideo) ? route('videos.show', $previousVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const nextVideoUrl = @json(isset($nextVideo) ? route('videos.show', $nextVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const videoId = {{ isset($video) ? $video->id : 0 }};
+            const isOwner = {{ json_encode(Auth::check() && isset($video) && Auth::id() === $video->user_id) }};
+            let autoplayEnabled = true;
+
+            document.addEventListener('DOMContentLoaded', function() {
+                loadMatchData();
+            });
+
+            async function loadMatchData() {
+                try {
+                    const response = await fetch(`/videos/${videoId}/match-data`);
+                    const data = await response.json();
+                    if (data.success) {
+                        renderMatchData(data.rounds || [], data.reviews || []);
+                    } else {
+                        console.warn('No match data:', data.message);
+                        renderStaticData();
+                    }
+                } catch (error) {
+                    console.error('Failed to load match data:', error);
+                    // Try to use server-side data first
+                    if (window.matchRounds && window.matchReviews) {
+                        renderMatchData(window.matchRounds, window.matchReviews);
+                    } else {
+                        renderStaticData();
+                    }
+                }
+            }
+
+            // Pass server-side data to JS if available
+            window.matchRounds = @json($video->matchRounds ?? []);
+            window.matchReviews = @json($video->coachReviews ?? []);
+            if (window.matchRounds.length > 0) {
+                renderMatchData(window.matchRounds, window.matchReviews);
+            }
+
+            function renderStaticData() {
+                // No static demo data - empty state
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                if (pointsContainer) pointsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No match data yet. <button class="btn-add" onclick="openAddRoundModal()">+ Add Round</button></div>';
+                if (reviewsContainer) reviewsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No coach notes yet. <button class="btn-add" onclick="openAddReviewModal()">+ Add Note</button></div>';
+            }
+
+            function renderMatchData(rounds, reviews) {
+                if (!rounds || rounds.length === 0) return;
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                let pointsHtml = '';
+                let reviewsHtml = '';
+
+                rounds.forEach(round => {
+                    pointsHtml += `
+        <div class="round-marker" data-round="${round.round_number}">
+            <span class="round-badge">${round.name}</span>
+            ${isOwner ? `
+                                                                                                                                                                                                                                                                            <div class="round-actions">
+                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${round.name}')" title="Edit round">✏️</button>
+                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+                                                                                                                                                                                                                                                                            </div>
+                                                                                                                                                                                                                                                                            ` : ''}
+        </div>`;
+
+                    if (round.points) {
+                        round.points.forEach(point => {
+                            const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                            const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                            const timeStr = formatTime(point.timestamp_seconds);
+                            pointsHtml += `
+                <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
+                    <div class="event-time">@${timeStr}</div>
+                    <div>
+                        <div class="event-label">
+                            ${point.action} (${point.points} pt)
+                            <span class="pill ${competitorClass}">${competitorLabel}</span>
+                        </div>
+                        <div class="event-meta">
+                            ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
+                        </div>
+                    </div>
+                    ${isOwner ? `
+                                                                                                                                                                                                                                                                                    <div class="event-actions">
+                                                                                                                                                                                                                                                                                        <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                        <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                    </div>` : ''}
+                </div>`;
+                        });
+                    }
+                });
+
+                if (reviews) {
+                    reviews.forEach(review => {
+                        const timeStart = formatTime(review.start_time_seconds);
+                        const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+                        const timeDisplay = timeStart + timeEnd;
+                        reviewsHtml += `
+            <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
+                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                    <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
+                    <div class="event-time">@${timeDisplay}</div>
+                </div>
+                <div>
+                    <div class="event-label">${review.note}</div>
+                    <div class="event-meta">
+                        <div class="comment-avatar">
+                            <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                        </div>
+                        ${review.coach_name}
+                    </div>
+                </div>
+                ${isOwner ? `
+                                                                                                                                                                                                                                                                                <div class="event-actions">
+                                                                                                                                                                                                                                                                                    <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                    <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                </div>` : ''}
+            </div>`;
+                    });
+                }
+
+                if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+                if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+                attachEventListeners();
+            }
+
+            function formatTime(seconds) {
+                const mins = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const tabButtons = document.querySelectorAll('.tab-button');
+                const tabPanels = document.querySelectorAll('.tab-panel');
+                tabButtons.forEach(button => {
+                    button.addEventListener('click', function() {
+                        const targetTab = this.getAttribute('data-tab');
+                        tabButtons.forEach(btn => btn.classList.remove('active'));
+                        tabPanels.forEach(panel => panel.classList.remove('active'));
+                        this.classList.add('active');
+                        document.getElementById('tab-' + targetTab).classList.add('active');
+                    });
+                });
+                attachEventListeners();
+                document.getElementById('addRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    storeRound(document.getElementById('roundNumber').value, document.getElementById(
+                        'roundName').value || 'ROUND ' + document.getElementById('roundNumber').value);
+                });
+                document.getElementById('pointForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    savePoint();
+                });
+                document.getElementById('editRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    updateRound();
+                });
+                document.getElementById('reviewForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    saveReview();
+                });
+            });
+
+            function attachEventListeners() {
+                document.querySelectorAll('.event-item').forEach(item => {
+                    item.addEventListener('click', function(e) {
+                        if (e.target.closest('.event-actions')) return;
+                        const timeStart = parseFloat(this.getAttribute('data-time-start'));
+                        const timeEnd = parseFloat(this.getAttribute('data-time-end') || 0);
+
+                        if (timeStart || timeStart === 0) {
+                            const videoPlayer = document.getElementById('videoPlayer');
+                            if (videoPlayer) {
+                                // Start 1 second early for context
+                                videoPlayer.currentTime = Math.max(0, timeStart - 1.0);
+                                videoPlayer.play();
+                            }
+                        }
+                    });
+                });
+            }
+
+            function openModal(modalId) {
+                document.getElementById(modalId).classList.add('active');
+            }
+
+            function closeModal(modalId) {
+                document.getElementById(modalId).classList.remove('active');
+            }
+            document.querySelectorAll('.match-modal-overlay').forEach(modal => {
+                modal.addEventListener('click', function(e) {
+                    if (e.target === this) this.classList.remove('active');
+                });
+            });
+
+            const csrfToken = '{{ Auth::check() ? csrf_token() : '' }}';
+            const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+            // Round/Point/Review functions (abbreviated for brevity)
+            function openAddRoundModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode: Requires authentication');
+                    return;
+                }
+                document.getElementById('roundNumber').value = '';
+                document.getElementById('roundName').value = '';
+                openModal('addRoundModal');
+            }
+            async function storeRound(roundNumber, roundName) {
+                if (!csrfToken) return;
+                try {
+                    const res = await fetch(`/videos/${videoId}/rounds`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            round_number: roundNumber,
+                            name: roundName
+                        })
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('addRoundModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function editRound(roundNumber, roundId, currentName) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('editRoundNumber').value = roundId;
+                document.getElementById('editRoundName').value = currentName;
+                openModal('editRoundModal');
+            }
+            async function updateRound() {
+                if (!csrfToken) return;
+                const roundId = document.getElementById('editRoundNumber').value;
+                const roundName = document.getElementById('editRoundName').value;
+                try {
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            name: roundName
+                        })
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('editRoundModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deleteRound(roundId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this round?')) return;
+                try {
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) loadMatchData();
+                    else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function openAddPointModal(roundNumber, roundId) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('pointModalTitle').textContent = 'Add Point';
+                document.getElementById('pointId').value = '';
+                document.getElementById('pointRoundId').value = roundId || '';
+                document.getElementById('pointTimestamp').value = '';
+                document.getElementById('pointRoundSelect').value = roundNumber || '1';
+                document.getElementById('pointAction').value = '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = 'blue';
+                document.getElementById('pointNotes').value = '';
+                document.getElementById('deletePointBtn').style.display = 'none';
+                openModal('pointModal');
+            }
+
+            function editPoint(pointId) {
+                const el = document.querySelector(`.event-item[data-id="${pointId}"]`);
+                if (!el) return;
+                document.getElementById('pointModalTitle').textContent = 'Edit Point';
+                document.getElementById('pointId').value = pointId;
+                document.getElementById('pointTimestamp').value = el.dataset.timeStart || '';
+                document.getElementById('pointRoundSelect').value = el.dataset.round || '1';
+                document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0]
+                    .trim() || '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ?
+                    'blue' : 'red';
+                document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2)
+                    .join('').trim() || '';
+                document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+                openModal('pointModal');
+            }
+            async function savePoint() {
+                if (!csrfToken) {
+                    closeModal('pointModal');
+                    return;
+                }
+                const pointId = document.getElementById('pointId').value;
+                const roundId = document.getElementById('pointRoundId').value;
+                const timestamp = document.getElementById('pointTimestamp').value;
+                const round = document.getElementById('pointRoundSelect').value;
+                const action = document.getElementById('pointAction').value;
+                const value = document.getElementById('pointValue').value;
+                const competitor = document.getElementById('pointCompetitor').value;
+                const notes = document.getElementById('pointNotes').value;
+                try {
+                    if (pointId) {
+                        const res = await fetch(`/points/${pointId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                timestamp_seconds: parseInt(timestamp),
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/points`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                round_id: roundId,
+                                timestamp_seconds: parseInt(timestamp),
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deletePoint(pointId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this point?')) return;
+                try {
+                    const res = await fetch(`/points/${pointId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function openAddReviewModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('reviewModalTitle').textContent = 'Add Coach Note';
+                document.getElementById('reviewId').value = '';
+                document.getElementById('reviewStartTime').value = '';
+                document.getElementById('reviewEndTime').value = '';
+                document.getElementById('reviewNote').value = '';
+                document.getElementById('reviewCoach').value = '';
+                document.getElementById('reviewEmoji').value = '🔥';
+                document.getElementById('deleteReviewBtn').style.display = 'none';
+                openModal('reviewModal');
+            }
+
+            function editReview(reviewId) {
+                const el = document.querySelector(`.event-item[data-id="${reviewId}"]`);
+                if (!el) return;
+                document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note';
+                document.getElementById('reviewId').value = reviewId;
+                document.getElementById('reviewStartTime').value = el.dataset.timeStart || '';
+                document.getElementById('reviewEndTime').value = el.dataset.timeEnd || '';
+                document.getElementById('reviewNote').value = el.querySelector('.event-label')?.textContent.trim() || '';
+                document.getElementById('reviewCoach').value = el.querySelector('.event-meta')?.textContent.trim() || '';
+                document.getElementById('reviewEmoji').value = el.querySelector('div:first-child')?.textContent || '🔥';
+                document.getElementById('deleteReviewBtn').style.display = 'block';
+                openModal('reviewModal');
+            }
+            async function saveReview() {
+                if (!csrfToken) return;
+                const reviewId = document.getElementById('reviewId').value;
+                const startTime = document.getElementById('reviewStartTime').value;
+                const endTime = document.getElementById('reviewEndTime').value;
+                const note = document.getElementById('reviewNote').value;
+                const coach = document.getElementById('reviewCoach').value;
+                const emoji = document.getElementById('reviewEmoji').value;
+                try {
+                    if (reviewId) {
+                        const res = await fetch(`/reviews/${reviewId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parseInt(startTime),
+                                end_time_seconds: endTime ? parseInt(endTime) : null,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/reviews`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parseInt(startTime),
+                                end_time_seconds: endTime ? parseInt(endTime) : null,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deleteReview(reviewId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this note?')) return;
+                try {
+                    const res = await fetch(`/reviews/${reviewId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            // Playlist navigation
+            document.addEventListener('DOMContentLoaded', function() {
+                const videoPlayer = document.getElementById('videoPlayer');
+                const playlistControls = document.getElementById('playlistControls');
+                const autoplayToggle = document.getElementById('autoplayToggle');
+                if (videoPlayer) {
+                    videoPlayer.volume = 0.5;
+                    const playPromise = videoPlayer.play();
+                    if (playPromise !== undefined) {
+                        playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked'));
+                    }
+                    if (nextVideoUrl) {
+                        videoPlayer.addEventListener('ended', () => {
+                            if (autoplayEnabled) window.location.href = nextVideoUrl;
+                        });
+                    }
+                }
+                if (playlistControls) {
+                    const videoContainer = document.getElementById('videoContainer');
+                    videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible'));
+                    videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible'));
+                    setTimeout(() => playlistControls.classList.add('visible'), 2000);
+                    setTimeout(() => playlistControls.classList.remove('visible'), 6000);
+                }
+                if (autoplayToggle) {
+                    autoplayToggle.addEventListener('change', function() {
+                        autoplayEnabled = this.checked;
+                        localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                    });
+                    const saved = localStorage.getItem('playlistAutoplay');
+                    if (saved !== null) {
+                        autoplayEnabled = saved === '1';
+                        autoplayToggle.checked = autoplayEnabled;
+                    }
+                }
+                document.addEventListener('keydown', function(e) {
+                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        if (previousVideoUrl) window.location.href = previousVideoUrl;
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        if (nextVideoUrl) window.location.href = nextVideoUrl;
+                    }
+                });
+            });
+
+            function goToPreviousVideo() {
+                if (previousVideoUrl) window.location.href = previousVideoUrl;
+            }
+
+            function goToNextVideo() {
+                if (nextVideoUrl) window.location.href = nextVideoUrl;
+            }
+        </script>
+    @endsection
diff --git a/resources/views/videos/types/match.blade.backup.php b/resources/views/videos/types/match.blade.backup.php
new file mode 100644
index 0000000..cb688c7
--- /dev/null
+++ b/resources/views/videos/types/match.blade.backup.php
@@ -0,0 +1,9 @@
+@extends('layouts.app')
+@section('title', ($video->title ?? 'Match Video') . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* ===== Video Section ===== */
+        .yt-video-section {
+            flex: 1;
+            min
diff --git a/resources/views/videos/types/match.blade.php b/resources/views/videos/types/match.blade.php
index c6dcc91..0146b60 100644
--- a/resources/views/videos/types/match.blade.php
+++ b/resources/views/videos/types/match.blade.php
@@ -99,6 +99,34 @@
             object-fit: contain;
         }
 
+        /* Coach note overlay (subtitle-style) */
+        .coach-note-overlay {
+            position: absolute;
+            left: 50%;
+            bottom: 48px;
+            transform: translateX(-50%);
+            max-width: min(80%, 900px);
+            width: fit-content;
+            padding: 10px 14px;
+            border-radius: 8px;
+            background: rgba(0, 0, 0, 0.68);
+            color: #fff;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 1.35;
+            text-align: center;
+            z-index: 14;
+            box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            display: none;
+            pointer-events: none;
+            backdrop-filter: blur(3px);
+        }
+
+        .coach-note-overlay.show {
+            display: block;
+        }
+
         /* Match Highlights Toggle Button */
         .match-highlights-toggle {
             position: absolute;
@@ -358,17 +386,60 @@
         }
 
         .subscribe-btn {
-            background: white;
-            color: black;
             border: none;
-            padding: 8px 16px;
-            border-radius: 18px;
-            font-weight: 600;
-            font-size: 14px;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
             cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
             white-space: nowrap;
         }
 
+        .subscribe-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .mobile-action-dropdown {
+            display: none;
+            position: relative;
+        }
+
+        .mobile-action-dropdown .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 200px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 10px;
+            padding: 6px 0;
+            z-index: 1200;
+        }
+
+        .mobile-action-dropdown .dropdown-item {
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            padding: 8px 12px;
+            background: transparent;
+            border: none;
+            width: 100%;
+            text-align: left;
+        }
+
+        .mobile-action-dropdown .dropdown-item:hover {
+            background: var(--border-color);
+        }
+
         /* ===== Event Header ===== */
         .event-header {
             display: flex;
@@ -1192,96 +1263,94 @@
 
         /* ===== Coach Review Tab Specific Styles ===== */
         #tab-review .event-item {
-            display: flex;
-            gap: 12px;
-            width: 100%;
+            position: relative;
+            display: block;
+            padding: 10px;
+            margin-bottom: 4px;
+            border-radius: 8px;
+            background: transparent;
+            border: none;
+            transition: background 0.2s ease;
         }
 
-        #tab-review .event-time-container {
-            flex: 0 0 33.333%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            gap: 2px;
-            line-height: 1.2;
-            min-height: 60px;
-        }
-
-        #tab-review .event-time {
-            font-weight: 600;
-            color: #3ea6ff;
-            font-size: 13px;
-        }
-
-        #tab-review .event-label {
-            font-size: 15px;
-            font-weight: 600;
-            margin-bottom: 6px;
-            color: var(--text-primary);
-        }
-
-        #tab-review .event-meta {
-            display: flex;
-            align-items: flex-start;
-            gap: 8px;
-            font-size: 13px;
-            line-height: 1.4;
-            color: var(--text-secondary);
-        }
-
-        .comment-avatar {
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-            overflow: hidden;
-            flex-shrink: 0;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-        }
-
-        .comment-avatar img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        #tab-review .event-meta-text {
-            flex: 1;
-        }
-
-        #tab-review .event-meta-text .coach-name {
-            font-weight: 600;
-            color: var(--text-primary);
-            margin-bottom: 2px;
-        }
-
-        #tab-review .event-meta-text .review-note {
-            color: var(--text-secondary);
-            font-size: 12.5px;
-        }
-
-        /* Review item hover improvements */
         #tab-review .event-item:hover {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-            padding: 12px;
-            margin: -2px 0 -2px -8px;
-            border-left: 3px solid var(--brand-red);
+            background: var(--border-color);
+            transform: none;
+            box-shadow: none;
         }
 
-        /* Ensure consistency with points tab on mobile */
-        @media (max-width: 768px) {
-            #tab-review .event-item {
-                flex-direction: column;
-                gap: 8px;
-            }
+        .review-primary-row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 4px;
+            padding: 0;
+            background: transparent;
+            border: none;
+            border-radius: 0;
+        }
 
-            #tab-review .event-time {
-                align-self: flex-start;
-                order: -1;
-            }
+        .review-primary-row .emoji {
+            font-size: 16px;
+            line-height: 1;
+            flex-shrink: 0;
+        }
+
+        .review-time {
+            font-size: 12px;
+            font-weight: 500;
+            color: #3ea6ff;
+            line-height: 1.2;
+            white-space: nowrap;
+            flex-shrink: 0;
+        }
+
+        .review-content {
+            margin-left: 0;
+        }
+
+        .review-note-title {
+            color: var(--text-primary);
+            font-size: 14px;
+            font-weight: 700;
+            line-height: 1.35;
+            margin: 0;
+        }
+
+        .review-author-bar {
+            margin-top: 4px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--text-secondary);
+            font-size: 12px;
+            line-height: 1.3;
+        }
+
+        .review-author-avatar {
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 1px solid rgba(255, 255, 255, 0.25);
+            flex-shrink: 0;
+        }
+
+        .review-author-name {
+            color: var(--text-primary);
+            font-size: 12px;
+            font-weight: 500;
+        }
+
+        .review-note-text {
+            color: var(--text-secondary);
+            font-size: 12px;
+            font-weight: 400;
+        }
+
+        #tab-review .event-item .event-actions {
+            top: 8px;
+            right: 8px;
         }
 
         /* ===== Match Modal Styles ===== */
@@ -1292,7 +1361,8 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(8px);
             z-index: 9999;
             align-items: center;
             justify-content: center;
@@ -1303,26 +1373,48 @@
         }
 
         .match-modal-content {
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            padding: 24px;
-            width: 90%;
-            max-width: 500px;
-            max-height: 90vh;
+            background: linear-gradient(145deg, rgba(30, 30, 38, 0.95), rgba(24, 24, 31, 0.96));
+            border-radius: 16px;
+            padding: 18px;
+            width: 92%;
+            max-width: 420px;
+            max-height: 85vh;
             overflow-y: auto;
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
         }
 
         .match-modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 20px;
+            margin-bottom: 12px;
         }
 
         .match-modal-header h3 {
-            font-size: 18px;
-            font-weight: 600;
+            font-size: 16px;
+            font-weight: 700;
             margin: 0;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #f8fafc;
+            background: none;
+            -webkit-text-fill-color: initial;
+        }
+
+        .modal-title-icon {
+            width: 22px;
+            height: 22px;
+            border-radius: 999px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            background: rgba(239, 68, 68, 0.16);
+            color: #fda4af;
+            border: 1px solid rgba(239, 68, 68, 0.35);
         }
 
         .match-modal-close {
@@ -1372,13 +1464,231 @@
 
         .match-form-row {
             display: flex;
-            gap: 12px;
+            gap: 8px;
+            margin-bottom: 10px;
         }
 
         .match-form-row .match-form-group {
             flex: 1;
         }
 
+        .match-form-row .form-group {
+            flex: 1;
+        }
+
+        .match-form-row .form-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #d1d5db;
+            letter-spacing: 0.2px;
+        }
+
+        .match-form-row .form-group input,
+        .match-form-row .form-group select,
+        .match-form-row .form-group textarea {
+            width: 100%;
+            padding: 9px 11px;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.04);
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            backdrop-filter: blur(8px);
+        }
+
+        .match-form-row .form-group input:hover,
+        .match-form-row .form-group select:hover,
+        .match-form-row .form-group textarea:hover {
+            border-color: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.06);
+        }
+
+        .match-form-row .form-group input:focus,
+        .match-form-row .form-group select:focus,
+        .match-form-row .form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        /* Premium form input styles */
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 9px 11px;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.04);
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            backdrop-filter: blur(8px);
+        }
+
+        .match-form-group input:hover,
+        .match-form-group select:hover,
+        .match-form-group textarea:hover {
+            border-color: rgba(255, 255, 255, 0.15);
+            background: rgba(255, 255, 255, 0.05);
+            transform: translateY(-1px);
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15),
+                0 8px 25px rgba(239, 68, 68, 0.1);
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateY(-2px);
+        }
+
+        .match-form-group textarea {
+            resize: vertical;
+            min-height: 72px;
+            font-family: inherit;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #d1d5db;
+            letter-spacing: 0.2px;
+        }
+
+        /* Emoji option buttons (coach notes modal) */
+        .emoji-options {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .emoji-option-btn {
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            background: rgba(255, 255, 255, 0.05);
+            color: #fff;
+            border-radius: 10px;
+            padding: 8px 10px;
+            font-size: 18px;
+            line-height: 1;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            min-width: 42px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .emoji-option-btn:hover {
+            border-color: rgba(248, 113, 113, 0.55);
+            background: rgba(239, 68, 68, 0.12);
+            transform: translateY(-1px);
+        }
+
+        .emoji-option-btn.active {
+            border-color: rgba(248, 113, 113, 0.7);
+            background: rgba(239, 68, 68, 0.2);
+            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
+        }
+
+        /* Comment timestamp badge */
+        .comment-time-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 7px;
+            border-radius: 999px;
+            background: rgba(62, 166, 255, 0.15);
+            border: 1px solid rgba(62, 166, 255, 0.4);
+            color: #7dd3fc;
+            font-weight: 600;
+            font-size: 12px;
+            line-height: 1.2;
+            cursor: pointer;
+            text-decoration: none;
+            user-select: none;
+            margin: 0 2px;
+            transition: all 0.2s ease;
+        }
+
+        .comment-time-badge:hover {
+            background: rgba(62, 166, 255, 0.26);
+            border-color: rgba(125, 211, 252, 0.8);
+            color: #e0f2fe;
+            transform: translateY(-1px);
+        }
+
+        /* Custom scrollbar for modals - blended & subtle */
+        .match-modal-content::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.35);
+        }
+
+        /* Hide scrollbar for Firefox */
+        .match-modal-content {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+        }
+
+        /* Modal responsive */
+        @media (max-width: 500px) {
+            .match-modal-content {
+                width: calc(100% - 16px);
+                max-width: none;
+                padding: 14px;
+                border-radius: 14px;
+            }
+
+            .match-modal-header h3 {
+                font-size: 15px;
+            }
+
+            .match-form-row {
+                flex-direction: column;
+                gap: 6px;
+                margin-bottom: 8px;
+            }
+
+            .match-form-group {
+                margin-bottom: 10px;
+            }
+
+            .match-modal-actions {
+                gap: 6px;
+                margin-top: 10px;
+                padding-top: 8px;
+            }
+
+            .match-btn-cancel,
+            .match-btn-save {
+                font-size: 11px;
+                padding: 8px 10px;
+            }
+        }
+
         .match-modal-actions {
             display: flex;
             gap: 12px;
@@ -1386,50 +1696,84 @@
             margin-top: 20px;
         }
 
+        .match-modal-actions {
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+            margin-top: 14px;
+            padding-top: 10px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+        }
+
         .match-btn-cancel {
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            padding: 10px 20px;
-            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            color: #e5e7eb;
+            padding: 8px 12px;
+            border-radius: 10px;
             cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
+            font-size: 12px;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            line-height: 1;
         }
 
         .match-btn-cancel:hover {
-            background: var(--border-color);
+            background: rgba(255, 255, 255, 0.11);
+            border-color: rgba(255, 255, 255, 0.24);
         }
 
         .match-btn-save {
-            background: var(--brand-red);
-            border: none;
-            color: white;
-            padding: 10px 20px;
-            border-radius: 8px;
+            background: linear-gradient(135deg, #ef4444, #f87171);
+            border: 1px solid rgba(248, 113, 113, 0.5);
+            color: #fff;
+            padding: 8px 13px;
+            border-radius: 10px;
             cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
+            font-size: 12px;
+            font-weight: 700;
+            transition: all 0.2s ease;
+            line-height: 1;
+            box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
         }
 
         .match-btn-save:hover {
-            background: #dc2626;
+            filter: brightness(1.04);
+            transform: translateY(-1px);
         }
 
         .match-btn-delete {
-            background: transparent;
-            border: 1px solid var(--brand-red);
+            background: rgba(239, 68, 68, 0.1);
+            border: 2px solid var(--brand-red);
             color: var(--brand-red);
-            padding: 10px 20px;
-            border-radius: 8px;
+            padding: 14px 28px;
+            border-radius: 14px;
             cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
+            font-size: 15px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            flex: 1;
+            max-width: 140px;
         }
 
         .match-btn-delete:hover {
             background: var(--brand-red);
             color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+        }
+
+        .delete-confirm-message {
+            color: var(--text-primary);
+            font-size: 14px;
+            line-height: 1.5;
+            margin-bottom: 6px;
+        }
+
+        .delete-confirm-sub {
+            color: var(--text-secondary);
+            font-size: 12px;
+            margin-bottom: 2px;
         }
 
         /* ===== Responsive ===== */
@@ -1644,6 +1988,9 @@
                     <span>Highlights</span>
                 </button>
 
+                <!-- Coach note overlay (subtitle-style) -->
+                <div class="coach-note-overlay" id="coachNoteOverlay"></div>
+
                 <!-- Playlist Navigation Controls -->
                 @if (isset($nextVideo) || isset($previousVideo))
                     <div class="playlist-controls" id="playlistControls">
@@ -1737,396 +2084,434 @@
                     </div>
                 </div>
 
-                <div class="event-header-actions">
-                    <!-- Like Button -->
-                    @auth
-                        @if (Auth::id() === $video->user_id)
-                            <button class="action-btn" onclick="openEditVideoModal({{ $video->id }})" title="Edit">
-                                <i class="bi bi-pencil"></i>
-                                <span>Edit</span>
-                            </button>
-                        @endif
-                        @endif
-                        @auth
-                            @if (isset($video))
-                                <form method="POST"
-                                    action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
-                                    class="d-inline">
-                                    @csrf
-                                    <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
-                                        title="Like">
-                                        <i
-                                            class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
-                                        <span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
-                                    </button>
-                                </form>
-                            @endif
-                        @else
-                            <a href="{{ route('login') }}" class="action-btn" title="Like">
-                                <i class="bi bi-hand-thumbs-up"></i>
-                                <span>Like</span>
-                            </a>
-                        @endauth
+                <x-video-actions :video="$video" />
+            </div>
+            <!-- ===== END EVENT HEADER ===== -->
 
-                        <!-- Subscribe Button -->
-                        @auth
-                            @if (isset($video) && $video->user && Auth::id() !== $video->user_id)
-                                <button
-                                    class="action-btn {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'subscribed' : '' }}"
-                                    type="button"
-                                    title="{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}"
-                                    onclick="toggleSubscribe({{ $video->user_id ?? 0 }})">
-                                    <i
-                                        class="bi {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'bi-bell-fill' : 'bi-bell' }}"></i>
-                                    <span>{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}</span>
-                                </button>
-                            @endif
-                        @else
-                            <a href="{{ route('login') }}" class="action-btn" title="Subscribe">
-                                <i class="bi bi-bell"></i>
-                                <span>Subscribe</span>
-                            </a>
-                        @endauth
+            <!-- Description Box (Collapsible) -->
+            @if (isset($video) && $video->description)
+                @php
+                    $fullDescription = $video->description;
+                    $shortDescription = Str::limit($fullDescription, 200);
+                    $needsExpand = strlen($fullDescription) > 200;
+                @endphp
 
-                        <!-- Share Button -->
-                        @if (isset($video) && $video->isShareable())
-                            <button class="action-btn"
-                                onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"
-                                style="flex:1;">
-                                <i class="bi bi-share"></i>
-                                <span>Share</span>
-                            </button>
-                        @endif
+                <section class="description-panel">
+                    <button class="description-toggle" type="button" id="toggleDescription">
+                        <span id="descriptionToggleLabel">
+                            {{ $needsExpand ? 'Show description' : 'Hide description' }}
+                        </span>
+                        <span id="descriptionToggleIcon">{{ $needsExpand ? '▼' : '▲' }}</span>
+                    </button>
 
-                        <!-- Save to Playlist Button -->
-                        <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
-                            </svg>
-                            <span>Save</span>
-                        </button>
+                    <div class="description-body {{ $needsExpand ? '' : 'open' }}" id="descriptionBody">
+                        <!-- Match Card -->
+                        <section class="match-card">
+                            <div class="match-header">
+                                <div class="match-label">Final • Male -63kg division</div>
+                            </div>
 
-                    </div>
-                </div>
-                <!-- ===== END EVENT HEADER ===== -->
-
-                <!-- Description Box (Collapsible) -->
-                @if (isset($video) && $video->description)
-                    @php
-                        $fullDescription = $video->description;
-                        $shortDescription = Str::limit($fullDescription, 200);
-                        $needsExpand = strlen($fullDescription) > 200;
-                    @endphp
-
-                    <section class="description-panel">
-                        <button class="description-toggle" type="button" id="toggleDescription">
-                            <span id="descriptionToggleLabel">
-                                {{ $needsExpand ? 'Show description' : 'Hide description' }}
-                            </span>
-                            <span id="descriptionToggleIcon">{{ $needsExpand ? '▼' : '▲' }}</span>
-                        </button>
-
-                        <div class="description-body {{ $needsExpand ? '' : 'open' }}" id="descriptionBody">
-                            <!-- Match Card -->
-                            <section class="match-card">
-                                <div class="match-header">
-                                    <div class="match-label">Final • Male -63kg division</div>
-                                </div>
-
-                                <div class="fighters-row">
-                                    <!-- Blue Fighter (Sami Al Manea) -->
-                                    <article class="fighter-card">
-                                        <div class="fighter-top">
-                                            <!-- Fighter Photo - Links to Member Profile -->
-                                            <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
-                                                title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile"
+                            <div class="fighters-row">
+                                <!-- Blue Fighter (Sami Al Manea) -->
+                                <article class="fighter-card">
+                                    <div class="fighter-top">
+                                        <!-- Fighter Photo - Links to Member Profile -->
+                                        <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                            title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile"
+                                            style="text-decoration: none; color: inherit;">
+                                            <div class="fighter-photo">
+                                                <img src="{{ $blueFighter->photo ?? 'https://picsum.photos/seed/blue-competitor/200/260' }}"
+                                                    alt="{{ $blueFighter->name ?? 'Blue fighter' }}">
+                                            </div>
+                                        </a>
+                                        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                            <!-- Fighter Logo - Links to Club Page -->
+                                            <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}"
                                                 style="text-decoration: none; color: inherit;">
-                                                <div class="fighter-photo">
-                                                    <img src="{{ $blueFighter->photo ?? 'https://picsum.photos/seed/blue-competitor/200/260' }}"
-                                                        alt="{{ $blueFighter->name ?? 'Blue fighter' }}">
+                                                <div class="fighter-logo">
+                                                    <img src="{{ $blueFighter->logo ?? 'https://picsum.photos/seed/blue-logo/160/160' }}"
+                                                        alt="{{ $blueFighter->team ?? 'Blue team' }} logo">
                                                 </div>
                                             </a>
-                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
-                                                <!-- Fighter Logo - Links to Club Page -->
-                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
-                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}"
-                                                    style="text-decoration: none; color: inherit;">
-                                                    <div class="fighter-logo">
-                                                        <img src="{{ $blueFighter->logo ?? 'https://picsum.photos/seed/blue-logo/160/160' }}"
-                                                            alt="{{ $blueFighter->team ?? 'Blue team' }} logo">
-                                                    </div>
-                                                </a>
-                                                <span class="fighter-badge blue">Blue</span>
-                                            </div>
-                                        </div>
-                                        <div class="fighter-info">
-                                            <!-- Fighter Name - Links to Member Profile -->
-                                            <div class="fighter-name blue-corner">
-                                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
-                                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
-                                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
-                                                </a>
-                                            </div>
-                                            <!-- Fighter Team - Links to Club Page -->
-                                            <div class="fighter-team">
-                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
-                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}">
-                                                    {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}
-                                                </a>
-                                            </div>
-                                            <div class="fighter-country">
-                                                <span class="fighter-country-flag">{{ $blueFighter->flag ?? '🇧🇭' }}</span>
-                                                <span>{{ $blueFighter->country ?? 'Bahrain' }}</span>
-                                            </div>
-                                        </div>
-                                    </article>
-
-                                    <!-- Score & Referee Center -->
-                                    <div class="match-center">
-                                        <div class="score-pill">
-                                            <span class="score-number">{{ $match->score_blue ?? 7 }}</span>
-                                            <span class="score-label">Final score</span>
-                                            <span class="score-number">{{ $match->score_red ?? 5 }}</span>
-                                        </div>
-                                        <div class="referee-block">
-                                            <!-- Referee Photo - Links to Member Profile -->
-                                            <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
-                                                title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile"
-                                                style="text-decoration: none; color: inherit;">
-                                                <div class="referee-photo">
-                                                    <img src="{{ $referee->photo ?? 'https://picsum.photos/seed/referee/200/260' }}"
-                                                        alt="Referee">
-                                                </div>
-                                            </a>
-                                            <div style="color: #ffd900; font-weight: bold">
-                                                <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
-                                                    style="color: inherit; text-decoration: none;"
-                                                    title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile">
-                                                    {{ $referee->name ?? 'Ghassan Yusuf' }}
-                                                </a>
-                                            </div>
-                                            <div class="ref-label">Center Referee</div>
+                                            <span class="fighter-badge blue">Blue</span>
                                         </div>
                                     </div>
-
-                                    <!-- Red Fighter (Hassan Al Shallan) -->
-                                    <article class="fighter-card">
-                                        <div class="fighter-top">
-                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
-                                                <!-- Fighter Logo - Links to Club Page -->
-                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
-                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}"
-                                                    style="text-decoration: none; color: inherit;">
-                                                    <div class="fighter-logo">
-                                                        <img src="{{ $redFighter->logo ?? 'https://picsum.photos/seed/red-logo/160/160' }}"
-                                                            alt="{{ $redFighter->team ?? 'Red team' }} logo">
-                                                    </div>
-                                                </a>
-                                                <span class="fighter-badge red">Red</span>
-                                            </div>
-                                            <!-- Fighter Photo - Links to Member Profile -->
-                                            <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
-                                                title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile"
-                                                style="text-decoration: none; color: inherit;">
-                                                <div class="fighter-photo">
-                                                    <img src="{{ $redFighter->photo ?? 'https://picsum.photos/seed/red-competitor/200/260' }}"
-                                                        alt="{{ $redFighter->name ?? 'Red fighter' }}">
-                                                </div>
+                                    <div class="fighter-info">
+                                        <!-- Fighter Name - Links to Member Profile -->
+                                        <div class="fighter-name blue-corner">
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                                {{ $blueFighter->name ?? 'Sami Al Manea' }}
                                             </a>
                                         </div>
-                                        <div class="fighter-info">
-                                            <!-- Fighter Name - Links to Member Profile -->
-                                            <div class="fighter-name red-corner">
-                                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
-                                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
-                                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
-                                                </a>
-                                            </div>
-                                            <!-- Fighter Team - Links to Club Page -->
-                                            <div class="fighter-team">
-                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
-                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}">
-                                                    {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}
-                                                </a>
-                                            </div>
-                                            <div class="fighter-country">
-                                                <span class="fighter-country-flag">{{ $redFighter->flag ?? '🇧🇭' }}</span>
-                                                <span>{{ $redFighter->country ?? 'Bahrain' }}</span>
-                                            </div>
+                                        <!-- Fighter Team - Links to Club Page -->
+                                        <div class="fighter-team">
+                                            <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}">
+                                                {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}
+                                            </a>
                                         </div>
-                                    </article>
-                                </div>
-
-                                <div class="match-footer">
-                                    <a class="hall-link" id="hallLink" title="View venue details"
-                                        href="{{ $venue->map_link ?? 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain' }}"
-                                        target="_blank" rel="noopener noreferrer">
-                                        📍 {{ $venue->name ?? 'Manama Sports Hall' }}
-                                    </a>
-                                    @if (isset($match->features))
-                                        • {{ $match->features }}
-                                    @endif
-                                </div>
-                            </section>
-
-                            <!-- Match Overview -->
-                            <section class="markdown-body">
-                                <div
-                                    style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
-                                    <h2 style="font-size: 1.05rem; margin: 0;">Match Overview</h2>
-                                    @if (isset($video) && $video->user)
-                                        <div class="video-owner-badge"
-                                            style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary);">
-                                            <img src="{{ $video->user->avatar_url }}" class="owner-avatar"
-                                                style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover;"
-                                                alt="{{ $video->user->name }}">
-                                            <span class="owner-name"
-                                                style="color: var(--text-primary); font-weight: 500;">{{ $video->user->name }}</span>
-                                            <span>• {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</span>
+                                        <div class="fighter-country">
+                                            <span class="fighter-country-flag">{{ $blueFighter->flag ?? '🇧🇭' }}</span>
+                                            <span>{{ $blueFighter->country ?? 'Bahrain' }}</span>
                                         </div>
-                                    @endif
+                                    </div>
+                                </article>
+
+                                <!-- Score & Referee Center -->
+                                <div class="match-center">
+                                    <div class="score-pill">
+                                        <span class="score-number">{{ $match->score_blue ?? 7 }}</span>
+                                        <span class="score-label">Final score</span>
+                                        <span class="score-number">{{ $match->score_red ?? 5 }}</span>
+                                    </div>
+                                    <div class="referee-block">
+                                        <!-- Referee Photo - Links to Member Profile -->
+                                        <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                            title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile"
+                                            style="text-decoration: none; color: inherit;">
+                                            <div class="referee-photo">
+                                                <img src="{{ $referee->photo ?? 'https://picsum.photos/seed/referee/200/260' }}"
+                                                    alt="Referee">
+                                            </div>
+                                        </a>
+                                        <div style="color: #ffd900; font-weight: bold">
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                style="color: inherit; text-decoration: none;"
+                                                title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile">
+                                                {{ $referee->name ?? 'Ghassan Yusuf' }}
+                                            </a>
+                                        </div>
+                                        <div class="ref-label">Center Referee</div>
+                                    </div>
                                 </div>
-                                <div class="description-text">
-                                    {!! Str::markdown($fullDescription) !!}
-                                </div>
-                            </section>
-                        </div>
-                    </section>
 
-                    <script>
-                        // Collapsible Description Toggle
-                        const descriptionBody = document.getElementById('descriptionBody');
-                        const descriptionToggle = document.getElementById('toggleDescription');
-                        const descriptionToggleLabel = document.getElementById('descriptionToggleLabel');
-                        const descriptionToggleIcon = document.getElementById('descriptionToggleIcon');
-
-                        if (descriptionToggle && descriptionBody) {
-                            descriptionToggle.addEventListener('click', () => {
-                                const isOpen = descriptionBody.classList.toggle('open');
-                                descriptionToggleLabel.textContent = isOpen ? 'Hide description' : 'Show description';
-                                descriptionToggleIcon.textContent = isOpen ? '▲' : '▼';
-                            });
-                        }
-
-                        // Hall/Venue Link Handler
-                        const hallLink = document.getElementById('hallLink');
-                        if (hallLink) {
-                            hallLink.addEventListener('click', () => {
-                                // Analytics tracking can be added here
-                            });
-                        }
-
-                        // Match Highlights Toggle with localStorage persistence
-                        document.addEventListener('DOMContentLoaded', function() {
-                            const toggleBtn = document.getElementById('matchHighlightsToggle');
-                            const sidebar = document.querySelector('.events-sidebar');
-                            const videoId = {{ isset($video) ? $video->id : 0 }};
-
-                            if (toggleBtn && sidebar) {
-                                // Load saved state on page load
-                                const savedState = localStorage.getItem(`highlights_${videoId}`);
-                                if (savedState === 'open') {
-                                    sidebar.classList.add('show');
-                                    toggleBtn.classList.add('expanded');
-                                    toggleBtn.textContent = 'Highlights';
-                                }
-
-                                toggleBtn.addEventListener('click', function() {
-                                    const isOpen = sidebar.classList.toggle('show');
-                                    toggleBtn.classList.toggle('expanded');
-
-                                    // Save state to localStorage
-                                    if (isOpen) {
-                                        localStorage.setItem(`highlights_${videoId}`, 'open');
-                                        toggleBtn.textContent = 'Highlights';
-                                    } else {
-                                        localStorage.removeItem(`highlights_${videoId}`);
-                                    }
-                                });
-                            }
-                        });
-                    </script>
-                @endif
-
-                <!-- Comment Section -->
-                <div class="comments-section"
-                    style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
-                    <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
-                        Comments <span
-                            style="color: var(--text-secondary); font-weight: 400;">({{ isset($video) ? $video->comment_count ?? 0 : 0 }})</span>
-                    </h3>
-                    @auth
-                        <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
-                            <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
-                                alt="{{ Auth::user()->name }}">
-                            <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
-                                <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
-                                    rows="1"
-                                    style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
-                                <button type="button" class="action-btn"
-                                    onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
-                                    <i class="bi bi-x-lg"></i>
-                                    <span>Cancel</span>
-                                </button>
-                                <button type="button" class="action-btn comment-btn"
-                                    onclick="submitComment({{ isset($video) ? $video->id : 0 }})" style="flex-shrink: 0;">
-                                    <i class="bi bi-chat-dots"></i>
-                                    <span>Comment</span>
-                                </button>
+                                <!-- Red Fighter (Hassan Al Shallan) -->
+                                <article class="fighter-card">
+                                    <div class="fighter-top">
+                                        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                            <!-- Fighter Logo - Links to Club Page -->
+                                            <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-logo">
+                                                    <img src="{{ $redFighter->logo ?? 'https://picsum.photos/seed/red-logo/160/160' }}"
+                                                        alt="{{ $redFighter->team ?? 'Red team' }} logo">
+                                                </div>
+                                            </a>
+                                            <span class="fighter-badge red">Red</span>
+                                        </div>
+                                        <!-- Fighter Photo - Links to Member Profile -->
+                                        <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                            title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile"
+                                            style="text-decoration: none; color: inherit;">
+                                            <div class="fighter-photo">
+                                                <img src="{{ $redFighter->photo ?? 'https://picsum.photos/seed/red-competitor/200/260' }}"
+                                                    alt="{{ $redFighter->name ?? 'Red fighter' }}">
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="fighter-info">
+                                        <!-- Fighter Name - Links to Member Profile -->
+                                        <div class="fighter-name red-corner">
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                                {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                            </a>
+                                        </div>
+                                        <!-- Fighter Team - Links to Club Page -->
+                                        <div class="fighter-team">
+                                            <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}">
+                                                {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}
+                                            </a>
+                                        </div>
+                                        <div class="fighter-country">
+                                            <span class="fighter-country-flag">{{ $redFighter->flag ?? '🇧🇭' }}</span>
+                                            <span>{{ $redFighter->country ?? 'Bahrain' }}</span>
+                                        </div>
+                                    </div>
+                                </article>
                             </div>
-                        </div>
-                    @else
-                        <div
-                            style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
-                            <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
-                        </div>
-                    @endauth
-                    <div id="commentsList">
-                        @if (isset($video))
-                            @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
-                                @include('videos.partials.comment', ['comment' => $comment])
-                            @empty
-                                <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be
-                                    the first to comment!</p>
-                            @endforelse
-                        @endif
+
+                            <div class="match-footer">
+                                <a class="hall-link" id="hallLink" title="View venue details"
+                                    href="{{ $venue->map_link ?? 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain' }}"
+                                    target="_blank" rel="noopener noreferrer">
+                                    📍 {{ $venue->name ?? 'Manama Sports Hall' }}
+                                </a>
+                                @if (isset($match->features))
+                                    • {{ $match->features }}
+                                @endif
+                            </div>
+                        </section>
+
+                        <!-- Match Overview -->
+                        <section class="markdown-body">
+                            <div
+                                style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                                <h2 style="font-size: 1.05rem; margin: 0;">Match Overview</h2>
+                                @if (isset($video) && $video->user)
+                                    <div class="video-owner-badge"
+                                        style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary);">
+                                        <img src="{{ $video->user->avatar_url }}" class="owner-avatar"
+                                            style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover;"
+                                            alt="{{ $video->user->name }}">
+                                        <span class="owner-name"
+                                            style="color: var(--text-primary); font-weight: 500;">{{ $video->user->name }}</span>
+                                        <span>• {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</span>
+                                    </div>
+                                @endif
+                            </div>
+                            <div class="description-text">
+                                {!! Str::markdown($fullDescription) !!}
+                            </div>
+                        </section>
                     </div>
-                </div>
+                </section>
 
                 <script>
-                    function submitComment(videoId) {
-                        const body = document.getElementById('commentBody').value.trim();
-                        if (!body) return;
+                    // Collapsible Description Toggle
+                    const descriptionBody = document.getElementById('descriptionBody');
+                    const descriptionToggle = document.getElementById('toggleDescription');
+                    const descriptionToggleLabel = document.getElementById('descriptionToggleLabel');
+                    const descriptionToggleIcon = document.getElementById('descriptionToggleIcon');
 
-                        fetch(`/videos/${videoId}/comments`, {
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': 'application/json',
-                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                                },
-                                body: JSON.stringify({
-                                    body: body
-                                })
-                            })
-                            .then(response => response.json())
-                            .catch(error => {
-                                console.error('Error:', error);
-                                alert('Failed to post comment: ' + error);
-                            })
-                            .then(data => {
-                                if (data && data.success) {
-                                    document.getElementById('commentBody').value = '';
-                                    addCommentToList(data.comment);
-                                } else {
-                                    alert('Failed to post comment');
-                                }
-                            });
+                    if (descriptionToggle && descriptionBody) {
+                        descriptionToggle.addEventListener('click', () => {
+                            const isOpen = descriptionBody.classList.toggle('open');
+                            descriptionToggleLabel.textContent = isOpen ? 'Hide description' : 'Show description';
+                            descriptionToggleIcon.textContent = isOpen ? '▲' : '▼';
+                        });
                     }
 
-                    function addCommentToList(comment) {
-                        const commentsList = document.getElementById('commentsList');
-                        const commentHtml = `
+                    // Hall/Venue Link Handler
+                    const hallLink = document.getElementById('hallLink');
+                    if (hallLink) {
+                        hallLink.addEventListener('click', () => {
+                            // Analytics tracking can be added here
+                        });
+                    }
+
+                    // Match Highlights Toggle with localStorage persistence
+                    document.addEventListener('DOMContentLoaded', function() {
+                        const toggleBtn = document.getElementById('matchHighlightsToggle');
+                        const sidebar = document.querySelector('.events-sidebar');
+                        const videoId = {{ isset($video) ? $video->id : 0 }};
+
+                        if (toggleBtn && sidebar) {
+                            // Load saved state on page load
+                            const savedState = localStorage.getItem(`highlights_${videoId}`);
+                            if (savedState === 'open') {
+                                sidebar.classList.add('show');
+                                toggleBtn.classList.add('expanded');
+                                toggleBtn.textContent = 'Highlights';
+                            }
+
+                            toggleBtn.addEventListener('click', function() {
+                                const isOpen = sidebar.classList.toggle('show');
+                                toggleBtn.classList.toggle('expanded');
+
+                                // Save state to localStorage
+                                if (isOpen) {
+                                    localStorage.setItem(`highlights_${videoId}`, 'open');
+                                    toggleBtn.textContent = 'Highlights';
+                                } else {
+                                    localStorage.removeItem(`highlights_${videoId}`);
+                                }
+                            });
+                        }
+                    });
+                </script>
+            @endif
+
+            <!-- Comment Section -->
+            <div class="comments-section"
+                style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                    Comments <span
+                        style="color: var(--text-secondary); font-weight: 400;">({{ isset($video) ? $video->comment_count ?? 0 : 0 }})</span>
+                </h3>
+                @auth
+                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                            alt="{{ Auth::user()->name }}">
+                        <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                            <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
+                                rows="1"
+                                style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                            <button type="button" class="action-btn"
+                                onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
+                                <i class="bi bi-x-lg"></i>
+                                <span>Cancel</span>
+                            </button>
+                            <button type="button" class="action-btn comment-btn"
+                                onclick="submitComment({{ isset($video) ? $video->id : 0 }})" style="flex-shrink: 0;">
+                                <i class="bi bi-chat-dots"></i>
+                                <span>Comment</span>
+                            </button>
+                        </div>
+                    </div>
+                @else
+                    <div
+                        style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                    </div>
+                @endauth
+                <div id="commentsList">
+                    @if (isset($video))
+                        @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                            @include('videos.partials.comment', ['comment' => $comment])
+                        @empty
+                            <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be
+                                the first to comment!</p>
+                        @endforelse
+                    @endif
+                </div>
+            </div>
+
+            <script>
+                function submitComment(videoId) {
+                    const body = document.getElementById('commentBody').value.trim();
+                    if (!body) return;
+
+                    fetch(`/videos/${videoId}/comments`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                            },
+                            body: JSON.stringify({
+                                body: body
+                            })
+                        })
+                        .then(response => response.json())
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Failed to post comment: ' + error);
+                        })
+                        .then(data => {
+                            if (data && data.success) {
+                                document.getElementById('commentBody').value = '';
+                                addCommentToList(data.comment);
+                            } else {
+                                alert('Failed to post comment');
+                            }
+                        });
+                }
+
+                let commentPlaybackStopHandler = null;
+                let commentPlaybackEndTime = null;
+
+                function parseDotTimeToSeconds(dotTime) {
+                    const parts = String(dotTime).trim().split('.');
+                    if (parts.length !== 2) return null;
+                    const mins = parseInt(parts[0], 10);
+                    const secs = parseInt(parts[1], 10);
+                    if (Number.isNaN(mins) || Number.isNaN(secs) || secs < 0 || secs > 59) return null;
+                    return mins * 60 + secs;
+                }
+
+                function clearCommentPlaybackHandler(videoPlayer) {
+                    if (videoPlayer && commentPlaybackStopHandler) {
+                        videoPlayer.removeEventListener('timeupdate', commentPlaybackStopHandler);
+                    }
+                    commentPlaybackStopHandler = null;
+                    commentPlaybackEndTime = null;
+                }
+
+                function playCommentTimeRange(startSec, endSec = null) {
+                    const videoPlayer = document.getElementById('videoPlayer');
+                    if (!videoPlayer) return;
+
+                    clearCommentPlaybackHandler(videoPlayer);
+
+                    const startPlayback = () => {
+                        // Start 1 second before the badge timestamp for context
+                        const playbackStart = Math.max(0, startSec - 1);
+                        videoPlayer.currentTime = playbackStart;
+                        videoPlayer.play();
+
+                        if (endSec !== null && endSec > startSec) {
+                            commentPlaybackEndTime = endSec;
+                            commentPlaybackStopHandler = function() {
+                                if (videoPlayer.currentTime >= commentPlaybackEndTime) {
+                                    videoPlayer.pause();
+                                    videoPlayer.currentTime = commentPlaybackEndTime;
+                                    clearCommentPlaybackHandler(videoPlayer);
+                                }
+                            };
+                            videoPlayer.addEventListener('timeupdate', commentPlaybackStopHandler);
+                        }
+                    };
+
+                    // Move viewport first, then start playback
+                    const videoContainer = document.getElementById('videoContainer');
+                    if (videoContainer) {
+                        videoContainer.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'center'
+                        });
+
+                        // Wait longer so user is fully positioned at video before playback starts
+                        setTimeout(startPlayback, 900);
+                    } else {
+                        startPlayback();
+                    }
+                }
+
+                function enhanceCommentBodyWithTimeBadges(root = document) {
+                    const commentBodies = root.querySelectorAll('.comment-body');
+                    const timeRangeRegex = /@(\d{1,2}\.\d{2})(?:-(\d{1,2}\.\d{2}))?/g;
+                    const mentionRegex = /@(\w+)/g;
+
+                    commentBodies.forEach(bodyEl => {
+                        // avoid re-processing if already enhanced
+                        if (bodyEl.dataset.timeEnhanced === '1') return;
+
+                        const originalText = bodyEl.textContent || '';
+                        if (!originalText.trim()) {
+                            bodyEl.dataset.timeEnhanced = '1';
+                            return;
+                        }
+
+                        // Build HTML with clickable time badges first
+                        let html = originalText.replace(timeRangeRegex, (match, start, end) => {
+                            const startSec = parseDotTimeToSeconds(start);
+                            const endSec = end ? parseDotTimeToSeconds(end) : null;
+                            if (startSec === null || (end && endSec === null)) return match;
+                            if (endSec !== null && endSec <= startSec) return match;
+
+                            const label = end ? `@${start}-${end}` : `@${start}`;
+                            return `<span class="comment-time-badge" data-start="${startSec}" data-end="${endSec ?? ''}">${label}</span>`;
+                        });
+
+                        // Then color regular @mentions but skip existing badge HTML
+                        html = html.replace(mentionRegex, (m, u) => `@${u}`);
+                        bodyEl.innerHTML = html.replace(/(^|[\s>])@(\w+)/g,
+                            '$1<span style="color: #3ea6ff; font-weight: 500;">@$2</span>');
+
+                        bodyEl.dataset.timeEnhanced = '1';
+                    });
+
+                    root.querySelectorAll('.comment-time-badge').forEach(badge => {
+                        if (badge.dataset.bound === '1') return;
+                        badge.addEventListener('click', function(e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const start = parseFloat(this.dataset.start || '');
+                            const end = this.dataset.end === '' ? null : parseFloat(this.dataset.end);
+                            if (Number.isNaN(start)) return;
+                            playCommentTimeRange(start, Number.isNaN(end) ? null : end);
+                        });
+                        badge.dataset.bound = '1';
+                    });
+                }
+
+                function addCommentToList(comment) {
+                    const commentsList = document.getElementById('commentsList');
+                    const commentHtml = `
                 <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
                     <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
                     <div style="flex: 1;">
@@ -2135,7 +2520,7 @@
                             <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
                         </div>
                         <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
-                            ${comment.body.replace(/@(\\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>')}
+                            ${comment.body}
                         </div>
                         <div style="display: flex; gap: 12px; margin-top: 8px;">
                             <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
@@ -2145,736 +2530,768 @@
                     </div>
                 </div>
             `;
-                        commentsList.insertAdjacentHTML('afterbegin', commentHtml);
-                        const commentCount = document.querySelector('h3 span');
-                        if (commentCount) {
-                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
-                            commentCount.textContent = `(${count})`;
-                        }
+                    commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                    enhanceCommentBodyWithTimeBadges(commentsList);
+                    const commentCount = document.querySelector('h3 span');
+                    if (commentCount) {
+                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                        commentCount.textContent = `(${count})`;
                     }
+                }
 
-                    function deleteComment(commentId) {
-                        if (confirm('Are you sure you want to delete this comment?')) {
-                            fetch(`/comments/${commentId}`, {
-                                    method: 'DELETE',
-                                    headers: {
-                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                                    }
-                                })
-                                .then(response => response.json())
-                                .then(data => {
-                                    if (data.success) {
-                                        document.getElementById('comment-' + commentId).remove();
-                                        const commentCount = document.querySelector('h3 span');
-                                        if (commentCount) {
-                                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
-                                            commentCount.textContent = `(${count})`;
-                                        }
-                                    }
-                                });
-                        }
-                    }
-                    document.addEventListener('DOMContentLoaded', function() {
-                        const commentTexts = document.querySelectorAll('.comment-body');
-                        commentTexts.forEach(text => {
-                            const html = text.innerHTML.replace(/@(\w+)/g,
-                                '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
-                            text.innerHTML = html;
-                        });
-                    });
-
-                    function submitReply(videoId, parentId) {
-                        const textarea = document.querySelector(`#replyForm${parentId} textarea`);
-                        const body = textarea.value.trim();
-                        if (!body) return;
-                        fetch(`/videos/${videoId}/comments`, {
-                                method: 'POST',
+                function deleteComment(commentId) {
+                    if (confirm('Are you sure you want to delete this comment?')) {
+                        fetch(`/comments/${commentId}`, {
+                                method: 'DELETE',
                                 headers: {
-                                    'Content-Type': 'application/json',
                                     'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                                },
-                                body: JSON.stringify({
-                                    body: body,
-                                    parent_id: parentId
-                                })
+                                }
                             })
                             .then(response => response.json())
                             .then(data => {
                                 if (data.success) {
-                                    location.reload();
+                                    document.getElementById('comment-' + commentId).remove();
+                                    const commentCount = document.querySelector('h3 span');
+                                    if (commentCount) {
+                                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                        commentCount.textContent = `(${count})`;
+                                    }
                                 }
                             });
                     }
-                </script>
-            </div>
+                }
+                document.addEventListener('DOMContentLoaded', function() {
+                    enhanceCommentBodyWithTimeBadges(document);
+                });
 
-            <!-- Sidebar - Match Highlights -->
-            <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
-                <aside class="events-sidebar">
-                    <div class="events-sidebar-header" style="justify-content: center;">
-                        <h3>Match Highlights</h3>
-                    </div>
-                    <div class="tab-header">
-                        <button class="tab-button active" data-tab="official">Points</button>
-                        <button class="tab-button" data-tab="review">Coach review</button>
-                    </div>
-                    <div class="tab-panels">
-                        <!-- Points Tab -->
-                        <div class="tab-panel active" id="tab-official">
-                            <div
-                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
-                                <div>
-                                    <div class="section-label">Rounds & points</div>
-                                </div>
-                                @auth
-                                    @if (isset($video) && Auth::id() === $video->user_id)
-                                        <button class="btn-add" type="button" onclick="openAddRoundModal()">
-                                            <span>+</span> Add Round
-                                        </button>
-                                    @endif
-                                @endauth
-                            </div>
-                            <div class="event-list" id="officialEvents">
-                                <!-- Round markers and points (unchanged) -->
-                                <div class="round-marker" data-round="1">
-                                    <span class="round-badge">ROUND 1</span>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="round-actions">
-                                                <button class="round-action-btn" onclick="openAddPointModal(1)"
-                                                    title="Add point">+</button>
-                                                <button class="round-action-btn" onclick="editRound(1)"
-                                                    title="Edit round">✏️</button>
-                                                <button class="round-action-btn" onclick="deleteRound(1)"
-                                                    title="Delete round">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
-                                    <div class="event-time">@00:20</div>
-                                    <div>
-                                        <div class="event-label">
-                                            Blue body kick (1 pt)
-                                            <span class="pill pill-blue">Blue</span>
-                                        </div>
-                                        <div class="event-meta">
-                                            Round 1 • Score 1 – 0 • Clean contact.
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editPoint('pt1')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deletePoint('pt1')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
-                                    <div class="event-time">@00:45</div>
-                                    <div>
-                                        <div class="event-label">
-                                            Blue scores body kick
-                                            <span class="pill pill-blue">Blue</span>
-                                        </div>
-                                        <div class="event-meta">
-                                            Round 1 • Score 2 – 0 • Judge: Central.
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editPoint('pt2')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deletePoint('pt2')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="round-marker" data-round="2">
-                                    <span class="round-badge">ROUND 2</span>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="round-actions">
-                                                <button class="round-action-btn" onclick="openAddPointModal(2)"
-                                                    title="Add point">+</button>
-                                                <button class="round-action-btn" onclick="editRound(2)"
-                                                    title="Edit round">✏️</button>
-                                                <button class="round-action-btn" onclick="deleteRound(2)"
-                                                    title="Delete round">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
-                                    <div class="event-time">@01:30</div>
-                                    <div>
-                                        <div class="event-label">
-                                            Red head kick (3 pts)
-                                            <span class="pill pill-red">Red</span>
-                                        </div>
-                                        <div class="event-meta">
-                                            Round 2 • Score 2 – 3 • Video replay requested.
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editPoint('pt3')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deletePoint('pt3')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="round-marker" data-round="3">
-                                    <span class="round-badge">ROUND 3</span>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="round-actions">
-                                                <button class="round-action-btn" onclick="openAddPointModal(3)"
-                                                    title="Add point">+</button>
-                                                <button class="round-action-btn" onclick="editRound(3)"
-                                                    title="Edit round">✏️</button>
-                                                <button class="round-action-btn" onclick="deleteRound(3)"
-                                                    title="Delete round">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
-                                    <div class="event-time">@02:30</div>
-                                    <div>
-                                        <div class="event-label">
-                                            Blue spinning backfist (2 pts)
-                                            <span class="pill pill-blue">Blue</span>
-                                        </div>
-                                        <div class="event-meta">
-                                            Round 3 • Score 4 – 3 • Close round.
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editPoint('pt4')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deletePoint('pt4')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
-                                    <div class="event-time">@03:00</div>
-                                    <div>
-                                        <div class="event-label">
-                                            Red leg kick (1 pt)
-                                            <span class="pill pill-red">Red</span>
-                                        </div>
-                                        <div class="event-meta">
-                                            Round 3 • Score 4 – 4 • Tied!
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editPoint('pt5')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deletePoint('pt5')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                            </div>
-                        </div>
+                function submitReply(videoId, parentId) {
+                    const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                    const body = textarea.value.trim();
+                    if (!body) return;
+                    fetch(`/videos/${videoId}/comments`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                            },
+                            body: JSON.stringify({
+                                body: body,
+                                parent_id: parentId
+                            })
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                location.reload();
+                            }
+                        });
+                }
+            </script>
+        </div>
 
-                        <!-- Coach Review Tab -->
-                        <div class="tab-panel" id="tab-review">
-                            <div
-                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
-                                <div class="section-label">Private notes</div>
-                                @auth
-                                    @if (isset($video) && Auth::id() === $video->user_id)
-                                        <button class="btn-add" type="button" onclick="openAddReviewModal()">
-                                            <span>+</span> Add Note
-                                        </button>
-                                    @endif
-                                @endauth
+        <!-- Sidebar - Match Highlights -->
+        <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
+            <aside class="events-sidebar">
+                <div class="events-sidebar-header" style="justify-content: center;">
+                    <h3>Match Highlights</h3>
+                </div>
+                <div class="tab-header">
+                    <button class="tab-button active" data-tab="official">Points</button>
+                    <button class="tab-button" data-tab="review">Coach review</button>
+                </div>
+                <div class="tab-panels">
+                    <!-- Points Tab -->
+                    <div class="tab-panel active" id="tab-official">
+                        <div
+                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                            <div>
+                                <div class="section-label">Rounds & points</div>
                             </div>
-                            <div class="event-list" id="reviewEvents">
-                                <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
-                                    <div class="event-time-container">
-                                        <div class="emoji">🔥</div>
-                                        <div class="event-time">@00:32–00:50</div>
-                                    </div>
-                                    <div>
-                                        <div class="event-label">🔥 Good pressure, but guard too low after first kick</div>
-                                        <div class="event-meta">
-                                            <div class="comment-avatar">
-                                                <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
-                                            </div>
-                                            <div class="event-meta-text">
-                                                <div class="coach-name">Coach Ahmed</div>
-                                                <div class="review-note">Hands drop after scoring, drill guard recovery
-                                                    immediately.</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editReview('rev1')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deleteReview('rev1')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
-                                    <div class="event-time-container">
-                                        <div class="emoji">🤔</div>
-                                        <div class="event-time">@02:05–02:20</div>
-                                    </div>
-                                    <div>
-                                        <div class="event-label">🤔 Missed counter opportunity</div>
-                                        <div class="event-meta">
-                                            <div class="comment-avatar">
-                                                <img src="https://picsum.photos/seed/coach-sara/80/80" alt="Coach Sara">
-                                            </div>
-                                            <div class="event-meta-text">
-                                                <div class="coach-name">Coach Sara</div>
-                                                <div class="review-note">Great angle, but no follow up. Use this clip to
-                                                    discuss risk vs reward.</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editReview('rev2')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deleteReview('rev2')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                                <div class="event-item" data-time-start="205" data-id="rev3">
-                                    <div class="event-time-container">
-                                        <div class="emoji">😄</div>
-                                        <div class="event-time">@03:25</div>
-                                    </div>
-                                    <div>
-                                        <div class="event-label">😄 Excellent angle change and follow-up</div>
-                                        <div class="event-meta">
-                                            <div class="comment-avatar">
-                                                <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
-                                            </div>
-                                            <div class="event-meta-text">
-                                                <div class="coach-name">Coach Ahmed</div>
-                                                <div class="review-note">Save as positive highlight, ideal example of exit and
-                                                    re-entry after scoring.</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    @auth
-                                        @if (isset($video) && Auth::id() === $video->user_id)
-                                            <div class="event-actions">
-                                                <button class="event-action-btn" onclick="editReview('rev3')"
-                                                    title="Edit">✏️</button>
-                                                <button class="event-action-btn delete" onclick="deleteReview('rev3')"
-                                                    title="Delete">🗑️</button>
-                                            </div>
-                                        @endif
-                                    @endauth
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </aside>
-
-                <!-- Sidebar - Up Next / Recommendations -->
-                <div class="yt-sidebar-container">
-                    @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
-                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
-                            <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
-                            {{ $playlist->name }}
-                            <span
-                                style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
-                                videos)</span>
-                        </h3>
-                        <div class="recommended-videos-list">
-                            @foreach ($playlistVideos as $index => $playlistVideo)
-                                @if ($playlistVideo->id !== $video->id)
-                                    <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
-                                        onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
-                                        <div class="sidebar-thumb" style="position: relative;">
-                                            @if ($playlistVideo->thumbnail)
-                                                <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
-                                                    alt="{{ $playlistVideo->title }}">
-                                            @else
-                                                <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
-                                                    alt="{{ $playlistVideo->title }}">
-                                            @endif
-                                            @if ($playlistVideo->duration)
-                                                <span
-                                                    class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
-                                            @endif
-                                            @if ($playlistVideo->is_shorts)
-                                                <span class="yt-shorts-badge"
-                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
-                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
-                                                </span>
-                                            @endif
-                                            <!-- Playlist position indicator -->
-                                            <span
-                                                style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
-                                                {{ $index + 1 }}
-                                            </span>
-                                        </div>
-                                        <div class="sidebar-info">
-                                            <div class="sidebar-title">
-                                                <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
-                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
-                                                {{ Str::limit($playlistVideo->title, 60) }}
-                                            </div>
-                                            <div class="sidebar-meta">
-                                                <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
-                                                <div>{{ number_format($playlistVideo->view_count) }} views •
-                                                    {{ $playlistVideo->created_at->diffForHumans() }}</div>
-                                            </div>
-                                        </div>
-                                    </div>
+                            @auth
+                                @if (isset($video) && Auth::id() === $video->user_id)
+                                    <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                                        <span>+</span> Add Round
+                                    </button>
                                 @endif
+                            @endauth
+                        </div>
+                        <div class="event-list" id="officialEvents">
+                            <!-- Round markers and points (unchanged) -->
+                            <div class="round-marker" data-round="1">
+                                <span class="round-badge">ROUND 1</span>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(1)"
+                                                title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(1)"
+                                                title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(1)"
+                                                title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                                <div class="event-time">@00:20</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue body kick (1 pt)
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 1 • Score 1 – 0 • Clean contact.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt1')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt1')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                                <div class="event-time">@00:45</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue scores body kick
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 1 • Score 2 – 0 • Judge: Central.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt2')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt2')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="round-marker" data-round="2">
+                                <span class="round-badge">ROUND 2</span>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(2)"
+                                                title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(2)"
+                                                title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(2)"
+                                                title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                                <div class="event-time">@01:30</div>
+                                <div>
+                                    <div class="event-label">
+                                        Red head kick (3 pts)
+                                        <span class="pill pill-red">Red</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 2 • Score 2 – 3 • Video replay requested.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt3')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt3')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="round-marker" data-round="3">
+                                <span class="round-badge">ROUND 3</span>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(3)"
+                                                title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(3)"
+                                                title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(3)"
+                                                title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                                <div class="event-time">@02:30</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue spinning backfist (2 pts)
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 3 • Score 4 – 3 • Close round.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt4')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt4')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                                <div class="event-time">@03:00</div>
+                                <div>
+                                    <div class="event-label">
+                                        Red leg kick (1 pt)
+                                        <span class="pill pill-red">Red</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 3 • Score 4 – 4 • Tied!
+                                    </div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt5')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt5')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Coach Review Tab -->
+                    <div class="tab-panel" id="tab-review">
+                        <div
+                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                            <div class="section-label">Private notes</div>
+                            @auth
+                                @if (isset($video) && Auth::id() === $video->user_id)
+                                    <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                                        <span>+</span> Add Note
+                                    </button>
+                                @endif
+                            @endauth
+                        </div>
+                        <div class="event-list" id="reviewEvents">
+                            <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                                <div class="review-primary-row">
+                                    <span class="emoji">🔥</span>
+                                    <span>@00:32–00:50</span>
+                                    <div class="note-text">Good pressure, but guard too low after first kick</div>
+                                </div>
+                                <div class="review-secondary-row">
+                                    <div class="comment-avatar">
+                                        <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                    </div>
+                                    <div class="coach-name">Coach Ahmed</div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev1')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev1')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                                <div class="review-primary-row">
+                                    <span class="emoji">🤔</span>
+                                    <span class="review-time">@02:05-02:20</span>
+                                </div>
+                                <div class="review-content">
+                                    <h4 class="review-note-title">Missed counter opportunity</h4>
+                                    <div class="review-author-bar">
+                                        <img class="review-author-avatar"
+                                            src="https://picsum.photos/seed/coach-sara/80/80" alt="Coach Sara">
+                                        <span class="review-author-name">Coach Sara</span>
+                                        <span>•</span>
+                                        <span class="review-note-text">Great angle, but no follow up.</span>
+                                    </div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev2')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev2')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="205" data-id="rev3">
+                                <div class="review-primary-row">
+                                    <span class="emoji">😄</span>
+                                    <span class="review-time">@03:25</span>
+                                </div>
+                                <div class="review-content">
+                                    <h4 class="review-note-title">Excellent angle change and follow-up</h4>
+                                    <div class="review-author-bar">
+                                        <img class="review-author-avatar"
+                                            src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        <span class="review-author-name">Coach Ahmed</span>
+                                        <span>•</span>
+                                        <span class="review-note-text">Ideal example of exit and re-entry.</span>
+                                    </div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev3')"
+                                                title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev3')"
+                                                title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+
+            <!-- Sidebar - Up Next / Recommendations -->
+            <div class="yt-sidebar-container">
+                @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+                    <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                        <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                        {{ $playlist->name }}
+                        <span
+                            style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                            videos)</span>
+                    </h3>
+                    <div class="recommended-videos-list">
+                        @foreach ($playlistVideos as $index => $playlistVideo)
+                            @if ($playlistVideo->id !== $video->id)
+                                <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                                    onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                                    <div class="sidebar-thumb" style="position: relative;">
+                                        @if ($playlistVideo->thumbnail)
+                                            <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                                alt="{{ $playlistVideo->title }}">
+                                        @else
+                                            <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                                alt="{{ $playlistVideo->title }}">
+                                        @endif
+                                        @if ($playlistVideo->duration)
+                                            <span
+                                                class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                        @endif
+                                        @if ($playlistVideo->is_shorts)
+                                            <span class="yt-shorts-badge"
+                                                style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                <i class="bi bi-collection-play-fill"></i> SHORTS
+                                            </span>
+                                        @endif
+                                        <!-- Playlist position indicator -->
+                                        <span
+                                            style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                            {{ $index + 1 }}
+                                        </span>
+                                    </div>
+                                    <div class="sidebar-info">
+                                        <div class="sidebar-title">
+                                            <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                            {{ Str::limit($playlistVideo->title, 60) }}
+                                        </div>
+                                        <div class="sidebar-meta">
+                                            <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                            <div>{{ number_format($playlistVideo->view_count) }} views •
+                                                {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            @endif
+                        @endforeach
+                    </div>
+                    @if ($playlist->canEdit(Auth::user()))
+                        <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                            style="margin-top: 12px; display: inline-block;">
+                            <i class="bi bi-pencil"></i> Edit Playlist
+                        </a>
+                    @endif
+                @else
+                    <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                    @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                        <div class="recommended-videos-list">
+                            @foreach ($recommendedVideos as $recVideo)
+                                <div class="sidebar-video-card"
+                                    onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                                    <div class="sidebar-thumb">
+                                        @if ($recVideo->thumbnail)
+                                            <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                                alt="{{ $recVideo->title }}">
+                                        @else
+                                            <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                                alt="{{ $recVideo->title }}">
+                                        @endif
+                                        @if ($recVideo->duration)
+                                            <span
+                                                class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                        @endif
+                                        @if ($recVideo->is_shorts)
+                                            <span class="yt-shorts-badge"
+                                                style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                <i class="bi bi-collection-play-fill"></i> SHORTS
+                                            </span>
+                                        @endif
+                                    </div>
+                                    <div class="sidebar-info">
+                                        <div class="sidebar-title">
+                                            <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                            {{ Str::limit($recVideo->title, 60) }}
+                                        </div>
+                                        <div class="sidebar-meta">
+                                            <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                            <div>{{ number_format($recVideo->view_count) }} views •
+                                                {{ $recVideo->created_at->diffForHumans() }}</div>
+                                        </div>
+                                    </div>
+                                </div>
                             @endforeach
                         </div>
-                        @if ($playlist->canEdit(Auth::user()))
-                            <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
-                                style="margin-top: 12px; display: inline-block;">
-                                <i class="bi bi-pencil"></i> Edit Playlist
-                            </a>
-                        @endif
                     @else
-                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
-                        @if ($recommendedVideos && $recommendedVideos->count() > 0)
-                            <div class="recommended-videos-list">
-                                @foreach ($recommendedVideos as $recVideo)
-                                    <div class="sidebar-video-card"
-                                        onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
-                                        <div class="sidebar-thumb">
-                                            @if ($recVideo->thumbnail)
-                                                <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
-                                                    alt="{{ $recVideo->title }}">
-                                            @else
-                                                <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
-                                                    alt="{{ $recVideo->title }}">
-                                            @endif
-                                            @if ($recVideo->duration)
-                                                <span
-                                                    class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
-                                            @endif
-                                            @if ($recVideo->is_shorts)
-                                                <span class="yt-shorts-badge"
-                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
-                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
-                                                </span>
-                                            @endif
-                                        </div>
-                                        <div class="sidebar-info">
-                                            <div class="sidebar-title">
-                                                <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
-                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
-                                                {{ Str::limit($recVideo->title, 60) }}
-                                            </div>
-                                            <div class="sidebar-meta">
-                                                <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
-                                                <div>{{ number_format($recVideo->view_count) }} views •
-                                                    {{ $recVideo->created_at->diffForHumans() }}</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                @endforeach
-                            </div>
-                        @else
-                            <div class="text-secondary">No recommendations available yet. Check back later!</div>
-                        @endif
+                        <div class="text-secondary">No recommendations available yet. Check back later!</div>
                     @endif
-                </div>
-
+                @endif
             </div>
+
         </div>
+    </div>
 
-        <!-- Modals -->
-        @include('layouts.partials.share-modal')
-        @include('layouts.partials.edit-video-modal')
+    <!-- Modals -->
+    @include('layouts.partials.share-modal')
+    @include('layouts.partials.edit-video-modal')
 
-        <!-- Add Round Modal -->
-        <div class="match-modal-overlay" id="addRoundModal">
-            <div class="match-modal-content">
-                <div class="match-modal-header">
-                    <h3>Add New Round</h3>
-                    <button class="match-modal-close" onclick="closeModal('addRoundModal')">×</button>
-                </div>
-                <form id="addRoundForm">
-                    <div class="match-form-row">
-                        <div class="match-form-group">
-                            <label>Round Number</label>
-                            <input type="number" id="roundNumber" min="1" required>
-                        </div>
-                        <div class="form-group">
-                            <label>Round Name (optional)</label>
-                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
-                        </div>
-                    </div>
-                    <div class="match-modal-actions">
-                        <button type="button" class="match-btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
-                        <button type="submit" class="match-btn-save">Add Round</button>
-                    </div>
-                </form>
+    <!-- Add Round Modal -->
+    <div class="match-modal-overlay" id="addRoundModal">
+        <div class="match-modal-content">
+            <div class="match-modal-header">
+                <h3><span class="modal-title-icon">➕</span> Add New Round</h3>
+                <button class="match-modal-close" onclick="closeModal('addRoundModal')">×</button>
             </div>
-        </div>
-
-        <!-- Add/Edit Point Modal -->
-        <div class="match-modal-overlay" id="pointModal">
-            <div class="modal-content">
-                <div class="match-modal-header">
-                    <h3 id="pointModalTitle">Add Point</h3>
-                    <button class="match-modal-close" onclick="closeModal('pointModal')">×</button>
-                </div>
-                <form id="pointForm">
-                    <input type="hidden" id="pointId">
-                    <input type="hidden" id="pointRoundId">
-                    <div class="match-form-row">
-                        <div class="match-form-group">
-                            <label>Timestamp (seconds)</label>
-                            <input type="number" id="pointTimestamp" min="0" required>
-                        </div>
-                        <div class="form-group">
-                            <label>Round</label>
-                            <select id="pointRoundSelect">
-                                <option value="1">Round 1</option>
-                                <option value="2">Round 2</option>
-                                <option value="3">Round 3</option>
-                                <option value="4">Round 4</option>
-                                <option value="5">Round 5</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label>Action Description</label>
-                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Points</label>
-                            <input type="number" id="pointValue" min="1" value="1">
-                        </div>
-                        <div class="form-group">
-                            <label>Competitor</label>
-                            <select id="pointCompetitor">
-                                <option value="blue">Blue</option>
-                                <option value="red">Red</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label>Notes</label>
-                        <textarea id="pointNotes" rows="2" placeholder="Optional notes"></textarea>
-                    </div>
-                    <div class="match-modal-actions">
-                        <button type="button" class="match-btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()"
-                            style="display: none;">Delete</button>
-                        <div style="flex: 1;"></div>
-                        <button type="button" class="match-btn-cancel" onclick="closeModal('pointModal')">Cancel</button>
-                        <button type="submit" class="match-btn-save">Save Point</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Edit Round Modal -->
-        <div class="match-modal-overlay" id="editRoundModal">
-            <div class="match-modal-content">
-                <div class="match-modal-header">
-                    <h3>Edit Round</h3>
-                    <button class="match-modal-close" onclick="closeModal('editRoundModal')">×</button>
-                </div>
-                <form id="editRoundForm">
-                    <input type="hidden" id="editRoundNumber">
+            <form id="addRoundForm">
+                <div class="match-form-row">
                     <div class="match-form-group">
-                        <label>Round Name</label>
-                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                        <label>Round Number</label>
+                        <input type="number" id="roundNumber" min="1" required>
                     </div>
-                    <div class="match-modal-actions">
-                        <button type="button" class="match-btn-delete" onclick="confirmDeleteRound()">Delete Round</button>
-                        <div style="flex: 1;"></div>
-                        <button type="button" class="match-btn-cancel"
-                            onclick="closeModal('editRoundModal')">Cancel</button>
-                        <button type="submit" class="match-btn-save">Save Changes</button>
+                    <div class="form-group">
+                        <label>Round Name (optional)</label>
+                        <input type="text" id="roundName" placeholder="e.g., ROUND 1">
                     </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Add/Edit Review Modal -->
-        <div class="match-modal-overlay" id="reviewModal">
-            <div class="modal-content">
-                <div class="match-modal-header">
-                    <h3 id="reviewModalTitle">Add Coach Note</h3>
-                    <button class="match-modal-close" onclick="closeModal('reviewModal')">×</button>
                 </div>
-                <form id="reviewForm">
-                    <input type="hidden" id="reviewId">
-                    <div class="match-form-row">
-                        <div class="match-form-group">
-                            <label>Start Time (seconds)</label>
-                            <input type="number" id="reviewStartTime" min="0" required>
-                        </div>
-                        <div class="form-group">
-                            <label>End Time (seconds)</label>
-                            <input type="number" id="reviewEndTime" min="0">
-                        </div>
+                <div class="match-form-group">
+                    <label>Start Time (mm.ss, optional)</label>
+                    <input type="text" id="roundStartTime" inputmode="decimal" placeholder="e.g., 1.30 = 1m 30s">
+                </div>
+                <div class="match-modal-actions">
+                    <button type="button" class="match-btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                    <button type="submit" class="match-btn-save">Add Round</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Add/Edit Point Modal -->
+    <div class="match-modal-overlay" id="pointModal">
+        <div class="match-modal-content">
+            <div class="match-modal-header">
+                <h3 id="pointModalTitle">Add Point</h3>
+                <button class="match-modal-close" onclick="closeModal('pointModal')">×</button>
+            </div>
+            <form id="pointForm">
+                <input type="hidden" id="pointId">
+                <input type="hidden" id="pointRoundId">
+                <div class="match-form-row">
+                    <div class="match-form-group">
+                        <label for="pointTimestamp">Timestamp (mm.ss)</label>
+                        <input type="text" id="pointTimestamp" inputmode="decimal" placeholder="e.g., 0.45 = 45s"
+                            required>
                     </div>
-                    <div class="form-group">
-                        <label>Note</label>
-                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Coach Name</label>
-                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
-                    </div>
-                    <div class="form-group">
-                        <label>Emoji</label>
-                        <select id="reviewEmoji">
-                            <option value="🔥">🔥 Good</option>
-                            <option value="🤔">🤔 Needs Work</option>
-                            <option value="😄">😄 Excellent</option>
-                            <option value="💪">💪 Strong</option>
-                            <option value="⚠️">⚠️ Warning</option>
+                    <div class="match-form-group">
+                        <label for="pointRoundSelect">Round</label>
+                        <select id="pointRoundSelect">
+                            <option value="1">Round 1</option>
+                            <option value="2">Round 2</option>
+                            <option value="3">Round 3</option>
+                            <option value="4">Round 4</option>
+                            <option value="5">Round 5</option>
                         </select>
                     </div>
-                    <div class="match-modal-actions">
-                        <button type="button" class="match-btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()"
-                            style="display: none;">Delete</button>
-                        <div style="flex: 1;"></div>
-                        <button type="button" class="match-btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
-                        <button type="submit" class="match-btn-save">Save Note</button>
+                </div>
+                <div class="match-form-group">
+                    <label for="pointAction">Action Description</label>
+                    <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+                </div>
+                <div class="match-form-row">
+                    <div class="match-form-group">
+                        <label for="pointValue">Points</label>
+                        <input type="number" id="pointValue" min="1" value="1">
                     </div>
-                </form>
+                    <div class="match-form-group">
+                        <label for="pointCompetitor">Competitor</label>
+                        <select id="pointCompetitor">
+                            <option value="blue">Blue</option>
+                            <option value="red">Red</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="match-form-group">
+                    <label for="pointNotes">Notes</label>
+                    <textarea id="pointNotes" rows="3" placeholder="Optional notes (e.g., Clean contact, Judge: Central)"></textarea>
+                </div>
+                <div class="match-modal-actions">
+                    <button type="button" class="match-btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()"
+                        style="display: none;">
+                        Delete Point
+                    </button>
+                    <button type="button" class="match-btn-cancel" onclick="closeModal('pointModal')">
+                        Cancel
+                    </button>
+                    <button type="submit" class="match-btn-save">
+                        Save Point
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Edit Round Modal -->
+    <div class="match-modal-overlay" id="editRoundModal">
+        <div class="match-modal-content">
+            <div class="match-modal-header">
+                <h3><span class="modal-title-icon">✏️</span> Edit Round</h3>
+                <button class="match-modal-close" onclick="closeModal('editRoundModal')">×</button>
+            </div>
+            <form id="editRoundForm">
+                <input type="hidden" id="editRoundId">
+                <div class="match-form-group">
+                    <label>Round Number</label>
+                    <input type="number" id="editRoundNumber" min="1" required>
+                </div>
+                <div class="match-form-group">
+                    <label>Round Name</label>
+                    <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                </div>
+                <div class="match-form-group">
+                    <label>Start Time (mm.ss, optional)</label>
+                    <input type="text" id="editRoundStartTime" inputmode="decimal" placeholder="e.g., 2.05 = 2m 5s">
+                </div>
+                <div class="match-modal-actions">
+                    <button type="button" class="match-btn-cancel"
+                        onclick="closeModal('editRoundModal')">Cancel</button>
+                    <button type="button" class="match-btn-save" onclick="confirmDeleteRound()">Delete Round</button>
+                    <button type="submit" class="match-btn-save">Save Changes</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Add/Edit Review Modal -->
+    <div class="match-modal-overlay" id="reviewModal">
+        <div class="match-modal-content">
+            <div class="match-modal-header">
+                <h3 id="reviewModalTitle"><span class="modal-title-icon">📝</span> Add Coach Note</h3>
+                <button class="match-modal-close" onclick="closeModal('reviewModal')">×</button>
+            </div>
+            <form id="reviewForm">
+                <input type="hidden" id="reviewId">
+                <div class="match-form-row">
+                    <div class="match-form-group">
+                        <label>Start Time (mm.ss)</label>
+                        <input type="text" id="reviewStartTime" inputmode="decimal" placeholder="e.g., 0.32 = 32s"
+                            required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>End Time (mm.ss)</label>
+                        <input type="text" id="reviewEndTime" inputmode="decimal" placeholder="e.g., 0.50 = 50s">
+                    </div>
+                </div>
+                <div class="match-form-group">
+                    <label>Note</label>
+                    <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+                </div>
+                <div class="match-form-group">
+                    <label>Coach Name</label>
+                    <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+                </div>
+                <div class="match-form-group">
+                    <label>Emoji</label>
+                    <input type="hidden" id="reviewEmoji" value="🔥">
+                    <div class="emoji-options" id="reviewEmojiOptions">
+                        <button type="button" class="emoji-option-btn active" data-emoji="🔥"
+                            onclick="setReviewEmoji('🔥', this)">🔥</button>
+                        <button type="button" class="emoji-option-btn" data-emoji="🤔"
+                            onclick="setReviewEmoji('🤔', this)">🤔</button>
+                        <button type="button" class="emoji-option-btn" data-emoji="😄"
+                            onclick="setReviewEmoji('😄', this)">😄</button>
+                        <button type="button" class="emoji-option-btn" data-emoji="💪"
+                            onclick="setReviewEmoji('💪', this)">💪</button>
+                        <button type="button" class="emoji-option-btn" data-emoji="⚠️"
+                            onclick="setReviewEmoji('⚠️', this)">⚠️</button>
+                    </div>
+                </div>
+                <div class="match-modal-actions">
+                    <button type="button" class="match-btn-delete" id="deleteReviewBtn"
+                        onclick="requestDelete('review', document.getElementById('reviewId').value)"
+                        style="display: none;">Delete</button>
+                    <button type="button" class="match-btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                    <button type="submit" class="match-btn-save">Save Note</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div class="match-modal-overlay" id="deleteConfirmModal">
+        <div class="match-modal-content">
+            <div class="match-modal-header">
+                <h3><span class="modal-title-icon">🗑️</span> Confirm Delete</h3>
+                <button class="match-modal-close" onclick="closeModal('deleteConfirmModal')">×</button>
+            </div>
+            <div class="delete-confirm-message" id="deleteConfirmMessage">
+                Are you sure you want to delete this item?
+            </div>
+            <div class="delete-confirm-sub" id="deleteConfirmSub">
+                This action cannot be undone.
+            </div>
+            <div class="match-modal-actions">
+                <button type="button" class="match-btn-cancel"
+                    onclick="closeModal('deleteConfirmModal')">Cancel</button>
+                <button type="button" class="match-btn-delete" onclick="executeDelete()">Delete</button>
             </div>
         </div>
+    </div>
 
-        @if (Session::has('openEditModal') && Session::get('openEditModal'))
-            @auth
-                <script>
-                    document.addEventListener('DOMContentLoaded', function() {
-                        openEditVideoModal({{ isset($video) ? $video->id : 0 }});
-                    });
-                </script>
-            @endauth
-        @endif
+    @if (Session::has('openEditModal') && Session::get('openEditModal'))
+        @auth
+            <script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    openEditVideoModal({{ isset($video) ? $video->id : 0 }});
+                });
+            </script>
+        @endauth
+    @endif
 
-        <script>
-            // Subscribe Toggle Function
-            function toggleSubscribe(userId) {
-                if (!userId) return;
-                fetch(`/users/${userId}/toggle-subscribe`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                        }
-                    })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success) {
-                            location.reload();
-                        }
-                    });
-            }
-
-            // Playlist navigation URLs
-            const previousVideoUrl = @json(isset($previousVideo) ? route('videos.show', $previousVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
-            const nextVideoUrl = @json(isset($nextVideo) ? route('videos.show', $nextVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
-            const videoId = {{ isset($video) ? $video->id : 0 }};
-            const isOwner = {{ json_encode(Auth::check() && isset($video) && Auth::id() === $video->user_id) }};
-            let autoplayEnabled = true;
-
-            document.addEventListener('DOMContentLoaded', function() {
-                loadMatchData();
-            });
-
-            async function loadMatchData() {
-                try {
-                    const response = await fetch(`/videos/${videoId}/match-data`);
-                    const data = await response.json();
+    <script>
+        // Subscribe Toggle Function
+        function toggleSubscribe(userId) {
+            if (!userId) return;
+            fetch(`/users/${userId}/toggle-subscribe`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
                     if (data.success) {
-                        renderMatchData(data.rounds || [], data.reviews || []);
-                    } else {
-                        console.warn('No match data:', data.message);
-                        renderStaticData();
-                    }
-                } catch (error) {
-                    console.error('Failed to load match data:', error);
-                    // Try to use server-side data first
-                    if (window.matchRounds && window.matchReviews) {
-                        renderMatchData(window.matchRounds, window.matchReviews);
-                    } else {
-                        renderStaticData();
+                        location.reload();
                     }
+                });
+        }
+
+        // Playlist navigation URLs
+        const previousVideoUrl = @json(isset($previousVideo) ? route('videos.show', $previousVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+        const nextVideoUrl = @json(isset($nextVideo) ? route('videos.show', $nextVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+        const videoId = {{ isset($video) ? $video->id : 0 }};
+        const isOwner = {{ json_encode(Auth::check() && isset($video) && Auth::id() === $video->user_id) }};
+        let autoplayEnabled = true;
+
+        document.addEventListener('DOMContentLoaded', function() {
+            loadMatchData();
+        });
+
+        async function loadMatchData() {
+            try {
+                const response = await fetch(`/videos/${videoId}/match-data`);
+                const data = await response.json();
+                if (data.success) {
+                    renderMatchData(data.rounds || [], data.reviews || []);
+                } else {
+                    console.warn('No match data:', data.message);
+                    renderStaticData();
+                }
+            } catch (error) {
+                console.error('Failed to load match data:', error);
+                // Try to use server-side data first
+                if (window.matchRounds && window.matchReviews) {
+                    renderMatchData(window.matchRounds, window.matchReviews);
+                } else {
+                    renderStaticData();
                 }
             }
+        }
 
-            // Pass server-side data to JS if available
-            window.matchRounds = @json($video->matchRounds ?? []);
-            window.matchReviews = @json($video->coachReviews ?? []);
-            if (window.matchRounds.length > 0) {
-                renderMatchData(window.matchRounds, window.matchReviews);
-            }
+        // Pass server-side data to JS if available
+        window.matchRounds = @json($video->matchRounds ?? []);
+        window.matchReviews = @json($video->coachReviews ?? []);
+        if (window.matchRounds.length > 0) {
+            renderMatchData(window.matchRounds, window.matchReviews);
+        }
 
-            function renderStaticData() {
-                // No static demo data - empty state
-                const pointsContainer = document.getElementById('officialEvents');
-                const reviewsContainer = document.getElementById('reviewEvents');
-                if (pointsContainer) pointsContainer.innerHTML =
-                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No match data yet. <button class="btn-add" onclick="openAddRoundModal()">+ Add Round</button></div>';
-                if (reviewsContainer) reviewsContainer.innerHTML =
-                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No coach notes yet. <button class="btn-add" onclick="openAddReviewModal()">+ Add Note</button></div>';
-            }
+        function renderStaticData() {
+            // No static demo data - empty state
+            const pointsContainer = document.getElementById('officialEvents');
+            const reviewsContainer = document.getElementById('reviewEvents');
+            if (pointsContainer) pointsContainer.innerHTML =
+                '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No match data yet. <button class="btn-add" onclick="openAddRoundModal()">+ Add Round</button></div>';
+            if (reviewsContainer) reviewsContainer.innerHTML =
+                '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No coach notes yet. <button class="btn-add" onclick="openAddReviewModal()">+ Add Note</button></div>';
+        }
 
-            function renderMatchData(rounds, reviews) {
-                if (!rounds || rounds.length === 0) return;
-                const pointsContainer = document.getElementById('officialEvents');
-                const reviewsContainer = document.getElementById('reviewEvents');
-                let pointsHtml = '';
-                let reviewsHtml = '';
+        function renderMatchData(rounds, reviews) {
+            if (!rounds || rounds.length === 0) return;
+            const pointsContainer = document.getElementById('officialEvents');
+            const reviewsContainer = document.getElementById('reviewEvents');
+            let pointsHtml = '';
+            let reviewsHtml = '';
 
-                rounds.forEach(round => {
-                    pointsHtml += `
-        <div class="round-marker" data-round="${round.round_number}">
-            <span class="round-badge">${round.name}</span>
+            rounds.forEach(round => {
+                const safeRoundName = String(round.name || '').replace(/'/g, "\\'");
+                const roundStart = (round.start_time_seconds !== null && round.start_time_seconds !== undefined) ?
+                    Number(round.start_time_seconds) : '';
+                pointsHtml += `
+        <div class="round-marker" data-round="${round.round_number}" data-round-id="${round.id}" data-start-time="${roundStart}">
+            <span class="round-badge" data-start-time="${roundStart}" title="Jump to ${roundStart !== '' ? formatTime(roundStart) : 'start'}">${round.name}</span>
             ${isOwner ? `
-                                                                                                                                                                                                                                                                            <div class="round-actions">
-                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
-                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${round.name}')" title="Edit round">✏️</button>
-                                                                                                                                                                                                                                                                                <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
-                                                                                                                                                                                                                                                                            </div>
-                                                                                                                                                                                                                                                                            ` : ''}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="round-actions">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${safeRoundName}', ${roundStart === '' ? 'null' : roundStart})" title="Edit round">✏️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ` : ''}
         </div>`;
 
-                    if (round.points) {
-                        round.points.forEach(point => {
-                            const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
-                            const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
-                            const timeStr = formatTime(point.timestamp_seconds);
-                            pointsHtml += `
+                if (round.points) {
+                    round.points.forEach(point => {
+                        const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                        const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                        const timeStr = formatTime(point.timestamp_seconds);
+                        pointsHtml += `
                 <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
                     <div class="event-time">@${timeStr}</div>
                     <div>
@@ -2887,478 +3304,753 @@
                         </div>
                     </div>
                     ${isOwner ? `
-                                                                                                                                                                                                                                                                                    <div class="event-actions">
-                                                                                                                                                                                                                                                                                        <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
-                                                                                                                                                                                                                                                                                        <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
-                                                                                                                                                                                                                                                                                    </div>` : ''}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </div>` : ''}
                 </div>`;
-                        });
-                    }
-                });
+                    });
+                }
+            });
 
-                if (reviews) {
-                    reviews.forEach(review => {
-                        const timeStart = formatTime(review.start_time_seconds);
-                        const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
-                        const timeDisplay = timeStart + timeEnd;
-                        reviewsHtml += `
+            if (reviews) {
+                reviews.forEach(review => {
+                    const timeStart = formatTime(review.start_time_seconds);
+                    const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+                    const timeDisplay = timeStart + timeEnd;
+                    reviewsHtml += `
             <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
-                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
-                    <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
-                    <div class="event-time">@${timeDisplay}</div>
+                <div class="review-primary-row">
+                    <span class="emoji">${review.emoji}</span>
+                    <span class="review-time">@${timeDisplay}</span>
                 </div>
-                <div>
-                    <div class="event-label">${review.note}</div>
-                    <div class="event-meta">
-                        <div class="comment-avatar">
-                            <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
-                        </div>
-                        ${review.coach_name}
+                <div class="review-content">
+                    <h4 class="review-note-title">${review.note}</h4>
+                    <div class="review-author-bar">
+                        <img class="review-author-avatar" src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                        <span class="review-author-name">${review.coach_name}</span>
                     </div>
                 </div>
                 ${isOwner ? `
-                                                                                                                                                                                                                                                                                <div class="event-actions">
-                                                                                                                                                                                                                                                                                    <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
-                                                                                                                                                                                                                                                                                    <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
-                                                                                                                                                                                                                                                                                </div>` : ''}
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div>` : ''}
             </div>`;
-                    });
-                }
-
-                if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
-                if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
-                attachEventListeners();
+                });
             }
 
-            function formatTime(seconds) {
-                const mins = Math.floor(seconds / 60);
-                const secs = seconds % 60;
-                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-            }
+            if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+            if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+            attachEventListeners();
+        }
 
-            document.addEventListener('DOMContentLoaded', function() {
-                const tabButtons = document.querySelectorAll('.tab-button');
-                const tabPanels = document.querySelectorAll('.tab-panel');
-                tabButtons.forEach(button => {
-                    button.addEventListener('click', function() {
-                        const targetTab = this.getAttribute('data-tab');
-                        tabButtons.forEach(btn => btn.classList.remove('active'));
-                        tabPanels.forEach(panel => panel.classList.remove('active'));
-                        this.classList.add('active');
-                        document.getElementById('tab-' + targetTab).classList.add('active');
-                    });
-                });
-                attachEventListeners();
-                document.getElementById('addRoundForm')?.addEventListener('submit', function(e) {
-                    e.preventDefault();
-                    storeRound(document.getElementById('roundNumber').value, document.getElementById(
-                        'roundName').value || 'ROUND ' + document.getElementById('roundNumber').value);
-                });
-                document.getElementById('pointForm')?.addEventListener('submit', function(e) {
-                    e.preventDefault();
-                    savePoint();
-                });
-                document.getElementById('editRoundForm')?.addEventListener('submit', function(e) {
-                    e.preventDefault();
-                    updateRound();
-                });
-                document.getElementById('reviewForm')?.addEventListener('submit', function(e) {
-                    e.preventDefault();
-                    saveReview();
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        function parseMinuteSecondInput(value) {
+            if (value === null || value === undefined) return null;
+            const raw = String(value).trim();
+            if (!raw) return null;
+
+            // allow plain integer seconds too
+            if (/^\d+$/.test(raw)) return parseInt(raw, 10);
+
+            // expected mm.ss (dot as separator)
+            const m = raw.match(/^(\d+)\.(\d{1,2})$/);
+            if (!m) return null;
+
+            const minutes = parseInt(m[1], 10);
+            const secPart = m[2].padStart(2, '0');
+            const secs = parseInt(secPart, 10);
+
+            if (Number.isNaN(minutes) || Number.isNaN(secs) || secs > 59) return null;
+            return (minutes * 60) + secs;
+        }
+
+        function toMinuteSecondInput(totalSeconds) {
+            if (totalSeconds === null || totalSeconds === undefined || totalSeconds === '') return '';
+            const s = Math.max(0, Math.floor(Number(totalSeconds)));
+            const mins = Math.floor(s / 60);
+            const secs = s % 60;
+            return `${mins}.${secs.toString().padStart(2, '0')}`;
+        }
+
+        function requireValidTimeInput(value, fieldLabel) {
+            const parsed = parseMinuteSecondInput(value);
+            if (parsed === null) {
+                alert(`${fieldLabel} must be in mm.ss format (example: 1.30 for 1m 30s) or plain seconds.`);
+                return null;
+            }
+            return parsed;
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const tabButtons = document.querySelectorAll('.tab-button');
+            const tabPanels = document.querySelectorAll('.tab-panel');
+            tabButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const targetTab = this.getAttribute('data-tab');
+                    tabButtons.forEach(btn => btn.classList.remove('active'));
+                    tabPanels.forEach(panel => panel.classList.remove('active'));
+                    this.classList.add('active');
+                    document.getElementById('tab-' + targetTab).classList.add('active');
                 });
             });
+            attachEventListeners();
+            document.getElementById('addRoundForm')?.addEventListener('submit', function(e) {
+                e.preventDefault();
+                storeRound(
+                    document.getElementById('roundNumber').value,
+                    document.getElementById('roundName').value || 'ROUND ' + document.getElementById(
+                        'roundNumber').value,
+                    document.getElementById('roundStartTime').value
+                );
+            });
+            document.getElementById('pointForm')?.addEventListener('submit', function(e) {
+                e.preventDefault();
+                savePoint();
+            });
+            document.getElementById('editRoundForm')?.addEventListener('submit', function(e) {
+                e.preventDefault();
+                updateRound();
+            });
+            document.getElementById('reviewForm')?.addEventListener('submit', function(e) {
+                e.preventDefault();
+                saveReview();
+            });
+        });
 
-            function attachEventListeners() {
-                document.querySelectorAll('.event-item').forEach(item => {
-                    item.addEventListener('click', function(e) {
-                        if (e.target.closest('.event-actions')) return;
-                        const timeStart = parseFloat(this.getAttribute('data-time-start'));
-                        const timeEnd = parseFloat(this.getAttribute('data-time-end') || 0);
+        let reviewPlaybackStopHandler = null;
+        let reviewPlaybackEndTime = null;
 
-                        if (timeStart || timeStart === 0) {
-                            const videoPlayer = document.getElementById('videoPlayer');
-                            if (videoPlayer) {
-                                // Start 1 second early for context
+        function showCoachNoteOverlay(text) {
+            const overlay = document.getElementById('coachNoteOverlay');
+            if (!overlay) return;
+            overlay.textContent = text || '';
+            overlay.classList.add('show');
+        }
+
+        function hideCoachNoteOverlay() {
+            const overlay = document.getElementById('coachNoteOverlay');
+            if (!overlay) return;
+            overlay.classList.remove('show');
+            overlay.textContent = '';
+        }
+
+        function clearReviewPlaybackHandler(videoPlayer) {
+            if (videoPlayer && reviewPlaybackStopHandler) {
+                videoPlayer.removeEventListener('timeupdate', reviewPlaybackStopHandler);
+            }
+            reviewPlaybackStopHandler = null;
+            reviewPlaybackEndTime = null;
+        }
+
+        function attachEventListeners() {
+            document.querySelectorAll('.event-item').forEach(item => {
+                item.addEventListener('click', function(e) {
+                    if (e.target.closest('.event-actions')) return;
+
+                    const timeStart = parseFloat(this.getAttribute('data-time-start'));
+                    const timeEndAttr = this.getAttribute('data-time-end');
+                    const timeEnd = timeEndAttr === null || timeEndAttr === '' ? null : parseFloat(
+                        timeEndAttr);
+
+                    if (timeStart || timeStart === 0) {
+                        const videoPlayer = document.getElementById('videoPlayer');
+                        if (videoPlayer) {
+                            const isReviewItem = this.closest('#tab-review') !== null;
+
+                            // clear any previous stop watcher
+                            clearReviewPlaybackHandler(videoPlayer);
+                            hideCoachNoteOverlay();
+
+                            if (isReviewItem) {
+                                const noteText = this.querySelector('.review-note-title')?.textContent
+                                    ?.trim() ||
+                                    this.querySelector('.event-label')?.textContent?.trim() || '';
+                                if (noteText) {
+                                    showCoachNoteOverlay(noteText);
+                                }
+
+                                // start exactly from review start time
+                                videoPlayer.currentTime = Math.max(0, timeStart);
+
+                                // if review has end time, stop playback at end and hide overlay
+                                if (timeEnd !== null && !Number.isNaN(timeEnd) && timeEnd > timeStart) {
+                                    reviewPlaybackEndTime = timeEnd;
+                                    reviewPlaybackStopHandler = function() {
+                                        if (videoPlayer.currentTime >= reviewPlaybackEndTime) {
+                                            videoPlayer.pause();
+                                            videoPlayer.currentTime = reviewPlaybackEndTime;
+                                            hideCoachNoteOverlay();
+                                            clearReviewPlaybackHandler(videoPlayer);
+                                        }
+                                    };
+                                    videoPlayer.addEventListener('timeupdate', reviewPlaybackStopHandler);
+                                }
+                            } else {
+                                // non-review items keep previous behavior
                                 videoPlayer.currentTime = Math.max(0, timeStart - 1.0);
-                                videoPlayer.play();
                             }
+
+                            videoPlayer.play();
                         }
-                    });
-                });
-            }
-
-            function openModal(modalId) {
-                document.getElementById(modalId).classList.add('active');
-            }
-
-            function closeModal(modalId) {
-                document.getElementById(modalId).classList.remove('active');
-            }
-            document.querySelectorAll('.match-modal-overlay').forEach(modal => {
-                modal.addEventListener('click', function(e) {
-                    if (e.target === this) this.classList.remove('active');
+                    }
                 });
             });
 
-            const csrfToken = '{{ Auth::check() ? csrf_token() : '' }}';
-            const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+            const mainVideoPlayer = document.getElementById('videoPlayer');
+            if (mainVideoPlayer && !mainVideoPlayer.dataset.reviewOverlayBound) {
+                mainVideoPlayer.addEventListener('seeking', function() {
+                    if (!reviewPlaybackStopHandler) return;
+                    if (reviewPlaybackEndTime !== null && this.currentTime > reviewPlaybackEndTime + 0.15) {
+                        hideCoachNoteOverlay();
+                        clearReviewPlaybackHandler(this);
+                    }
+                });
 
-            // Round/Point/Review functions (abbreviated for brevity)
-            function openAddRoundModal() {
-                if (isDemoMode || !csrfToken) {
-                    alert('Demo Mode: Requires authentication');
-                    return;
-                }
-                document.getElementById('roundNumber').value = '';
-                document.getElementById('roundName').value = '';
-                openModal('addRoundModal');
+                mainVideoPlayer.addEventListener('ended', function() {
+                    hideCoachNoteOverlay();
+                    clearReviewPlaybackHandler(this);
+                });
+
+                mainVideoPlayer.dataset.reviewOverlayBound = '1';
             }
-            async function storeRound(roundNumber, roundName) {
-                if (!csrfToken) return;
-                try {
-                    const res = await fetch(`/videos/${videoId}/rounds`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': csrfToken
-                        },
-                        body: JSON.stringify({
-                            round_number: roundNumber,
-                            name: roundName
-                        })
-                    });
-                    const data = await res.json();
-                    if (data.success) {
-                        closeModal('addRoundModal');
-                        loadMatchData();
-                    } else alert(data.message || 'Error');
-                } catch (e) {
-                    alert('Error: ' + e.message);
+
+            document.querySelectorAll('.round-badge').forEach(badge => {
+                badge.style.cursor = 'pointer';
+                badge.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (e.target.closest('.round-actions')) return;
+
+                    const marker = this.closest('.round-marker');
+                    const startAttr = this.getAttribute('data-start-time') ?? marker?.getAttribute(
+                        'data-start-time');
+                    const startTime = startAttr === '' || startAttr === null ? 0 : parseFloat(startAttr);
+
+                    if (!Number.isNaN(startTime)) {
+                        const videoPlayer = document.getElementById('videoPlayer');
+                        if (videoPlayer) {
+                            videoPlayer.currentTime = Math.max(0, startTime);
+                            videoPlayer.play();
+                        }
+                    }
+                });
+            });
+        }
+
+        function openModal(modalId) {
+            document.getElementById(modalId).classList.add('active');
+        }
+
+        function closeModal(modalId) {
+            document.getElementById(modalId).classList.remove('active');
+        }
+
+        let pendingDeleteAction = null;
+        let pendingDeleteId = null;
+
+        function requestDelete(type, id) {
+            if (!id) return;
+            pendingDeleteAction = type;
+            pendingDeleteId = id;
+
+            const message = document.getElementById('deleteConfirmMessage');
+            const sub = document.getElementById('deleteConfirmSub');
+            if (message) {
+                message.textContent = `Delete this ${type}?`;
+            }
+            if (sub) {
+                sub.textContent = 'This action cannot be undone.';
+            }
+
+            openModal('deleteConfirmModal');
+        }
+
+        function executeDelete() {
+            if (!pendingDeleteAction || !pendingDeleteId) {
+                closeModal('deleteConfirmModal');
+                return;
+            }
+
+            if (pendingDeleteAction === 'round') {
+                performDeleteRound(pendingDeleteId);
+            } else if (pendingDeleteAction === 'point') {
+                performDeletePoint(pendingDeleteId);
+            } else if (pendingDeleteAction === 'review') {
+                performDeleteReview(pendingDeleteId);
+            }
+
+            pendingDeleteAction = null;
+            pendingDeleteId = null;
+            closeModal('deleteConfirmModal');
+        }
+        document.querySelectorAll('.match-modal-overlay').forEach(modal => {
+            modal.addEventListener('click', function(e) {
+                if (e.target === this) this.classList.remove('active');
+            });
+        });
+
+        const csrfToken = '{{ Auth::check() ? csrf_token() : '' }}';
+        const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+        // Round/Point/Review functions (abbreviated for brevity)
+        function openAddRoundModal() {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: Requires authentication');
+                return;
+            }
+            document.getElementById('roundNumber').value = '';
+            document.getElementById('roundName').value = '';
+            document.getElementById('roundStartTime').value = '';
+            openModal('addRoundModal');
+        }
+        async function storeRound(roundNumber, roundName, roundStartTime) {
+            if (!csrfToken) return;
+            try {
+                const res = await fetch(`/videos/${videoId}/rounds`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    },
+                    body: JSON.stringify({
+                        round_number: parseInt(roundNumber),
+                        name: roundName,
+                        start_time_seconds: roundStartTime !== '' ? parseMinuteSecondInput(
+                            roundStartTime) : null
+                    })
+                });
+                const data = await res.json();
+                if (data.success) {
+                    closeModal('addRoundModal');
+                    loadMatchData();
+                } else alert(data.message || 'Error');
+            } catch (e) {
+                alert('Error: ' + e.message);
+            }
+        }
+
+        function editRound(roundNumber, roundId, currentName, currentStartTime = null) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode');
+                return;
+            }
+
+            // Fallback to DOM values if params are missing
+            if (!roundId) {
+                const marker = document.querySelector(`.round-marker[data-round="${roundNumber}"]`);
+                if (marker) {
+                    roundId = marker.getAttribute('data-round-id') || roundId;
+                    currentStartTime = marker.getAttribute('data-start-time') ?? currentStartTime;
+                    currentName = marker.querySelector('.round-badge')?.textContent?.trim() || currentName;
                 }
             }
 
-            function editRound(roundNumber, roundId, currentName) {
-                if (isDemoMode || !csrfToken) {
-                    alert('Demo Mode');
-                    return;
+            document.getElementById('editRoundId').value = roundId || '';
+            document.getElementById('editRoundNumber').value = roundNumber || '';
+            document.getElementById('editRoundName').value = currentName || '';
+            document.getElementById('editRoundStartTime').value = (currentStartTime === null || currentStartTime ===
+                undefined || currentStartTime === '') ? '' : toMinuteSecondInput(currentStartTime);
+            openModal('editRoundModal');
+        }
+        async function updateRound() {
+            if (!csrfToken) return;
+            const roundId = document.getElementById('editRoundId').value;
+            const roundNumber = document.getElementById('editRoundNumber').value;
+            const roundName = document.getElementById('editRoundName').value;
+            const roundStartTime = document.getElementById('editRoundStartTime').value;
+
+            try {
+                // Use method spoofing to avoid servers/proxies that block true PUT and return HTML error pages
+                const payload = new URLSearchParams();
+                payload.append('_method', 'PUT');
+                payload.append('round_number', parseInt(roundNumber));
+                payload.append('name', roundName);
+                if (roundStartTime !== '') {
+                    const parsedRoundStart = requireValidTimeInput(roundStartTime, 'Round start time');
+                    if (parsedRoundStart === null) return;
+                    payload.append('start_time_seconds', parsedRoundStart);
                 }
-                document.getElementById('editRoundNumber').value = roundId;
-                document.getElementById('editRoundName').value = currentName;
-                openModal('editRoundModal');
+
+                const res = await fetch(`/rounds/${roundId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                        'X-CSRF-TOKEN': csrfToken,
+                        'Accept': 'application/json',
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    body: payload.toString()
+                });
+
+                let data;
+                const contentType = res.headers.get('content-type') || '';
+                if (contentType.includes('application/json')) {
+                    data = await res.json();
+                } else {
+                    const text = await res.text();
+                    throw new Error(`Server returned non-JSON response (status ${res.status}). ${text.slice(0, 180)}`);
+                }
+
+                if (res.ok && data.success) {
+                    closeModal('editRoundModal');
+                    loadMatchData();
+                } else {
+                    throw new Error(data.message || `Update failed (status ${res.status})`);
+                }
+            } catch (e) {
+                console.error('updateRound error:', e);
+                alert('Error updating round: ' + e.message);
             }
-            async function updateRound() {
-                if (!csrfToken) return;
-                const roundId = document.getElementById('editRoundNumber').value;
-                const roundName = document.getElementById('editRoundName').value;
-                try {
-                    const res = await fetch(`/rounds/${roundId}`, {
+        }
+        async function deleteRound(roundId) {
+            requestDelete('round', roundId);
+        }
+
+        async function performDeleteRound(roundId) {
+            if (!csrfToken) return;
+            try {
+                const res = await fetch(`/rounds/${roundId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await res.json();
+                if (data.success) loadMatchData();
+                else alert(data.message || 'Error');
+            } catch (e) {
+                alert('Error: ' + e.message);
+            }
+        }
+
+        function openAddPointModal(roundNumber, roundId) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode');
+                return;
+            }
+            document.getElementById('pointModalTitle').textContent = 'Add Point';
+            document.getElementById('pointId').value = '';
+            document.getElementById('pointRoundId').value = roundId || '';
+            document.getElementById('pointTimestamp').value = '';
+            document.getElementById('pointRoundSelect').value = roundNumber || '1';
+            document.getElementById('pointAction').value = '';
+            document.getElementById('pointValue').value = '1';
+            document.getElementById('pointCompetitor').value = 'blue';
+            document.getElementById('pointNotes').value = '';
+            document.getElementById('deletePointBtn').style.display = 'none';
+            openModal('pointModal');
+        }
+
+        function editPoint(pointId) {
+            const el = document.querySelector(`.event-item[data-id="${pointId}"]`);
+            if (!el) return;
+            document.getElementById('pointModalTitle').textContent = 'Edit Point';
+            document.getElementById('pointId').value = pointId;
+            document.getElementById('pointTimestamp').value = toMinuteSecondInput(el.dataset.timeStart || '');
+            document.getElementById('pointRoundSelect').value = el.dataset.round || '1';
+            document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0]
+                .trim() || '';
+            document.getElementById('pointValue').value = '1';
+            document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ?
+                'blue' : 'red';
+            document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2)
+                .join('').trim() || '';
+            document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+            openModal('pointModal');
+        }
+        async function savePoint() {
+            if (!csrfToken) {
+                closeModal('pointModal');
+                return;
+            }
+            const pointId = document.getElementById('pointId').value;
+            const roundId = document.getElementById('pointRoundId').value;
+            const timestamp = document.getElementById('pointTimestamp').value;
+            const round = document.getElementById('pointRoundSelect').value;
+            const action = document.getElementById('pointAction').value;
+            const value = document.getElementById('pointValue').value;
+            const competitor = document.getElementById('pointCompetitor').value;
+            const notes = document.getElementById('pointNotes').value;
+            const parsedPointTimestamp = requireValidTimeInput(timestamp, 'Point timestamp');
+            if (parsedPointTimestamp === null) return;
+
+            try {
+                if (pointId) {
+                    const res = await fetch(`/points/${pointId}`, {
                         method: 'PUT',
                         headers: {
                             'Content-Type': 'application/json',
                             'X-CSRF-TOKEN': csrfToken
                         },
                         body: JSON.stringify({
-                            name: roundName
+                            timestamp_seconds: parsedPointTimestamp,
+                            action,
+                            points: parseInt(value),
+                            competitor,
+                            notes
                         })
                     });
                     const data = await res.json();
-                    if (data.success) {
-                        closeModal('editRoundModal');
-                        loadMatchData();
-                    } else alert(data.message || 'Error');
-                } catch (e) {
-                    alert('Error: ' + e.message);
-                }
-            }
-            async function deleteRound(roundId) {
-                if (!csrfToken) return;
-                if (!confirm('Delete this round?')) return;
-                try {
-                    const res = await fetch(`/rounds/${roundId}`, {
-                        method: 'DELETE',
-                        headers: {
-                            'X-CSRF-TOKEN': csrfToken
-                        }
-                    });
-                    const data = await res.json();
-                    if (data.success) loadMatchData();
-                    else alert(data.message || 'Error');
-                } catch (e) {
-                    alert('Error: ' + e.message);
-                }
-            }
-
-            function openAddPointModal(roundNumber, roundId) {
-                if (isDemoMode || !csrfToken) {
-                    alert('Demo Mode');
-                    return;
-                }
-                document.getElementById('pointModalTitle').textContent = 'Add Point';
-                document.getElementById('pointId').value = '';
-                document.getElementById('pointRoundId').value = roundId || '';
-                document.getElementById('pointTimestamp').value = '';
-                document.getElementById('pointRoundSelect').value = roundNumber || '1';
-                document.getElementById('pointAction').value = '';
-                document.getElementById('pointValue').value = '1';
-                document.getElementById('pointCompetitor').value = 'blue';
-                document.getElementById('pointNotes').value = '';
-                document.getElementById('deletePointBtn').style.display = 'none';
-                openModal('pointModal');
-            }
-
-            function editPoint(pointId) {
-                const el = document.querySelector(`.event-item[data-id="${pointId}"]`);
-                if (!el) return;
-                document.getElementById('pointModalTitle').textContent = 'Edit Point';
-                document.getElementById('pointId').value = pointId;
-                document.getElementById('pointTimestamp').value = el.dataset.timeStart || '';
-                document.getElementById('pointRoundSelect').value = el.dataset.round || '1';
-                document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0]
-                    .trim() || '';
-                document.getElementById('pointValue').value = '1';
-                document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ?
-                    'blue' : 'red';
-                document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2)
-                    .join('').trim() || '';
-                document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
-                openModal('pointModal');
-            }
-            async function savePoint() {
-                if (!csrfToken) {
-                    closeModal('pointModal');
-                    return;
-                }
-                const pointId = document.getElementById('pointId').value;
-                const roundId = document.getElementById('pointRoundId').value;
-                const timestamp = document.getElementById('pointTimestamp').value;
-                const round = document.getElementById('pointRoundSelect').value;
-                const action = document.getElementById('pointAction').value;
-                const value = document.getElementById('pointValue').value;
-                const competitor = document.getElementById('pointCompetitor').value;
-                const notes = document.getElementById('pointNotes').value;
-                try {
-                    if (pointId) {
-                        const res = await fetch(`/points/${pointId}`, {
-                            method: 'PUT',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': csrfToken
-                            },
-                            body: JSON.stringify({
-                                timestamp_seconds: parseInt(timestamp),
-                                action,
-                                points: parseInt(value),
-                                competitor,
-                                notes
-                            })
-                        });
-                        const data = await res.json();
-                        if (data.success) {
-                            closeModal('pointModal');
-                            loadMatchData();
-                        } else alert(data.message || 'Error');
-                    } else {
-                        const res = await fetch(`/videos/${videoId}/points`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': csrfToken
-                            },
-                            body: JSON.stringify({
-                                round_id: roundId,
-                                timestamp_seconds: parseInt(timestamp),
-                                action,
-                                points: parseInt(value),
-                                competitor,
-                                notes
-                            })
-                        });
-                        const data = await res.json();
-                        if (data.success) {
-                            closeModal('pointModal');
-                            loadMatchData();
-                        } else alert(data.message || 'Error');
-                    }
-                } catch (e) {
-                    alert('Error: ' + e.message);
-                }
-            }
-            async function deletePoint(pointId) {
-                if (!csrfToken) return;
-                if (!confirm('Delete this point?')) return;
-                try {
-                    const res = await fetch(`/points/${pointId}`, {
-                        method: 'DELETE',
-                        headers: {
-                            'X-CSRF-TOKEN': csrfToken
-                        }
-                    });
-                    const data = await res.json();
                     if (data.success) {
                         closeModal('pointModal');
                         loadMatchData();
                     } else alert(data.message || 'Error');
-                } catch (e) {
-                    alert('Error: ' + e.message);
-                }
-            }
-
-            function openAddReviewModal() {
-                if (isDemoMode || !csrfToken) {
-                    alert('Demo Mode');
-                    return;
-                }
-                document.getElementById('reviewModalTitle').textContent = 'Add Coach Note';
-                document.getElementById('reviewId').value = '';
-                document.getElementById('reviewStartTime').value = '';
-                document.getElementById('reviewEndTime').value = '';
-                document.getElementById('reviewNote').value = '';
-                document.getElementById('reviewCoach').value = '';
-                document.getElementById('reviewEmoji').value = '🔥';
-                document.getElementById('deleteReviewBtn').style.display = 'none';
-                openModal('reviewModal');
-            }
-
-            function editReview(reviewId) {
-                const el = document.querySelector(`.event-item[data-id="${reviewId}"]`);
-                if (!el) return;
-                document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note';
-                document.getElementById('reviewId').value = reviewId;
-                document.getElementById('reviewStartTime').value = el.dataset.timeStart || '';
-                document.getElementById('reviewEndTime').value = el.dataset.timeEnd || '';
-                document.getElementById('reviewNote').value = el.querySelector('.event-label')?.textContent.trim() || '';
-                document.getElementById('reviewCoach').value = el.querySelector('.event-meta')?.textContent.trim() || '';
-                document.getElementById('reviewEmoji').value = el.querySelector('div:first-child')?.textContent || '🔥';
-                document.getElementById('deleteReviewBtn').style.display = 'block';
-                openModal('reviewModal');
-            }
-            async function saveReview() {
-                if (!csrfToken) return;
-                const reviewId = document.getElementById('reviewId').value;
-                const startTime = document.getElementById('reviewStartTime').value;
-                const endTime = document.getElementById('reviewEndTime').value;
-                const note = document.getElementById('reviewNote').value;
-                const coach = document.getElementById('reviewCoach').value;
-                const emoji = document.getElementById('reviewEmoji').value;
-                try {
-                    if (reviewId) {
-                        const res = await fetch(`/reviews/${reviewId}`, {
-                            method: 'PUT',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': csrfToken
-                            },
-                            body: JSON.stringify({
-                                start_time_seconds: parseInt(startTime),
-                                end_time_seconds: endTime ? parseInt(endTime) : null,
-                                note,
-                                coach_name: coach,
-                                emoji
-                            })
-                        });
-                        const data = await res.json();
-                        if (data.success) {
-                            closeModal('reviewModal');
-                            loadMatchData();
-                        } else alert(data.message || 'Error');
-                    } else {
-                        const res = await fetch(`/videos/${videoId}/reviews`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': csrfToken
-                            },
-                            body: JSON.stringify({
-                                start_time_seconds: parseInt(startTime),
-                                end_time_seconds: endTime ? parseInt(endTime) : null,
-                                note,
-                                coach_name: coach,
-                                emoji
-                            })
-                        });
-                        const data = await res.json();
-                        if (data.success) {
-                            closeModal('reviewModal');
-                            loadMatchData();
-                        } else alert(data.message || 'Error');
-                    }
-                } catch (e) {
-                    alert('Error: ' + e.message);
-                }
-            }
-            async function deleteReview(reviewId) {
-                if (!csrfToken) return;
-                if (!confirm('Delete this note?')) return;
-                try {
-                    const res = await fetch(`/reviews/${reviewId}`, {
-                        method: 'DELETE',
+                } else {
+                    const res = await fetch(`/videos/${videoId}/points`, {
+                        method: 'POST',
                         headers: {
+                            'Content-Type': 'application/json',
                             'X-CSRF-TOKEN': csrfToken
-                        }
+                        },
+                        body: JSON.stringify({
+                            round_id: roundId,
+                            timestamp_seconds: parseInt(timestamp),
+                            action,
+                            points: parseInt(value),
+                            competitor,
+                            notes
+                        })
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                }
+            } catch (e) {
+                alert('Error: ' + e.message);
+            }
+        }
+        async function deletePoint(pointId) {
+            requestDelete('point', pointId);
+        }
+
+        async function performDeletePoint(pointId) {
+            if (!csrfToken) return;
+            try {
+                const res = await fetch(`/points/${pointId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await res.json();
+                if (data.success) {
+                    closeModal('pointModal');
+                    loadMatchData();
+                } else alert(data.message || 'Error');
+            } catch (e) {
+                alert('Error: ' + e.message);
+            }
+        }
+
+        function setReviewEmoji(emoji, btnEl = null) {
+            const emojiInput = document.getElementById('reviewEmoji');
+            if (emojiInput) emojiInput.value = emoji;
+
+            const optionsWrap = document.getElementById('reviewEmojiOptions');
+            if (optionsWrap) {
+                optionsWrap.querySelectorAll('.emoji-option-btn').forEach(b => b.classList.remove('active'));
+            }
+
+            if (btnEl) {
+                btnEl.classList.add('active');
+            } else if (optionsWrap) {
+                const target = optionsWrap.querySelector(`.emoji-option-btn[data-emoji="${emoji}"]`);
+                if (target) target.classList.add('active');
+            }
+        }
+
+        function openAddReviewModal() {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode');
+                return;
+            }
+            const titleEl = document.getElementById('reviewModalTitle');
+            if (titleEl) {
+                titleEl.innerHTML = '<span class="modal-title-icon">📝</span> Add Coach Note';
+            }
+            document.getElementById('reviewId').value = '';
+            document.getElementById('reviewStartTime').value = '';
+            document.getElementById('reviewEndTime').value = '';
+            document.getElementById('reviewNote').value = '';
+            document.getElementById('reviewCoach').value = '';
+            setReviewEmoji('🔥');
+            document.getElementById('deleteReviewBtn').style.display = 'none';
+            openModal('reviewModal');
+        }
+
+        function editReview(reviewId) {
+            // scope strictly to coach review tab to avoid picking points items with same data-id
+            const el = document.querySelector(`#tab-review .event-item[data-id="${reviewId}"]`);
+            if (!el) return;
+
+            const titleEl = document.getElementById('reviewModalTitle');
+            if (titleEl) {
+                titleEl.innerHTML = '<span class="modal-title-icon">📝</span> Edit Coach Note';
+            }
+
+            document.getElementById('reviewId').value = reviewId;
+            document.getElementById('reviewStartTime').value = toMinuteSecondInput(el.dataset.timeStart || '');
+            document.getElementById('reviewEndTime').value = toMinuteSecondInput(el.dataset.timeEnd || '');
+
+            // support both old and new review item markup
+            const noteText = el.querySelector('.review-note-title')?.textContent?.trim() ||
+                el.querySelector('.event-label')?.textContent?.trim() || '';
+            const coachName = el.querySelector('.review-author-name')?.textContent?.trim() ||
+                el.querySelector('.coach-name')?.textContent?.trim() || '';
+            const emojiText = el.querySelector('.review-primary-row .emoji')?.textContent?.trim() ||
+                el.querySelector('.event-time-container .emoji')?.textContent?.trim() || '🔥';
+
+            document.getElementById('reviewNote').value = noteText;
+            document.getElementById('reviewCoach').value = coachName;
+            setReviewEmoji(emojiText || '🔥');
+
+            document.getElementById('deleteReviewBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+            openModal('reviewModal');
+        }
+        async function saveReview() {
+            if (!csrfToken) return;
+            const reviewId = document.getElementById('reviewId').value;
+            const startTime = document.getElementById('reviewStartTime').value;
+            const endTime = document.getElementById('reviewEndTime').value;
+            const note = document.getElementById('reviewNote').value;
+            const coach = document.getElementById('reviewCoach').value;
+            const emoji = document.getElementById('reviewEmoji').value;
+            const parsedReviewStart = requireValidTimeInput(startTime, 'Review start time');
+            if (parsedReviewStart === null) return;
+            const parsedReviewEnd = endTime ? requireValidTimeInput(endTime, 'Review end time') : null;
+            if (endTime && parsedReviewEnd === null) return;
+
+            try {
+                if (reviewId) {
+                    const res = await fetch(`/reviews/${reviewId}`, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            start_time_seconds: parsedReviewStart,
+                            end_time_seconds: parsedReviewEnd,
+                            note,
+                            coach_name: coach,
+                            emoji
+                        })
                     });
                     const data = await res.json();
                     if (data.success) {
                         closeModal('reviewModal');
                         loadMatchData();
                     } else alert(data.message || 'Error');
-                } catch (e) {
-                    alert('Error: ' + e.message);
-                }
-            }
-
-            // Playlist navigation
-            document.addEventListener('DOMContentLoaded', function() {
-                const videoPlayer = document.getElementById('videoPlayer');
-                const playlistControls = document.getElementById('playlistControls');
-                const autoplayToggle = document.getElementById('autoplayToggle');
-                if (videoPlayer) {
-                    videoPlayer.volume = 0.5;
-                    const playPromise = videoPlayer.play();
-                    if (playPromise !== undefined) {
-                        playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked'));
-                    }
-                    if (nextVideoUrl) {
-                        videoPlayer.addEventListener('ended', () => {
-                            if (autoplayEnabled) window.location.href = nextVideoUrl;
-                        });
-                    }
-                }
-                if (playlistControls) {
-                    const videoContainer = document.getElementById('videoContainer');
-                    videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible'));
-                    videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible'));
-                    setTimeout(() => playlistControls.classList.add('visible'), 2000);
-                    setTimeout(() => playlistControls.classList.remove('visible'), 6000);
-                }
-                if (autoplayToggle) {
-                    autoplayToggle.addEventListener('change', function() {
-                        autoplayEnabled = this.checked;
-                        localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                } else {
+                    const res = await fetch(`/videos/${videoId}/reviews`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            start_time_seconds: parsedReviewStart,
+                            end_time_seconds: parsedReviewEnd,
+                            note,
+                            coach_name: coach,
+                            emoji
+                        })
                     });
-                    const saved = localStorage.getItem('playlistAutoplay');
-                    if (saved !== null) {
-                        autoplayEnabled = saved === '1';
-                        autoplayToggle.checked = autoplayEnabled;
-                    }
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
                 }
-                document.addEventListener('keydown', function(e) {
-                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-                    if (e.key === 'ArrowLeft') {
-                        e.preventDefault();
-                        if (previousVideoUrl) window.location.href = previousVideoUrl;
-                    } else if (e.key === 'ArrowRight') {
-                        e.preventDefault();
-                        if (nextVideoUrl) window.location.href = nextVideoUrl;
+            } catch (e) {
+                alert('Error: ' + e.message);
+            }
+        }
+        async function deleteReview(reviewId) {
+            requestDelete('review', reviewId);
+        }
+
+        async function performDeleteReview(reviewId) {
+            if (!csrfToken) return;
+            try {
+                const res = await fetch(`/reviews/${reviewId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
                     }
                 });
+                const data = await res.json();
+                if (data.success) {
+                    closeModal('reviewModal');
+                    loadMatchData();
+                } else alert(data.message || 'Error');
+            } catch (e) {
+                alert('Error: ' + e.message);
+            }
+        }
+
+        // Playlist navigation
+        document.addEventListener('DOMContentLoaded', function() {
+            const videoPlayer = document.getElementById('videoPlayer');
+            const playlistControls = document.getElementById('playlistControls');
+            const autoplayToggle = document.getElementById('autoplayToggle');
+            if (videoPlayer) {
+                videoPlayer.volume = 0.5;
+                const playPromise = videoPlayer.play();
+                if (playPromise !== undefined) {
+                    playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked'));
+                }
+                if (nextVideoUrl) {
+                    videoPlayer.addEventListener('ended', () => {
+                        if (autoplayEnabled) window.location.href = nextVideoUrl;
+                    });
+                }
+            }
+            if (playlistControls) {
+                const videoContainer = document.getElementById('videoContainer');
+                videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible'));
+                videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible'));
+                setTimeout(() => playlistControls.classList.add('visible'), 2000);
+                setTimeout(() => playlistControls.classList.remove('visible'), 6000);
+            }
+            if (autoplayToggle) {
+                autoplayToggle.addEventListener('change', function() {
+                    autoplayEnabled = this.checked;
+                    localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                });
+                const saved = localStorage.getItem('playlistAutoplay');
+                if (saved !== null) {
+                    autoplayEnabled = saved === '1';
+                    autoplayToggle.checked = autoplayEnabled;
+                }
+            }
+            document.addEventListener('keydown', function(e) {
+                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    if (previousVideoUrl) window.location.href = previousVideoUrl;
+                } else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    if (nextVideoUrl) window.location.href = nextVideoUrl;
+                }
             });
+        });
 
-            function goToPreviousVideo() {
-                if (previousVideoUrl) window.location.href = previousVideoUrl;
-            }
+        function goToPreviousVideo() {
+            if (previousVideoUrl) window.location.href = previousVideoUrl;
+        }
 
-            function goToNextVideo() {
-                if (nextVideoUrl) window.location.href = nextVideoUrl;
-            }
-        </script>
-    @endsection
+        function goToNextVideo() {
+            if (nextVideoUrl) window.location.href = nextVideoUrl;
+        }
+    </script>
+@endsection
diff --git a/resources/views/videos/types/match.blade.php.bak_20260316_025638 b/resources/views/videos/types/match.blade.php.bak_20260316_025638
new file mode 100644
index 0000000..a10ca8a
--- /dev/null
+++ b/resources/views/videos/types/match.blade.php.bak_20260316_025638
@@ -0,0 +1,3615 @@
+@extends('layouts.app')
+@section('title', ($video->title ?? 'Match Video') . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* ===== Video Section ===== */
+        .yt-video-section {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* ===== Sidebar (copied from music.blade.php) ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .sidebar-video-card {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+        }
+
+        .sidebar-thumb {
+            width: 168px;
+            aspect-ratio: 16/9;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #1a1a1a;
+            flex-shrink: 0;
+        }
+
+        .sidebar-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .sidebar-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .sidebar-title {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .sidebar-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        /* ===== Video Player ===== */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait {
+            aspect-ratio: 9/16;
+            max-width: 50vh;
+        }
+
+        .video-container.square {
+            aspect-ratio: 1/1;
+            max-width: 70vh;
+        }
+
+        .video-container.ultrawide {
+            aspect-ratio: 21/9;
+            max-width: 100%;
+        }
+
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        /* Match Highlights Toggle Button */
+        .match-highlights-toggle {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.85);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 16px;
+            width: 64px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            z-index: 15;
+            transition: all 0.2s ease;
+            backdrop-filter: blur(12px);
+            font-size: 9px;
+            font-weight: 600;
+            letter-spacing: 0.2px;
+            padding: 0 6px;
+        }
+
+        .match-highlights-toggle:hover {
+            background: rgba(255, 255, 255, 0.12);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-1px);
+        }
+
+        /* No rotation animation */
+
+        /* Hide sidebar by default */
+        .events-sidebar {
+            display: none;
+        }
+
+        .events-sidebar.show {
+            display: flex;
+        }
+
+        /* ===== Playlist Navigation Controls ===== */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible {
+            opacity: 1;
+        }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .playlist-nav-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .playlist-nav-btn:disabled:hover {
+            background: transparent;
+        }
+
+        .playlist-nav-btn i {
+            font-size: 20px;
+        }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* ===== Autoplay Toggle ===== */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch {
+            position: relative;
+            width: 36px;
+            height: 20px;
+        }
+
+        .autoplay-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider {
+            background-color: var(--brand-red);
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider:before {
+            transform: translateX(16px);
+        }
+
+        /* ===== Keyboard Hint ===== */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* ===== Video Info ===== */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            color: var(--text-secondary);
+        }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover {
+            background: var(--border-color);
+        }
+
+        .yt-action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        /* ===== Channel Row ===== */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            background: white;
+            color: black;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 18px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        /* ===== Event Header ===== */
+        .event-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-top: 16px;
+            padding: 12px 0;
+        }
+
+        .event-header-left {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-logo {
+            width: 56px;
+            height: 56px;
+            border-radius: 14px;
+            overflow: hidden;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .event-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .event-text {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-text .title {
+            font-size: 1.4rem;
+            margin: 0;
+            line-height: 1.3;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .event-text .title .trophy-icon {
+            color: #ef4444;
+            font-size: 1.2rem;
+        }
+
+        .event-text .title a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .event-text .title a:hover {
+            text-decoration: underline;
+            opacity: 0.85;
+        }
+
+        .event-text .meta-link {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .event-text .meta-link:hover {
+            color: var(--brand-red);
+        }
+
+        .event-text .meta-link a {
+            color: inherit;
+            font-weight: bold;
+            text-decoration: none;
+        }
+
+        .event-text .meta-link a:hover {
+            text-decoration: underline;
+        }
+
+        .event-header-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+
+        .event-header-actions .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .event-header-actions .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .event-header-actions .action-btn svg,
+        .event-header-actions .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        .action-btn,
+        .action-btn a,
+        .comment-section .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+            text-decoration: none;
+        }
+
+        .action-btn:hover,
+        .action-btn a:hover,
+        .comment-section .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+            text-decoration: none;
+        }
+
+        .action-btn:active,
+        .comment-section .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .action-btn svg,
+        .action-btn i,
+        .comment-section .action-btn svg,
+        .comment-section .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .action-btn.comment-btn {
+            background: var(--brand-red);
+            color: white;
+            border-color: var(--brand-red);
+        }
+
+        .event-header-actions .action-btn.disliked {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.15);
+            border-color: #ef4444;
+        }
+
+        .event-header-actions .action-btn.saved {
+            color: #f59e0b;
+            background: rgba(245, 158, 11, 0.15);
+            border-color: #f59e0b;
+        }
+
+        .event-header-actions .action-btn.subscribed {
+            color: #ffffff;
+            background: #6b7280;
+            border-color: #6b7280;
+        }
+
+        /* Video Owner Badge */
+        .video-owner-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
+        .video-owner-badge .owner-avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+
+        .video-owner-badge .owner-name {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+
+        /* ===== Description Panel ===== */
+        .description-panel {
+            margin-top: 16px;
+            border-radius: 12px;
+            padding: 8px 10px 10px;
+        }
+
+        .description-toggle {
+            width: 100%;
+            border: none;
+            background: transparent;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            cursor: pointer;
+            padding: 4px 0;
+        }
+
+        .description-toggle:hover {
+            color: #ffffff;
+        }
+
+        .description-body {
+            margin-top: 6px;
+            display: none;
+        }
+
+        .description-body.open {
+            display: block;
+        }
+
+        /* ===== Match Card ===== */
+        .match-card {
+            margin-top: 16px;
+            padding: 16px 18px;
+            border-radius: 14px;
+            border: 1px solid var(--border-color);
+            background: var(--bg-secondary);
+        }
+
+        .match-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .match-label {
+            font-size: 1.2rem;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--text-primary);
+            text-align: center;
+            font-weight: 600;
+        }
+
+        .fighters-row {
+            display: grid;
+            grid-template-columns: 1.1fr 0.8fr 1.1fr;
+            align-items: stretch;
+            gap: 16px;
+        }
+
+        .fighter-card {
+            border-radius: 14px;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .fighter-top {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+        }
+
+        .fighter-photo {
+            width: 110px;
+            height: 145px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .fighter-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .fighter-logo {
+            width: 64px;
+            height: 64px;
+            border-radius: 20px;
+            overflow: hidden;
+            background: var(--bg-primary);
+        }
+
+        .fighter-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .fighter-badge {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.12em;
+            padding: 3px 8px;
+            border-radius: 999px;
+            border: 1px solid #404040;
+            color: var(--text-primary);
+        }
+
+        .fighter-badge.blue {
+            background: rgba(37, 99, 235, 0.15);
+            border-color: #1d4ed8;
+        }
+
+        .fighter-badge.red {
+            background: rgba(239, 68, 68, 0.14);
+            border-color: #b91c1c;
+        }
+
+        .fighter-name.blue-corner {
+            color: #2563eb;
+            font-weight: bold;
+        }
+
+        .fighter-name.red-corner {
+            color: #ef4444;
+            font-weight: bold;
+        }
+
+        .fighter-name a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-name a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-info {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            width: 100%;
+            text-align: center;
+            font-size: 0.8rem;
+        }
+
+        .fighter-name {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .fighter-team {
+            color: var(--text-secondary);
+        }
+
+        .fighter-team a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-team a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-country {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .fighter-country-flag {
+            font-size: 0.9rem;
+        }
+
+        .match-center {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+        }
+
+        .score-pill {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+        }
+
+        .score-number {
+            font-size: 2rem;
+            font-weight: 700;
+        }
+
+        .score-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .referee-block {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .referee-photo {
+            width: 80px;
+            height: 115px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .referee-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .referee-block a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .referee-block a:hover {
+            text-decoration: underline;
+        }
+
+        .ref-label {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+        }
+
+        .match-footer {
+            margin-top: 12px;
+            font-size: 0.8rem;
+            color: #666666;
+            text-align: center;
+        }
+
+        .hall-link {
+            color: #e61e1e;
+            font-weight: 600;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .hall-link:hover {
+            color: #ff4757;
+            text-decoration: underline;
+        }
+
+        /* ===== Markdown Body ===== */
+        .markdown-body {
+            font-size: 0.95rem;
+            line-height: 1.6;
+            margin-top: 16px;
+        }
+
+        .markdown-body h2 {
+            font-size: 1.05rem;
+            margin-top: 14px;
+        }
+
+        .description-text {
+            font-size: 14px;
+            line-height: 1.5;
+            color: var(--text-primary);
+        }
+
+        .description-text p {
+            margin-bottom: 8px;
+        }
+
+        .description-text a {
+            color: #3ea6ff;
+        }
+
+        /* ===== Sidebar ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        /* ===== Match Events Sidebar ===== */
+        .events-sidebar {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            width: 400px;
+            flex-shrink: 0;
+            height: var(--video-height, 70vh);
+            display: none !important;
+            flex-direction: column;
+        }
+
+        .events-sidebar.show {
+            display: flex !important;
+        }
+
+        .events-sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .events-sidebar-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .close-btn:hover {
+            color: var(--text-primary);
+        }
+
+        .tab-header {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab-button {
+            flex: 1;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border-bottom: 2px solid transparent;
+        }
+
+        .tab-button:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .tab-button.active {
+            color: var(--brand-red);
+            border-bottom-color: var(--brand-red);
+        }
+
+        .tab-panels {
+            height: 100%;
+            overflow-y: auto;
+            flex: 1;
+        }
+
+        /* Custom Scrollbar for Match Highlights */
+        .tab-panels::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .tab-panels::-webkit-scrollbar-track {
+            background: var(--bg-primary);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb:hover {
+            background: var(--text-secondary);
+        }
+
+        .tab-panels::-webkit-scrollbar-corner {
+            background: var(--bg-primary);
+        }
+
+        .tab-panel {
+            display: none;
+            padding: 16px;
+        }
+
+        .tab-panel.active {
+            display: block;
+        }
+
+        .section-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 500;
+        }
+
+        .btn-icon {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .btn-icon:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .btn-add {
+            background: var(--brand-red);
+            color: white;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .btn-add:hover {
+            background: #dc2626;
+        }
+
+        .event-list {
+            margin-top: 12px;
+        }
+
+        .round-marker {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 8px;
+            margin-bottom: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .round-marker:first-child {
+            border-top: none;
+            margin-top: 0;
+        }
+
+        .round-badge {
+            background-color: #fbbf24;
+            color: #000000;
+            font-weight: 700;
+            padding: 4px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            display: inline-block;
+        }
+
+        .round-actions {
+            display: flex;
+            gap: 4px;
+        }
+
+        .round-action-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+
+        .round-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-item {
+            display: flex;
+            gap: 12px;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            margin-bottom: 4px;
+            position: relative;
+        }
+
+        .event-item:hover {
+            background: var(--border-color);
+        }
+
+        .event-item:hover .event-actions {
+            opacity: 1;
+        }
+
+        .event-actions {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .event-action-btn {
+            background: var(--bg-primary);
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+        }
+
+        .event-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-action-btn.delete:hover {
+            color: var(--brand-red);
+        }
+
+        .event-time {
+            font-size: 12px;
+            color: #3ea6ff;
+            font-weight: 500;
+            min-width: 55px;
+            text-align: center;
+        }
+
+        .event-label {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .event-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.4;
+        }
+
+        .pill {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .pill-blue {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .pill-red {
+            background: #ef4444;
+            color: white;
+        }
+
+        /* ===== Coach Review Tab Specific Styles ===== */
+        /* ===== PROFESSIONAL CREATIVE COACH REVIEW ===== */
+        #tab-review .event-item {
+            position: relative;
+            padding: 0;
+            margin-bottom: 16px;
+            border-radius: 16px;
+            overflow: hidden;
+            background: linear-gradient(145deg, rgba(20, 20, 20, 0.8), rgba(30, 30, 30, 0.6));
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(12px);
+            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            cursor: pointer;
+        }
+
+        #tab-review .event-item:hover {
+            transform: translateY(-4px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+        }
+
+        /* Creative Timeline Badge */
+        .review-badge {
+            position: absolute;
+            left: -8px;
+            top: 12px;
+            width: 16px;
+            height: 16px;
+            background: linear-gradient(135deg, #3ea6ff, #60a5fa);
+            border-radius: 50%;
+            border: 3px solid var(--bg-secondary);
+            box-shadow: 0 0 0 4px rgba(62, 166, 255, 0.3);
+            z-index: 2;
+            transition: all 0.3s ease;
+        }
+
+        #tab-review .event-item:hover .review-badge {
+            transform: scale(1.2);
+            box-shadow: 0 0 0 6px rgba(62, 166, 255, 0.4);
+        }
+
+        /* Main Content Area */
+        .review-content {
+            padding: 20px 24px 24px;
+            position: relative;
+        }
+
+        /* Top Bar: Emoji + Time - Compact & Elegant */
+        .review-top-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .review-emoji {
+            font-size: 20px;
+            line-height: 1;
+        }
+
+        .review-time {
+            background: rgba(62, 166, 255, 0.12);
+            color: #60a5fa;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 13px;
+            white-space: nowrap;
+        }
+
+        /* Note - Prominent & Readable */
+        .review-note-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 6px;
+            line-height: 1.3;
+        }
+
+        .review-note-text {
+            color: var(--text-secondary);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        /* Bottom Bar: Avatar + Name - Professional */
+        .review-author-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding-top: 12px;
+            margin-top: 12px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            opacity: 0.9;
+        }
+
+        .review-author-avatar {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            flex-shrink: 0;
+        }
+
+        .review-author-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        /* Review item hover improvements */
+        #tab-review .event-item:hover {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 12px;
+            margin: -2px 0 -2px -8px;
+            border-left: 3px solid var(--brand-red);
+        }
+
+        /* Ensure consistency with points tab on mobile */
+        @media (max-width: 768px) {
+            #tab-review .event-item {
+                flex-direction: column;
+                gap: 8px;
+            }
+
+            #tab-review .event-time {
+                align-self: flex-start;
+                order: -1;
+            }
+        }
+
+        /* ===== Match Modal Styles ===== */
+        .match-modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(8px);
+            z-index: 9999;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .match-modal-overlay.active {
+            display: flex;
+        }
+
+        .match-modal-content {
+            background: linear-gradient(145deg, rgba(30, 30, 38, 0.95), rgba(24, 24, 31, 0.96));
+            border-radius: 16px;
+            padding: 18px;
+            width: 92%;
+            max-width: 420px;
+            max-height: 85vh;
+            overflow-y: auto;
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
+        }
+
+        .match-modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .match-modal-header h3 {
+            font-size: 16px;
+            font-weight: 700;
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #f8fafc;
+            background: none;
+            -webkit-text-fill-color: initial;
+        }
+
+        .modal-title-icon {
+            width: 22px;
+            height: 22px;
+            border-radius: 999px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            background: rgba(239, 68, 68, 0.16);
+            color: #fda4af;
+            border: 1px solid rgba(239, 68, 68, 0.35);
+        }
+
+        .match-modal-close {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .match-modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .match-form-group {
+            margin-bottom: 16px;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 6px;
+            color: var(--text-primary);
+        }
+
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+        }
+
+        .match-form-row {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 16px;
+        }
+
+        .match-form-row .match-form-group {
+            flex: 1;
+        }
+
+        /* Premium form input styles */
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 9px 11px;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.04);
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            backdrop-filter: blur(8px);
+        }
+
+        .match-form-group input:hover,
+        .match-form-group select:hover,
+        .match-form-group textarea:hover {
+            border-color: rgba(255, 255, 255, 0.15);
+            background: rgba(255, 255, 255, 0.05);
+            transform: translateY(-1px);
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15),
+                0 8px 25px rgba(239, 68, 68, 0.1);
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateY(-2px);
+        }
+
+        .match-form-group textarea {
+            resize: vertical;
+            min-height: 72px;
+            font-family: inherit;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #d1d5db;
+            letter-spacing: 0.2px;
+        }
+
+        /* Custom scrollbar for modals - blended & subtle */
+        .match-modal-content::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.35);
+        }
+
+        /* Hide scrollbar for Firefox */
+        .match-modal-content {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+        }
+
+        /* Modal responsive */
+        @media (max-width: 500px) {
+            .match-form-row {
+                flex-direction: column;
+                gap: 0;
+            }
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+            margin-top: 14px;
+            padding-top: 10px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+        }
+
+        .match-btn-cancel {
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            color: #e5e7eb;
+            padding: 8px 12px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            line-height: 1;
+        }
+
+        .match-btn-cancel:hover {
+            background: rgba(255, 255, 255, 0.11);
+            border-color: rgba(255, 255, 255, 0.24);
+        }
+
+        .match-btn-save {
+            background: linear-gradient(135deg, #ef4444, #f87171);
+            border: 1px solid rgba(248, 113, 113, 0.5);
+            color: #fff;
+            padding: 8px 13px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 700;
+            transition: all 0.2s ease;
+            line-height: 1;
+            box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
+        }
+
+        .match-btn-save:hover {
+            filter: brightness(1.04);
+            transform: translateY(-1px);
+        }
+
+        .match-btn-delete {
+            background: rgba(239, 68, 68, 0.1);
+            border: 2px solid var(--brand-red);
+            color: var(--brand-red);
+            padding: 14px 28px;
+            border-radius: 14px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            flex: 1;
+            max-width: 140px;
+        }
+
+        .match-btn-delete:hover {
+            background: var(--brand-red);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+        }
+
+        /* ===== Responsive ===== */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container {
+                width: 300px;
+            }
+
+            .events-sidebar {
+                width: 300px;
+            }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main {
+                margin-left: 0;
+                flex-direction: column;
+            }
+
+            .yt-sidebar-container,
+            .events-sidebar {
+                width: 100%;
+            }
+
+            .sidebar-video-card {
+                flex-direction: column;
+            }
+
+            .sidebar-thumb {
+                width: 100%;
+            }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+
+            .fighters-row {
+                grid-template-columns: 1fr !important;
+            }
+
+            .match-center {
+                order: -1;
+            }
+
+            .event-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .event-header-actions {
+                align-self: flex-end;
+                width: 100%;
+                justify-content: flex-end;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .video-actions {
+                width: 100%;
+                overflow-x: auto;
+                justify-content: flex-start;
+            }
+
+            .yt-main {
+                padding: 12px !important;
+            }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+
+            .video-container video {
+                object-fit: contain !important;
+            }
+
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+
+            .channel-info {
+                width: 100%;
+            }
+
+            .subscribe-btn {
+                width: 100%;
+            }
+
+            .description-panel {
+                padding: 8px !important;
+            }
+
+            .match-card {
+                padding: 12px !important;
+            }
+
+            .event-header {
+                padding: 8px 0;
+            }
+
+            .event-text .title {
+                font-size: 1.1rem;
+            }
+
+            .event-header-actions {
+                gap: 4px;
+            }
+
+            .event-header-actions .action-btn {
+                padding: 6px 10px;
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+    @php
+        // ===== DUMMY DATA FALLBACKS =====
+        $blueFighter =
+            $blueFighter ??
+            (object) [
+                'name' => 'Sami Al Manea',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_5.png?v=1773157950',
+                'team' => 'Emperor TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/1/branding/logo_1771488666.png',
+                'member_id' => 5,
+                'club_url' => 'https://takeone-dev.innovator.bh/mobile/eta',
+            ];
+        $redFighter =
+            $redFighter ??
+            (object) [
+                'name' => 'Hassan Al Shallan',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_11.png?t=1773268056907',
+                'team' => 'Legend TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/logos/logo_1773267551.png',
+                'member_id' => 11,
+                'club_url' => 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy',
+            ];
+        $match =
+            $match ??
+            (object) [
+                'number' => '103',
+                'court' => '2',
+                'weight_category' => 'U18',
+                'score_blue' => 7,
+                'score_red' => 5,
+                'features' =>
+                    'Electronic scoring system (PSS & head‑gear) • Video replay available for head kicks and gam-jeom appeals',
+            ];
+        $referee =
+            $referee ??
+            (object) [
+                'name' => 'Ghassan Yusuf',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_8.png?t=1773267305519',
+                'member_id' => 4,
+            ];
+        $championship =
+            $championship ??
+            (object) [
+                'name' => 'Championship 2026',
+                'url' => '/championship/2026',
+            ];
+        $venue =
+            $venue ??
+            (object) [
+                'name' => 'Manama Sports Hall',
+                'map_link' => 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain',
+            ];
+    @endphp
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if (isset($video->orientation) && $video->orientation === 'portrait') portrait @elseif(isset($video->orientation) && $video->orientation === 'square') square @elseif(isset($video->orientation) && $video->orientation === 'ultrawide') ultrawide @endif"
+                id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ isset($video) ? route('videos.stream', $video->id) : '#' }}" type="video/mp4">
+                </video>
+
+                <!-- Match Highlights Toggle Button -->
+                <button class="match-highlights-toggle" id="matchHighlightsToggle" title="Toggle Match Highlights">
+                    <span>Highlights</span>
+                </button>
+
+                <!-- Playlist Navigation Controls -->
+                @if (isset($nextVideo) || isset($previousVideo))
+                    <div class="playlist-controls" id="playlistControls">
+                        @if (isset($previousVideo))
+                            <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                            <span
+                                class="playlist-nav-label">{{ Str::limit($previousVideo->title ?? 'Previous', 20) }}</span>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                        @endif
+
+                        <div class="autoplay-toggle">
+                            <label for="autoplayToggle">Autoplay</label>
+                            <label class="autoplay-switch">
+                                <input type="checkbox" id="autoplayToggle" checked>
+                                <span class="autoplay-slider"></span>
+                            </label>
+                        </div>
+
+                        @if (isset($nextVideo))
+                            <span class="playlist-nav-label">{{ Str::limit($nextVideo->title ?? 'Next', 20) }}</span>
+                            <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @endif
+                    </div>
+                    <div class="keyboard-hint">
+                        <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                    </div>
+                @endif
+            </div>
+
+            <!-- ===== EVENT HEADER ===== -->
+            <div class="event-header">
+                <div class="event-header-left">
+                    <div class="event-logo">
+                        <img src="https://picsum.photos/seed/event-logo/200/200" alt="Event logo">
+                    </div>
+                    <div class="event-text">
+                        <!-- Title with Trophy Icon BEFORE "Taekwondo Finals" -->
+                        <h1 class="title">
+                            <i class="bi bi-trophy trophy-icon" title="Match Type"></i>
+                            <span>{{ $video->title }} –</span>
+                            <span style="color: #2563eb; font-weight: bold">
+                                {{ $blueFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                </a>
+                            </span>
+                            <span>vs</span>
+                            <span style="color: #ef4444; font-weight: bold">
+                                {{ $redFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                </a>
+                            </span>
+                            <span>({{ $match->weight_category ?? 'U18' }})</span>
+                        </h1>
+
+                        <!-- Meta: Championship Link • Match# • Court • Referee (all inline) -->
+                        <a class="meta-link" href="{{ $championship->url ?? '/championship/2026' }}"
+                            style="white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.4;">
+                            <span
+                                style="color: #ffffff; font-weight: bold; font-size: 0.85rem;">{{ $championship->name ?? 'Championship 2026' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #ff00dd; font-weight: bold; font-size: 0.85rem;">Match#
+                                {{ $match->number ?? '103' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #00af09; font-weight: bold; font-size: 0.85rem;">Court
+                                {{ $match->court ?? '2' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span
+                                style="color: #ffd900; font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                {{ $referee->flag ?? '🇧🇭' }} {{ $referee->name ?? 'Ghassan Yusuf' }}
+                            </span>
+                            <span
+                                style="color: var(--text-secondary); font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                - {{ number_format($video->view_count) }} views •
+                                {{ $video->created_at->format('M d, Y') }}</span>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="event-header-actions">
+                    <!-- Like Button -->
+                    @auth
+                        @if (Auth::id() === $video->user_id)
+                            <button class="action-btn" onclick="openEditVideoModal({{ $video->id }})" title="Edit">
+                                <i class="bi bi-pencil"></i>
+                                <span>Edit</span>
+                            </button>
+                        @endif
+                        @endif
+                        @auth
+                            @if (isset($video))
+                                <form method="POST"
+                                    action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                                    class="d-inline">
+                                    @csrf
+                                    <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
+                                        title="Like">
+                                        <i
+                                            class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                        <span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
+                                    </button>
+                                </form>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn" title="Like">
+                                <i class="bi bi-hand-thumbs-up"></i>
+                                <span>Like</span>
+                            </a>
+                        @endauth
+
+                        <!-- Subscribe Button -->
+                        @auth
+                            @if (isset($video) && $video->user && Auth::id() !== $video->user_id)
+                                <button
+                                    class="action-btn {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'subscribed' : '' }}"
+                                    type="button"
+                                    title="{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}"
+                                    onclick="toggleSubscribe({{ $video->user_id ?? 0 }})">
+                                    <i
+                                        class="bi {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'bi-bell-fill' : 'bi-bell' }}"></i>
+                                    <span>{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}</span>
+                                </button>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn" title="Subscribe">
+                                <i class="bi bi-bell"></i>
+                                <span>Subscribe</span>
+                            </a>
+                        @endauth
+
+                        <!-- Share Button -->
+                        @if (isset($video) && $video->isShareable())
+                            <button class="action-btn"
+                                onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"
+                                style="flex:1;">
+                                <i class="bi bi-share"></i>
+                                <span>Share</span>
+                            </button>
+                        @endif
+
+                        <!-- Save to Playlist Button -->
+                        <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                            </svg>
+                            <span>Save</span>
+                        </button>
+
+                    </div>
+                </div>
+                <!-- ===== END EVENT HEADER ===== -->
+
+                <!-- Description Box (Collapsible) -->
+                @if (isset($video) && $video->description)
+                    @php
+                        $fullDescription = $video->description;
+                        $shortDescription = Str::limit($fullDescription, 200);
+                        $needsExpand = strlen($fullDescription) > 200;
+                    @endphp
+
+                    <section class="description-panel">
+                        <button class="description-toggle" type="button" id="toggleDescription">
+                            <span id="descriptionToggleLabel">
+                                {{ $needsExpand ? 'Show description' : 'Hide description' }}
+                            </span>
+                            <span id="descriptionToggleIcon">{{ $needsExpand ? '▼' : '▲' }}</span>
+                        </button>
+
+                        <div class="description-body {{ $needsExpand ? '' : 'open' }}" id="descriptionBody">
+                            <!-- Match Card -->
+                            <section class="match-card">
+                                <div class="match-header">
+                                    <div class="match-label">Final • Male -63kg division</div>
+                                </div>
+
+                                <div class="fighters-row">
+                                    <!-- Blue Fighter (Sami Al Manea) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $blueFighter->photo ?? 'https://picsum.photos/seed/blue-competitor/200/260' }}"
+                                                        alt="{{ $blueFighter->name ?? 'Blue fighter' }}">
+                                                </div>
+                                            </a>
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $blueFighter->logo ?? 'https://picsum.photos/seed/blue-logo/160/160' }}"
+                                                            alt="{{ $blueFighter->team ?? 'Blue team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge blue">Blue</span>
+                                            </div>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name blue-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}">
+                                                    {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $blueFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $blueFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+
+                                    <!-- Score & Referee Center -->
+                                    <div class="match-center">
+                                        <div class="score-pill">
+                                            <span class="score-number">{{ $match->score_blue ?? 7 }}</span>
+                                            <span class="score-label">Final score</span>
+                                            <span class="score-number">{{ $match->score_red ?? 5 }}</span>
+                                        </div>
+                                        <div class="referee-block">
+                                            <!-- Referee Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="referee-photo">
+                                                    <img src="{{ $referee->photo ?? 'https://picsum.photos/seed/referee/200/260' }}"
+                                                        alt="Referee">
+                                                </div>
+                                            </a>
+                                            <div style="color: #ffd900; font-weight: bold">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                    style="color: inherit; text-decoration: none;"
+                                                    title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile">
+                                                    {{ $referee->name ?? 'Ghassan Yusuf' }}
+                                                </a>
+                                            </div>
+                                            <div class="ref-label">Center Referee</div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Red Fighter (Hassan Al Shallan) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $redFighter->logo ?? 'https://picsum.photos/seed/red-logo/160/160' }}"
+                                                            alt="{{ $redFighter->team ?? 'Red team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge red">Red</span>
+                                            </div>
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $redFighter->photo ?? 'https://picsum.photos/seed/red-competitor/200/260' }}"
+                                                        alt="{{ $redFighter->name ?? 'Red fighter' }}">
+                                                </div>
+                                            </a>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name red-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}">
+                                                    {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $redFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $redFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+                                </div>
+
+                                <div class="match-footer">
+                                    <a class="hall-link" id="hallLink" title="View venue details"
+                                        href="{{ $venue->map_link ?? 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain' }}"
+                                        target="_blank" rel="noopener noreferrer">
+                                        📍 {{ $venue->name ?? 'Manama Sports Hall' }}
+                                    </a>
+                                    @if (isset($match->features))
+                                        • {{ $match->features }}
+                                    @endif
+                                </div>
+                            </section>
+
+                            <!-- Match Overview -->
+                            <section class="markdown-body">
+                                <div
+                                    style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                                    <h2 style="font-size: 1.05rem; margin: 0;">Match Overview</h2>
+                                    @if (isset($video) && $video->user)
+                                        <div class="video-owner-badge"
+                                            style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary);">
+                                            <img src="{{ $video->user->avatar_url }}" class="owner-avatar"
+                                                style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover;"
+                                                alt="{{ $video->user->name }}">
+                                            <span class="owner-name"
+                                                style="color: var(--text-primary); font-weight: 500;">{{ $video->user->name }}</span>
+                                            <span>• {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</span>
+                                        </div>
+                                    @endif
+                                </div>
+                                <div class="description-text">
+                                    {!! Str::markdown($fullDescription) !!}
+                                </div>
+                            </section>
+                        </div>
+                    </section>
+
+                    <script>
+                        // Collapsible Description Toggle
+                        const descriptionBody = document.getElementById('descriptionBody');
+                        const descriptionToggle = document.getElementById('toggleDescription');
+                        const descriptionToggleLabel = document.getElementById('descriptionToggleLabel');
+                        const descriptionToggleIcon = document.getElementById('descriptionToggleIcon');
+
+                        if (descriptionToggle && descriptionBody) {
+                            descriptionToggle.addEventListener('click', () => {
+                                const isOpen = descriptionBody.classList.toggle('open');
+                                descriptionToggleLabel.textContent = isOpen ? 'Hide description' : 'Show description';
+                                descriptionToggleIcon.textContent = isOpen ? '▲' : '▼';
+                            });
+                        }
+
+                        // Hall/Venue Link Handler
+                        const hallLink = document.getElementById('hallLink');
+                        if (hallLink) {
+                            hallLink.addEventListener('click', () => {
+                                // Analytics tracking can be added here
+                            });
+                        }
+
+                        // Match Highlights Toggle with localStorage persistence
+                        document.addEventListener('DOMContentLoaded', function() {
+                            const toggleBtn = document.getElementById('matchHighlightsToggle');
+                            const sidebar = document.querySelector('.events-sidebar');
+                            const videoId = {{ isset($video) ? $video->id : 0 }};
+
+                            if (toggleBtn && sidebar) {
+                                // Load saved state on page load
+                                const savedState = localStorage.getItem(`highlights_${videoId}`);
+                                if (savedState === 'open') {
+                                    sidebar.classList.add('show');
+                                    toggleBtn.classList.add('expanded');
+                                    toggleBtn.textContent = 'Highlights';
+                                }
+
+                                toggleBtn.addEventListener('click', function() {
+                                    const isOpen = sidebar.classList.toggle('show');
+                                    toggleBtn.classList.toggle('expanded');
+
+                                    // Save state to localStorage
+                                    if (isOpen) {
+                                        localStorage.setItem(`highlights_${videoId}`, 'open');
+                                        toggleBtn.textContent = 'Highlights';
+                                    } else {
+                                        localStorage.removeItem(`highlights_${videoId}`);
+                                    }
+                                });
+                            }
+                        });
+                    </script>
+                @endif
+
+                <!-- Comment Section -->
+                <div class="comments-section"
+                    style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                    <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                        Comments <span
+                            style="color: var(--text-secondary); font-weight: 400;">({{ isset($video) ? $video->comment_count ?? 0 : 0 }})</span>
+                    </h3>
+                    @auth
+                        <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                            <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                                alt="{{ Auth::user()->name }}">
+                            <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                                <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
+                                    rows="1"
+                                    style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                                <button type="button" class="action-btn"
+                                    onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
+                                    <i class="bi bi-x-lg"></i>
+                                    <span>Cancel</span>
+                                </button>
+                                <button type="button" class="action-btn comment-btn"
+                                    onclick="submitComment({{ isset($video) ? $video->id : 0 }})" style="flex-shrink: 0;">
+                                    <i class="bi bi-chat-dots"></i>
+                                    <span>Comment</span>
+                                </button>
+                            </div>
+                        </div>
+                    @else
+                        <div
+                            style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                            <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                        </div>
+                    @endauth
+                    <div id="commentsList">
+                        @if (isset($video))
+                            @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                                @include('videos.partials.comment', ['comment' => $comment])
+                            @empty
+                                <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be
+                                    the first to comment!</p>
+                            @endforelse
+                        @endif
+                    </div>
+                </div>
+
+                <script>
+                    function submitComment(videoId) {
+                        const body = document.getElementById('commentBody').value.trim();
+                        if (!body) return;
+
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body
+                                })
+                            })
+                            .then(response => response.json())
+                            .catch(error => {
+                                console.error('Error:', error);
+                                alert('Failed to post comment: ' + error);
+                            })
+                            .then(data => {
+                                if (data && data.success) {
+                                    document.getElementById('commentBody').value = '';
+                                    addCommentToList(data.comment);
+                                } else {
+                                    alert('Failed to post comment');
+                                }
+                            });
+                    }
+
+                    function addCommentToList(comment) {
+                        const commentsList = document.getElementById('commentsList');
+                        const commentHtml = `
+                <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
+                    <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
+                    <div style="flex: 1;">
+                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+                            <span style="font-weight: 600; font-size: 14px;">${comment.user.name}</span>
+                            <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
+                        </div>
+                        <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
+                            ${comment.body.replace(/@(\\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>')}
+                        </div>
+                        <div style="display: flex; gap: 12px; margin-top: 8px;">
+                            <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                                Reply
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+                        commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                        const commentCount = document.querySelector('h3 span');
+                        if (commentCount) {
+                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                            commentCount.textContent = `(${count})`;
+                        }
+                    }
+
+                    function deleteComment(commentId) {
+                        if (confirm('Are you sure you want to delete this comment?')) {
+                            fetch(`/comments/${commentId}`, {
+                                    method: 'DELETE',
+                                    headers: {
+                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                    }
+                                })
+                                .then(response => response.json())
+                                .then(data => {
+                                    if (data.success) {
+                                        document.getElementById('comment-' + commentId).remove();
+                                        const commentCount = document.querySelector('h3 span');
+                                        if (commentCount) {
+                                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                            commentCount.textContent = `(${count})`;
+                                        }
+                                    }
+                                });
+                        }
+                    }
+                    document.addEventListener('DOMContentLoaded', function() {
+                        const commentTexts = document.querySelectorAll('.comment-body');
+                        commentTexts.forEach(text => {
+                            const html = text.innerHTML.replace(/@(\w+)/g,
+                                '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                            text.innerHTML = html;
+                        });
+                    });
+
+                    function submitReply(videoId, parentId) {
+                        const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                        const body = textarea.value.trim();
+                        if (!body) return;
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body,
+                                    parent_id: parentId
+                                })
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    location.reload();
+                                }
+                            });
+                    }
+                </script>
+            </div>
+
+            <!-- Sidebar - Match Highlights -->
+            <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
+                <aside class="events-sidebar">
+                    <div class="events-sidebar-header" style="justify-content: center;">
+                        <h3>Match Highlights</h3>
+                    </div>
+                    <div class="tab-header">
+                        <button class="tab-button active" data-tab="official">Points</button>
+                        <button class="tab-button" data-tab="review">Coach review</button>
+                    </div>
+                    <div class="tab-panels">
+                        <!-- Points Tab -->
+                        <div class="tab-panel active" id="tab-official">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div>
+                                    <div class="section-label">Rounds & points</div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                                            <span>+</span> Add Round
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="officialEvents">
+                                <!-- Round markers and points (unchanged) -->
+                                <div class="round-marker" data-round="1">
+                                    <span class="round-badge">ROUND 1</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(1)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(1)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(1)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                                    <div class="event-time">@00:20</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue body kick (1 pt)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 1 – 0 • Clean contact.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                                    <div class="event-time">@00:45</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue scores body kick
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 2 – 0 • Judge: Central.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="2">
+                                    <span class="round-badge">ROUND 2</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(2)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(2)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(2)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                                    <div class="event-time">@01:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red head kick (3 pts)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 2 • Score 2 – 3 • Video replay requested.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="3">
+                                    <span class="round-badge">ROUND 3</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(3)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(3)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(3)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                                    <div class="event-time">@02:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue spinning backfist (2 pts)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 3 • Close round.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt4')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt4')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                                    <div class="event-time">@03:00</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red leg kick (1 pt)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 4 • Tied!
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt5')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt5')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Coach Review Tab -->
+                        <div class="tab-panel" id="tab-review">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div class="section-label">Private notes</div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                                            <span>+</span> Add Note
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="reviewEvents">
+                                <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                                    <div class="review-primary-row">
+                                        <span class="emoji">🔥</span>
+                                        <span>@00:32–00:50</span>
+                                        <div class="note-text">Good pressure, but guard too low after first kick</div>
+                                    </div>
+                                    <div class="review-secondary-row">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        <div class="coach-name">Coach Ahmed</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                                    <div class="event-time-container">
+                                        <span class="emoji">🤔</span>
+                                        <span>@02:05–02:20</span>
+                                    </div>
+                                    <div class="event-label">Missed counter opportunity</div>
+                                    <div class="event-meta">
+                                        <div class="review-header">
+                                            <div class="comment-avatar">
+                                                <img src="https://picsum.photos/seed/coach-sara/80/80" alt="Coach Sara">
+                                            </div>
+                                            <div class="coach-info">
+                                                <div class="coach-name">Coach Sara</div>
+                                            </div>
+                                        </div>
+                                        <div class="review-note">Great angle, but no follow up. Use this clip to discuss risk
+                                            vs reward.</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="205" data-id="rev3">
+                                    <div class="event-time-container">
+                                        <span class="emoji">😄</span>
+                                        <span>@03:25</span>
+                                    </div>
+                                    <div class="event-label">Excellent angle change and follow-up</div>
+                                    <div class="event-meta">
+                                        <div class="review-header">
+                                            <div class="comment-avatar">
+                                                <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                            </div>
+                                            <div class="coach-info">
+                                                <div class="coach-name">Coach Ahmed</div>
+                                            </div>
+                                        </div>
+                                        <div class="review-note">Save as positive highlight, ideal example of exit and re-entry
+                                            after scoring.</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+                <!-- Sidebar - Up Next / Recommendations -->
+                <div class="yt-sidebar-container">
+                    @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                            <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                            {{ $playlist->name }}
+                            <span
+                                style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                                videos)</span>
+                        </h3>
+                        <div class="recommended-videos-list">
+                            @foreach ($playlistVideos as $index => $playlistVideo)
+                                @if ($playlistVideo->id !== $video->id)
+                                    <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                                        onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                                        <div class="sidebar-thumb" style="position: relative;">
+                                            @if ($playlistVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @endif
+                                            @if ($playlistVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                            @endif
+                                            @if ($playlistVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                            <!-- Playlist position indicator -->
+                                            <span
+                                                style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                                {{ $index + 1 }}
+                                            </span>
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($playlistVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($playlistVideo->view_count) }} views •
+                                                    {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                        @if ($playlist->canEdit(Auth::user()))
+                            <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                                style="margin-top: 12px; display: inline-block;">
+                                <i class="bi bi-pencil"></i> Edit Playlist
+                            </a>
+                        @endif
+                    @else
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                        @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                            <div class="recommended-videos-list">
+                                @foreach ($recommendedVideos as $recVideo)
+                                    <div class="sidebar-video-card"
+                                        onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                                        <div class="sidebar-thumb">
+                                            @if ($recVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                                    alt="{{ $recVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                                    alt="{{ $recVideo->title }}">
+                                            @endif
+                                            @if ($recVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                            @endif
+                                            @if ($recVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($recVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($recVideo->view_count) }} views •
+                                                    {{ $recVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                            <div class="text-secondary">No recommendations available yet. Check back later!</div>
+                        @endif
+                    @endif
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Modals -->
+        @include('layouts.partials.share-modal')
+        @include('layouts.partials.edit-video-modal')
+
+        <!-- Add Round Modal -->
+        <div class="match-modal-overlay" id="addRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3><span class="modal-title-icon">➕</span> Add New Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('addRoundModal')">×</button>
+                </div>
+                <form id="addRoundForm">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Round Number</label>
+                            <input type="number" id="roundNumber" min="1" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round Name (optional)</label>
+                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Start Time (seconds, optional)</label>
+                        <input type="number" id="roundStartTime" min="0" placeholder="e.g., 30">
+                        <small style="color: var(--text-secondary); font-size: 12px;">Video will seek to this time when badge
+                            clicked</small>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Add Round</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Point Modal -->
+        <div class="match-modal-overlay" id="pointModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3 id="pointModalTitle">Add Point</h3>
+                    <button class="match-modal-close" onclick="closeModal('pointModal')">×</button>
+                </div>
+                <form id="pointForm">
+                    <input type="hidden" id="pointId">
+                    <input type="hidden" id="pointRoundId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointTimestamp">Timestamp (seconds)</label>
+                            <input type="number" id="pointTimestamp" min="0" required>
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointRoundSelect">Round</label>
+                            <select id="pointRoundSelect">
+                                <option value="1">Round 1</option>
+                                <option value="2">Round 2</option>
+                                <option value="3">Round 3</option>
+                                <option value="4">Round 4</option>
+                                <option value="5">Round 5</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointAction">Action Description</label>
+                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+                    </div>
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointValue">Points</label>
+                            <input type="number" id="pointValue" min="1" value="1">
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointCompetitor">Competitor</label>
+                            <select id="pointCompetitor">
+                                <option value="blue">Blue</option>
+                                <option value="red">Red</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointNotes">Notes</label>
+                        <textarea id="pointNotes" rows="3" placeholder="Optional notes (e.g., Clean contact, Judge: Central)"></textarea>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()"
+                            style="display: none;">
+                            Delete Point
+                        </button>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('pointModal')">
+                            Cancel
+                        </button>
+                        <button type="submit" class="match-btn-save">
+                            Save Point
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Edit Round Modal -->
+        <div class="match-modal-overlay" id="editRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3><span class="modal-title-icon">✏️</span> Edit Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('editRoundModal')">×</button>
+                </div>
+                <form id="editRoundForm">
+                    <input type="hidden" id="editRoundId">
+                    <div class="match-form-group">
+                        <label>Round Number</label>
+                        <input type="number" id="editRoundNumber" min="1" required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Round Name</label>
+                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Start Time (seconds, optional)</label>
+                        <input type="number" id="editRoundStartTime" min="0" placeholder="e.g., 30">
+                        <small style="color: var(--text-secondary); font-size: 12px;">Video will seek to this time when badge
+                            clicked</small>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" onclick="confirmDeleteRound()">Delete Round</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="match-btn-cancel"
+                            onclick="closeModal('editRoundModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Save Changes</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Review Modal -->
+        <div class="match-modal-overlay" id="reviewModal">
+            <div class="modal-content">
+                <div class="match-modal-header">
+                    <h3 id="reviewModalTitle">Add Coach Note</h3>
+                    <button class="match-modal-close" onclick="closeModal('reviewModal')">×</button>
+                </div>
+                <form id="reviewForm">
+                    <input type="hidden" id="reviewId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Start Time (seconds)</label>
+                            <input type="number" id="reviewStartTime" min="0" required>
+                        </div>
+                        <div class="form-group">
+                            <label>End Time (seconds)</label>
+                            <input type="number" id="reviewEndTime" min="0">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Note</label>
+                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Coach Name</label>
+                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Emoji</label>
+                        <select id="reviewEmoji">
+                            <option value="🔥">🔥 Good</option>
+                            <option value="🤔">🤔 Needs Work</option>
+                            <option value="😄">😄 Excellent</option>
+                            <option value="💪">💪 Strong</option>
+                            <option value="⚠️">⚠️ Warning</option>
+                        </select>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()"
+                            style="display: none;">Delete</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Save Note</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        @if (Session::has('openEditModal') && Session::get('openEditModal'))
+            @auth
+                <script>
+                    document.addEventListener('DOMContentLoaded', function() {
+                        openEditVideoModal({{ isset($video) ? $video->id : 0 }});
+                    });
+                </script>
+            @endauth
+        @endif
+
+        <script>
+            // Subscribe Toggle Function
+            function toggleSubscribe(userId) {
+                if (!userId) return;
+                fetch(`/users/${userId}/toggle-subscribe`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            location.reload();
+                        }
+                    });
+            }
+
+            // Playlist navigation URLs
+            const previousVideoUrl = @json(isset($previousVideo) ? route('videos.show', $previousVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const nextVideoUrl = @json(isset($nextVideo) ? route('videos.show', $nextVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const videoId = {{ isset($video) ? $video->id : 0 }};
+            const isOwner = {{ json_encode(Auth::check() && isset($video) && Auth::id() === $video->user_id) }};
+            let autoplayEnabled = true;
+
+            document.addEventListener('DOMContentLoaded', function() {
+                loadMatchData();
+            });
+
+            async function loadMatchData() {
+                try {
+                    const response = await fetch(`/videos/${videoId}/match-data`);
+                    const data = await response.json();
+                    if (data.success) {
+                        renderMatchData(data.rounds || [], data.reviews || []);
+                    } else {
+                        console.warn('No match data:', data.message);
+                        renderStaticData();
+                    }
+                } catch (error) {
+                    console.error('Failed to load match data:', error);
+                    // Try to use server-side data first
+                    if (window.matchRounds && window.matchReviews) {
+                        renderMatchData(window.matchRounds, window.matchReviews);
+                    } else {
+                        renderStaticData();
+                    }
+                }
+            }
+
+            // Pass server-side data to JS if available
+            window.matchRounds = @json($video->matchRounds ?? []);
+            window.matchReviews = @json($video->coachReviews ?? []);
+            if (window.matchRounds.length > 0) {
+                renderMatchData(window.matchRounds, window.matchReviews);
+            }
+
+            function renderStaticData() {
+                // No static demo data - empty state
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                if (pointsContainer) pointsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No match data yet. <button class="btn-add" onclick="openAddRoundModal()">+ Add Round</button></div>';
+                if (reviewsContainer) reviewsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No coach notes yet. <button class="btn-add" onclick="openAddReviewModal()">+ Add Note</button></div>';
+            }
+
+            function renderMatchData(rounds, reviews) {
+                if (!rounds || rounds.length === 0) return;
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                let pointsHtml = '';
+                let reviewsHtml = '';
+
+                rounds.forEach(round => {
+                    const safeRoundName = String(round.name || '').replace(/'/g, "\\'");
+                    const roundStart = (round.start_time_seconds !== null && round.start_time_seconds !== undefined) ?
+                        Number(round.start_time_seconds) : '';
+                    pointsHtml += `
+        <div class="round-marker" data-round="${round.round_number}" data-round-id="${round.id}" data-start-time="${roundStart}">
+            <span class="round-badge" data-start-time="${roundStart}" title="Jump to ${roundStart !== '' ? formatTime(roundStart) : 'start'}">${round.name}</span>
+            ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                    <div class="round-actions">
+                                                                                                                                                                                                                                                                                                                        <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                                                                                                                                                                                                                                                                                                                        <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${safeRoundName}', ${roundStart === '' ? 'null' : roundStart})" title="Edit round">✏️</button>
+                                                                                                                                                                                                                                                                                                                        <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+                                                                                                                                                                                                                                                                                                                    </div>
+                                                                                                                                                                                                                                                                                                                    ` : ''}
+        </div>`;
+
+                    if (round.points) {
+                        round.points.forEach(point => {
+                            const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                            const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                            const timeStr = formatTime(point.timestamp_seconds);
+                            pointsHtml += `
+                <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
+                    <div class="event-time">@${timeStr}</div>
+                    <div>
+                        <div class="event-label">
+                            ${point.action} (${point.points} pt)
+                            <span class="pill ${competitorClass}">${competitorLabel}</span>
+                        </div>
+                        <div class="event-meta">
+                            ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
+                        </div>
+                    </div>
+                    ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                            <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                                <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                                <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                            </div>` : ''}
+                </div>`;
+                        });
+                    }
+                });
+
+                if (reviews) {
+                    reviews.forEach(review => {
+                        const timeStart = formatTime(review.start_time_seconds);
+                        const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+                        const timeDisplay = timeStart + timeEnd;
+                        reviewsHtml += `
+            <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
+                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                    <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
+                    <div class="event-time">@${timeDisplay}</div>
+                </div>
+                <div>
+                    <div class="event-label">${review.note}</div>
+                    <div class="event-meta">
+                        <div class="comment-avatar">
+                            <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                        </div>
+                        ${review.coach_name}
+                    </div>
+                </div>
+                ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                        <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                            <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                            <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                        </div>` : ''}
+            </div>`;
+                    });
+                }
+
+                if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+                if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+                attachEventListeners();
+            }
+
+            function formatTime(seconds) {
+                const mins = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const tabButtons = document.querySelectorAll('.tab-button');
+                const tabPanels = document.querySelectorAll('.tab-panel');
+                tabButtons.forEach(button => {
+                    button.addEventListener('click', function() {
+                        const targetTab = this.getAttribute('data-tab');
+                        tabButtons.forEach(btn => btn.classList.remove('active'));
+                        tabPanels.forEach(panel => panel.classList.remove('active'));
+                        this.classList.add('active');
+                        document.getElementById('tab-' + targetTab).classList.add('active');
+                    });
+                });
+                attachEventListeners();
+                document.getElementById('addRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    storeRound(
+                        document.getElementById('roundNumber').value,
+                        document.getElementById('roundName').value || 'ROUND ' + document.getElementById(
+                            'roundNumber').value,
+                        document.getElementById('roundStartTime').value
+                    );
+                });
+                document.getElementById('pointForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    savePoint();
+                });
+                document.getElementById('editRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    updateRound();
+                });
+                document.getElementById('reviewForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    saveReview();
+                });
+            });
+
+            function attachEventListeners() {
+                document.querySelectorAll('.event-item').forEach(item => {
+                    item.addEventListener('click', function(e) {
+                        if (e.target.closest('.event-actions')) return;
+                        const timeStart = parseFloat(this.getAttribute('data-time-start'));
+                        const timeEnd = parseFloat(this.getAttribute('data-time-end') || 0);
+
+                        if (timeStart || timeStart === 0) {
+                            const videoPlayer = document.getElementById('videoPlayer');
+                            if (videoPlayer) {
+                                // Start 1 second early for context
+                                videoPlayer.currentTime = Math.max(0, timeStart - 1.0);
+                                videoPlayer.play();
+                            }
+                        }
+                    });
+                });
+
+                document.querySelectorAll('.round-badge').forEach(badge => {
+                    badge.style.cursor = 'pointer';
+                    badge.addEventListener('click', function(e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (e.target.closest('.round-actions')) return;
+
+                        const marker = this.closest('.round-marker');
+                        const startAttr = this.getAttribute('data-start-time') ?? marker?.getAttribute(
+                            'data-start-time');
+                        const startTime = startAttr === '' || startAttr === null ? 0 : parseFloat(startAttr);
+
+                        if (!Number.isNaN(startTime)) {
+                            const videoPlayer = document.getElementById('videoPlayer');
+                            if (videoPlayer) {
+                                videoPlayer.currentTime = Math.max(0, startTime);
+                                videoPlayer.play();
+                            }
+                        }
+                    });
+                });
+            }
+
+            function openModal(modalId) {
+                document.getElementById(modalId).classList.add('active');
+            }
+
+            function closeModal(modalId) {
+                document.getElementById(modalId).classList.remove('active');
+            }
+            document.querySelectorAll('.match-modal-overlay').forEach(modal => {
+                modal.addEventListener('click', function(e) {
+                    if (e.target === this) this.classList.remove('active');
+                });
+            });
+
+            const csrfToken = '{{ Auth::check() ? csrf_token() : '' }}';
+            const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+            // Round/Point/Review functions (abbreviated for brevity)
+            function openAddRoundModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode: Requires authentication');
+                    return;
+                }
+                document.getElementById('roundNumber').value = '';
+                document.getElementById('roundName').value = '';
+                document.getElementById('roundStartTime').value = '';
+                openModal('addRoundModal');
+            }
+            async function storeRound(roundNumber, roundName, roundStartTime) {
+                if (!csrfToken) return;
+                try {
+                    const res = await fetch(`/videos/${videoId}/rounds`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            round_number: parseInt(roundNumber),
+                            name: roundName,
+                            start_time_seconds: roundStartTime !== '' ? parseInt(roundStartTime) : null
+                        })
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('addRoundModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function editRound(roundNumber, roundId, currentName, currentStartTime = null) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+
+                // Fallback to DOM values if params are missing
+                if (!roundId) {
+                    const marker = document.querySelector(`.round-marker[data-round="${roundNumber}"]`);
+                    if (marker) {
+                        roundId = marker.getAttribute('data-round-id') || roundId;
+                        currentStartTime = marker.getAttribute('data-start-time') ?? currentStartTime;
+                        currentName = marker.querySelector('.round-badge')?.textContent?.trim() || currentName;
+                    }
+                }
+
+                document.getElementById('editRoundId').value = roundId || '';
+                document.getElementById('editRoundNumber').value = roundNumber || '';
+                document.getElementById('editRoundName').value = currentName || '';
+                document.getElementById('editRoundStartTime').value = (currentStartTime === null || currentStartTime ===
+                    undefined || currentStartTime === '') ? '' : currentStartTime;
+                openModal('editRoundModal');
+            }
+            async function updateRound() {
+                if (!csrfToken) return;
+                const roundId = document.getElementById('editRoundId').value;
+                const roundNumber = document.getElementById('editRoundNumber').value;
+                const roundName = document.getElementById('editRoundName').value;
+                const roundStartTime = document.getElementById('editRoundStartTime').value;
+
+                try {
+                    // Use method spoofing to avoid servers/proxies that block true PUT and return HTML error pages
+                    const payload = new URLSearchParams();
+                    payload.append('_method', 'PUT');
+                    payload.append('round_number', parseInt(roundNumber));
+                    payload.append('name', roundName);
+                    if (roundStartTime !== '') {
+                        payload.append('start_time_seconds', parseInt(roundStartTime));
+                    }
+
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                            'X-CSRF-TOKEN': csrfToken,
+                            'Accept': 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest'
+                        },
+                        body: payload.toString()
+                    });
+
+                    let data;
+                    const contentType = res.headers.get('content-type') || '';
+                    if (contentType.includes('application/json')) {
+                        data = await res.json();
+                    } else {
+                        const text = await res.text();
+                        throw new Error(`Server returned non-JSON response (status ${res.status}). ${text.slice(0, 180)}`);
+                    }
+
+                    if (res.ok && data.success) {
+                        closeModal('editRoundModal');
+                        loadMatchData();
+                    } else {
+                        throw new Error(data.message || `Update failed (status ${res.status})`);
+                    }
+                } catch (e) {
+                    console.error('updateRound error:', e);
+                    alert('Error updating round: ' + e.message);
+                }
+            }
+            async function deleteRound(roundId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this round?')) return;
+                try {
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) loadMatchData();
+                    else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function openAddPointModal(roundNumber, roundId) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('pointModalTitle').textContent = 'Add Point';
+                document.getElementById('pointId').value = '';
+                document.getElementById('pointRoundId').value = roundId || '';
+                document.getElementById('pointTimestamp').value = '';
+                document.getElementById('pointRoundSelect').value = roundNumber || '1';
+                document.getElementById('pointAction').value = '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = 'blue';
+                document.getElementById('pointNotes').value = '';
+                document.getElementById('deletePointBtn').style.display = 'none';
+                openModal('pointModal');
+            }
+
+            function editPoint(pointId) {
+                const el = document.querySelector(`.event-item[data-id="${pointId}"]`);
+                if (!el) return;
+                document.getElementById('pointModalTitle').textContent = 'Edit Point';
+                document.getElementById('pointId').value = pointId;
+                document.getElementById('pointTimestamp').value = el.dataset.timeStart || '';
+                document.getElementById('pointRoundSelect').value = el.dataset.round || '1';
+                document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0]
+                    .trim() || '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ?
+                    'blue' : 'red';
+                document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2)
+                    .join('').trim() || '';
+                document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+                openModal('pointModal');
+            }
+            async function savePoint() {
+                if (!csrfToken) {
+                    closeModal('pointModal');
+                    return;
+                }
+                const pointId = document.getElementById('pointId').value;
+                const roundId = document.getElementById('pointRoundId').value;
+                const timestamp = document.getElementById('pointTimestamp').value;
+                const round = document.getElementById('pointRoundSelect').value;
+                const action = document.getElementById('pointAction').value;
+                const value = document.getElementById('pointValue').value;
+                const competitor = document.getElementById('pointCompetitor').value;
+                const notes = document.getElementById('pointNotes').value;
+                try {
+                    if (pointId) {
+                        const res = await fetch(`/points/${pointId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                timestamp_seconds: parseInt(timestamp),
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/points`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                round_id: roundId,
+                                timestamp_seconds: parseInt(timestamp),
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deletePoint(pointId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this point?')) return;
+                try {
+                    const res = await fetch(`/points/${pointId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function openAddReviewModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('reviewModalTitle').textContent = 'Add Coach Note';
+                document.getElementById('reviewId').value = '';
+                document.getElementById('reviewStartTime').value = '';
+                document.getElementById('reviewEndTime').value = '';
+                document.getElementById('reviewNote').value = '';
+                document.getElementById('reviewCoach').value = '';
+                document.getElementById('reviewEmoji').value = '🔥';
+                document.getElementById('deleteReviewBtn').style.display = 'none';
+                openModal('reviewModal');
+            }
+
+            function editReview(reviewId) {
+                const el = document.querySelector(`.event-item[data-id="${reviewId}"]`);
+                if (!el) return;
+                document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note';
+                document.getElementById('reviewId').value = reviewId;
+                document.getElementById('reviewStartTime').value = el.dataset.timeStart || '';
+                document.getElementById('reviewEndTime').value = el.dataset.timeEnd || '';
+                document.getElementById('reviewNote').value = el.querySelector('.event-label')?.textContent.trim() || '';
+                document.getElementById('reviewCoach').value = el.querySelector('.event-meta')?.textContent.trim() || '';
+                document.getElementById('reviewEmoji').value = el.querySelector('div:first-child')?.textContent || '🔥';
+                document.getElementById('deleteReviewBtn').style.display = 'block';
+                openModal('reviewModal');
+            }
+            async function saveReview() {
+                if (!csrfToken) return;
+                const reviewId = document.getElementById('reviewId').value;
+                const startTime = document.getElementById('reviewStartTime').value;
+                const endTime = document.getElementById('reviewEndTime').value;
+                const note = document.getElementById('reviewNote').value;
+                const coach = document.getElementById('reviewCoach').value;
+                const emoji = document.getElementById('reviewEmoji').value;
+                try {
+                    if (reviewId) {
+                        const res = await fetch(`/reviews/${reviewId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parseInt(startTime),
+                                end_time_seconds: endTime ? parseInt(endTime) : null,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/reviews`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parseInt(startTime),
+                                end_time_seconds: endTime ? parseInt(endTime) : null,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deleteReview(reviewId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this note?')) return;
+                try {
+                    const res = await fetch(`/reviews/${reviewId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            // Playlist navigation
+            document.addEventListener('DOMContentLoaded', function() {
+                const videoPlayer = document.getElementById('videoPlayer');
+                const playlistControls = document.getElementById('playlistControls');
+                const autoplayToggle = document.getElementById('autoplayToggle');
+                if (videoPlayer) {
+                    videoPlayer.volume = 0.5;
+                    const playPromise = videoPlayer.play();
+                    if (playPromise !== undefined) {
+                        playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked'));
+                    }
+                    if (nextVideoUrl) {
+                        videoPlayer.addEventListener('ended', () => {
+                            if (autoplayEnabled) window.location.href = nextVideoUrl;
+                        });
+                    }
+                }
+                if (playlistControls) {
+                    const videoContainer = document.getElementById('videoContainer');
+                    videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible'));
+                    videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible'));
+                    setTimeout(() => playlistControls.classList.add('visible'), 2000);
+                    setTimeout(() => playlistControls.classList.remove('visible'), 6000);
+                }
+                if (autoplayToggle) {
+                    autoplayToggle.addEventListener('change', function() {
+                        autoplayEnabled = this.checked;
+                        localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                    });
+                    const saved = localStorage.getItem('playlistAutoplay');
+                    if (saved !== null) {
+                        autoplayEnabled = saved === '1';
+                        autoplayToggle.checked = autoplayEnabled;
+                    }
+                }
+                document.addEventListener('keydown', function(e) {
+                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        if (previousVideoUrl) window.location.href = previousVideoUrl;
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        if (nextVideoUrl) window.location.href = nextVideoUrl;
+                    }
+                });
+            });
+
+            function goToPreviousVideo() {
+                if (previousVideoUrl) window.location.href = previousVideoUrl;
+            }
+
+            function goToNextVideo() {
+                if (nextVideoUrl) window.location.href = nextVideoUrl;
+            }
+        </script>
+    @endsection
diff --git a/resources/views/videos/types/match.blade.pre_coach_review_backup.php b/resources/views/videos/types/match.blade.pre_coach_review_backup.php
new file mode 100644
index 0000000..40f5347
--- /dev/null
+++ b/resources/views/videos/types/match.blade.pre_coach_review_backup.php
@@ -0,0 +1,3682 @@
+@extends('layouts.app')
+@section('title', ($video->title ?? 'Match Video') . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* ===== Video Section ===== */
+        .yt-video-section {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* ===== Sidebar (copied from music.blade.php) ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .sidebar-video-card {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+        }
+
+        .sidebar-thumb {
+            width: 168px;
+            aspect-ratio: 16/9;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #1a1a1a;
+            flex-shrink: 0;
+        }
+
+        .sidebar-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .sidebar-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .sidebar-title {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .sidebar-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        /* ===== Video Player ===== */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait {
+            aspect-ratio: 9/16;
+            max-width: 50vh;
+        }
+
+        .video-container.square {
+            aspect-ratio: 1/1;
+            max-width: 70vh;
+        }
+
+        .video-container.ultrawide {
+            aspect-ratio: 21/9;
+            max-width: 100%;
+        }
+
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        /* Match Highlights Toggle Button */
+        .match-highlights-toggle {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: rgba(0, 0, 0, 0.85);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 16px;
+            width: 64px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            z-index: 15;
+            transition: all 0.2s ease;
+            backdrop-filter: blur(12px);
+            font-size: 9px;
+            font-weight: 600;
+            letter-spacing: 0.2px;
+            padding: 0 6px;
+        }
+
+        .match-highlights-toggle:hover {
+            background: rgba(255, 255, 255, 0.12);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-1px);
+        }
+
+        /* No rotation animation */
+
+        /* Hide sidebar by default */
+        .events-sidebar {
+            display: none;
+        }
+
+        .events-sidebar.show {
+            display: flex;
+        }
+
+        /* ===== Playlist Navigation Controls ===== */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible {
+            opacity: 1;
+        }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .playlist-nav-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .playlist-nav-btn:disabled:hover {
+            background: transparent;
+        }
+
+        .playlist-nav-btn i {
+            font-size: 20px;
+        }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* ===== Autoplay Toggle ===== */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch {
+            position: relative;
+            width: 36px;
+            height: 20px;
+        }
+
+        .autoplay-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider {
+            background-color: var(--brand-red);
+        }
+
+        .autoplay-switch input:checked+.autoplay-slider:before {
+            transform: translateX(16px);
+        }
+
+        /* ===== Keyboard Hint ===== */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* ===== Video Info ===== */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            color: var(--text-secondary);
+        }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover {
+            background: var(--border-color);
+        }
+
+        .yt-action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        /* ===== Channel Row ===== */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            background: white;
+            color: black;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 18px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        /* ===== Event Header ===== */
+        .event-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-top: 16px;
+            padding: 12px 0;
+        }
+
+        .event-header-left {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-logo {
+            width: 56px;
+            height: 56px;
+            border-radius: 14px;
+            overflow: hidden;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .event-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .event-text {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .event-text .title {
+            font-size: 1.4rem;
+            margin: 0;
+            line-height: 1.3;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .event-text .title .trophy-icon {
+            color: #ef4444;
+            font-size: 1.2rem;
+        }
+
+        .event-text .title a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .event-text .title a:hover {
+            text-decoration: underline;
+            opacity: 0.85;
+        }
+
+        .event-text .meta-link {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .event-text .meta-link:hover {
+            color: var(--brand-red);
+        }
+
+        .event-text .meta-link a {
+            color: inherit;
+            font-weight: bold;
+            text-decoration: none;
+        }
+
+        .event-text .meta-link a:hover {
+            text-decoration: underline;
+        }
+
+        .event-header-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+
+        .event-header-actions .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+        }
+
+        .event-header-actions .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .event-header-actions .action-btn svg,
+        .event-header-actions .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .event-header-actions .action-btn.liked {
+            color: var(--brand-red);
+        }
+
+        .action-btn,
+        .action-btn a,
+        .comment-section .action-btn {
+            border: none;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+            text-decoration: none;
+        }
+
+        .action-btn:hover,
+        .action-btn a:hover,
+        .comment-section .action-btn:hover {
+            background: var(--border-color);
+            transform: translateY(-1px);
+            text-decoration: none;
+        }
+
+        .action-btn:active,
+        .comment-section .action-btn:active {
+            transform: translateY(0);
+        }
+
+        .action-btn svg,
+        .action-btn i,
+        .comment-section .action-btn svg,
+        .comment-section .action-btn i {
+            flex-shrink: 0;
+        }
+
+        .action-btn.comment-btn {
+            background: var(--brand-red);
+            color: white;
+            border-color: var(--brand-red);
+        }
+
+        .event-header-actions .action-btn.disliked {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.15);
+            border-color: #ef4444;
+        }
+
+        .event-header-actions .action-btn.saved {
+            color: #f59e0b;
+            background: rgba(245, 158, 11, 0.15);
+            border-color: #f59e0b;
+        }
+
+        .event-header-actions .action-btn.subscribed {
+            color: #ffffff;
+            background: #6b7280;
+            border-color: #6b7280;
+        }
+
+        /* Video Owner Badge */
+        .video-owner-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
+        .video-owner-badge .owner-avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+
+        .video-owner-badge .owner-name {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+
+        /* ===== Description Panel ===== */
+        .description-panel {
+            margin-top: 16px;
+            border-radius: 12px;
+            padding: 8px 10px 10px;
+        }
+
+        .description-toggle {
+            width: 100%;
+            border: none;
+            background: transparent;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            cursor: pointer;
+            padding: 4px 0;
+        }
+
+        .description-toggle:hover {
+            color: #ffffff;
+        }
+
+        .description-body {
+            margin-top: 6px;
+            display: none;
+        }
+
+        .description-body.open {
+            display: block;
+        }
+
+        /* ===== Match Card ===== */
+        .match-card {
+            margin-top: 16px;
+            padding: 16px 18px;
+            border-radius: 14px;
+            border: 1px solid var(--border-color);
+            background: var(--bg-secondary);
+        }
+
+        .match-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .match-label {
+            font-size: 1.2rem;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--text-primary);
+            text-align: center;
+            font-weight: 600;
+        }
+
+        .fighters-row {
+            display: grid;
+            grid-template-columns: 1.1fr 0.8fr 1.1fr;
+            align-items: stretch;
+            gap: 16px;
+        }
+
+        .fighter-card {
+            border-radius: 14px;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .fighter-top {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+        }
+
+        .fighter-photo {
+            width: 110px;
+            height: 145px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .fighter-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .fighter-logo {
+            width: 64px;
+            height: 64px;
+            border-radius: 20px;
+            overflow: hidden;
+            background: var(--bg-primary);
+        }
+
+        .fighter-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .fighter-badge {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.12em;
+            padding: 3px 8px;
+            border-radius: 999px;
+            border: 1px solid #404040;
+            color: var(--text-primary);
+        }
+
+        .fighter-badge.blue {
+            background: rgba(37, 99, 235, 0.15);
+            border-color: #1d4ed8;
+        }
+
+        .fighter-badge.red {
+            background: rgba(239, 68, 68, 0.14);
+            border-color: #b91c1c;
+        }
+
+        .fighter-name.blue-corner {
+            color: #2563eb;
+            font-weight: bold;
+        }
+
+        .fighter-name.red-corner {
+            color: #ef4444;
+            font-weight: bold;
+        }
+
+        .fighter-name a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-name a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-info {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            width: 100%;
+            text-align: center;
+            font-size: 0.8rem;
+        }
+
+        .fighter-name {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .fighter-team {
+            color: var(--text-secondary);
+        }
+
+        .fighter-team a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .fighter-team a:hover {
+            text-decoration: underline;
+        }
+
+        .fighter-country {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .fighter-country-flag {
+            font-size: 0.9rem;
+        }
+
+        .match-center {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+        }
+
+        .score-pill {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+        }
+
+        .score-number {
+            font-size: 2rem;
+            font-weight: 700;
+        }
+
+        .score-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .referee-block {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .referee-photo {
+            width: 80px;
+            height: 115px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px var(--bg-primary);
+            flex-shrink: 0;
+        }
+
+        .referee-photo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .referee-block a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .referee-block a:hover {
+            text-decoration: underline;
+        }
+
+        .ref-label {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+        }
+
+        .match-footer {
+            margin-top: 12px;
+            font-size: 0.8rem;
+            color: #666666;
+            text-align: center;
+        }
+
+        .hall-link {
+            color: #e61e1e;
+            font-weight: 600;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .hall-link:hover {
+            color: #ff4757;
+            text-decoration: underline;
+        }
+
+        /* ===== Markdown Body ===== */
+        .markdown-body {
+            font-size: 0.95rem;
+            line-height: 1.6;
+            margin-top: 16px;
+        }
+
+        .markdown-body h2 {
+            font-size: 1.05rem;
+            margin-top: 14px;
+        }
+
+        .description-text {
+            font-size: 14px;
+            line-height: 1.5;
+            color: var(--text-primary);
+        }
+
+        .description-text p {
+            margin-bottom: 8px;
+        }
+
+        .description-text a {
+            color: #3ea6ff;
+        }
+
+        /* ===== Sidebar ===== */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        /* ===== Match Events Sidebar ===== */
+        .events-sidebar {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            width: 400px;
+            flex-shrink: 0;
+            height: var(--video-height, 70vh);
+            display: none !important;
+            flex-direction: column;
+        }
+
+        .events-sidebar.show {
+            display: flex !important;
+        }
+
+        .events-sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .events-sidebar-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .close-btn:hover {
+            color: var(--text-primary);
+        }
+
+        .tab-header {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab-button {
+            flex: 1;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border-bottom: 2px solid transparent;
+        }
+
+        .tab-button:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .tab-button.active {
+            color: var(--brand-red);
+            border-bottom-color: var(--brand-red);
+        }
+
+        .tab-panels {
+            height: 100%;
+            overflow-y: auto;
+            flex: 1;
+        }
+
+        /* Custom Scrollbar for Match Highlights */
+        .tab-panels::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .tab-panels::-webkit-scrollbar-track {
+            background: var(--bg-primary);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .tab-panels::-webkit-scrollbar-thumb:hover {
+            background: var(--text-secondary);
+        }
+
+        .tab-panels::-webkit-scrollbar-corner {
+            background: var(--bg-primary);
+        }
+
+        .tab-panel {
+            display: none;
+            padding: 16px;
+        }
+
+        .tab-panel.active {
+            display: block;
+        }
+
+        .section-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 500;
+        }
+
+        .btn-icon {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .btn-icon:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .btn-add {
+            background: var(--brand-red);
+            color: white;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .btn-add:hover {
+            background: #dc2626;
+        }
+
+        .event-list {
+            margin-top: 12px;
+        }
+
+        .round-marker {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 8px;
+            margin-bottom: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .round-marker:first-child {
+            border-top: none;
+            margin-top: 0;
+        }
+
+        .round-badge {
+            background-color: #fbbf24;
+            color: #000000;
+            font-weight: 700;
+            padding: 4px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            display: inline-block;
+        }
+
+        .round-actions {
+            display: flex;
+            gap: 4px;
+        }
+
+        .round-action-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+
+        .round-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-item {
+            display: flex;
+            gap: 12px;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            margin-bottom: 4px;
+            position: relative;
+        }
+
+        .event-item:hover {
+            background: var(--border-color);
+        }
+
+        .event-item:hover .event-actions {
+            opacity: 1;
+        }
+
+        .event-actions {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .event-action-btn {
+            background: var(--bg-primary);
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+        }
+
+        .event-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-action-btn.delete:hover {
+            color: var(--brand-red);
+        }
+
+        .event-time {
+            font-size: 12px;
+            color: #3ea6ff;
+            font-weight: 500;
+            min-width: 55px;
+            text-align: center;
+        }
+
+        .event-label {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .event-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.4;
+        }
+
+        .pill {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .pill-blue {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .pill-red {
+            background: #ef4444;
+            color: white;
+        }
+
+        /* ===== Coach Review Tab Specific Styles ===== */
+        /* ===== PROFESSIONAL CREATIVE COACH REVIEW ===== */
+        #tab-review .event-item {
+            position: relative;
+            padding: 0;
+            margin-bottom: 16px;
+            border-radius: 16px;
+            overflow: hidden;
+            background: linear-gradient(145deg, rgba(20, 20, 20, 0.8), rgba(30, 30, 30, 0.6));
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(12px);
+            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            cursor: pointer;
+        }
+
+        #tab-review .event-item:hover {
+            transform: translateY(-4px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+        }
+
+        /* Creative Timeline Badge */
+        .review-badge {
+            position: absolute;
+            left: -8px;
+            top: 12px;
+            width: 16px;
+            height: 16px;
+            background: linear-gradient(135deg, #3ea6ff, #60a5fa);
+            border-radius: 50%;
+            border: 3px solid var(--bg-secondary);
+            box-shadow: 0 0 0 4px rgba(62, 166, 255, 0.3);
+            z-index: 2;
+            transition: all 0.3s ease;
+        }
+
+        #tab-review .event-item:hover .review-badge {
+            transform: scale(1.2);
+            box-shadow: 0 0 0 6px rgba(62, 166, 255, 0.4);
+        }
+
+        /* Main Content Area */
+        .review-content {
+            padding: 20px 24px 24px;
+            position: relative;
+        }
+
+        /* Top Bar: Emoji + Time - Compact & Elegant */
+        .review-top-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .review-emoji {
+            font-size: 20px;
+            line-height: 1;
+        }
+
+        .review-time {
+            background: rgba(62, 166, 255, 0.12);
+            color: #60a5fa;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 13px;
+            white-space: nowrap;
+        }
+
+        /* Note - Prominent & Readable */
+        .review-note-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 6px;
+            line-height: 1.3;
+        }
+
+        .review-note-text {
+            color: var(--text-secondary);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        /* Bottom Bar: Avatar + Name - Professional */
+        .review-author-bar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding-top: 12px;
+            margin-top: 12px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            opacity: 0.9;
+        }
+
+        .review-author-avatar {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            flex-shrink: 0;
+        }
+
+        .review-author-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        /* Review item hover improvements */
+        #tab-review .event-item:hover {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 12px;
+            margin: -2px 0 -2px -8px;
+            border-left: 3px solid var(--brand-red);
+        }
+
+        /* Ensure consistency with points tab on mobile */
+        @media (max-width: 768px) {
+            #tab-review .event-item {
+                flex-direction: column;
+                gap: 8px;
+            }
+
+            #tab-review .event-time {
+                align-self: flex-start;
+                order: -1;
+            }
+        }
+
+        /* ===== Match Modal Styles ===== */
+        .match-modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(8px);
+            z-index: 9999;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .match-modal-overlay.active {
+            display: flex;
+        }
+
+        .match-modal-content {
+            background: linear-gradient(145deg, rgba(30, 30, 38, 0.95), rgba(24, 24, 31, 0.96));
+            border-radius: 16px;
+            padding: 18px;
+            width: 92%;
+            max-width: 420px;
+            max-height: 85vh;
+            overflow-y: auto;
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
+        }
+
+        .match-modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .match-modal-header h3 {
+            font-size: 16px;
+            font-weight: 700;
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #f8fafc;
+            background: none;
+            -webkit-text-fill-color: initial;
+        }
+
+        .modal-title-icon {
+            width: 22px;
+            height: 22px;
+            border-radius: 999px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            background: rgba(239, 68, 68, 0.16);
+            color: #fda4af;
+            border: 1px solid rgba(239, 68, 68, 0.35);
+        }
+
+        .match-modal-close {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .match-modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .match-form-group {
+            margin-bottom: 16px;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 6px;
+            color: var(--text-primary);
+        }
+
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+        }
+
+        .match-form-row {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 10px;
+        }
+
+        .match-form-row .match-form-group {
+            flex: 1;
+        }
+
+        .match-form-row .form-group {
+            flex: 1;
+        }
+
+        .match-form-row .form-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #d1d5db;
+            letter-spacing: 0.2px;
+        }
+
+        .match-form-row .form-group input,
+        .match-form-row .form-group select,
+        .match-form-row .form-group textarea {
+            width: 100%;
+            padding: 9px 11px;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.04);
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            backdrop-filter: blur(8px);
+        }
+
+        .match-form-row .form-group input:hover,
+        .match-form-row .form-group select:hover,
+        .match-form-row .form-group textarea:hover {
+            border-color: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.06);
+        }
+
+        .match-form-row .form-group input:focus,
+        .match-form-row .form-group select:focus,
+        .match-form-row .form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        /* Premium form input styles */
+        .match-form-group input,
+        .match-form-group select,
+        .match-form-group textarea {
+            width: 100%;
+            padding: 9px 11px;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.04);
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            backdrop-filter: blur(8px);
+        }
+
+        .match-form-group input:hover,
+        .match-form-group select:hover,
+        .match-form-group textarea:hover {
+            border-color: rgba(255, 255, 255, 0.15);
+            background: rgba(255, 255, 255, 0.05);
+            transform: translateY(-1px);
+        }
+
+        .match-form-group input:focus,
+        .match-form-group select:focus,
+        .match-form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15),
+                0 8px 25px rgba(239, 68, 68, 0.1);
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateY(-2px);
+        }
+
+        .match-form-group textarea {
+            resize: vertical;
+            min-height: 72px;
+            font-family: inherit;
+        }
+
+        .match-form-group label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #d1d5db;
+            letter-spacing: 0.2px;
+        }
+
+        /* Custom scrollbar for modals - blended & subtle */
+        .match-modal-content::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+        }
+
+        .match-modal-content::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.35);
+        }
+
+        /* Hide scrollbar for Firefox */
+        .match-modal-content {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+        }
+
+        /* Modal responsive */
+        @media (max-width: 500px) {
+            .match-modal-content {
+                width: calc(100% - 16px);
+                max-width: none;
+                padding: 14px;
+                border-radius: 14px;
+            }
+
+            .match-modal-header h3 {
+                font-size: 15px;
+            }
+
+            .match-form-row {
+                flex-direction: column;
+                gap: 6px;
+                margin-bottom: 8px;
+            }
+
+            .match-form-group {
+                margin-bottom: 10px;
+            }
+
+            .match-modal-actions {
+                gap: 6px;
+                margin-top: 10px;
+                padding-top: 8px;
+            }
+
+            .match-btn-cancel,
+            .match-btn-save {
+                font-size: 11px;
+                padding: 8px 10px;
+            }
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+
+        .match-modal-actions {
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+            margin-top: 14px;
+            padding-top: 10px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+        }
+
+        .match-btn-cancel {
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            color: #e5e7eb;
+            padding: 8px 12px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            line-height: 1;
+        }
+
+        .match-btn-cancel:hover {
+            background: rgba(255, 255, 255, 0.11);
+            border-color: rgba(255, 255, 255, 0.24);
+        }
+
+        .match-btn-save {
+            background: linear-gradient(135deg, #ef4444, #f87171);
+            border: 1px solid rgba(248, 113, 113, 0.5);
+            color: #fff;
+            padding: 8px 13px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 700;
+            transition: all 0.2s ease;
+            line-height: 1;
+            box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
+        }
+
+        .match-btn-save:hover {
+            filter: brightness(1.04);
+            transform: translateY(-1px);
+        }
+
+        .match-btn-delete {
+            background: rgba(239, 68, 68, 0.1);
+            border: 2px solid var(--brand-red);
+            color: var(--brand-red);
+            padding: 14px 28px;
+            border-radius: 14px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            flex: 1;
+            max-width: 140px;
+        }
+
+        .match-btn-delete:hover {
+            background: var(--brand-red);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+        }
+
+        /* ===== Responsive ===== */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container {
+                width: 300px;
+            }
+
+            .events-sidebar {
+                width: 300px;
+            }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main {
+                margin-left: 0;
+                flex-direction: column;
+            }
+
+            .yt-sidebar-container,
+            .events-sidebar {
+                width: 100%;
+            }
+
+            .sidebar-video-card {
+                flex-direction: column;
+            }
+
+            .sidebar-thumb {
+                width: 100%;
+            }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+
+            .fighters-row {
+                grid-template-columns: 1fr !important;
+            }
+
+            .match-center {
+                order: -1;
+            }
+
+            .event-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .event-header-actions {
+                align-self: flex-end;
+                width: 100%;
+                justify-content: flex-end;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .video-actions {
+                width: 100%;
+                overflow-x: auto;
+                justify-content: flex-start;
+            }
+
+            .yt-main {
+                padding: 12px !important;
+            }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+
+            .video-container video {
+                object-fit: contain !important;
+            }
+
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+
+            .channel-info {
+                width: 100%;
+            }
+
+            .subscribe-btn {
+                width: 100%;
+            }
+
+            .description-panel {
+                padding: 8px !important;
+            }
+
+            .match-card {
+                padding: 12px !important;
+            }
+
+            .event-header {
+                padding: 8px 0;
+            }
+
+            .event-text .title {
+                font-size: 1.1rem;
+            }
+
+            .event-header-actions {
+                gap: 4px;
+            }
+
+            .event-header-actions .action-btn {
+                padding: 6px 10px;
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+    @php
+        // ===== DUMMY DATA FALLBACKS =====
+        $blueFighter =
+            $blueFighter ??
+            (object) [
+                'name' => 'Sami Al Manea',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_5.png?v=1773157950',
+                'team' => 'Emperor TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/1/branding/logo_1771488666.png',
+                'member_id' => 5,
+                'club_url' => 'https://takeone-dev.innovator.bh/mobile/eta',
+            ];
+        $redFighter =
+            $redFighter ??
+            (object) [
+                'name' => 'Hassan Al Shallan',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_11.png?t=1773268056907',
+                'team' => 'Legend TaeKwonDo Academy',
+                'country' => 'Bahrain',
+                'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/logos/logo_1773267551.png',
+                'member_id' => 11,
+                'club_url' => 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy',
+            ];
+        $match =
+            $match ??
+            (object) [
+                'number' => '103',
+                'court' => '2',
+                'weight_category' => 'U18',
+                'score_blue' => 7,
+                'score_red' => 5,
+                'features' =>
+                    'Electronic scoring system (PSS & head‑gear) • Video replay available for head kicks and gam-jeom appeals',
+            ];
+        $referee =
+            $referee ??
+            (object) [
+                'name' => 'Ghassan Yusuf',
+                'flag' => '🇧🇭',
+                'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_8.png?t=1773267305519',
+                'member_id' => 4,
+            ];
+        $championship =
+            $championship ??
+            (object) [
+                'name' => 'Championship 2026',
+                'url' => '/championship/2026',
+            ];
+        $venue =
+            $venue ??
+            (object) [
+                'name' => 'Manama Sports Hall',
+                'map_link' => 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain',
+            ];
+    @endphp
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if (isset($video->orientation) && $video->orientation === 'portrait') portrait @elseif(isset($video->orientation) && $video->orientation === 'square') square @elseif(isset($video->orientation) && $video->orientation === 'ultrawide') ultrawide @endif"
+                id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ isset($video) ? route('videos.stream', $video->id) : '#' }}" type="video/mp4">
+                </video>
+
+                <!-- Match Highlights Toggle Button -->
+                <button class="match-highlights-toggle" id="matchHighlightsToggle" title="Toggle Match Highlights">
+                    <span>Highlights</span>
+                </button>
+
+                <!-- Playlist Navigation Controls -->
+                @if (isset($nextVideo) || isset($previousVideo))
+                    <div class="playlist-controls" id="playlistControls">
+                        @if (isset($previousVideo))
+                            <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                            <span
+                                class="playlist-nav-label">{{ Str::limit($previousVideo->title ?? 'Previous', 20) }}</span>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No previous video">
+                                <i class="bi bi-skip-backward-fill"></i>
+                            </button>
+                        @endif
+
+                        <div class="autoplay-toggle">
+                            <label for="autoplayToggle">Autoplay</label>
+                            <label class="autoplay-switch">
+                                <input type="checkbox" id="autoplayToggle" checked>
+                                <span class="autoplay-slider"></span>
+                            </label>
+                        </div>
+
+                        @if (isset($nextVideo))
+                            <span class="playlist-nav-label">{{ Str::limit($nextVideo->title ?? 'Next', 20) }}</span>
+                            <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @else
+                            <button class="playlist-nav-btn" disabled title="No next video">
+                                <i class="bi bi-skip-forward-fill"></i>
+                            </button>
+                        @endif
+                    </div>
+                    <div class="keyboard-hint">
+                        <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                    </div>
+                @endif
+            </div>
+
+            <!-- ===== EVENT HEADER ===== -->
+            <div class="event-header">
+                <div class="event-header-left">
+                    <div class="event-logo">
+                        <img src="https://picsum.photos/seed/event-logo/200/200" alt="Event logo">
+                    </div>
+                    <div class="event-text">
+                        <!-- Title with Trophy Icon BEFORE "Taekwondo Finals" -->
+                        <h1 class="title">
+                            <i class="bi bi-trophy trophy-icon" title="Match Type"></i>
+                            <span>{{ $video->title }} –</span>
+                            <span style="color: #2563eb; font-weight: bold">
+                                {{ $blueFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                </a>
+                            </span>
+                            <span>vs</span>
+                            <span style="color: #ef4444; font-weight: bold">
+                                {{ $redFighter->flag ?? '🇧🇭' }}
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                </a>
+                            </span>
+                            <span>({{ $match->weight_category ?? 'U18' }})</span>
+                        </h1>
+
+                        <!-- Meta: Championship Link • Match# • Court • Referee (all inline) -->
+                        <a class="meta-link" href="{{ $championship->url ?? '/championship/2026' }}"
+                            style="white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.4;">
+                            <span
+                                style="color: #ffffff; font-weight: bold; font-size: 0.85rem;">{{ $championship->name ?? 'Championship 2026' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #ff00dd; font-weight: bold; font-size: 0.85rem;">Match#
+                                {{ $match->number ?? '103' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span style="color: #00af09; font-weight: bold; font-size: 0.85rem;">Court
+                                {{ $match->court ?? '2' }}</span>
+                            <span style="color: var(--text-secondary);">•</span>
+                            <span
+                                style="color: #ffd900; font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                {{ $referee->flag ?? '🇧🇭' }} {{ $referee->name ?? 'Ghassan Yusuf' }}
+                            </span>
+                            <span
+                                style="color: var(--text-secondary); font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                                - {{ number_format($video->view_count) }} views •
+                                {{ $video->created_at->format('M d, Y') }}</span>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="event-header-actions">
+                    <!-- Like Button -->
+                    @auth
+                        @if (Auth::id() === $video->user_id)
+                            <button class="action-btn" onclick="openEditVideoModal({{ $video->id }})" title="Edit">
+                                <i class="bi bi-pencil"></i>
+                                <span>Edit</span>
+                            </button>
+                        @endif
+                        @endif
+                        @auth
+                            @if (isset($video))
+                                <form method="POST"
+                                    action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
+                                    class="d-inline">
+                                    @csrf
+                                    <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
+                                        title="Like">
+                                        <i
+                                            class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                        <span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
+                                    </button>
+                                </form>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn" title="Like">
+                                <i class="bi bi-hand-thumbs-up"></i>
+                                <span>Like</span>
+                            </a>
+                        @endauth
+
+                        <!-- Subscribe Button -->
+                        @auth
+                            @if (isset($video) && $video->user && Auth::id() !== $video->user_id)
+                                <button
+                                    class="action-btn {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'subscribed' : '' }}"
+                                    type="button"
+                                    title="{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}"
+                                    onclick="toggleSubscribe({{ $video->user_id ?? 0 }})">
+                                    <i
+                                        class="bi {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'bi-bell-fill' : 'bi-bell' }}"></i>
+                                    <span>{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}</span>
+                                </button>
+                            @endif
+                        @else
+                            <a href="{{ route('login') }}" class="action-btn" title="Subscribe">
+                                <i class="bi bi-bell"></i>
+                                <span>Subscribe</span>
+                            </a>
+                        @endauth
+
+                        <!-- Share Button -->
+                        @if (isset($video) && $video->isShareable())
+                            <button class="action-btn"
+                                onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"
+                                style="flex:1;">
+                                <i class="bi bi-share"></i>
+                                <span>Share</span>
+                            </button>
+                        @endif
+
+                        <!-- Save to Playlist Button -->
+                        <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                            </svg>
+                            <span>Save</span>
+                        </button>
+
+                    </div>
+                </div>
+                <!-- ===== END EVENT HEADER ===== -->
+
+                <!-- Description Box (Collapsible) -->
+                @if (isset($video) && $video->description)
+                    @php
+                        $fullDescription = $video->description;
+                        $shortDescription = Str::limit($fullDescription, 200);
+                        $needsExpand = strlen($fullDescription) > 200;
+                    @endphp
+
+                    <section class="description-panel">
+                        <button class="description-toggle" type="button" id="toggleDescription">
+                            <span id="descriptionToggleLabel">
+                                {{ $needsExpand ? 'Show description' : 'Hide description' }}
+                            </span>
+                            <span id="descriptionToggleIcon">{{ $needsExpand ? '▼' : '▲' }}</span>
+                        </button>
+
+                        <div class="description-body {{ $needsExpand ? '' : 'open' }}" id="descriptionBody">
+                            <!-- Match Card -->
+                            <section class="match-card">
+                                <div class="match-header">
+                                    <div class="match-label">Final • Male -63kg division</div>
+                                </div>
+
+                                <div class="fighters-row">
+                                    <!-- Blue Fighter (Sami Al Manea) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $blueFighter->photo ?? 'https://picsum.photos/seed/blue-competitor/200/260' }}"
+                                                        alt="{{ $blueFighter->name ?? 'Blue fighter' }}">
+                                                </div>
+                                            </a>
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $blueFighter->logo ?? 'https://picsum.photos/seed/blue-logo/160/160' }}"
+                                                            alt="{{ $blueFighter->team ?? 'Blue team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge blue">Blue</span>
+                                            </div>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name blue-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                                    title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                                    {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                                    title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}">
+                                                    {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $blueFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $blueFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+
+                                    <!-- Score & Referee Center -->
+                                    <div class="match-center">
+                                        <div class="score-pill">
+                                            <span class="score-number">{{ $match->score_blue ?? 7 }}</span>
+                                            <span class="score-label">Final score</span>
+                                            <span class="score-number">{{ $match->score_red ?? 5 }}</span>
+                                        </div>
+                                        <div class="referee-block">
+                                            <!-- Referee Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="referee-photo">
+                                                    <img src="{{ $referee->photo ?? 'https://picsum.photos/seed/referee/200/260' }}"
+                                                        alt="Referee">
+                                                </div>
+                                            </a>
+                                            <div style="color: #ffd900; font-weight: bold">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                                    style="color: inherit; text-decoration: none;"
+                                                    title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile">
+                                                    {{ $referee->name ?? 'Ghassan Yusuf' }}
+                                                </a>
+                                            </div>
+                                            <div class="ref-label">Center Referee</div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Red Fighter (Hassan Al Shallan) -->
+                                    <article class="fighter-card">
+                                        <div class="fighter-top">
+                                            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                                <!-- Fighter Logo - Links to Club Page -->
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}"
+                                                    style="text-decoration: none; color: inherit;">
+                                                    <div class="fighter-logo">
+                                                        <img src="{{ $redFighter->logo ?? 'https://picsum.photos/seed/red-logo/160/160' }}"
+                                                            alt="{{ $redFighter->team ?? 'Red team' }} logo">
+                                                    </div>
+                                                </a>
+                                                <span class="fighter-badge red">Red</span>
+                                            </div>
+                                            <!-- Fighter Photo - Links to Member Profile -->
+                                            <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile"
+                                                style="text-decoration: none; color: inherit;">
+                                                <div class="fighter-photo">
+                                                    <img src="{{ $redFighter->photo ?? 'https://picsum.photos/seed/red-competitor/200/260' }}"
+                                                        alt="{{ $redFighter->name ?? 'Red fighter' }}">
+                                                </div>
+                                            </a>
+                                        </div>
+                                        <div class="fighter-info">
+                                            <!-- Fighter Name - Links to Member Profile -->
+                                            <div class="fighter-name red-corner">
+                                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                                    title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                                    {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                                </a>
+                                            </div>
+                                            <!-- Fighter Team - Links to Club Page -->
+                                            <div class="fighter-team">
+                                                <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                                    title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}">
+                                                    {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}
+                                                </a>
+                                            </div>
+                                            <div class="fighter-country">
+                                                <span class="fighter-country-flag">{{ $redFighter->flag ?? '🇧🇭' }}</span>
+                                                <span>{{ $redFighter->country ?? 'Bahrain' }}</span>
+                                            </div>
+                                        </div>
+                                    </article>
+                                </div>
+
+                                <div class="match-footer">
+                                    <a class="hall-link" id="hallLink" title="View venue details"
+                                        href="{{ $venue->map_link ?? 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain' }}"
+                                        target="_blank" rel="noopener noreferrer">
+                                        📍 {{ $venue->name ?? 'Manama Sports Hall' }}
+                                    </a>
+                                    @if (isset($match->features))
+                                        • {{ $match->features }}
+                                    @endif
+                                </div>
+                            </section>
+
+                            <!-- Match Overview -->
+                            <section class="markdown-body">
+                                <div
+                                    style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                                    <h2 style="font-size: 1.05rem; margin: 0;">Match Overview</h2>
+                                    @if (isset($video) && $video->user)
+                                        <div class="video-owner-badge"
+                                            style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary);">
+                                            <img src="{{ $video->user->avatar_url }}" class="owner-avatar"
+                                                style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover;"
+                                                alt="{{ $video->user->name }}">
+                                            <span class="owner-name"
+                                                style="color: var(--text-primary); font-weight: 500;">{{ $video->user->name }}</span>
+                                            <span>• {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</span>
+                                        </div>
+                                    @endif
+                                </div>
+                                <div class="description-text">
+                                    {!! Str::markdown($fullDescription) !!}
+                                </div>
+                            </section>
+                        </div>
+                    </section>
+
+                    <script>
+                        // Collapsible Description Toggle
+                        const descriptionBody = document.getElementById('descriptionBody');
+                        const descriptionToggle = document.getElementById('toggleDescription');
+                        const descriptionToggleLabel = document.getElementById('descriptionToggleLabel');
+                        const descriptionToggleIcon = document.getElementById('descriptionToggleIcon');
+
+                        if (descriptionToggle && descriptionBody) {
+                            descriptionToggle.addEventListener('click', () => {
+                                const isOpen = descriptionBody.classList.toggle('open');
+                                descriptionToggleLabel.textContent = isOpen ? 'Hide description' : 'Show description';
+                                descriptionToggleIcon.textContent = isOpen ? '▲' : '▼';
+                            });
+                        }
+
+                        // Hall/Venue Link Handler
+                        const hallLink = document.getElementById('hallLink');
+                        if (hallLink) {
+                            hallLink.addEventListener('click', () => {
+                                // Analytics tracking can be added here
+                            });
+                        }
+
+                        // Match Highlights Toggle with localStorage persistence
+                        document.addEventListener('DOMContentLoaded', function() {
+                            const toggleBtn = document.getElementById('matchHighlightsToggle');
+                            const sidebar = document.querySelector('.events-sidebar');
+                            const videoId = {{ isset($video) ? $video->id : 0 }};
+
+                            if (toggleBtn && sidebar) {
+                                // Load saved state on page load
+                                const savedState = localStorage.getItem(`highlights_${videoId}`);
+                                if (savedState === 'open') {
+                                    sidebar.classList.add('show');
+                                    toggleBtn.classList.add('expanded');
+                                    toggleBtn.textContent = 'Highlights';
+                                }
+
+                                toggleBtn.addEventListener('click', function() {
+                                    const isOpen = sidebar.classList.toggle('show');
+                                    toggleBtn.classList.toggle('expanded');
+
+                                    // Save state to localStorage
+                                    if (isOpen) {
+                                        localStorage.setItem(`highlights_${videoId}`, 'open');
+                                        toggleBtn.textContent = 'Highlights';
+                                    } else {
+                                        localStorage.removeItem(`highlights_${videoId}`);
+                                    }
+                                });
+                            }
+                        });
+                    </script>
+                @endif
+
+                <!-- Comment Section -->
+                <div class="comments-section"
+                    style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                    <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                        Comments <span
+                            style="color: var(--text-secondary); font-weight: 400;">({{ isset($video) ? $video->comment_count ?? 0 : 0 }})</span>
+                    </h3>
+                    @auth
+                        <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                            <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
+                                alt="{{ Auth::user()->name }}">
+                            <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                                <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
+                                    rows="1"
+                                    style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
+                                <button type="button" class="action-btn"
+                                    onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
+                                    <i class="bi bi-x-lg"></i>
+                                    <span>Cancel</span>
+                                </button>
+                                <button type="button" class="action-btn comment-btn"
+                                    onclick="submitComment({{ isset($video) ? $video->id : 0 }})" style="flex-shrink: 0;">
+                                    <i class="bi bi-chat-dots"></i>
+                                    <span>Comment</span>
+                                </button>
+                            </div>
+                        </div>
+                    @else
+                        <div
+                            style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                            <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                        </div>
+                    @endauth
+                    <div id="commentsList">
+                        @if (isset($video))
+                            @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                                @include('videos.partials.comment', ['comment' => $comment])
+                            @empty
+                                <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be
+                                    the first to comment!</p>
+                            @endforelse
+                        @endif
+                    </div>
+                </div>
+
+                <script>
+                    function submitComment(videoId) {
+                        const body = document.getElementById('commentBody').value.trim();
+                        if (!body) return;
+
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body
+                                })
+                            })
+                            .then(response => response.json())
+                            .catch(error => {
+                                console.error('Error:', error);
+                                alert('Failed to post comment: ' + error);
+                            })
+                            .then(data => {
+                                if (data && data.success) {
+                                    document.getElementById('commentBody').value = '';
+                                    addCommentToList(data.comment);
+                                } else {
+                                    alert('Failed to post comment');
+                                }
+                            });
+                    }
+
+                    function addCommentToList(comment) {
+                        const commentsList = document.getElementById('commentsList');
+                        const commentHtml = `
+                <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
+                    <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
+                    <div style="flex: 1;">
+                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+                            <span style="font-weight: 600; font-size: 14px;">${comment.user.name}</span>
+                            <span style="color: var(--text-secondary); font-size: 12px;">just now</span>
+                        </div>
+                        <div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
+                            ${comment.body.replace(/@(\\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>')}
+                        </div>
+                        <div style="display: flex; gap: 12px; margin-top: 8px;">
+                            <button onclick="toggleReplyForm(${comment.id})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
+                                Reply
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+                        commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                        const commentCount = document.querySelector('h3 span');
+                        if (commentCount) {
+                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                            commentCount.textContent = `(${count})`;
+                        }
+                    }
+
+                    function deleteComment(commentId) {
+                        if (confirm('Are you sure you want to delete this comment?')) {
+                            fetch(`/comments/${commentId}`, {
+                                    method: 'DELETE',
+                                    headers: {
+                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                    }
+                                })
+                                .then(response => response.json())
+                                .then(data => {
+                                    if (data.success) {
+                                        document.getElementById('comment-' + commentId).remove();
+                                        const commentCount = document.querySelector('h3 span');
+                                        if (commentCount) {
+                                            const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                            commentCount.textContent = `(${count})`;
+                                        }
+                                    }
+                                });
+                        }
+                    }
+                    document.addEventListener('DOMContentLoaded', function() {
+                        const commentTexts = document.querySelectorAll('.comment-body');
+                        commentTexts.forEach(text => {
+                            const html = text.innerHTML.replace(/@(\w+)/g,
+                                '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                            text.innerHTML = html;
+                        });
+                    });
+
+                    function submitReply(videoId, parentId) {
+                        const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                        const body = textarea.value.trim();
+                        if (!body) return;
+                        fetch(`/videos/${videoId}/comments`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                                },
+                                body: JSON.stringify({
+                                    body: body,
+                                    parent_id: parentId
+                                })
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    location.reload();
+                                }
+                            });
+                    }
+                </script>
+            </div>
+
+            <!-- Sidebar - Match Highlights -->
+            <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
+                <aside class="events-sidebar">
+                    <div class="events-sidebar-header" style="justify-content: center;">
+                        <h3>Match Highlights</h3>
+                    </div>
+                    <div class="tab-header">
+                        <button class="tab-button active" data-tab="official">Points</button>
+                        <button class="tab-button" data-tab="review">Coach review</button>
+                    </div>
+                    <div class="tab-panels">
+                        <!-- Points Tab -->
+                        <div class="tab-panel active" id="tab-official">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div>
+                                    <div class="section-label">Rounds & points</div>
+                                </div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                                            <span>+</span> Add Round
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="officialEvents">
+                                <!-- Round markers and points (unchanged) -->
+                                <div class="round-marker" data-round="1">
+                                    <span class="round-badge">ROUND 1</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(1)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(1)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(1)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                                    <div class="event-time">@00:20</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue body kick (1 pt)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 1 – 0 • Clean contact.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                                    <div class="event-time">@00:45</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue scores body kick
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 1 • Score 2 – 0 • Judge: Central.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="2">
+                                    <span class="round-badge">ROUND 2</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(2)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(2)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(2)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                                    <div class="event-time">@01:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red head kick (3 pts)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 2 • Score 2 – 3 • Video replay requested.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="round-marker" data-round="3">
+                                    <span class="round-badge">ROUND 3</span>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="round-actions">
+                                                <button class="round-action-btn" onclick="openAddPointModal(3)"
+                                                    title="Add point">+</button>
+                                                <button class="round-action-btn" onclick="editRound(3)"
+                                                    title="Edit round">✏️</button>
+                                                <button class="round-action-btn" onclick="deleteRound(3)"
+                                                    title="Delete round">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                                    <div class="event-time">@02:30</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Blue spinning backfist (2 pts)
+                                            <span class="pill pill-blue">Blue</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 3 • Close round.
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt4')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt4')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                                    <div class="event-time">@03:00</div>
+                                    <div>
+                                        <div class="event-label">
+                                            Red leg kick (1 pt)
+                                            <span class="pill pill-red">Red</span>
+                                        </div>
+                                        <div class="event-meta">
+                                            Round 3 • Score 4 – 4 • Tied!
+                                        </div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editPoint('pt5')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deletePoint('pt5')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Coach Review Tab -->
+                        <div class="tab-panel" id="tab-review">
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <div class="section-label">Private notes</div>
+                                @auth
+                                    @if (isset($video) && Auth::id() === $video->user_id)
+                                        <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                                            <span>+</span> Add Note
+                                        </button>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-list" id="reviewEvents">
+                                <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                                    <div class="review-primary-row">
+                                        <span class="emoji">🔥</span>
+                                        <span>@00:32–00:50</span>
+                                        <div class="note-text">Good pressure, but guard too low after first kick</div>
+                                    </div>
+                                    <div class="review-secondary-row">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        <div class="coach-name">Coach Ahmed</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev1')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev1')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                                    <div class="event-time-container">
+                                        <span class="emoji">🤔</span>
+                                        <span>@02:05–02:20</span>
+                                    </div>
+                                    <div class="event-label">Missed counter opportunity</div>
+                                    <div class="event-meta">
+                                        <div class="review-header">
+                                            <div class="comment-avatar">
+                                                <img src="https://picsum.photos/seed/coach-sara/80/80" alt="Coach Sara">
+                                            </div>
+                                            <div class="coach-info">
+                                                <div class="coach-name">Coach Sara</div>
+                                            </div>
+                                        </div>
+                                        <div class="review-note">Great angle, but no follow up. Use this clip to discuss risk
+                                            vs reward.</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev2')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev2')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                                <div class="event-item" data-time-start="205" data-id="rev3">
+                                    <div class="event-time-container">
+                                        <span class="emoji">😄</span>
+                                        <span>@03:25</span>
+                                    </div>
+                                    <div class="event-label">Excellent angle change and follow-up</div>
+                                    <div class="event-meta">
+                                        <div class="review-header">
+                                            <div class="comment-avatar">
+                                                <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                            </div>
+                                            <div class="coach-info">
+                                                <div class="coach-name">Coach Ahmed</div>
+                                            </div>
+                                        </div>
+                                        <div class="review-note">Save as positive highlight, ideal example of exit and re-entry
+                                            after scoring.</div>
+                                    </div>
+                                    @auth
+                                        @if (isset($video) && Auth::id() === $video->user_id)
+                                            <div class="event-actions">
+                                                <button class="event-action-btn" onclick="editReview('rev3')"
+                                                    title="Edit">✏️</button>
+                                                <button class="event-action-btn delete" onclick="deleteReview('rev3')"
+                                                    title="Delete">🗑️</button>
+                                            </div>
+                                        @endif
+                                    @endauth
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+                <!-- Sidebar - Up Next / Recommendations -->
+                <div class="yt-sidebar-container">
+                    @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                            <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                            {{ $playlist->name }}
+                            <span
+                                style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                                videos)</span>
+                        </h3>
+                        <div class="recommended-videos-list">
+                            @foreach ($playlistVideos as $index => $playlistVideo)
+                                @if ($playlistVideo->id !== $video->id)
+                                    <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                                        onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                                        <div class="sidebar-thumb" style="position: relative;">
+                                            @if ($playlistVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                                    alt="{{ $playlistVideo->title }}">
+                                            @endif
+                                            @if ($playlistVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                            @endif
+                                            @if ($playlistVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                            <!-- Playlist position indicator -->
+                                            <span
+                                                style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                                {{ $index + 1 }}
+                                            </span>
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($playlistVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($playlistVideo->view_count) }} views •
+                                                    {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                        @if ($playlist->canEdit(Auth::user()))
+                            <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                                style="margin-top: 12px; display: inline-block;">
+                                <i class="bi bi-pencil"></i> Edit Playlist
+                            </a>
+                        @endif
+                    @else
+                        <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                        @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                            <div class="recommended-videos-list">
+                                @foreach ($recommendedVideos as $recVideo)
+                                    <div class="sidebar-video-card"
+                                        onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                                        <div class="sidebar-thumb">
+                                            @if ($recVideo->thumbnail)
+                                                <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                                    alt="{{ $recVideo->title }}">
+                                            @else
+                                                <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                                    alt="{{ $recVideo->title }}">
+                                            @endif
+                                            @if ($recVideo->duration)
+                                                <span
+                                                    class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                            @endif
+                                            @if ($recVideo->is_shorts)
+                                                <span class="yt-shorts-badge"
+                                                    style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                                    <i class="bi bi-collection-play-fill"></i> SHORTS
+                                                </span>
+                                            @endif
+                                        </div>
+                                        <div class="sidebar-info">
+                                            <div class="sidebar-title">
+                                                <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                                    style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                                {{ Str::limit($recVideo->title, 60) }}
+                                            </div>
+                                            <div class="sidebar-meta">
+                                                <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                                <div>{{ number_format($recVideo->view_count) }} views •
+                                                    {{ $recVideo->created_at->diffForHumans() }}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                            <div class="text-secondary">No recommendations available yet. Check back later!</div>
+                        @endif
+                    @endif
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Modals -->
+        @include('layouts.partials.share-modal')
+        @include('layouts.partials.edit-video-modal')
+
+        <!-- Add Round Modal -->
+        <div class="match-modal-overlay" id="addRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3><span class="modal-title-icon">➕</span> Add New Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('addRoundModal')">×</button>
+                </div>
+                <form id="addRoundForm">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Round Number</label>
+                            <input type="number" id="roundNumber" min="1" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round Name (optional)</label>
+                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Start Time (seconds, optional)</label>
+                        <input type="number" id="roundStartTime" min="0" placeholder="e.g., 30">
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Add Round</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Point Modal -->
+        <div class="match-modal-overlay" id="pointModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3 id="pointModalTitle">Add Point</h3>
+                    <button class="match-modal-close" onclick="closeModal('pointModal')">×</button>
+                </div>
+                <form id="pointForm">
+                    <input type="hidden" id="pointId">
+                    <input type="hidden" id="pointRoundId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointTimestamp">Timestamp (seconds)</label>
+                            <input type="number" id="pointTimestamp" min="0" required>
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointRoundSelect">Round</label>
+                            <select id="pointRoundSelect">
+                                <option value="1">Round 1</option>
+                                <option value="2">Round 2</option>
+                                <option value="3">Round 3</option>
+                                <option value="4">Round 4</option>
+                                <option value="5">Round 5</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointAction">Action Description</label>
+                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+                    </div>
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label for="pointValue">Points</label>
+                            <input type="number" id="pointValue" min="1" value="1">
+                        </div>
+                        <div class="match-form-group">
+                            <label for="pointCompetitor">Competitor</label>
+                            <select id="pointCompetitor">
+                                <option value="blue">Blue</option>
+                                <option value="red">Red</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="match-form-group">
+                        <label for="pointNotes">Notes</label>
+                        <textarea id="pointNotes" rows="3" placeholder="Optional notes (e.g., Clean contact, Judge: Central)"></textarea>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()"
+                            style="display: none;">
+                            Delete Point
+                        </button>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('pointModal')">
+                            Cancel
+                        </button>
+                        <button type="submit" class="match-btn-save">
+                            Save Point
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Edit Round Modal -->
+        <div class="match-modal-overlay" id="editRoundModal">
+            <div class="match-modal-content">
+                <div class="match-modal-header">
+                    <h3><span class="modal-title-icon">✏️</span> Edit Round</h3>
+                    <button class="match-modal-close" onclick="closeModal('editRoundModal')">×</button>
+                </div>
+                <form id="editRoundForm">
+                    <input type="hidden" id="editRoundId">
+                    <div class="match-form-group">
+                        <label>Round Number</label>
+                        <input type="number" id="editRoundNumber" min="1" required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Round Name</label>
+                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                    </div>
+                    <div class="match-form-group">
+                        <label>Start Time (seconds, optional)</label>
+                        <input type="number" id="editRoundStartTime" min="0" placeholder="e.g., 30">
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-cancel"
+                            onclick="closeModal('editRoundModal')">Cancel</button>
+                        <button type="button" class="match-btn-save" onclick="confirmDeleteRound()">Delete Round</button>
+                        <button type="submit" class="match-btn-save">Save Changes</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Review Modal -->
+        <div class="match-modal-overlay" id="reviewModal">
+            <div class="modal-content">
+                <div class="match-modal-header">
+                    <h3 id="reviewModalTitle">Add Coach Note</h3>
+                    <button class="match-modal-close" onclick="closeModal('reviewModal')">×</button>
+                </div>
+                <form id="reviewForm">
+                    <input type="hidden" id="reviewId">
+                    <div class="match-form-row">
+                        <div class="match-form-group">
+                            <label>Start Time (seconds)</label>
+                            <input type="number" id="reviewStartTime" min="0" required>
+                        </div>
+                        <div class="form-group">
+                            <label>End Time (seconds)</label>
+                            <input type="number" id="reviewEndTime" min="0">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Note</label>
+                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Coach Name</label>
+                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Emoji</label>
+                        <select id="reviewEmoji">
+                            <option value="🔥">🔥 Good</option>
+                            <option value="🤔">🤔 Needs Work</option>
+                            <option value="😄">😄 Excellent</option>
+                            <option value="💪">💪 Strong</option>
+                            <option value="⚠️">⚠️ Warning</option>
+                        </select>
+                    </div>
+                    <div class="match-modal-actions">
+                        <button type="button" class="match-btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()"
+                            style="display: none;">Delete</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="match-btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                        <button type="submit" class="match-btn-save">Save Note</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        @if (Session::has('openEditModal') && Session::get('openEditModal'))
+            @auth
+                <script>
+                    document.addEventListener('DOMContentLoaded', function() {
+                        openEditVideoModal({{ isset($video) ? $video->id : 0 }});
+                    });
+                </script>
+            @endauth
+        @endif
+
+        <script>
+            // Subscribe Toggle Function
+            function toggleSubscribe(userId) {
+                if (!userId) return;
+                fetch(`/users/${userId}/toggle-subscribe`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            location.reload();
+                        }
+                    });
+            }
+
+            // Playlist navigation URLs
+            const previousVideoUrl = @json(isset($previousVideo) ? route('videos.show', $previousVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const nextVideoUrl = @json(isset($nextVideo) ? route('videos.show', $nextVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+            const videoId = {{ isset($video) ? $video->id : 0 }};
+            const isOwner = {{ json_encode(Auth::check() && isset($video) && Auth::id() === $video->user_id) }};
+            let autoplayEnabled = true;
+
+            document.addEventListener('DOMContentLoaded', function() {
+                loadMatchData();
+            });
+
+            async function loadMatchData() {
+                try {
+                    const response = await fetch(`/videos/${videoId}/match-data`);
+                    const data = await response.json();
+                    if (data.success) {
+                        renderMatchData(data.rounds || [], data.reviews || []);
+                    } else {
+                        console.warn('No match data:', data.message);
+                        renderStaticData();
+                    }
+                } catch (error) {
+                    console.error('Failed to load match data:', error);
+                    // Try to use server-side data first
+                    if (window.matchRounds && window.matchReviews) {
+                        renderMatchData(window.matchRounds, window.matchReviews);
+                    } else {
+                        renderStaticData();
+                    }
+                }
+            }
+
+            // Pass server-side data to JS if available
+            window.matchRounds = @json($video->matchRounds ?? []);
+            window.matchReviews = @json($video->coachReviews ?? []);
+            if (window.matchRounds.length > 0) {
+                renderMatchData(window.matchRounds, window.matchReviews);
+            }
+
+            function renderStaticData() {
+                // No static demo data - empty state
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                if (pointsContainer) pointsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No match data yet. <button class="btn-add" onclick="openAddRoundModal()">+ Add Round</button></div>';
+                if (reviewsContainer) reviewsContainer.innerHTML =
+                    '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">No coach notes yet. <button class="btn-add" onclick="openAddReviewModal()">+ Add Note</button></div>';
+            }
+
+            function renderMatchData(rounds, reviews) {
+                if (!rounds || rounds.length === 0) return;
+                const pointsContainer = document.getElementById('officialEvents');
+                const reviewsContainer = document.getElementById('reviewEvents');
+                let pointsHtml = '';
+                let reviewsHtml = '';
+
+                rounds.forEach(round => {
+                    const safeRoundName = String(round.name || '').replace(/'/g, "\\'");
+                    const roundStart = (round.start_time_seconds !== null && round.start_time_seconds !== undefined) ?
+                        Number(round.start_time_seconds) : '';
+                    pointsHtml += `
+        <div class="round-marker" data-round="${round.round_number}" data-round-id="${round.id}" data-start-time="${roundStart}">
+            <span class="round-badge" data-start-time="${roundStart}" title="Jump to ${roundStart !== '' ? formatTime(roundStart) : 'start'}">${round.name}</span>
+            ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                                    <div class="round-actions">
+                                                                                                                                                                                                                                                                                                                                        <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                                                                                                                                                                                                                                                                                                                                        <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${safeRoundName}', ${roundStart === '' ? 'null' : roundStart})" title="Edit round">✏️</button>
+                                                                                                                                                                                                                                                                                                                                        <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                    </div>
+                                                                                                                                                                                                                                                                                                                                    ` : ''}
+        </div>`;
+
+                    if (round.points) {
+                        round.points.forEach(point => {
+                            const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                            const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                            const timeStr = formatTime(point.timestamp_seconds);
+                            pointsHtml += `
+                <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
+                    <div class="event-time">@${timeStr}</div>
+                    <div>
+                        <div class="event-label">
+                            ${point.action} (${point.points} pt)
+                            <span class="pill ${competitorClass}">${competitorLabel}</span>
+                        </div>
+                        <div class="event-meta">
+                            ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
+                        </div>
+                    </div>
+                    ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                                            <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                                                <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                                                <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                            </div>` : ''}
+                </div>`;
+                        });
+                    }
+                });
+
+                if (reviews) {
+                    reviews.forEach(review => {
+                        const timeStart = formatTime(review.start_time_seconds);
+                        const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+                        const timeDisplay = timeStart + timeEnd;
+                        reviewsHtml += `
+            <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
+                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                    <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
+                    <div class="event-time">@${timeDisplay}</div>
+                </div>
+                <div>
+                    <div class="event-label">${review.note}</div>
+                    <div class="event-meta">
+                        <div class="comment-avatar">
+                            <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                        </div>
+                        ${review.coach_name}
+                    </div>
+                </div>
+                ${isOwner ? `
+                                                                                                                                                                                                                                                                                                                                        <div class="event-actions">
+                                                                                                                                                                                                                                                                                                                                            <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                                                                                                                                                                                                                                                                                                                                            <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                                                                                                                                                                                                                                                                                                                                        </div>` : ''}
+            </div>`;
+                    });
+                }
+
+                if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+                if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+                attachEventListeners();
+            }
+
+            function formatTime(seconds) {
+                const mins = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const tabButtons = document.querySelectorAll('.tab-button');
+                const tabPanels = document.querySelectorAll('.tab-panel');
+                tabButtons.forEach(button => {
+                    button.addEventListener('click', function() {
+                        const targetTab = this.getAttribute('data-tab');
+                        tabButtons.forEach(btn => btn.classList.remove('active'));
+                        tabPanels.forEach(panel => panel.classList.remove('active'));
+                        this.classList.add('active');
+                        document.getElementById('tab-' + targetTab).classList.add('active');
+                    });
+                });
+                attachEventListeners();
+                document.getElementById('addRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    storeRound(
+                        document.getElementById('roundNumber').value,
+                        document.getElementById('roundName').value || 'ROUND ' + document.getElementById(
+                            'roundNumber').value,
+                        document.getElementById('roundStartTime').value
+                    );
+                });
+                document.getElementById('pointForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    savePoint();
+                });
+                document.getElementById('editRoundForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    updateRound();
+                });
+                document.getElementById('reviewForm')?.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    saveReview();
+                });
+            });
+
+            function attachEventListeners() {
+                document.querySelectorAll('.event-item').forEach(item => {
+                    item.addEventListener('click', function(e) {
+                        if (e.target.closest('.event-actions')) return;
+                        const timeStart = parseFloat(this.getAttribute('data-time-start'));
+                        const timeEnd = parseFloat(this.getAttribute('data-time-end') || 0);
+
+                        if (timeStart || timeStart === 0) {
+                            const videoPlayer = document.getElementById('videoPlayer');
+                            if (videoPlayer) {
+                                // Start 1 second early for context
+                                videoPlayer.currentTime = Math.max(0, timeStart - 1.0);
+                                videoPlayer.play();
+                            }
+                        }
+                    });
+                });
+
+                document.querySelectorAll('.round-badge').forEach(badge => {
+                    badge.style.cursor = 'pointer';
+                    badge.addEventListener('click', function(e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (e.target.closest('.round-actions')) return;
+
+                        const marker = this.closest('.round-marker');
+                        const startAttr = this.getAttribute('data-start-time') ?? marker?.getAttribute(
+                            'data-start-time');
+                        const startTime = startAttr === '' || startAttr === null ? 0 : parseFloat(startAttr);
+
+                        if (!Number.isNaN(startTime)) {
+                            const videoPlayer = document.getElementById('videoPlayer');
+                            if (videoPlayer) {
+                                videoPlayer.currentTime = Math.max(0, startTime);
+                                videoPlayer.play();
+                            }
+                        }
+                    });
+                });
+            }
+
+            function openModal(modalId) {
+                document.getElementById(modalId).classList.add('active');
+            }
+
+            function closeModal(modalId) {
+                document.getElementById(modalId).classList.remove('active');
+            }
+            document.querySelectorAll('.match-modal-overlay').forEach(modal => {
+                modal.addEventListener('click', function(e) {
+                    if (e.target === this) this.classList.remove('active');
+                });
+            });
+
+            const csrfToken = '{{ Auth::check() ? csrf_token() : '' }}';
+            const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+            // Round/Point/Review functions (abbreviated for brevity)
+            function openAddRoundModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode: Requires authentication');
+                    return;
+                }
+                document.getElementById('roundNumber').value = '';
+                document.getElementById('roundName').value = '';
+                document.getElementById('roundStartTime').value = '';
+                openModal('addRoundModal');
+            }
+            async function storeRound(roundNumber, roundName, roundStartTime) {
+                if (!csrfToken) return;
+                try {
+                    const res = await fetch(`/videos/${videoId}/rounds`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            round_number: parseInt(roundNumber),
+                            name: roundName,
+                            start_time_seconds: roundStartTime !== '' ? parseInt(roundStartTime) : null
+                        })
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('addRoundModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function editRound(roundNumber, roundId, currentName, currentStartTime = null) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+
+                // Fallback to DOM values if params are missing
+                if (!roundId) {
+                    const marker = document.querySelector(`.round-marker[data-round="${roundNumber}"]`);
+                    if (marker) {
+                        roundId = marker.getAttribute('data-round-id') || roundId;
+                        currentStartTime = marker.getAttribute('data-start-time') ?? currentStartTime;
+                        currentName = marker.querySelector('.round-badge')?.textContent?.trim() || currentName;
+                    }
+                }
+
+                document.getElementById('editRoundId').value = roundId || '';
+                document.getElementById('editRoundNumber').value = roundNumber || '';
+                document.getElementById('editRoundName').value = currentName || '';
+                document.getElementById('editRoundStartTime').value = (currentStartTime === null || currentStartTime ===
+                    undefined || currentStartTime === '') ? '' : currentStartTime;
+                openModal('editRoundModal');
+            }
+            async function updateRound() {
+                if (!csrfToken) return;
+                const roundId = document.getElementById('editRoundId').value;
+                const roundNumber = document.getElementById('editRoundNumber').value;
+                const roundName = document.getElementById('editRoundName').value;
+                const roundStartTime = document.getElementById('editRoundStartTime').value;
+
+                try {
+                    // Use method spoofing to avoid servers/proxies that block true PUT and return HTML error pages
+                    const payload = new URLSearchParams();
+                    payload.append('_method', 'PUT');
+                    payload.append('round_number', parseInt(roundNumber));
+                    payload.append('name', roundName);
+                    if (roundStartTime !== '') {
+                        payload.append('start_time_seconds', parseInt(roundStartTime));
+                    }
+
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                            'X-CSRF-TOKEN': csrfToken,
+                            'Accept': 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest'
+                        },
+                        body: payload.toString()
+                    });
+
+                    let data;
+                    const contentType = res.headers.get('content-type') || '';
+                    if (contentType.includes('application/json')) {
+                        data = await res.json();
+                    } else {
+                        const text = await res.text();
+                        throw new Error(`Server returned non-JSON response (status ${res.status}). ${text.slice(0, 180)}`);
+                    }
+
+                    if (res.ok && data.success) {
+                        closeModal('editRoundModal');
+                        loadMatchData();
+                    } else {
+                        throw new Error(data.message || `Update failed (status ${res.status})`);
+                    }
+                } catch (e) {
+                    console.error('updateRound error:', e);
+                    alert('Error updating round: ' + e.message);
+                }
+            }
+            async function deleteRound(roundId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this round?')) return;
+                try {
+                    const res = await fetch(`/rounds/${roundId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) loadMatchData();
+                    else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function openAddPointModal(roundNumber, roundId) {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('pointModalTitle').textContent = 'Add Point';
+                document.getElementById('pointId').value = '';
+                document.getElementById('pointRoundId').value = roundId || '';
+                document.getElementById('pointTimestamp').value = '';
+                document.getElementById('pointRoundSelect').value = roundNumber || '1';
+                document.getElementById('pointAction').value = '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = 'blue';
+                document.getElementById('pointNotes').value = '';
+                document.getElementById('deletePointBtn').style.display = 'none';
+                openModal('pointModal');
+            }
+
+            function editPoint(pointId) {
+                const el = document.querySelector(`.event-item[data-id="${pointId}"]`);
+                if (!el) return;
+                document.getElementById('pointModalTitle').textContent = 'Edit Point';
+                document.getElementById('pointId').value = pointId;
+                document.getElementById('pointTimestamp').value = el.dataset.timeStart || '';
+                document.getElementById('pointRoundSelect').value = el.dataset.round || '1';
+                document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0]
+                    .trim() || '';
+                document.getElementById('pointValue').value = '1';
+                document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ?
+                    'blue' : 'red';
+                document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2)
+                    .join('').trim() || '';
+                document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+                openModal('pointModal');
+            }
+            async function savePoint() {
+                if (!csrfToken) {
+                    closeModal('pointModal');
+                    return;
+                }
+                const pointId = document.getElementById('pointId').value;
+                const roundId = document.getElementById('pointRoundId').value;
+                const timestamp = document.getElementById('pointTimestamp').value;
+                const round = document.getElementById('pointRoundSelect').value;
+                const action = document.getElementById('pointAction').value;
+                const value = document.getElementById('pointValue').value;
+                const competitor = document.getElementById('pointCompetitor').value;
+                const notes = document.getElementById('pointNotes').value;
+                try {
+                    if (pointId) {
+                        const res = await fetch(`/points/${pointId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                timestamp_seconds: parseInt(timestamp),
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/points`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                round_id: roundId,
+                                timestamp_seconds: parseInt(timestamp),
+                                action,
+                                points: parseInt(value),
+                                competitor,
+                                notes
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('pointModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deletePoint(pointId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this point?')) return;
+                try {
+                    const res = await fetch(`/points/${pointId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            function openAddReviewModal() {
+                if (isDemoMode || !csrfToken) {
+                    alert('Demo Mode');
+                    return;
+                }
+                document.getElementById('reviewModalTitle').textContent = 'Add Coach Note';
+                document.getElementById('reviewId').value = '';
+                document.getElementById('reviewStartTime').value = '';
+                document.getElementById('reviewEndTime').value = '';
+                document.getElementById('reviewNote').value = '';
+                document.getElementById('reviewCoach').value = '';
+                document.getElementById('reviewEmoji').value = '🔥';
+                document.getElementById('deleteReviewBtn').style.display = 'none';
+                openModal('reviewModal');
+            }
+
+            function editReview(reviewId) {
+                const el = document.querySelector(`.event-item[data-id="${reviewId}"]`);
+                if (!el) return;
+                document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note';
+                document.getElementById('reviewId').value = reviewId;
+                document.getElementById('reviewStartTime').value = el.dataset.timeStart || '';
+                document.getElementById('reviewEndTime').value = el.dataset.timeEnd || '';
+                document.getElementById('reviewNote').value = el.querySelector('.event-label')?.textContent.trim() || '';
+                document.getElementById('reviewCoach').value = el.querySelector('.event-meta')?.textContent.trim() || '';
+                document.getElementById('reviewEmoji').value = el.querySelector('div:first-child')?.textContent || '🔥';
+                document.getElementById('deleteReviewBtn').style.display = 'block';
+                openModal('reviewModal');
+            }
+            async function saveReview() {
+                if (!csrfToken) return;
+                const reviewId = document.getElementById('reviewId').value;
+                const startTime = document.getElementById('reviewStartTime').value;
+                const endTime = document.getElementById('reviewEndTime').value;
+                const note = document.getElementById('reviewNote').value;
+                const coach = document.getElementById('reviewCoach').value;
+                const emoji = document.getElementById('reviewEmoji').value;
+                try {
+                    if (reviewId) {
+                        const res = await fetch(`/reviews/${reviewId}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parseInt(startTime),
+                                end_time_seconds: endTime ? parseInt(endTime) : null,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    } else {
+                        const res = await fetch(`/videos/${videoId}/reviews`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': csrfToken
+                            },
+                            body: JSON.stringify({
+                                start_time_seconds: parseInt(startTime),
+                                end_time_seconds: endTime ? parseInt(endTime) : null,
+                                note,
+                                coach_name: coach,
+                                emoji
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            closeModal('reviewModal');
+                            loadMatchData();
+                        } else alert(data.message || 'Error');
+                    }
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+            async function deleteReview(reviewId) {
+                if (!csrfToken) return;
+                if (!confirm('Delete this note?')) return;
+                try {
+                    const res = await fetch(`/reviews/${reviewId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': csrfToken
+                        }
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else alert(data.message || 'Error');
+                } catch (e) {
+                    alert('Error: ' + e.message);
+                }
+            }
+
+            // Playlist navigation
+            document.addEventListener('DOMContentLoaded', function() {
+                const videoPlayer = document.getElementById('videoPlayer');
+                const playlistControls = document.getElementById('playlistControls');
+                const autoplayToggle = document.getElementById('autoplayToggle');
+                if (videoPlayer) {
+                    videoPlayer.volume = 0.5;
+                    const playPromise = videoPlayer.play();
+                    if (playPromise !== undefined) {
+                        playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked'));
+                    }
+                    if (nextVideoUrl) {
+                        videoPlayer.addEventListener('ended', () => {
+                            if (autoplayEnabled) window.location.href = nextVideoUrl;
+                        });
+                    }
+                }
+                if (playlistControls) {
+                    const videoContainer = document.getElementById('videoContainer');
+                    videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible'));
+                    videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible'));
+                    setTimeout(() => playlistControls.classList.add('visible'), 2000);
+                    setTimeout(() => playlistControls.classList.remove('visible'), 6000);
+                }
+                if (autoplayToggle) {
+                    autoplayToggle.addEventListener('change', function() {
+                        autoplayEnabled = this.checked;
+                        localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                    });
+                    const saved = localStorage.getItem('playlistAutoplay');
+                    if (saved !== null) {
+                        autoplayEnabled = saved === '1';
+                        autoplayToggle.checked = autoplayEnabled;
+                    }
+                }
+                document.addEventListener('keydown', function(e) {
+                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        if (previousVideoUrl) window.location.href = previousVideoUrl;
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        if (nextVideoUrl) window.location.href = nextVideoUrl;
+                    }
+                });
+            });
+
+            function goToPreviousVideo() {
+                if (previousVideoUrl) window.location.href = previousVideoUrl;
+            }
+
+            function goToNextVideo() {
+                if (nextVideoUrl) window.location.href = nextVideoUrl;
+            }
+        </script>
+    @endsection
diff --git a/resources/views/videos/types/music.blade.php b/resources/views/videos/types/music.blade.php
index e23ce88..d3688b4 100644
--- a/resources/views/videos/types/music.blade.php
+++ b/resources/views/videos/types/music.blade.php
@@ -210,81 +210,13 @@
             color: var(--text-secondary);
         }
 
-        .video-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .yt-action-btn {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            border-radius: 20px;
-            border: none;
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .yt-action-btn:hover {
-            background: var(--border-color);
-        }
-
-        .action-btn,
-        .comments-section .action-btn {
-            border: none;
-            border-radius: 8px;
-            padding: 8px 14px;
-            font-size: 0.82rem;
-            font-weight: 500;
-            cursor: pointer;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            transition: all 0.2s ease;
-        }
-
-        .action-btn:hover,
-        .comments-section .action-btn:hover {
-            background: var(--border-color);
-            transform: translateY(-1px);
-        }
-
-        .action-btn:active,
-        .comments-section .action-btn:active {
-            transform: translateY(0);
-        }
-
-        .action-btn svg,
-        .action-btn i,
-        .comments-section .action-btn svg,
-        .comments-section .action-btn i {
-            flex-shrink: 0;
-        }
-
-        .action-btn.comment-btn {
-            background: var(--brand-red);
-            color: white;
-            border-color: var(--brand-red);
-        }
-
-        .yt-action-btn.liked {
-            color: var(--brand-red);
-        }
-
         /* Channel Row */
         .channel-row {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 16px 0;
+            overflow: visible;
         }
 
         .channel-info {
@@ -310,18 +242,6 @@
             color: var(--text-secondary);
         }
 
-        .subscribe-btn {
-            background: white;
-            color: black;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 18px;
-            font-weight: 600;
-            font-size: 14px;
-            cursor: pointer;
-            white-space: nowrap;
-        }
-
         /* Description */
         .video-description {
             background: var(--bg-secondary);
@@ -432,8 +352,16 @@
 
             .video-actions {
                 width: 100%;
-                overflow-x: auto;
-                justify-content: flex-start;
+                justify-content: flex-end;
+            }
+
+            .video-actions>.desktop-action {
+                display: none !important;
+            }
+
+            .mobile-action-dropdown {
+                display: block;
+                margin-left: auto;
             }
 
             .yt-main {
@@ -546,76 +474,7 @@
                 </div>
             </div>
 
-            <!-- Channel Row - All in one line -->
-            <div class="channel-row"
-                style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
-                <div style="display: flex; align-items: center; gap: 12px;">
-                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none"
-                        style="color: inherit; display: flex; align-items: center; gap: 12px;">
-                        @if ($video->user)
-                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar"
-                                style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
-                        @else
-                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
-                        @endif
-                        <div>
-                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
-                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">
-                                {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
-                        </div>
-                    </a>
-                </div>
-
-                <div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
-                    @auth
-                        @if (Auth::id() !== $video->user_id)
-                            <button class="subscribe-btn">Subscribe</button>
-                        @else
-                            <button class="action-btn" onclick="openEditVideoModal({{ $video->id }})">
-                                <i class="bi bi-pencil"></i>
-                                <span>Edit</span>
-                            </button>
-                        @endif
-                    @else
-                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
-                    @endauth
-
-                    @auth
-                        <form method="POST"
-                            action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
-                            class="d-inline">
-                            @csrf
-                            <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
-                                <i
-                                    class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
-                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
-                            </button>
-                        </form>
-                    @else
-                        <a href="{{ route('login') }}" class="yt-action-btn">
-                            <i class="bi bi-hand-thumbs-up"></i> Like
-                        </a>
-                    @endauth
-
-                    @if ($video->isShareable())
-                        <button class="action-btn"
-                            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
-                            <i class="bi bi-share"></i> Share
-                        </button>
-                    @endif
-
-                    <!-- Save to Playlist Button -->
-                    <button class="action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
-                        </svg>
-                        <span>Save</span>
-                    </button>
-
-
-                </div>
-            </div>
+            <x-channel-row :video="$video" />
 
             <!-- Description Box -->
             @if ($video->description)
@@ -687,84 +546,45 @@
                 </style>
             @endif
 
-            <!-- Comment Section -->
-            <div class="comments-section"
-                style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
-                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
-                    Comments <span
-                        style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
-                </h3>
+            <x-video-comments :video="$video" />
 
-                @auth
-                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
-                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;"
-                            alt="{{ Auth::user()->name }}">
-                        <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
-                            <textarea id="commentBody" class="form-control" placeholder="Add a comment... Use @ to mention someone"
-                                rows="1"
-                                style="background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-primary); border-radius: 0; padding: 12px 0 8px 0; flex: 1; margin: 0; height: 40px; font-size: 14px; outline: none; overflow: hidden;"></textarea>
-                            <button type="button" class="action-btn"
-                                onclick="document.getElementById('commentBody').value = ''" style="flex-shrink: 0;">
-                                <i class="bi bi-x-lg"></i>
-                                <span>Cancel</span>
-                            </button>
-                            <button type="button" class="action-btn comment-btn"
-                                onclick="submitComment({{ $video->id }})" style="flex-shrink: 0;">
-                                <i class="bi bi-chat-dots"></i>
-                                <span>Comment</span>
-                            </button>
-                        </div>
-                    </div>
-                @else
-                    <div
-                        style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
-                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
-                    </div>
-                @endauth
 
-                <div id="commentsList">
-                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
-                        @include('videos.partials.comment', ['comment' => $comment])
-                    @empty
-                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the
-                            first to comment!</p>
-                    @endforelse
-                </div>
-            </div>
 
-            <script>
-                function submitComment(videoId) {
-                    const body = document.getElementById('commentBody').value.trim();
-                    if (!body) return;
+        </div>
 
-                    fetch(`/videos/${videoId}/comments`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                            },
-                            body: JSON.stringify({
-                                body: body
-                            })
+        <script>
+            function submitComment(videoId) {
+                const body = document.getElementById('commentBody').value.trim();
+                if (!body) return;
+
+                fetch(`/videos/${videoId}/comments`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        },
+                        body: JSON.stringify({
+                            body: body
                         })
-                        .then(response => response.json())
-                        .catch(error => {
-                            console.error('Error:', error);
-                            alert('Failed to post comment: ' + error);
-                        })
-                        .then(data => {
-                            if (data && data.success) {
-                                document.getElementById('commentBody').value = '';
-                                addCommentToList(data.comment);
-                            } else {
-                                alert('Failed to post comment');
-                            }
-                        });
-                }
+                    })
+                    .then(response => response.json())
+                    .catch(error => {
+                        console.error('Error:', error);
+                        alert('Failed to post comment: ' + error);
+                    })
+                    .then(data => {
+                        if (data && data.success) {
+                            document.getElementById('commentBody').value = '';
+                            addCommentToList(data.comment);
+                        } else {
+                            alert('Failed to post comment');
+                        }
+                    });
+            }
 
-                function addCommentToList(comment) {
-                    const commentsList = document.getElementById('commentsList');
-                    const commentHtml = `
+            function addCommentToList(comment) {
+                const commentsList = document.getElementById('commentsList');
+                const commentHtml = `
                     <div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-${comment.id}">
                         <img src="${comment.user.avatar_url}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="${comment.user.name}">
                         <div style="flex: 1;">
@@ -783,177 +603,176 @@
                         </div>
                     </div>
                 `;
-                    commentsList.insertAdjacentHTML('afterbegin', commentHtml);
-                    const commentCount = document.querySelector('h3 span');
-                    if (commentCount) {
-                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
-                        commentCount.textContent = `(${count})`;
-                    }
+                commentsList.insertAdjacentHTML('afterbegin', commentHtml);
+                const commentCount = document.querySelector('h3 span');
+                if (commentCount) {
+                    const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1;
+                    commentCount.textContent = `(${count})`;
                 }
+            }
 
-                function deleteComment(commentId) {
-                    if (confirm('Are you sure you want to delete this comment?')) {
-                        fetch(`/comments/${commentId}`, {
-                                method: 'DELETE',
-                                headers: {
-                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                                }
-                            })
-                            .then(response => response.json())
-                            .then(data => {
-                                if (data.success) {
-                                    document.getElementById('comment-' + commentId).remove();
-                                    const commentCount = document.querySelector('h3 span');
-                                    if (commentCount) {
-                                        const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
-                                        commentCount.textContent = `(${count})`;
-                                    }
-                                }
-                            });
-                    }
-                }
-
-                document.addEventListener('DOMContentLoaded', function() {
-                    const commentTexts = document.querySelectorAll('.comment-body');
-                    commentTexts.forEach(text => {
-                        const html = text.innerHTML.replace(/@(\w+)/g,
-                            '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
-                        text.innerHTML = html;
-                    });
-                });
-
-                function submitReply(videoId, parentId) {
-                    const textarea = document.querySelector(`#replyForm${parentId} textarea`);
-                    const body = textarea.value.trim();
-                    if (!body) return;
-
-                    fetch(`/videos/${videoId}/comments`, {
-                            method: 'POST',
+            function deleteComment(commentId) {
+                if (confirm('Are you sure you want to delete this comment?')) {
+                    fetch(`/comments/${commentId}`, {
+                            method: 'DELETE',
                             headers: {
-                                'Content-Type': 'application/json',
                                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                            },
-                            body: JSON.stringify({
-                                body: body,
-                                parent_id: parentId
-                            })
+                            }
                         })
                         .then(response => response.json())
                         .then(data => {
                             if (data.success) {
-                                location.reload();
+                                document.getElementById('comment-' + commentId).remove();
+                                const commentCount = document.querySelector('h3 span');
+                                if (commentCount) {
+                                    const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1;
+                                    commentCount.textContent = `(${count})`;
+                                }
                             }
                         });
                 }
-            </script>
-        </div>
+            }
 
-        <!-- Sidebar - Up Next / Recommendations -->
-        <div class="yt-sidebar-container">
-            @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
-                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
-                    <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
-                    {{ $playlist->name }}
-                    <span
-                        style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
-                        videos)</span>
-                </h3>
-                <div class="recommended-videos-list">
-                    @foreach ($playlistVideos as $index => $playlistVideo)
-                        @if ($playlistVideo->id !== $video->id)
-                            <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
-                                onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
-                                <div class="sidebar-thumb" style="position: relative;">
-                                    @if ($playlistVideo->thumbnail)
-                                        <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
-                                            alt="{{ $playlistVideo->title }}">
-                                    @else
-                                        <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
-                                            alt="{{ $playlistVideo->title }}">
-                                    @endif
-                                    @if ($playlistVideo->duration)
-                                        <span
-                                            class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
-                                    @endif
-                                    @if ($playlistVideo->is_shorts)
-                                        <span class="yt-shorts-badge"
-                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
-                                            <i class="bi bi-collection-play-fill"></i> SHORTS
-                                        </span>
-                                    @endif
-                                    <!-- Playlist position indicator -->
-                                    <span
-                                        style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
-                                        {{ $index + 1 }}
+            document.addEventListener('DOMContentLoaded', function() {
+                const commentTexts = document.querySelectorAll('.comment-body');
+                commentTexts.forEach(text => {
+                    const html = text.innerHTML.replace(/@(\w+)/g,
+                        '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                    text.innerHTML = html;
+                });
+            });
+
+            function submitReply(videoId, parentId) {
+                const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                const body = textarea.value.trim();
+                if (!body) return;
+
+                fetch(`/videos/${videoId}/comments`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        },
+                        body: JSON.stringify({
+                            body: body,
+                            parent_id: parentId
+                        })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            location.reload();
+                        }
+                    });
+            }
+        </script>
+    </div>
+
+    <!-- Sidebar - Up Next / Recommendations -->
+    <div class="yt-sidebar-container">
+        @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
+            <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
+                <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
+                {{ $playlist->name }}
+                <span
+                    style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
+                    videos)</span>
+            </h3>
+            <div class="recommended-videos-list">
+                @foreach ($playlistVideos as $index => $playlistVideo)
+                    @if ($playlistVideo->id !== $video->id)
+                        <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
+                            onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
+                            <div class="sidebar-thumb" style="position: relative;">
+                                @if ($playlistVideo->thumbnail)
+                                    <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}"
+                                        alt="{{ $playlistVideo->title }}">
+                                @else
+                                    <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
+                                        alt="{{ $playlistVideo->title }}">
+                                @endif
+                                @if ($playlistVideo->duration)
+                                    <span class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
+                                @endif
+                                @if ($playlistVideo->is_shorts)
+                                    <span class="yt-shorts-badge"
+                                        style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                        <i class="bi bi-collection-play-fill"></i> SHORTS
                                     </span>
+                                @endif
+                                <!-- Playlist position indicator -->
+                                <span
+                                    style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
+                                    {{ $index + 1 }}
+                                </span>
+                            </div>
+                            <div class="sidebar-info">
+                                <div class="sidebar-title">
+                                    <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                        style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                    {{ Str::limit($playlistVideo->title, 60) }}
                                 </div>
-                                <div class="sidebar-info">
-                                    <div class="sidebar-title">
-                                        <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
-                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
-                                        {{ Str::limit($playlistVideo->title, 60) }}
-                                    </div>
-                                    <div class="sidebar-meta">
-                                        <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
-                                        <div>{{ number_format($playlistVideo->view_count) }} views •
-                                            {{ $playlistVideo->created_at->diffForHumans() }}</div>
-                                    </div>
+                                <div class="sidebar-meta">
+                                    <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
+                                    <div>{{ number_format($playlistVideo->view_count) }} views •
+                                        {{ $playlistVideo->created_at->diffForHumans() }}</div>
                                 </div>
                             </div>
-                        @endif
+                        </div>
+                    @endif
+                @endforeach
+            </div>
+            @if ($playlist->canEdit(Auth::user()))
+                <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
+                    style="margin-top: 12px; display: inline-block;">
+                    <i class="bi bi-pencil"></i> Edit Playlist
+                </a>
+            @endif
+        @else
+            <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+            @if ($recommendedVideos && $recommendedVideos->count() > 0)
+                <div class="recommended-videos-list">
+                    @foreach ($recommendedVideos as $recVideo)
+                        <div class="sidebar-video-card"
+                            onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
+                            <div class="sidebar-thumb">
+                                @if ($recVideo->thumbnail)
+                                    <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
+                                        alt="{{ $recVideo->title }}">
+                                @else
+                                    <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
+                                        alt="{{ $recVideo->title }}">
+                                @endif
+                                @if ($recVideo->duration)
+                                    <span class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
+                                @endif
+                                @if ($recVideo->is_shorts)
+                                    <span class="yt-shorts-badge"
+                                        style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
+                                        <i class="bi bi-collection-play-fill"></i> SHORTS
+                                    </span>
+                                @endif
+                            </div>
+                            <div class="sidebar-info">
+                                <div class="sidebar-title">
+                                    <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
+                                        style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
+                                    {{ Str::limit($recVideo->title, 60) }}
+                                </div>
+                                <div class="sidebar-meta">
+                                    <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
+                                    <div>{{ number_format($recVideo->view_count) }} views •
+                                        {{ $recVideo->created_at->diffForHumans() }}</div>
+                                </div>
+                            </div>
+                        </div>
                     @endforeach
                 </div>
-                @if ($playlist->canEdit(Auth::user()))
-                    <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
-                        style="margin-top: 12px; display: inline-block;">
-                        <i class="bi bi-pencil"></i> Edit Playlist
-                    </a>
-                @endif
             @else
-                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
-                @if ($recommendedVideos && $recommendedVideos->count() > 0)
-                    <div class="recommended-videos-list">
-                        @foreach ($recommendedVideos as $recVideo)
-                            <div class="sidebar-video-card"
-                                onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
-                                <div class="sidebar-thumb">
-                                    @if ($recVideo->thumbnail)
-                                        <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}"
-                                            alt="{{ $recVideo->title }}">
-                                    @else
-                                        <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
-                                            alt="{{ $recVideo->title }}">
-                                    @endif
-                                    @if ($recVideo->duration)
-                                        <span class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
-                                    @endif
-                                    @if ($recVideo->is_shorts)
-                                        <span class="yt-shorts-badge"
-                                            style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
-                                            <i class="bi bi-collection-play-fill"></i> SHORTS
-                                        </span>
-                                    @endif
-                                </div>
-                                <div class="sidebar-info">
-                                    <div class="sidebar-title">
-                                        <i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
-                                            style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
-                                        {{ Str::limit($recVideo->title, 60) }}
-                                    </div>
-                                    <div class="sidebar-meta">
-                                        <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
-                                        <div>{{ number_format($recVideo->view_count) }} views •
-                                            {{ $recVideo->created_at->diffForHumans() }}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        @endforeach
-                    </div>
-                @else
-                    <div class="text-secondary">No recommendations available yet. Check back later!</div>
-                @endif
+                <div class="text-secondary">No recommendations available yet. Check back later!</div>
             @endif
-        </div>
+        @endif
+    </div>
 
     </div>
 
diff --git a/routes/web.php b/routes/web.php
index 98a80f4..3630454 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -133,5 +133,3 @@ Route::delete('/points/{point}', [MatchEventController::class, 'destroyPoint'])-
 Route::post('/videos/{video}/reviews', [MatchEventController::class, 'storeReview'])->name('match.storeReview');
 Route::put('/reviews/{review}', [MatchEventController::class, 'updateReview'])->name('match.updateReview');
 Route::delete('/reviews/{review}', [MatchEventController::class, 'destroyReview'])->name('match.destroyReview');
-
-// });