/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Import Nunito font */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

body {
  background-color: #08031A; /* Deep navy background instead of white */
  color: #fceaff; /* Light lavender text instead of black */
  font-family: 'Nunito', Verdana, sans-serif; /* Added Nunito as primary font */
  background-image: url('https://sadhost.neocities.org/images/tiles/aquagalaxy_small.gif');
  background-size: 65px;
  margin: 0;
  padding-bottom: 20px; /* Reduced space since player is hidden by default */
}

/* Global Audio Player Styles - Matching main site structure */
#global-player {
  position: fixed;
  bottom: -100px; /* Start off-screen */
  left: 0;
  width: 100%;
  background-color: #0D2914; /* Dark green background */
  border-top: 3px solid #2b8744;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000; /* Player z-index */
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: bottom 0.5s ease-in-out;
  flex-direction: column;
}

#global-player.visible {
  bottom: 0; /* Slide up into view */
}

.player-top {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 0 10px;
  margin-bottom: 10px;
}

.player-controls {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

.player-info {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.player-extra {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.player-controls-right {
  display: flex;
  align-items: center;
}

.control-btn {
  background-color: #2b8744;
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: #33c45a;
}

.control-btn.active {
  background-color: #33c45a;
  color: #0D2914;
}

.control-btn.pulse {
  animation: pulse 1s;
}

.play-btn {
  width: 50px;
  height: 50px;
  font-size: 20px;
}

.player-track-info {
  margin: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-album-cover {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 15px;
  object-fit: cover;
}

.track-title {
  font-weight: bold;
  color: #e3fce9;
}

.album-name {
  font-size: 0.9em;
  color: #a3f59f;
}

.progress-container {
  width: 100%;
  background-color: #041c0b;
  height: 5px;
  border-radius: 5px;
  margin-top: 5px;
  cursor: pointer;
}

.progress-bar {
  height: 100%;
  background-color: #33c45a;
  border-radius: 5px;
  width: 0%;
}

.volume-control {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Changed from flex-end to left-align volume control */
}

.volume-slider {
  width: 100px;
  margin: 0 10px;
}

.close-player {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 50%;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto; /* Added to push the button to the right */
}

.close-player:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Minimize button styles */
.minimize-player {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  line-height: 1; /* Ensure the minus sign is centered */
}

.minimize-player:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Minimized state for the player */
#global-player.minimized {
  height: auto !important;
  min-height: 40px !important;
  max-height: 40px !important;
  overflow: hidden;
  padding: 5px 15px !important; /* Added padding to prevent text cutoff */
}

#global-player.minimized .player-controls,
#global-player.minimized .player-info,
#global-player.minimized .player-extra,
#global-player.minimized .notes-section {
  display: none;
}

#global-player.minimized .player-top {
  margin-bottom: 0;
  justify-content: space-between; /* Spread items when minimized */
  padding: 0 !important; /* Reset padding for minimized state */
  width: 100%;
}

#global-player.minimized .minimize-player {
  transform: rotate(180deg); /* Flip the minus sign when minimized */
}

/* Minimized indicator */
.minimized-indicator {
  color: #e3fce9;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  padding: 0 10px !important; /* Added padding to prevent text cutoff */
  flex: 1; /* Allow the indicator to take up available space */
  overflow: hidden; /* Prevent text overflow */
  min-width: 0; /* Allows the element to shrink if needed */
}

.minimized-indicator .minimized-icon {
  margin-right: 8px;
  animation: pulse 2s infinite;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

#minimized-track-name {
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for long text */
  width: 100%; /* Take full width of the container */
  max-width: calc(100% - 30px); /* Limit width to prevent cutoff */
}

/* Queue section styles */
.player-queue {
  position: fixed;
  bottom: 180px;
  right: 20px;
  width: 300px;
  max-height: 400px;
  background-color: #0D2914;
  border: 2px solid #2b8744;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 1001; /* Increased z-index to appear in front of player */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #2b8744;
  border-bottom: 1px solid #33c45a;
}

.queue-header h4 {
  margin: 0;
  color: #e3fce9;
  font-size: 1rem;
}

