/* VelloxPlay Web App 1.14 — mobile safe frame definitivo.
   Arquivo separado e carregado por último para não disputar com regras antigas. */
@media (max-width: 900px) {
  html, body { background:#000 !important; overflow-x:hidden !important; }

  /* Uma folga REAL fora do header. Isso é intencionalmente permanente no mobile. */
  body.vp-safe-shell .topbar {
    position: sticky !important;
    top: 40px !important;
    margin-top: 40px !important;
    box-sizing: border-box !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 18px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    background:#050506 !important;
    z-index:100 !important;
  }

  /* Em fullscreen real, deixa um pouco mais de respiro físico. */
  body.vp-safe-shell.vp-browser-fullscreen:not(.player-fullscreen) .topbar {
    top: 48px !important;
    margin-top: 48px !important;
  }

  body.vp-safe-shell .brand {
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
  }
  body.vp-safe-shell .brand img {
    height:30px !important;
    max-height:30px !important;
    width:auto !important;
    max-width:min(230px, 67vw) !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  body.vp-safe-shell .top-actions {
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
  }
  body.vp-safe-shell #settingsBtn {
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    margin:0 !important;
  }

  /* Remove quaisquer pseudo-faixas e paddings legados que competiam com o frame. */
  body.vp-safe-shell::before { display:none !important; content:none !important; }
  body.vp-safe-shell { padding-top:0 !important; min-height:100dvh !important; height:auto !important; overflow-y:auto !important; touch-action:pan-y !important; }

  /* Player continua livre para ocupar a tela toda. */
  body.vp-safe-shell.player-fullscreen .topbar { display:none !important; }

  /* Barra inferior com toque confortável e pequena folga da borda. */
  body.vp-safe-shell .mobile-nav {
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    border-radius:16px !important;
    overflow:hidden !important;
    height:76px !important;
    min-height:76px !important;
    padding:4px 4px max(4px, env(safe-area-inset-bottom)) !important;
  }
  body.vp-safe-shell .mobile-nav button { min-height:66px !important; }
  body.vp-safe-shell .mobile-nav button span { font-size:26px !important; }
  body.vp-safe-shell .mobile-nav button small { font-size:10px !important; }
  body.vp-safe-shell .library-view { padding-bottom:96px !important; }
}

@media (max-width:900px) and (orientation:landscape) and (max-height:650px) {
  body.vp-safe-shell .topbar,
  body.vp-safe-shell.vp-browser-fullscreen:not(.player-fullscreen) .topbar {
    top:18px !important;
    margin-top:18px !important;
    height:56px !important;
    min-height:56px !important;
    padding:0 22px !important;
  }
  body.vp-safe-shell .brand img { height:27px !important; max-height:27px !important; }
}