* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Modern font stack */
    background: #f0f0f0; /* Light grey background */
    color: #333; /* Dark grey text */
    overflow: hidden;
}

.container {
    width: 100vw;
    height: 100vh;
    position: relative;
}

#scene-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 130px); /* Adjust height to leave space for controls, approx */
    z-index: 1;
    background: transparent; /* Make scene background transparent */
}

.player-controls {
    width: 100%;
    padding: 20px 25px;
    background: #ffffff; /* White background */
    backdrop-filter: none; /* Remove blur for solid look */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 18px; /* Adjusted gap */
    border-top: 1px solid #e0e0e0; /* Light grey border */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); /* Subtle top shadow */
}

.music-source-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 5px; /* Reduced margin */
    justify-content: center;
}

/* Default Button Style */
button, label[for="local-music"] {
    padding: 8px 18px;
    border: 1px solid #d0d0d0; /* Light grey border */
    border-radius: 8px; /* Less rounded */
    background: #ffffff; /* White background */
    color: #555; /* Medium grey text */
    cursor: pointer;
    transition: all 0.15s ease-out;
    font-weight: 500; /* Medium weight */
    box-shadow: none; /* Remove default shadow */
    text-align: center;
}

/* Hover/Active States */
/* We will use JS (GSAP) to handle hover for smoother background transition */
button:active, label[for="local-music"]:active {
    transform: scale(0.96);
    background-color: #f5f5f5; /* Slightly darker on click */
    border-color: #c0c0c0;
}

/* Connected Button Style */
button.connected {
    background: #e8f5e9; /* Very light green */
    color: #2e7d32; /* Dark green text */
    border-color: #a5d6a7; /* Light green border */
    pointer-events: none;
    box-shadow: none;
}

input[type="file"] {
    display: none;
}

/* Progress Bar and Track Info */
.progress-track-container {
    display: flex;
    align-items: center;
    gap: 20px; /* Increased gap */
    width: 100%;
    padding: 0; /* Remove padding */
}

/* Playback Controls Container */
.playback-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 0;
    width: 100%;
}

/* Specific Playback Buttons */
.playback-controls button {
    padding: 0; /* Remove default padding */
    border-radius: 50%; /* Make control buttons circular */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background-color: #fff;
    transition: all 0.2s ease-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Make buttons slightly larger on hover */
.playback-controls button:hover {
    transform: scale(1.05);
    border-color: #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Font Awesome icon styles - Removed as SVGs are used now */
/* .playback-controls button i { */
/*    font-size: 18px; */
/*    color: inherit; */
/* } */

/* Adjust padding/line-height for text icons - Removed as flexbox handles SVG centering */
/* #prev-track, */
/* #next-track, */
/* #shuffle, */
/* #repeat { */
/*     padding-bottom: 12px; */
/* } */

/* Play/Pause button distinct */
#play-pause {
    width: 52px; /* Slightly larger */
    height: 52px;
    background-color: #f5f5f7; /* Slightly different background */
    border-color: #ccc;
}

#play-pause i {
    font-size: 20px; /* Slightly larger icon */
}

/* Style for active shuffle/repeat buttons */
#shuffle.active,
#repeat.active {
    color: #5a5a9f; /* Use accent color */
    border-color: #c4c4e0; /* Lighter accent border */
    background-color: #f0f0f8; /* Very light accent background */
}

/* Specific icon adjustment if needed */
#repeat.active.repeat-one {
   background-color: #dcdcf0; /* Slightly darker background for repeat-one */
   border-color: #a0a0d0;   /* Slightly darker border for repeat-one */
   color: #5a5a9f;       /* Keep the icon color consistent */
}

/* Progress Bar Style */
.progress-bar {
    flex: 1;
    height: 6px;
    background: #e0e0e0; /* Light grey background */
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

#progress {
    position: absolute;
    height: 100%;
    background: #5a5a9f; /* Use accent color for progress */
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
}

/* Volume control styling */
input[type="range"] {
    width: 100px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0; /* Match progress bar background */
    border-radius: 3px;
    cursor: pointer;
    margin-left: 15px; /* Add some space between buttons and volume */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #777; /* Darker grey thumb */
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease-out;
    border: none;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #777;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease-out;
}

input[type="range"]:hover::-webkit-slider-thumb {
    background: #555;
}

input[type="range"]:hover::-moz-range-thumb {
    background: #555;
}

/* Track Info Style */
.track-info {
    text-align: right;
    flex-basis: auto; /* Let it size based on content */
    min-width: 150px; /* Minimum width */
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#track-title {
    font-size: 1em;
    margin-bottom: 2px;
    font-weight: 600; /* Semi-bold */
    color: #222;
}

#track-artist {
    color: #666;
    font-size: 0.85em;
}

