/* ============================================================================
 *  MUSIC PLAYER — Nút nhạc nền nổi góc DƯỚI-TRÁI (galaxy glass, nhỏ gọn).
 * ----------------------------------------------------------------------------
 *  • Góc dưới-TRÁI để tránh FAB command-palette (dưới-phải, z-index 99990).
 *  • z-index đủ nổi trên galaxy canvas + turbo, nhưng DƯỚI overlay/modal của
 *    command-palette (99998) → không che modal.
 *  • Responsive: mobile thu nhỏ, ẩn bớt chi tiết.
 *  • Tôn trọng prefers-reduced-motion (tắt hiệu ứng nặng).
 * ========================================================================== */

.mp-wrap {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 99970;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 14px;
  color: #e8ecff;
  font-family: 'Poppins', 'Exo 2', system-ui, sans-serif;
  font-size: 13px;
  background: rgba(18, 20, 40, 0.55);
  border: 1px solid rgba(160, 170, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  max-width: min(78vw, 340px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.mp-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(120, 140, 255, 0.25);
}

/* Nút bấm tròn (play/pause, prev/next) */
.mp-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #eaf0ff;
  font-size: 18px;
  background: rgba(90, 110, 220, 0.28);
  border: 1px solid rgba(160, 170, 255, 0.30);
  transition: background 0.15s ease, transform 0.12s ease;
}
.mp-btn:hover { background: rgba(120, 140, 255, 0.45); }
.mp-btn:active { transform: scale(0.92); }
.mp-btn:focus-visible { outline: 2px solid #8ea2ff; outline-offset: 2px; }

.mp-btn--play { font-size: 20px; }

/* Vùng thông tin bài + âm lượng */
.mp-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mp-title {
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0.95;
}
.mp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Thanh âm lượng */
.mp-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 78px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #7c8cff, #4a5adf);
  cursor: pointer;
  outline: none;
}
.mp-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #eaf0ff;
  border: 1px solid #5a6adf;
  box-shadow: 0 0 6px rgba(140, 160, 255, 0.6);
}
.mp-vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid #5a6adf;
  border-radius: 50%;
  background: #eaf0ff;
}

/* Nút prev/next nhỏ hơn */
.mp-nav { width: 26px; height: 26px; font-size: 15px; }

/* Trạng thái đang phát: viền phát sáng nhẹ */
.mp-wrap.mp-playing .mp-btn--play {
  background: rgba(120, 220, 170, 0.35);
  border-color: rgba(120, 220, 170, 0.5);
}

/* Toast lỗi nhẹ (file thiếu…) */
.mp-toast {
  position: fixed;
  left: 18px;
  bottom: 70px;
  z-index: 99971;
  max-width: min(78vw, 320px);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  color: #ffe8e8;
  background: rgba(60, 20, 30, 0.7);
  border: 1px solid rgba(255, 120, 120, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.mp-toast.mp-toast-show { opacity: 1; transform: translateY(0); }

/* Nút chỉ hiện khi có >1 bài — mặc định ẩn qua JS bằng attr hidden */
.mp-nav[hidden] { display: none; }

/* Responsive: mobile thu gọn — ẩn tên bài + thu nhỏ thanh âm lượng */
@media (max-width: 640px) {
  .mp-wrap { left: 12px; bottom: 12px; padding: 6px 8px; gap: 6px; }
  .mp-title { display: none; }
  .mp-vol { width: 56px; }
  .mp-btn { width: 32px; height: 32px; }
}

/* Rất hẹp: chỉ còn nút play + volume tối giản */
@media (max-width: 380px) {
  .mp-vol { width: 44px; }
}

/* Tôn trọng người dùng muốn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .mp-wrap, .mp-btn, .mp-toast { transition: none; }
  .mp-wrap:hover { transform: none; }
}