/* ═══════════════════════════════════════════════════════════════════════════
   BEATS-O-VISION  ✦  player-mobile-patch.css
   Mobile: TV hatao, clean video player dikhao
   Desktop: kuch nahi badla
   
   Is file ko player-video-bot.css ke BAAD import karo
   ═══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {

  /* ── 1. Poora TV scene hide ── */
  .bvp-scene,
  .bvp-legs {
    display: none !important;
  }

  /* ── 2. Stickers bhi nahi chahiye ── */
  .bvp-sticker {
    display: none !important;
  }

  /* ── 3. Drop flash bhi nahi ── */
  .bvp-drop-flash {
    display: none !important;
  }

  /* ── 4. Wrapper ko tight karo ── */
  [data-bvp-root] > div,
  .bvp-mobile-root {
    padding: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     MOBILE CLEAN VIDEO WRAPPER
     TV ke jagah seedha video + minimal controls
     ═══════════════════════════════════════════════════════════ */

  /* Video frame — full width, 16:9, rounded */
  #bvpVideoFrame,
  .bvp-video-frame {
    position: relative !important;
    inset: unset !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55) !important;
    z-index: auto !important;
  }

  /* iframe bhi fill karo properly */
  #bvpVideoFrame iframe,
  .bvp-video-frame iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
    border-radius: 12px !important;
  }

  /* videoPlayer div bhi fill kare */
  #videoPlayer,
  #bvpVideoFrame > div {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ── 5. Mobile video container ── */
  .bvp-mobile-video-wrap {
    width: 100%;
    max-width: 100%;
    padding: 12px 12px 0;
    box-sizing: border-box;
  }

  /* ── 6. Progress bar — mobile clean version ── */
  .bvp-progress-wrap {
    padding: 10px 12px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bvp-progress-track {
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255,255,255,0.12) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    margin: -10px 0 !important;
  }

  .bvp-progress-fill {
    height: 5px !important;
    border-radius: 3px !important;
    background: var(--phosphor) !important;
    box-shadow: none !important;
    transition: width 0.25s linear !important;
    will-change: width !important;
    transform: translateZ(0) !important;
  }

  .bvp-progress-thumb {
    width: 14px !important;
    height: 14px !important;
    right: -7px !important;
    transform: translateY(-50%) scale(1) translateZ(0) !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(57,255,122,0.6) !important;
    will-change: transform !important;
  }

  .bvp-times {
    color: rgba(255,255,255,0.38) !important;
    font-size: 0.62rem !important;
    margin-top: 4px !important;
  }

  /* ── 7. Transport buttons — mobile clean ── */
  .bvp-transport {
    padding: 8px 4px 4px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  .bvp-btn-cap {
    width: 42px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.75) !important;
    box-shadow: none !important;
    transition: background 0.12s !important;
  }
  .bvp-btn-cap:hover { background: rgba(255,255,255,0.14) !important; }
  .bvp-btn:active .bvp-btn-cap {
    transform: scale(0.93) !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.05) !important;
  }

  .bvp-btn--play .bvp-btn-cap {
    width: 54px !important;
    height: 46px !important;
    font-size: 1.1rem !important;
    background: rgba(57,255,122,0.15) !important;
    border-color: rgba(57,255,122,0.30) !important;
    color: var(--phosphor) !important;
    box-shadow: none !important;
  }
  .bvp-btn--play:active .bvp-btn-cap {
    transform: scale(0.91) !important;
    box-shadow: none !important;
  }

  .bvp-btn--active .bvp-btn-cap {
    background: rgba(57,255,122,0.18) !important;
    border-color: rgba(57,255,122,0.40) !important;
    color: var(--phosphor) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .bvp-btn-name {
    display: none !important;
  }

  .bvp-play-ring { display: none !important; }

  /* ── 8. Song info — compact ── */
  .bvp-info {
    padding: 8px 12px 4px !important;
    text-align: left !important;
  }

  .bvp-on-air {
    margin-bottom: 2px !important;
    font-size: 0.60rem !important;
  }

  .bvp-title {
    font-size: 1.0rem !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 2px !important;
  }

  .bvp-artist {
    font-size: 0.70rem !important;
    margin-bottom: 2px !important;
  }

  .bvp-action-row {
    margin-top: 6px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }

  .bvp-like-btn {
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
    min-height: 32px !important;
    box-shadow: none !important;
    border-width: 1px !important;
  }
  .bvp-like-btn:active {
    transform: scale(0.95) !important;
    box-shadow: none !important;
  }

  /* ── 9. VCR — mobile pe sirf marquee dikhao, baaki chhupaao ── */
  .bvp-vcr {
    margin: 4px 12px !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    background: rgba(2,10,4,0.85) !important;
    box-shadow: none !important;
  }
  .bvp-vcr-time,
  .bvp-vcr-pipe,
  .bvp-vcr-ch {
    display: none !important;
  }
  .bvp-vcr-scroll {
    flex: 1 !important;
    overflow: hidden !important;
  }
  .bvp-vcr-title {
    font-size: 0.85rem !important;
    animation: mq 22s linear infinite !important;
    will-change: transform !important;
  }

  /* ── 10. Bottom row — compact ── */
  .bvp-bottom-row {
    padding: 6px 12px 8px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .bvp-vol-row {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .bvp-vol-slider {
    height: 4px !important;
  }
  .bvp-vol-slider::-webkit-slider-thumb {
    width: 16px !important;
    height: 16px !important;
  }

  .bvp-toggle-label {
    font-size: 0.50rem !important;
  }

  .bvp-back-btn {
    padding: 5px 9px !important;
    font-size: 0.60rem !important;
    min-height: 30px !important;
    box-shadow: none !important;
    border-width: 1px !important;
  }
  .bvp-back-btn:active {
    transform: scale(0.95) !important;
    box-shadow: none !important;
  }

  /* ── 11. Playlist tag compact ── */
  .bvp-playlist-tag {
    font-size: 0.52rem !important;
    padding: 2px 7px !important;
    margin: 2px 0 0 !important;
  }

  /* ── 12. Scroll fix — content neeche se shuru ho ──
     Prevents need to scroll up after song changes */
  .bvp-info,
  .bvp-bottom-row,
  .bvp-progress-wrap,
  .bvp-transport,
  .bvp-vcr {
    contain: layout style !important;
  }
}

/* ── Very small phones (≤380px) ── */
@media (pointer: coarse) and (max-width: 380px) {
  .bvp-vcr { display: none !important; }

  .bvp-transport { gap: 3px !important; }

  .bvp-btn-cap {
    width: 36px !important;
    height: 32px !important;
    font-size: 0.74rem !important;
  }
  .bvp-btn--play .bvp-btn-cap {
    width: 46px !important;
    height: 40px !important;
    font-size: 0.96rem !important;
  }

  .bvp-title { font-size: 0.88rem !important; }
}

/* ── Landscape mobile ── */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .bvp-vcr { display: none !important; }

  .bvp-info {
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 12px !important;
  }

  .bvp-title { -webkit-line-clamp: 1 !important; font-size: 0.88rem !important; }

  .bvp-transport { padding: 4px 0 !important; }
}