body {
    margin: 0;
    background-color: #1a1a1a; /* Darker background for better contrast */
    color: #e0e0e0; /* Lighter text for readability */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* More modern font stack */
}

.container {
    display: flex;
    height: 100vh;
    flex-direction: row;
}

.sidebar {
    width: 300px; /* Fixed width for sidebar for consistency, adjust as needed */
    min-width: 250px; /* Minimum width to prevent content from squishing */
    background-color: #282828; /* Slightly lighter than body for distinction */
    overflow-y: auto;
    padding: 15px; /* Increased padding */
    box-sizing: border-box;
    border-right: 1px solid #3a3a3a; /* Subtle separator */
    display: flex; /* Use flexbox for internal sidebar layout */
    flex-direction: column; /* Stack search and list vertically */
}

.sidebar input {
    position: sticky; /* Keep search input visible */
    top: 0;
    width: 100%;
    padding: 10px 12px; /* Adjusted padding */
    box-sizing: border-box;
    z-index: 10; /* Ensure it stays above list items */
    background-color: #282828; /* Match sidebar background */
    border: 1px solid #444; /* Subtle border */
    border-radius: 4px; /* Slightly rounded corners */
    color: #e0e0e0;
    margin-bottom: 15px; /* Space below search bar */
}

.sidebar input::placeholder {
    color: #bbb; /* Placeholder text color */
}

#videoList {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Allows the list to take up available space */
}

#videoList li {
    padding: 10px 12px; /* Padding for list items */
    margin-bottom: 5px; /* Space between list items */
    cursor: pointer;
    border-radius: 4px; /* Rounded corners for list items */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition on hover */
    /* Remove or change these properties to allow text wrapping: */
    /* white-space: nowrap; */ /* This prevents text wrapping */
    /* overflow: hidden; */ /* This hides overflow text */
    /* text-overflow: ellipsis; */ /* This adds ellipsis for long titles */

    /* To allow text to wrap, you typically don't need to add anything new here
       unless you want to control how words break (e.g., word-break: break-all;).
       By default, text will wrap if there's enough space.
       If you want to explicitly allow word breaks within words, you can add: */
    word-wrap: break-word; /* Allows long words to break and wrap */
    /* Or for more aggressive breaking: */
    /* word-break: break-all; */ /* Breaks words at any character to fit */
}

#videoList li:hover {
    background-color: #3a3a3a; /* Highlight on hover */
    color: #ffffff; /* Brighter text on hover */
}

#videoList li.active { /* Optional: Add a class for the currently playing video */
    background-color: #007bff; /* Highlight active video with a primary color */
    color: #ffffff;
}

.videoFrame {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Pure black for video player background */
    padding: 10px; /* Add padding to all four sides */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%; /* Full width on mobile */
        height: 40vh; /* Shorter sidebar on mobile */
        border-right: none; /* Remove right border */
        border-bottom: 1px solid #3a3a3a; /* Add bottom border */
        position: relative; /* Ensure sticky input works within this height */
    }

    .sidebar input {
        position: sticky; /* Keep sticky for search */
        top: 0;
    }

    .videoFrame {
        height: 60vh; /* Larger video frame on mobile */
    }
}

/* Optional: Scrollbar styling for a cleaner look */
/* For Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbars if they appear */
}

::-webkit-scrollbar-track {
    background: #282828;
}

::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #777;
}