kineticTrack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important; /* Aligns items cleanly at the start */
  /*gap: 16px !important;
  padding: 10px !important;*/
  overflow-x: auto !important;
}

#kineticTrack .history-video-card {
  /* Set a baseline auto-scaling width or explicit block size for desktop 
  width: 220px !important; 
  flex-shrink: 0 !important;
  margin: 0 auto !important;             /* Distributes extra side-margins completely evenly */
}
        .history-panel-wrapper {
            background: #141414;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            padding: 20px 0;
            width: 100%;
            max-width: 900px;
            margin: 20px auto;
            position: relative;
        }
        .panel-section-title {
            color: #aaaaaa;
            font-size: 13px;
            font-weight: 600;
            margin: 0 0 14px 16px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            user-select: none;
        }
        /* ⚡ The Horizontal Slider Track */
        .scroll-panel-track {
            display: flex;
            gap: 14px;
            padding: 0 16px 12px 16px;
            overflow-x: auto;
            overflow-y: hidden;
            /* Webkit smooth scrolling for mobile */
            -webkit-overflow-scrolling: touch; 
            /* Custom cursor to signal grab interaction to desktop users */
            cursor: grab;
            user-select: none;
            /* Hide Default Browser Scrollbars */
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scroll-panel-track::-webkit-scrollbar {
            display: none;
        }
        /* Changes to a closed fist when actively dragging */
        .scroll-panel-track.dragging {
            cursor: grabbing;
            scroll-behavior: auto; /* Temporarily kills CSS smoothing during active drag */
        }

        .history-video-card {
            /**/flex: 0 0 120px;/**/
            display: flex;
            /**/flex-direction: column;/**/
            pointer-events: auto; /* Ensures links work inside the container */

            align-items: center;
            
            border-radius: 4px;
            border-bottom: 1px solid #2c2c2c;
            transition: background 0.2s, opacity 0.2s;
        }

        .thumb-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #1e1e1e;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #252525;
            transition: border-color 0.2s ease;
        }
        .history-video-card:hover .thumb-wrapper {
            border-color: #2ed573;
        }
        .video-thumb {
            border: red solid 0px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none; /* Prevents desktop browser image-dragging behavior */
        }
        .duration-badge {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.8);
            color: #ffffff;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        .progress-bar-track {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.2);
        }
        .progress-fill {
            height: 100%;
            background: #2ed573;
            width: 0;
            transition: width 0.3s;
        }
        .video-meta {
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .video-title {
            color: #ffffff;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .video-sub {
            /*color: #777777;*/
            color: #b3b3b3 !important;
            font-size: 11px;
        }


@media (max-width: 768px) {
  #kineticTrack .history-video-card {
    width: 35vw !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #kineticTrack .history-video-card .thumb-wrapper {
    width: 35vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  #kineticTrack .history-video-card .video-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #kineticTrack .history-video-card .video-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #kineticTrack .history-video-card .video-sub {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


@media (max-width: 768px) {
  #kineticTrack {
    gap: 12px !important;                 /* Snaps the mobile item gaps to a tighter, equal size */
    padding: 8px !important;
  }

  #kineticTrack .history-video-card {
    /* Use a stable percentage width so the track flex engine can compute the gaps evenly
    width: 40% !important; 
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 auto !important;            /* Balances any leftover whitespace on both sides */
  }

  #kineticTrack .history-video-card .thumb-wrapper {
    width: 35vw !important;               /* Thumb bounds match the card width exactly */
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #kineticTrack .history-video-card .video-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #kineticTrack .history-video-card .video-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #kineticTrack .history-video-card .video-sub {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* 1. Prevent the metadata text block from expanding the card layout */
.video-meta.custom-marquee {
  overflow: hidden !important;
  white-space: nowrap !important;
  min-width: 0 !important; /* ⚡ CRUCIAL: Tells the flex engine it's allowed to shrink shorter than the text inside it */
  flex: 1 !important;
}

/* 2. Protect the thumbnail from layout distortion */
.thumb-wrapper {
  flex-shrink: 0 !important; /* ⚡ PREVENTS the text from pushing, growing, or distorting the image block */
  width: 120px !important;    /* Force your exact desired thumbnail width */
  height: 68px !important;   /* Force your exact desired thumbnail height (16:9) */
}

/* 3. Ensure the image completely respects the wrapper boundaries */
.video-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Keeps the aspect ratio clean without stretching */
}
.video-title.marquee-text {
  display: inline-block !important;
  white-space: nowrap;
  /* 🟢 Auto-run the back and forth slide sequence directly via CSS */
  animation: marqueeShift 12s ease-in-out infinite alternate;
}

@keyframes marqueeShift {
  0%, 15% { transform: translateX(0); } /* Hold at start */
  85%, 100% { transform: translateX(var(--scroll-distance, 0)); } /* Slide & hold at end */
  /** 85%, 100% { transform: translateX(calc(var(--scroll-distance, 0px) * 0.9)) !important; } /**/
  /** 85%, 100% {transform: translateX(max(var(--scroll-distance, 0px), -45px)) !important; } /**/

}

/* 1. Lock down the main card container */
.history-video-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100px !important;
  /** min-width: 150px !important; /**/
  max-width: 150px !important;
  /*overflow: hidden !important; */
}
@media (min-width: 768px) {
  .history-video-card {
    width: 150px !important;         /* Scales up perfectly on desktop */
    min-width: 150px !important;     /* 🟢 Desktop gets its hard limit back */
    overflow: hidden !important;     /* 🟢 Desktop clips layout safely */
  }
}

/* 2. Freeze the thumbnail box dimensions */
.history-video-card .thumb-wrapper {
  width: 100% !important;            /* Take full width of the 150px card */
  height: 84px !important;           /* Perfect 16:9 ratio aspect constraint */
  min-height: 84px !important;
  max-height: 84px !important;
  flex-shrink: 0 !important;         /* ⚡ CRUCIAL: Blocks text from squishing the image */
  position: relative;
  overflow: hidden;
}

/* 3. Force the image to scale cleanly inside that frozen box */
.history-video-card .video-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* Crops without distortion */
}

/* 4. Clamp the text block container to the remaining card space */
.history-video-card .video-meta.custom-marquee {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;           /* ⚡ CRUCIAL Flexbox fix to allow inner content to overflow safely */
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* 5. Force the moving text layer to maintain its giant native width */
.history-video-card .video-title.marquee-text {
  display: inline-block !important;
  width: max-content !important;   /* 🟢 CRUCIAL: Tells the text to stretch to its real size, regardless of the card width */
  white-space: nowrap !important;
}