/* ============================================================
   AMBIENT MUSIC PLAYER — CLEAN (DEV-FRIENDLY)
   - Hidden YouTube player (audio only)
   - Floating Music + List buttons (bottom left/right)
   - Floating playlist modal (anchored right/bottom)
   - Exactly 5 visible rows in the list area
   - Marquee-safe text alignment (no clipping when active)
============================================================ */


/* ============================================================
   1) REMOVE OLD PLAYER UI (legacy)
============================================================ */
#musicPlayer,
#playerControls,
#progressBarContainer,
#progressBar,
#progressKnob,
#trackTitle,
#trackTitleText,
.mp-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ============================================================
   2) YOUTUBE PLAYER (HIDDEN BUT RUNNING)
============================================================ */
#youtube-player {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ============================================================
   3) FLOATING CONTROLS (BOTTOM LEFT/RIGHT)
============================================================ */
#music-ui {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-family: "Tinos", serif;
}

.music-btn {
  appearance: none;
  border: none;
  cursor: pointer;

  font-family: "Tinos", serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;

  min-width: 104px;
  padding: 8px 14px;
  border-radius: 999px;

  color: #6b4336;
  background: rgba(253, 240, 228, 0.78);
  backdrop-filter: blur(14px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.55);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.music-btn:hover {
  transform: translateY(-1px);
  background: rgba(253, 240, 228, 0.95);
}

.music-btn:active {
  transform: translateY(0);
}

/* Playlist button is hidden until JS adds .visible */
#playlistToggle { display: none; }
#playlistToggle.visible { display: inline-flex; }


/* ============================================================
   4) PLAYLIST MODAL (ANCHOR RIGHT/BOTTOM)
============================================================ */
:root{
  /* Easy knobs */
  --playlist-right: 20px;
  --playlist-bottom: 90px;

  --playlist-w: 320px;
  --playlist-h: 378px;

  /* Locked list geometry */
  --row-h: 40px;
  --rows-visible: 5;
  --row-gap: 8px;

  /* Scroll area padding (inside modal) */
  --list-pad-y: 8px;
  --list-pad-x: 12px;
}

#playlistModal {
  position: fixed;
  right: var(--playlist-right);
  bottom: var(--playlist-bottom);
  z-index: 999999;

  width: var(--playlist-w);
  height: var(--playlist-h);

  display: none;            /* JS toggles */
  overflow: hidden;

  font-family: "Tinos", serif;
  font-size: 16px;
  line-height: 1.2;

  background: rgba(250, 247, 242, 0.68);
  backdrop-filter: blur(18px);

  border-radius: 20px;
  border: 1px solid rgba(222, 200, 180, 0.55);

  box-shadow: 0 12px 36px rgba(0,0,0,0.25);

  opacity: 0;
  transform: translateY(10px);
}

/* Open / close animations (JS toggles these classes) */
#playlistModal.opening {
  animation: playlistOpen 200ms cubic-bezier(.2,.8,.2,1) forwards;
}

#playlistModal.closing {
  animation: playlistClose 160ms ease forwards;
}

@keyframes playlistOpen {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes playlistClose {
  to { opacity: 0; transform: scale(.98); }
}


/* ============================================================
   5) MODAL HEADER + STOP BUTTON
============================================================ */
#playlistHeader {
  padding: 6px 12px 6px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;

  color: #9B6A4A;
  background: #F7E7D7;

  border-radius: 18px 18px 0 0;

  cursor: grab;
  user-select: none;
  position: relative;
}

#playlistStop {
  display: block;
  margin: 6px auto 0;
  padding: 4px 14px;

  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: rgba(253, 240, 228, 0.78);
  backdrop-filter: blur(14px);

  color: #6b4336;
  font-size: 12px;
  font-weight: 600;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.65);

  transition:
    background .2s ease,
    transform .15s ease,
    box-shadow .2s ease;
}

#playlistStop:hover {
  background: rgba(253, 240, 228, 0.95);
  transform: translateY(-1px);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.85);
}

#playlistStop:active {
  transform: translateY(0);
  background: rgba(253, 240, 228, 0.78);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.70);
}


/* ============================================================
   6) SEARCH
============================================================ */
#playlistSearchContainer {
  padding: 4px 12px 12px;
  background: #F7E7D7;
}

#playlistSearch {
  width: 100%;
  height: 32px;

  padding: 6px 8px;
  border-radius: 8px;

  border: 1px solid rgba(150,170,150,0.8);

  font-size: 13px;
  line-height: 1.2;
  color: #A87A5F;
}

#playlistSearch::placeholder {
  color: #A87A5F;
  opacity: 1;
}

#playlistSearch:focus {
  outline: none;
  box-shadow: none;
}


/* ============================================================
   7) PLAYLIST LIST (EXACTLY 5 VISIBLE ROWS)
============================================================ */
#playlistScrollArea {
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  padding: var(--list-pad-y) var(--list-pad-x);

  /*
    Exactly 5 full rows visible:
    height = (rows * row height) + (gaps between rows)
    gaps count = rows - 1
  */
  height: calc(
    (var(--rows-visible) * var(--row-h)) +
    ((var(--rows-visible) - 1) * var(--row-gap))
  );
}

#playlistScrollArea::-webkit-scrollbar { display: none; }

#playlistList {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

#playlistList li {
  height: var(--row-h);
  margin: 0;

  border-radius: 12px;
  border: 1px solid rgba(217, 192, 173, 0.65);

  background: rgba(252, 240, 229, 0.98);
  color: #A87A5F;

  font-size: 13px;

  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;

  display: flex;
  align-items: center;

  /* Default: left aligned titles */
  justify-content: flex-start;
  text-align: left;

  padding: 0 12px;
}

/* Active track */
#playlistList li.active {
  background: #ECD0BE;
  border-color: #D8A897;
  color: #FFFFFFB3;
  font-weight: 600;
}

#playlistList li.active .song-title-inner { color: inherit; }

/*
  Marquee-safe text rules:
  - Default to left align to avoid clipping/centering issues when JS applies translateX.
  - JS will mark short items with .mp-short and center those only.
*/
.song-title-inner {
  width: 100%;
  display: block;
  white-space: nowrap;
  text-align: left;
}

/* Short items that JS marks as short, center them */
#playlistList li.mp-short {
  justify-content: center;
  text-align: center;
}

#playlistList li.mp-short .song-title-inner {
  text-align: center;
}


/* ============================================================
   8) MOBILE TWEAKS (SMALL ONLY)
============================================================ */
@media (max-width: 600px) {
  :root{
    --playlist-right: 12px;
    --playlist-w: 280px;
    --playlist-h: 340px;
  }
}