/* General mobile adjustments */
body, html {
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Player container */
#player-container {
  width: 100%;
  height: auto;
  min-height: 50vh; /* Minimum height for small screens */
  position: relative;
  z-index: 1; /* Ensure player stays below sidebars but above background */
}

/* Sidebars */
.sidebar-left, .sidebar-right {
  width: 80%; /* Reduced from 100% to allow player visibility */
  max-width: 300px; /* Keep max width for larger screens */
  height: 100%;
  z-index: 1000; /* Above player */
  transition: transform 0.3s ease-in-out; /* Smooth slide */
}

.sidebar-left {
  transform: translateX(-100%);
}

.show-sidebar-left {
  transform: translateX(0);
}

.sidebar-right {
  transform: translateX(100%);
}

.show-sidebar-right {
  transform: translateX(0);
}

/* Main content */
.main-content {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 0; /* Below sidebars */
  transition: none; /* Remove margin transition on mobile */
}

/* Dim background when sidebar is open */
.show-sidebar-left ~ .main-content::before,
.show-sidebar-right ~ .main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dim overlay */
  z-index: 2; /* Above player, below sidebar */
  pointer-events: none; /* Allow clicks to pass through */
}

/* Playlist */
.playlist {
  max-height: calc(100vh - 100px); /* Adjust for smaller screens */
}

/* Channel items */
.channel-item {
  padding: 8px;
  font-size: 0.9em;
}

.channel-logo {
  width: 25px;
  height: 25px;
}

/* Search panel */
.search-panel {
  flex-direction: column;
  align-items: stretch;
}

.search-panel .form-control {
  margin-right: 0;
  margin-bottom: 10px;
}

.search-panel .btn {
  width: 100%;
}

/* Upload panel */
.upload-panel {
  padding: 5px;
}

.website-logo {
  max-height: 90px; /* Smaller logo on mobile */
}

/* Notification */
.notification {
  width: 90%;
  max-width: 300px;
  padding: 10px 15px;
  font-size: 0.9em;
}

/* Channel info */
.channel-info {
  top: 5px;
  right: 5px;
  padding: 5px;
  font-size: 0.8em;
}

.channel-info img {
  width: 20px;
  height: 20px;
}

/* Popups */
#notification-popup, #fullscreen-prompt {
  width: 90%;
  max-width: 350px;
  padding: 15px;
  font-size: 0.9em;
}

#notification-popup h2, #fullscreen-prompt h2 {
  font-size: 1.2em;
}

#notification-popup p, #fullscreen-prompt p {
  font-size: 0.9em;
}

#close-notification, #fullscreen-yes, #fullscreen-no {
  padding: 8px 15px;
  font-size: 0.9em;
}

/* Donation section */
.donation-section {
  margin-top: 15px;
}

#crypto-select {
  font-size: 0.9em;
}

#qr-code canvas {
  width: 150px; /* Slightly smaller on mobile */
  height: 150px;
}

.crypto-address {
  font-size: 0.8em;
}

/* Credit section */
.credit-section {
  font-size: 0.8em;
  margin-top: 15px;
}

/* Media Queries */
@media (max-width: 768px) {
  .sidebar-left, .sidebar-right {
    width: 85%; /* Slightly wider on tablets, still leaving player visible */
  }

  #player-container {
    min-height: 40vh;
  }

  .show-sidebar-left ~ .main-content,
  .show-sidebar-right ~ .main-content {
    margin: 0; /* No margin shift on mobile */
  }
}

@media (max-width: 480px) {
  .sidebar-left, .sidebar-right {
    width: 90%; /* Wider on small phones, but not 100% */
  }

  .channel-item {
    font-size: 0.8em;
  }

  .channel-logo {
    width: 20px;
    height: 20px;
  }

  .website-logo {
    max-height: 60px;
  }

  #qr-code canvas {
    width: 120px;
    height: 120px;
  }

  #player-container {
    min-height: 30vh; /* Smaller height on tiny screens */
  }
}