body {
    padding: 10px;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    /* Removed height: 100vh and overflow: hidden to allow page scrolling */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Reduced from 15px */
    width: 100%;
    box-sizing: border-box;
    /* Removed fixed height to allow natural content flow */
}

.header-section {
    flex-shrink: 0; /* Keep header fixed size */
    background: white;
    padding: 10px 15px; /* Reduced vertical padding from 15px to 10px */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-section h1 {
    font-size: 1.5rem; /* Smaller than default h1 */
    margin-bottom: 10px; /* Reduced from Bootstrap default */
    font-weight: 600;
}

.about-link {
    font-size: 0.875rem; /* Smaller font size */
    color: #2196f3;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.about-link:hover {
    background-color: #e3f2fd;
    text-decoration: none;
    color: #1976d2;
}

#playlist {
    background: white;
    border-radius: 8px;
    padding: 12px; /* Reduced from 15px */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: none; /* Initially hidden until part is selected */
    flex-direction: column;
    /* Removed flex: 1 and min-height: 0 to allow natural content height */
}

.playlist-header {
    font-size: 16px; /* Reduced from 18px */
    font-weight: bold;
    margin-bottom: 12px; /* Reduced from 15px */
    color: #333;
    flex-shrink: 0; /* Keep header fixed */
}

#playlist-items {
    /* Removed flex: 1, overflow-y: auto, and min-height: 0 to allow natural content flow */
}

/* Removed scrollbar styles since using natural page scrolling */

.playlist-item {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: all 0.2s ease;
}

.playlist-item:hover {
    background-color: #f8f9fa;
}

.playlist-item.active {
    background-color: #e8f4fd;
    border-color: #90caf9;
    font-weight: 500;
}

.playlist-item.active.playing {
    background-color: #e3f2fd;
    border-color: #2196f3;
    font-weight: bold;
}

.play-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon::before {
    content: "▶";
    font-size: 14px;
    color: #666;
}

.playlist-item.active .play-icon::before {
    content: "▶";
    color: #2196f3;
}

.playlist-item.active.playing .play-icon::before {
    content: "⏸";
    color: #2196f3;
}

.video-title {
    flex: 1;
}

.video-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-part {
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
    font-weight: normal;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.video-date {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    font-weight: normal;
}

.playlist-item.active .video-part {
    color: #1976d2;
}

.playlist-item.active .video-date {
    color: #1976d2;
}

.no-selection {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.player-container {
    position: sticky;
    top: 0;
    z-index: 10; /* Ensure it stays above other content when sticky */
    flex-shrink: 0; /* Keep player size fixed */
    background: white;
    border-radius: 8px;
    padding: 12px; /* Reduced from 15px */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.player-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    text-align: center;
}

.placeholder-content {
    max-width: 400px;
}

.placeholder-content h3 {
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.placeholder-content p {
    color: #888;
    margin-bottom: 0;
    line-height: 1.5;
    text-align: left;
}

.version-link {
    text-align: right;
    margin-top: 10px;
    max-width: 400px;
}

.version-link a {
    color: #2196f3;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.version-link a:hover {
    background-color: #e3f2fd;
    text-decoration: none;
    color: #1976d2;
}

#player {
    width: 100%;
    height: max(250px, 40vh); /* Reduced height to leave more room for playlist */
}

.controls {
    display: flex;
    gap: 8px; /* Reduced from 10px */
    margin-top: 10px; /* Reduced from 15px */
    justify-content: center;
}

.control-btn {
    padding: 8px 12px;
    background: transparent;
    color: #2196f3;
    border: 1px solid #2196f3;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 44px; /* Ensure minimum tap target size */
}

.control-btn:hover:not(:disabled) {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #1976d2;
}

.control-btn:disabled {
    background: transparent;
    color: #9e9e9e;
    border-color: #9e9e9e;
    cursor: not-allowed;
}

/* Hide text on smaller screens, show only icons */
.control-btn .btn-text {
    display: none;
}

/* Show text on larger screens */
@media (min-width: 480px) {
    .control-btn {
        padding: 8px 16px;
    }

    .control-btn .btn-text {
        display: inline;
    }

    /* Tablet landscape and small desktop - increased breakpoint for better iPad handling */
    @media (min-width: 900px) {
        body {
            padding: 20px;
        }

        .container {
            /* Removed fixed height to allow natural content flow and scrolling */
            flex-direction: row;
            flex-wrap: wrap;
        }

        .header-section {
            width: 100%;
            order: 1;
        }

        .player-container {
            flex: 1;
            min-width: 0; /* Allow flex item to shrink below content size */
            padding: 20px;
            overflow: hidden; /* Prevent content from overflowing */
            order: 2;
        }

        #playlist {
            width: 280px;
            min-width: 250px;
            max-width: 300px;
            flex-shrink: 0;
            padding: 20px;
            order: 3;
        }

        #playlist.visible {
            display: flex; /* Show when part is selected on larger screens */
        }

        #player {
            height: max(350px, 50vh); /* At least 50% of viewport height, minimum 350px */
            width: 100%;
        }
    }

    /* Large desktop */
    @media (min-width: 1024px) {
        .container {
            max-width: 1200px; /* Restore larger max-width on big screens */
            margin: 0 auto; /* Center the container */
        }

        #player {
            height: max(450px, 50vh); /* At least 50% of viewport height, minimum 450px */
        }

        #playlist {
            width: 300px;
            max-width: 320px;
        }
    }

    /* Extra large screens */
    @media (min-width: 1200px) {
        #player {
            height: max(500px, 50vh); /* At least 50% of viewport height, minimum 500px */
        }

        #playlist {
            width: 320px;
            max-width: 350px;
        }
    }

}