:root {
  color-scheme: light;
  background: #dfe5df;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-player-height: 88px;
  --app-player-side: 18px;
  --app-player-bottom: calc(14px + var(--app-safe-bottom));
}

body {
  min-height: 100svh;
  padding-top: var(--app-safe-top);
  padding-right: var(--app-safe-right);
  padding-bottom: calc(88px + var(--app-safe-bottom));
  padding-left: var(--app-safe-left);
}

body[data-theme="v8"],
body.mix-detail-v81 {
  padding-bottom: calc(var(--app-player-height) + var(--app-player-bottom) + 20px);
}

body[data-theme="v8"] .player,
body.mix-detail-v81 .detail-player {
  left: calc(var(--app-player-side) + var(--app-safe-left));
  right: calc(var(--app-player-side) + var(--app-safe-right));
  bottom: var(--app-player-bottom);
}

/* The original 105% translation cannot clear the added home-indicator inset. */
body[data-theme="v8"] .player:not(.visible),
body.mix-detail-v81 .player:not(.visible) {
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + var(--app-player-bottom) + 32px));
}

.toast {
  right: calc(16px + var(--app-safe-right));
  bottom: calc(var(--app-player-height) + var(--app-player-bottom) + 12px);
  max-width: calc(100% - var(--app-safe-left) - var(--app-safe-right) - 32px);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  :root {
    --app-player-height: 112px;
  }
}

@media (max-width: 560px) {
  :root {
    --app-player-side: 7px;
    --app-player-bottom: calc(7px + var(--app-safe-bottom));
  }
}

@media (display-mode: standalone) {
  body {
    min-height: 100dvh;
  }
}