/*
 * Navegação fixa da letra em tela cheia (mobile)
 *
 * Esta folha é carregada por último para preservar a navegação existente e
 * neutralizar regras legadas que a reposicionavam dentro do cabeçalho. A altura
 * real é publicada pelo app em --lyrics-mobile-footer-height.
 */
@media (max-width: 767px) {
  #lyricsFullscreenCard#lyricsFullscreenCard.viewer-card {
    /* Fallback para a primeira pintura, antes da medição pelo JavaScript. */
    --lyrics-mobile-footer-height: calc(72px + env(safe-area-inset-bottom));
  }

  #lyricsFullscreenCard#lyricsFullscreenCard.viewer-card .lyrics-fullscreen-meta-row .lyrics-fullscreen-bottom-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 52020 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #f8f9ff !important;
    border-top: 1px solid #e5e7ef !important;
    box-shadow: 0 -1px 0 rgba(20, 35, 71, .08) !important;
  }

  /* O padding faz parte da única área rolável; não cria um segundo scroll. */
  #lyricsFullscreenCard#lyricsFullscreenCard.viewer-card .lyrics-fullscreen-body {
    overflow-y: scroll !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: calc(var(--lyrics-mobile-footer-height) + 12px) !important;
  }

  /* A reserva fica no conteúdo que define o final da rolagem. */
  #lyricsFullscreenCard#lyricsFullscreenCard.viewer-card pre#lyricsFullscreenText {
    padding-bottom: calc(var(--lyrics-mobile-footer-height) + 12px) !important;
  }

  body[data-theme="dark"] #lyricsFullscreenCard#lyricsFullscreenCard.viewer-card .lyrics-fullscreen-meta-row .lyrics-fullscreen-bottom-nav {
    background: #111827 !important;
    border-top-color: #334155 !important;
    box-shadow: 0 -1px 0 rgba(148, 163, 184, .16) !important;
  }
}