.queue-close {
  background: none;
  border: none;
  color: #e3fce9;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.queue-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: background-color 0.2s;
}

.queue-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.queue-track-info {
  flex: 1;
  min-width: 0;
}

.queue-track-title {
  display: block;
  font-weight: bold;
  color: #e3fce9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-track-artist {
  display: block;
  font-size: 0.8em;
  color: #a3f59f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-remove {
  background: none;
  border: none;
  color: #a3f59f;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  margin-left: 8px;
}

.queue-remove:hover {
  color: #e3fce9;
  background-color: rgba(255, 255, 255, 0.2);
}

.queue-empty {
  text-align: center;
  padding: 20px;
  color: #a3f59f;
  font-style: italic;
}

/* Notes section styles */
.notes-section {
  margin-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  width: 100%;
}

.notes-section.expanded {
  max-height: 200px;
  overflow-y: auto;
}

.notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.notes-header h4 {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e3fce9;
  margin: 0;
}

.notes-content {
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  max-height: 150px;
  overflow-y: auto;
  color: #a3f59f;
}

.notes-icon {
  font-size: 1.2rem;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Album and Track Styles */
.album-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.album-item {
  padding: 12px 15px;
  margin-bottom: 10px;
  background-color: #1c6b32;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.album-item:hover {
  background-color: #33c45a;
  transform: translateX(5px);
}

.album-item.active {
  background-color: #041c0b;
  border-left: 4px solid #fceaff;
}

.track-list {
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
}

.track-item {
  padding: 10px 15px;
  margin-bottom: 8px;
  background-color: #0D2914;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.track-item:hover {
  background-color: #1c3a24;
}

.track-item:hover .queue-add-btn {
  opacity: 1;
}

.track-item.playing {
  background-color: #2b8744;
  border-left: 4px solid #fceaff;
}

.track-content {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.track-number {
  color: #a3f59f;
  font-weight: bold;
  width: 30px;
  flex-shrink: 0;
}

.track-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  padding-right: 10px;
}

.track-duration {
  color: #bdffcc;
  font-style: italic;
  margin-left: 10px;
  flex-shrink: 0;
}

.queue-add-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(43, 135, 68, 0.7);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  font-size: 14px;
}

.queue-add-btn:hover {
  background: rgba(51, 196, 90, 0.9);
  opacity: 1;
}

/* Responsive Design */
@media only screen and (max-width: 800px) {
  #global-player {
    flex-direction: column;
    padding: 10px;
  }
  
  .player-controls, .player-info, .player-extra {
    width: 100%;
    margin-bottom: 10px;
    justify-content: center;
  }
  
  .volume-control {
    justify-content: center;
  }
  
  .player-track-info {
    flex-direction: column;
    text-align: center;
  }
  
  .player-album-cover {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .player-extra {
    justify-content: center;
  }
  
  .close-player {
    margin-left: 10px; /* Adjust margin for mobile */
  }
  
  /* Adjust minimized indicator for mobile */
  .minimized-indicator {
    padding: 0 5px !important;
  }
  
  #minimized-track-name {
    max-width: calc(100% - 25px);
  }
  
  /* Adjust queue for mobile */
  .player-queue {
    width: 250px;
    right: 10px;
    bottom: 160px;
  }
}

@media only screen and (max-width: 500px) {
  .player-queue {
    width: calc(100% - 40px);
    right: 20px;
    left: 20px;
    bottom: 150px;
  }
  
  .track-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .track-content {
    width: 100%;
    margin-bottom: 5px;
  }
  
  .track-duration {
    align-self: flex-end;
    margin-left: 30px;
  }
  
  .queue-add-btn {
    position: static;
    transform: none;
    margin-left: 10px;
    opacity: 1;
  }
}

/* Link Styles */
a {
  color: #29c251;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #33c45a;
  text-decoration: underline;
}

/* Heading Styles */
h1, h2, h3 {
  color: #e3fce9;
  text-align: center; /* Center align headings */
}

/* Container Styles */
#container {
  max-width: 900px;
  margin: 0 auto;
}