/* KOSOVA TV V3226 — PWA CHANNEL DRAWER FIX
   Makes the installed iPhone/Android PWA channel drawer match Safari mobile behavior.
   Mobile standalone only. Safari/browser + desktop are untouched. */

@media (max-width:700px) and (display-mode:standalone) {
  body.pwa-standalone .player-overlay{
    padding:0!important;
  }

  body.pwa-standalone .player-shell{
    position:relative!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  body.pwa-standalone .player-topbar{
    position:relative!important;
    z-index:31!important;
    height:calc(58px + env(safe-area-inset-top,0px))!important;
    min-height:calc(58px + env(safe-area-inset-top,0px))!important;
    flex-basis:calc(58px + env(safe-area-inset-top,0px))!important;
    padding-top:env(safe-area-inset-top,0px)!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  body.pwa-standalone .player-layout{
    position:relative!important;
    display:block!important;
    height:calc(100dvh - 58px - env(safe-area-inset-top,0px))!important;
    min-height:0!important;
  }

  body.pwa-standalone .player-main{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
  }

  /* IMPORTANT: override V3222 full-width drawer only inside installed PWA. */
  body.pwa-standalone .player-drawer{
    position:absolute!important;
    z-index:40!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;

    width:min(86vw,330px)!important;
    max-width:330px!important;
    min-width:0!important;
    height:100%!important;

    display:flex!important;
    flex-direction:column!important;

    transform:translate3d(102%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;

    border-left:1px solid rgba(255,255,255,.09)!important;
    border-radius:0!important;
    background:#101216!important;
    box-shadow:-22px 0 60px rgba(0,0,0,.58)!important;

    overflow:hidden!important;
    will-change:transform!important;
    transition:transform .20s ease,visibility .20s ease!important;
  }

  body.pwa-standalone .player-overlay.drawer-open .player-drawer{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Keep video full width behind drawer, exactly like Safari overlay behavior. */
  body.pwa-standalone .player-overlay.drawer-open .player-layout{
    grid-template-columns:1fr!important;
  }

  body.pwa-standalone .drawer-head{
    flex:0 0 62px!important;
    height:62px!important;
    min-height:62px!important;
    padding:0 10px 0 14px!important;
    background:#101216!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }

  body.pwa-standalone .drawer-head h3{
    margin:2px 0 0!important;
    font-size:14px!important;
    line-height:1.15!important;
  }

  body.pwa-standalone .drawer-head button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:11px!important;
  }

  body.pwa-standalone .drawer-search{
    flex:0 0 44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:10px!important;
    padding:0 11px!important;
    border-radius:11px!important;
    background:#171a1f!important;
  }

  body.pwa-standalone .drawer-search input{
    font-size:16px!important; /* prevents iOS input zoom */
  }

  body.pwa-standalone .drawer-list{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 8px calc(14px + env(safe-area-inset-bottom,0px))!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  body.pwa-standalone .drawer-channel{
    width:100%!important;
    min-height:62px!important;
    padding:8px!important;
    margin:0 0 5px!important;
    grid-template-columns:52px minmax(0,1fr) auto!important;
    gap:9px!important;
    border-radius:11px!important;
  }

  body.pwa-standalone .drawer-channel img,
  body.pwa-standalone .drawer-channel .drawer-fallback{
    width:52px!important;
    height:32px!important;
    border-radius:7px!important;
  }

  body.pwa-standalone .drawer-channel b{
    font-size:11px!important;
    line-height:1.2!important;
  }

  body.pwa-standalone .drawer-channel small{
    font-size:8px!important;
  }

  body.pwa-standalone .drawer-channel em{
    font-size:7px!important;
    padding-right:2px!important;
  }

  /* Video/control area keeps correct PWA safe-area height. */
  body.pwa-standalone .video-wrap video{
    max-height:none!important;
  }

  body.pwa-standalone .player-controlbar{
    padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* navigator.standalone gets the body class from pwa-v3100.js on iOS.
   This fallback handles WebKit builds where display-mode matching is delayed. */
@media (max-width:700px) {
  body.pwa-standalone .player-overlay.drawer-open .player-drawer{
    width:min(86vw,330px)!important;
    max-width:330px!important;
    right:0!important;
    left:auto!important;
  }
}