/* Remove pulse animation */
/* .pulse { ... } */
/* @keyframes pulse { ... } */

/* Spotify Embed */
#spotify-player-container {
    width: 100%;
    min-height: 80px;
    margin: 0; /* Remove margin */
    background: transparent; /* No extra background */
    border-radius: 8px; /* Match button radius */
    overflow: hidden;
    display: none; 
}

#spotify-player-iframe {
    border: 1px solid #e0e0e0; /* Add border to match theme */
    width: 100%;
    height: 80px;
    display: block;
    border-radius: 8px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    #scene-container {
        /* Give more height to controls on mobile */
        height: calc(100% - 180px);
    }

    .player-controls {
        padding: 15px 20px; /* Slightly reduce padding */
        gap: 12px; /* Reduce gap */
    }

    .music-source-selector button,
    .music-source-selector label[for="local-music"] {
        padding: 6px 14px; /* Smaller source buttons */
        font-size: 0.9em;
    }

    .progress-track-container {
        gap: 10px; /* Reduce gap */
        /* Optionally stack vertically if needed, but let's try reduced gap first */
        /* flex-direction: column; */
        /* align-items: stretch; */
    }

    .track-info {
        min-width: 100px; /* Allow it to shrink more */
        text-align: left; /* Align left on mobile often looks better */
    }
    #track-title {
        font-size: 0.9em;
    }
    #track-artist {
        font-size: 0.75em;
    }

    .playback-controls {
        gap: 10px; /* Reduce gap between controls */
    }

    .playback-controls button {
        width: 40px; /* Slightly smaller buttons */
        height: 40px;
    }

    #play-pause {
        width: 48px; /* Slightly smaller play/pause */
        height: 48px;
    }
    
    #play-pause svg {
         width: 18px; /* Adjust icon size within button */
         height: 18px;
    }
    
    .playback-controls button:not(#play-pause) svg {
         width: 16px; /* Adjust icon size within button */
         height: 16px;
    }

    input[type="range"] {
        width: 80px; /* Reduce volume slider width */
        margin-left: 10px;
    }
}

/* --- Queue Panel Styles --- */
#queue-panel {
  position: absolute;
  bottom: 100%; /* Position above the player controls */
  right: 25px; /* Align with the right padding of controls */
  width: 300px;
  max-height: 250px; /* Limit height and make scrollable */
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-bottom: none; /* Avoid double border with controls */
  border-radius: 8px 8px 0 0; /* Rounded top corners */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  padding: 10px 15px;
  z-index: 90; /* Below controls */
  display: none; /* Hidden by default */
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(10px); /* Start slightly lower for transition */
}

#queue-panel.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

#queue-panel h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.9em;
  color: #555;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 5px;
}

#queue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#queue-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.9em;
  border-bottom: 1px solid #f5f5f5;
}

#queue-list li:last-child {
  border-bottom: none;
}

#queue-list .track-title {
  flex-grow: 1;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#queue-list .track-actions {
  position: relative; /* Needed for absolute positioning of the menu */
}

#queue-list .track-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  font-size: 0.9em;
  color: #888;
  margin-left: 5px;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#queue-list .track-actions button:hover {
  color: #5a5a9f; /* Accent color */
}

/* Style for the new 'more options' button */
#queue-list .more-options-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  margin-left: 5px;
  color: #888;
  display: inline-flex; /* Align icon */
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#queue-list .more-options-button:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
  color: #333;
}

/* Styles for the pop-up action menu */
.queue-item-actions-menu {
  position: absolute;
  right: 0; /* Position relative to the .track-actions container */
  top: calc(100% + 2px); /* Position below the 'more options' button */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 110; /* Ensure it's above other elements */
  padding: 5px 0;
  min-width: 120px;
  display: none; /* Hidden by default */
}

.queue-item-actions-menu.visible {
  display: block;
}

.queue-item-actions-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 0.9em;
  color: #333;
  transition: background-color 0.15s ease;
}

.queue-item-actions-menu button:hover {
  background-color: #f5f5f5;
}

/* Add styles for the clear queue button */
#clear-queue-button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 0.85em;
  padding: 2px 5px;
  font-weight: 500;
  transition: color 0.15s ease;
}

#clear-queue-button:hover {
  color: #e57373; /* Light red on hover */
}

/* Adjustments for mobile */
@media (max-width: 768px) {
  #queue-panel {
    width: calc(100% - 40px); /* Make it wider on mobile */
    right: 20px; /* Align with mobile padding */
    max-height: 200px; /* Slightly reduce max height */
  }

  /* Make queue toggle button same size as others on mobile */
  .playback-controls #queue-toggle {
      width: 40px;
      height: 40px;
  }
  
  .playback-controls #queue-toggle svg {
       width: 16px;
       height: 16px;
  }
}