/* Mini-player — floats above the tab bar on phones, at the bottom of the content area on desktop. */

.mp {
  position: fixed;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 60px;
  padding: 0 6px 0 8px;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: mp-in .22s cubic-bezier(.2, .8, .2, 1) both;
}
.mp[hidden] { display: none; }
/* Pushed pages cover the tab bar on phones: the player drops to the bottom edge */
body.has-screen .mp { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.mp__progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-line); }
.mp__progress i { position: absolute; inset: 0; background: var(--color-accent); transform-origin: left; transform: scaleX(0); transition: transform .25s linear; }

.mp__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; padding: 0; text-align: left; color: inherit; }
.mp__cover { flex: none; width: 42px; height: 42px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--color-field); color: var(--color-ink-muted); }
.mp__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp__cover svg { width: 20px; height: 20px; }
.mp__txt { min-width: 0; display: flex; flex-direction: column; }
.mp__txt b, .mp__txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp__txt b { font-size: 14px; line-height: 19px; }
.mp__txt small { font-size: 12px; line-height: 16px; color: var(--color-ink-muted); }

.mp__btn { flex: none; width: 40px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--color-ink); }
.mp__btn svg { width: 20px; height: 20px; }
.mp__btn:disabled { color: var(--color-ink-muted); opacity: .45; }
.mp__play { width: 44px; }
.mp__play svg { width: 18px; height: 18px; }
.mp__prev { display: none; }
.mp__close { color: var(--color-ink-muted); }
.mp__close svg { width: 16px; height: 16px; }
@media (hover: hover) { .mp__btn:not(:disabled):hover, .mp__who:hover .mp__title { background: var(--color-hover); } .mp__who:hover .mp__title { background: none; text-decoration: underline; } }
.mp__btn:active { opacity: .6; }

/* Content keeps clear of the player */
body.has-player .app-main { padding-bottom: calc(var(--tabbar-h) + 88px + env(safe-area-inset-bottom, 0px)); }
body.has-player .screen-body { padding-bottom: 76px; }

@media (min-width: 600px) { .mp__prev { display: grid; } }

@media (min-width: 1024px) {
  .mp, body.has-screen .mp {
    left: calc(var(--rail-w) + 24px);
    right: 24px;
    bottom: 20px;
    max-width: 640px;
    margin: 0 auto;
    height: 64px;
  }
  body.has-player .app-main { padding-bottom: 104px; }
  body.has-player .screen-body { padding-bottom: 88px; }
}

@keyframes mp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp { animation: none; } .mp__progress i { transition: none; } }