body {
    font-family: sans-serif;
    margin: 0;
    /* overflow: hidden; /* Prevent scrollbars during transition */
    background-color: #f0f0f0;
}

#app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative; /* Needed for positioning toggle button */
    transition: all 0.8s ease-in-out; /* Smooth transition for layout changes */
}

/* Sidebar / Initial Landing View Styles */
#album-info-sidebar {
    width: 100%; /* Start full width */
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    transition: all 0.8s ease-in-out, transform 0.3s ease-in-out; /* Add transform transition */
    overflow-y: auto; /* Allow scrolling if list is long */
    height: 100vh; /* Make sidebar full height for mobile overlay */
    z-index: 100; /* Ensure sidebar is above main content on mobile */
}

#album-info-sidebar img#album-cover-main {
    max-width: 300px; /* Adjust size */
    max-height: 300px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.8s ease-in-out;
}

#album-info-sidebar h2 {
    margin: 10px 0 5px 0;
}

#album-info-sidebar h3 {
    margin: 0 0 20px 0;
    color: #555;
}

#song-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 400px;
    width: 100%;
}

#song-list li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#song-list li:hover {
    background-color: #f9f9f9;
}

#song-list li.playing {
    font-weight: bold;
    color: #007bff; /* Highlight playing song */
}


/* Song View Styles (Initially Hidden/Off-screen) */
#song-view {
    width: 0; /* Start with zero width */
    flex-grow: 1; /* Will take remaining space later */
    position: relative; /* For absolute positioning of children */
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s ease-in-out 0.5s; /* Fade in after sidebar shrinks */
    overflow: hidden; /* Hide content until ready */
}

/* --- Styling for Audio Player in Main View --- */
#song-view #audio-player {
    display: none; /* Hide by default */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white background */
    padding: 5px 0; /* Add a little vertical padding */
    box-sizing: border-box;
    /* position: sticky; */ /* Optional: If you want it to stick at the top */
    /* top: 0; */         /* Optional: Required if sticky */
    /* z-index: 4; */     /* Optional: Above lyrics content if sticky */
}

/* Show the player ONLY when viewing a song */
#app-container.view-song #song-view #audio-player {
    display: block;
}

/* --- Background Scrolling Animation --- */

@keyframes scrollBackgroundDiagonal {
  /* Move from top-left area */
  0% {
    background-position: 0% 0%;
  }
  /* Move to bottom-right area */
  100% {
    background-position: 100% 100%;
  }
  /* The 'alternate' direction will handle the reversal */
}

#lyrics-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(3px) brightness(0.7); /* Blur/darken bg for readability */
    z-index: 1;
    
  /* Ensure background doesn't repeat if somehow smaller than container */
  background-repeat: no-repeat;
   /* --- IMPORTANT: Default animation state --- */
  /* Ensures animation doesn't run unless explicitly started by JS or class */
  animation-play-state: paused;
}

/* --- Background Overlay for Transitions --- */
#background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Fade to white */
    opacity: 0;               /* Start transparent */
    z-index: 2;               /* Above background, below lyrics */
    pointer-events: none;     /* Don't interfere with clicks */
    transition: opacity 0.5s ease-in-out; /* Control fade speed */
}

#background-overlay.fade-active {
    opacity: 1; /* Make it opaque white */
}
/* --- End of Overlay Styles --- */

#lyrics-content {
    position: relative; /* Place above background */
    z-index: 3;
    color: white;
    padding: 40px;
    height: 100%;
    overflow-y: auto; /* Allow lyrics scrolling */
    box-sizing: border-box;
    display: flex; /* Arrange columns side-by-side */
    gap: 30px; /* Space between columns */
}

.lyrics-column {
    flex: 1; /* Each column takes half the space */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for text */
    padding: 20px;
    border-radius: 8px;
    height: fit-content; /* Adjust height to content */
}

.lyrics-column h4 {
    margin-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.lyrics-column pre {
    white-space: pre-wrap; /* Allow text wrapping */
    word-wrap: break-word; /* Break long words */
    font-family: inherit; /* Use body font */
    font-size: 1rem;
    line-height: 1.6;
}


/* State Change: When a song is selected */
#app-container.view-song #album-info-sidebar {
    width: 300px; /* Shrink sidebar width */
    padding: 20px; /* Adjust padding */
    justify-content: flex-start; /* Align items to top */
    text-align: left;
}

#app-container.view-song #album-info-sidebar img#album-cover-main {
    max-width: 80px; /* Smaller image */
    max-height: 80px;
    margin-bottom: 15px;
    align-self: flex-start; /* Keep image to the left */
}



/* Apply and control the animation ONLY when viewing a song */
#app-container.view-song #lyrics-background {
  /* Apply the animation properties */
  animation-name: scrollBackgroundDiagonal;
  animation-duration: 240s; /* 2 minutes = 120 seconds */
  animation-timing-function: linear; /* Constant speed */
  animation-iteration-count: infinite; /* Loop forever */
  animation-direction: alternate; /* Reverse direction each cycle */

  /* --- Start the animation when the song view becomes active --- */
  /* This might be overridden by JS play/pause states below */
   animation-play-state: running;
}


