/* ============================================================================
   tanro — Thanh phát nhạc cố định ở đáy màn hình
   Markup do assets/js/player.js dựng, chỉ xuất hiện khi trang có bài hát.
   ============================================================================ */

/* Chừa chỗ để thanh phát không che mất cuối trang */
body.has-nowbar { padding-bottom: 124px; }
@media (max-width: 720px) { body.has-nowbar { padding-bottom: 156px; } }

.nowbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--backdrop);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 40px -18px rgba(0, 0, 0, .7);
}

/* --- Dải sóng nhạc kiêm thanh tua -------------------------------------- */
/* Cao 36px thay vì vạch 4px như trước: đủ rộng để bấm trúng bằng chuột lẫn
   ngón tay. Sóng do player.js vẽ lên canvas; canvas không đọc được biến CSS
   nên ba màu dưới đây được khai báo riêng để script hỏi qua getComputedStyle. */
.nowbar__seek {
  --wave-done: var(--c-music);
  --wave-todo: #2c3733;
  --wave-buf:  #3d4a45;

  position: relative;
  height: 36px;
  padding: 0 var(--pad-x);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  touch-action: none;
}
.nowbar__seek:focus-visible { outline: 2px solid var(--c-music); outline-offset: -2px; }
.nowbar__wave { display: block; width: 100%; height: 100%; }

/* Giờ tại vị trí con trỏ, hiện khi rê chuột trên dải sóng */
.nowbar__cue {
  position: absolute; top: -1.7rem; left: 0;
  transform: translateX(-50%);
  padding: .15rem .45rem;
  border-radius: var(--r-xs);
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  color: var(--ink); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}
.nowbar__cue[hidden] { display: none; }
/* --- Ba vùng: thông tin bài · điều khiển · phụ trợ --------------------- */
.nowbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .6rem var(--pad-x);
  max-width: var(--container);
  margin-inline: auto;
}

.nowbar__meta { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.nowbar__art {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-sm); object-fit: cover;
  background: var(--bg-sunken);
}
.nowbar.is-playing .nowbar__art { animation: nowbar-pulse 2.4s var(--ease) infinite; }
@keyframes nowbar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-music) 55%, transparent); }
  60%      { box-shadow: 0 0 0 7px transparent; }
}
.nowbar__text { display: grid; gap: .12rem; min-width: 0; }
.nowbar__title  { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.nowbar__artist { font-size: var(--fs-xs); color: var(--ink-3); }
.nowbar__title, .nowbar__artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nowbar__ctrl { display: flex; align-items: center; gap: .35rem; }
.nowbar__btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nowbar__btn svg { width: 18px; height: 18px; fill: currentColor; }
.nowbar__btn[data-shuffle] svg, .nowbar__btn[data-repeat] svg,
.nowbar__btn[data-mute] svg,   .nowbar__btn[data-queue] svg { fill: none; }
.nowbar__btn:hover { color: var(--ink); background: var(--bg-elev); }
.nowbar__btn.is-on { color: var(--c-music); }

.nowbar__play {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: var(--c-music); color: #14061f;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.nowbar__play svg { width: 20px; height: 20px; fill: currentColor; }
.nowbar__play:hover { transform: scale(1.06); filter: brightness(1.1); }

.nowbar__side { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.nowbar__time {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nowbar__time b { color: var(--ink-2); font-weight: 500; }

.nowbar__vol { width: 88px; accent-color: var(--c-music); cursor: pointer; }

/* --- Danh sách phát bật ra ---------------------------------------------- */
.nowbar__queue {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.nowbar__queue-head {
  position: sticky; top: 0;
  padding: .7rem var(--pad-x);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4);
}
.nowbar__queue ol { max-width: var(--container); margin-inline: auto; padding: .35rem var(--pad-x) .6rem; }
.nowbar__queue li button {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: .75rem; align-items: center; width: 100%;
  padding: .5rem .4rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.nowbar__queue li button:hover { background: var(--bg-raise); }
.nowbar__queue li.is-current button { background: color-mix(in srgb, var(--c-music) 16%, transparent); }
.nowbar__queue li.is-current .q-no { color: var(--c-music); }
.q-no  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-4); text-align: center; }
.q-body { display: grid; gap: .1rem; min-width: 0; }
.q-body b { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.q-body small, .q-len { font-size: var(--fs-xs); color: var(--ink-3); }
.q-body b, .q-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-len { font-family: var(--font-mono); }

/* --- Màn hình hẹp: xếp hai hàng ----------------------------------------- */
@media (max-width: 720px) {
  .nowbar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .5rem var(--pad-x); }
  .nowbar__ctrl  { grid-column: 2; }
  .nowbar__side  { grid-column: 1 / -1; justify-content: space-between; }
  .nowbar__btn[data-shuffle], .nowbar__btn[data-repeat] { display: none; }
  .nowbar__vol { width: 100%; max-width: 160px; }
}

/* Giao diện sáng: hai màu nền của sóng phải nhạt lại cho đủ tương phản.
   Site chỉ đổi nền qua data-theme, không bám prefers-color-scheme (xem tokens.css). */
:root[data-theme="light"] .nowbar__seek { --wave-todo: #cbd5cf; --wave-buf: #a9b6b0; }

/* Màn hình hẹp: dải sóng thấp hơn để chừa chỗ cho hai hàng điều khiển */
@media (max-width: 720px) { .nowbar__seek { height: 28px; } }