#app-container.view-song #album-info-sidebar h2,
#app-container.view-song #album-info-sidebar h3 {
    text-align: left; /* Align text left */
    align-self: flex-start;
    width: 100%; /* Take full width for wrapping */
}
#app-container.view-song #album-info-sidebar h2{ font-size: 1.1em; }
#app-container.view-song #album-info-sidebar h3{ font-size: 0.9em; margin-bottom: 15px;}

#app-container.view-song #song-list {
     max-width: 100%; /* List takes full sidebar width */
}

#app-container.view-song #song-view {
    width: calc(100% - 300px); /* Take remaining width */
    opacity: 1; /* Fade in */
}



/* --- Menu Toggle Button --- */
#menu-toggle-btn {
    display: none; /* Hidden by default on desktop */
    position: fixed; /* Keep it fixed on screen */
    top: 10px;
    left: 10px;
    z-index: 101; /* Above sidebar */
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 1.5em;
    cursor: pointer;
    border-radius: 4px;
}

/* Make sure the audio player is not taking up space */
#audio-player {
    position: absolute;
    bottom: 10px;
    left: 10px; /* Or hide it completely if you don't want controls */
    z-index: 10; /* Keep above other elements if shown */
     /* display: none !important; */ /* Uncomment to fully hide */
}

/* Basic styling for the autoplay button */
#autoplay-toggle {
    padding: 8px 15px;
    margin-top: 15px; /* Space above the song list */
    margin-bottom: 15px; /* Space below the artist */
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

#autoplay-toggle:hover {
    background-color: #eee;
}

#autoplay-toggle.active {
    background-color: #e0f0ff; /* Light blue background when active */
    border-color: #a0c0ff;
    font-weight: bold;
}

/* Ensure button shrinks nicely in sidebar view */
#app-container.view-song #autoplay-toggle {
    align-self: flex-start; /* Align left in sidebar */
    margin-left: 0;
     margin-right: 0;
     width: auto; /* Adjust width automatically */
}

/* --- Audio Player Styling --- */

/* Hide the audio player by default when in the landing view */
#app-container.view-landing #audio-player {
    display: none;
}

/* Show and style the audio player when a song is being viewed */
#app-container.view-song #audio-player {
    display: block; /* Make it visible */
    width: 95%;    /* Make it take the full width of the sidebar */
    margin-top: 20px; /* Add some space above it */
    height: 40px;   /* Standard height for controls, adjust if needed */
    /* You might add other styles here if needed, like background */
}

/* Optional: Ensure consistency for browsers that might default differently */
#audio-player {
    box-sizing: border-box; /* Include padding/border in width */
}


/* === START: Mobile Styles (Media Query) === */
@media (max-width: 768px) { /* Adjust breakpoint as needed */

    #menu-toggle-btn {
        display: block; /* Show the toggle button */
    }

    /* HIDE song view completely on mobile landing */
    #app-container.view-landing #song-view {
        display: none;
        width: 0; /* Also set width to 0 just in case */
        opacity: 0;
    }

    /* SHOW song view ONLY when a song is active on mobile */
    #app-container.view-song #song-view {
        display: block;  /* Or flex if needed by children, but block is likely fine */
        width: 100%;     /* Take full width */
        opacity: 1;      /* Ensure it's visible */
         /* Remove calc() width from desktop if present */
    }

    #album-info-sidebar {
        position: fixed; /* Take sidebar out of flow, make it overlay */
        top: 0;
        left: 0;
        width: 280px; /* Fixed width for mobile menu */
        max-width: 80%; /* Max width */
        height: 100vh;
        background-color: #f8f8f8; /* Slightly different background maybe */
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
        /* --- Initially hidden --- */
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        padding-top: 60px; /* Space for fixed toggle button */
    }

    /* --- Hide sidebar ONLY when a song is playing AND the menu is NOT explicitly toggled visible --- */
    #app-container.view-song:not(.mobile-menu-visible) #album-info-sidebar {
        transform: translateX(-100%);
    }
    
    /* --- State when mobile menu is visible --- */
    #app-container.mobile-menu-visible #album-info-sidebar {
        transform: translateX(0); /* Slide it in */
    }

    /* --- Adjust Song View (Main Content) for Mobile --- */
    /* Make song view always take full width on mobile */
    #song-view,
    #app-container.view-song #song-view {
         display: block;
        width: 100% !important; /* Take full width */
        opacity: 1; /* Ensure it's always visible if view-song is active */
        /* padding-left: 10px; Add padding if needed due to fixed button */
    }
    
    
    /* ... (Rest of mobile styles: song-view display none/block, lyrics stacking etc. remain) ... */
     /* HIDE song view completely on mobile landing */
     #app-container.view-landing #song-view {
         display: none;
         width: 0;
         opacity: 0;
     }

     /* Adjust lyrics content padding if needed */
     #lyrics-content {
        padding: 40px 15px; /* Adjust padding for smaller screens */
        flex-direction: column; /* Stack lyrics columns on mobile */
     }
     .lyrics-column {
         width: 100%; /* Make columns full width when stacked */
     }


    #song-view #audio-player {
         display: none; /* Hidden by default */
         /* ... other styles ... */
    }
    #app-container.view-song #song-view #audio-player {
         display: block; /* Show when song is playing */
    }


}
/* === END: Mobile Styles === */