/* VW_WATCH_TOGETHER_PREMIUM_COMPACT_PLAYER_PM_VIDEO_V3_15R1
   Additive UI layer only.
   - Same main .stage / #video / #videoWrap nodes.
   - Existing playback controls remain the functional source of truth.
   - On Android/mobile, the existing .controls block becomes an off-canvas drawer.
   - A compact rail lives inside #videoWrap, so Play/Mute/Fullscreen stay available.
   - PM keeps the same main room video visible in a reserved top lane.
*/

:root{
  --vw-premium-accent:#7567ff;
  --vw-premium-accent-2:#59a8ff;
  --vw-premium-panel:rgba(8,12,20,.94);
  --vw-premium-panel-strong:rgba(7,10,17,.985);
  --vw-premium-line:rgba(255,255,255,.105);
  --vw-premium-text:#f2f5ff;
  --vw-premium-muted:#909ab0;
  --vw-premium-ease:cubic-bezier(.22,.72,.18,1);
  --vw-premium-pm-player-height:220px;
  --vw-premium-pm-player-gap:6px;
}

/* Never affect desktop/non-Android room layout. */
@media (max-width:980px){
  body.vw-android-room-shell.vw-player-premium-ready .stage{
    position:relative;
    overflow:visible!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready #videoWrap{
    position:relative!important;
    isolation:isolate;
  }

  /* Reclaim the current 77–79px controls footprint without deleting controls.
     The original controls become the premium off-canvas drawer. */
  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer{
    box-sizing:border-box!important;
    position:fixed!important;
    left:0!important;
    right:auto!important;
    top:calc(8px + env(safe-area-inset-top,0px))!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    width:min(88vw,360px)!important;
    height:auto!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    margin:0!important;
    padding:12px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin;
    border:1px solid rgba(255,255,255,.11)!important;
    border-left:0!important;
    border-radius:0 22px 22px 0!important;
    background:
      radial-gradient(circle at 18% 8%,rgba(117,103,255,.18),transparent 34%),
      linear-gradient(180deg,rgba(10,15,25,.985),rgba(6,9,15,.985))!important;
    box-shadow:24px 0 70px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.045)!important;
    backdrop-filter:blur(22px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(22px) saturate(125%)!important;
    transform:translate3d(calc(-100% - 18px),0,0)!important;
    opacity:.45!important;
    pointer-events:none!important;
    z-index:2147482790!important;
    transition:
      transform .24s var(--vw-premium-ease),
      opacity .18s ease,
      box-shadow .24s ease!important;
    contain:layout paint;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-player-control-drawer-open .stage .controls.vw-premium-control-drawer{
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
    pointer-events:auto!important;
    box-shadow:32px 0 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.055)!important;
  }

  /* Override legacy mobile grid ownership inside the drawer. */
  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer .control-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:none!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer .control-row>*{
    grid-area:auto!important;
    min-width:0;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #playPause,
  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #muteBtn,
  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #fullscreenBtn{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    border-radius:13px!important;
    border:1px solid var(--vw-premium-line)!important;
    background:rgba(255,255,255,.055)!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #playPause{
    grid-column:1/2!important;
    color:#fff!important;
    background:linear-gradient(135deg,rgba(117,103,255,.95),rgba(75,116,255,.92))!important;
    box-shadow:0 10px 28px rgba(93,88,255,.20)!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer .timeblock{
    grid-column:2/3!important;
    justify-self:stretch!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    height:42px!important;
    padding:0 9px!important;
    border:1px solid var(--vw-premium-line)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.035)!important;
    font-variant-numeric:tabular-nums;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer .sync-status{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:none!important;
    min-height:32px!important;
    margin:0!important;
    justify-content:flex-start!important;
    padding:0 10px!important;
    border:1px solid rgba(91,219,164,.12)!important;
    border-radius:11px!important;
    background:rgba(62,190,138,.06)!important;
    color:#b9f2d9!important;
    font-size:9px!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #rateSelect{
    width:100%!important;
    height:42px!important;
    min-width:0!important;
    border-radius:12px!important;
    border:1px solid var(--vw-premium-line)!important;
    background:#0c1320!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #audioTrackPicker{
    width:100%!important;
    min-width:0!important;
    position:relative!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #audioTrackBtn{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    border-radius:12px!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #audioTrackMenu:not(.hidden){
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    max-height:42dvh!important;
    margin-top:8px!important;
    overflow:auto!important;
    transform:none!important;
    z-index:1!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #muteBtn,
  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #fullscreenBtn{
    grid-column:auto!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #volume{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:none!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer #seek{
    order:3!important;
    width:100%!important;
    min-height:24px!important;
    margin:0!important;
  }

  /* Existing secondary stage blocks remain the functional originals but stop
     consuming main room height; the drawer provides proxy controls for them. */
  body.vw-android-room-shell.vw-player-premium-ready .stage>#playlistNav,
  body.vw-android-room-shell.vw-player-premium-ready .stage>.playback-mode-strip,
  body.vw-android-room-shell.vw-player-premium-ready .stage>.sound-mixer,
  body.vw-android-room-shell.vw-player-premium-ready .stage>#guestNote{
    display:none!important;
  }

  /* Premium compact rail inside #videoWrap survives #videoWrap fullscreen. */
  #vwPlayerPremiumRail{
    position:absolute;
    left:max(7px,env(safe-area-inset-left,0px));
    top:50%;
    transform:translate3d(0,-50%,0);
    z-index:80;
    width:46px;
    padding:6px;
    display:grid;
    gap:6px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:17px;
    background:linear-gradient(180deg,rgba(11,16,26,.86),rgba(7,10,17,.90));
    box-shadow:0 14px 42px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(16px) saturate(135%);
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    transition:opacity .2s ease,transform .22s var(--vw-premium-ease),background .2s ease;
    user-select:none;
    -webkit-user-select:none;
  }

  #vwPlayerPremiumRail:hover,
  #vwPlayerPremiumRail:focus-within,
  body.vw-player-control-drawer-open #vwPlayerPremiumRail{
    background:linear-gradient(180deg,rgba(17,22,34,.96),rgba(9,13,21,.96));
    box-shadow:0 18px 52px rgba(0,0,0,.52),0 0 0 1px rgba(117,103,255,.08);
  }

  .vw-player-rail-btn{
    box-sizing:border-box;
    width:34px;
    height:34px;
    min-width:34px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:11px;
    background:rgba(255,255,255,.045);
    color:#f6f7ff;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  }

  .vw-player-rail-btn svg{width:17px;height:17px;display:block}
  .vw-player-rail-btn:hover,.vw-player-rail-btn:focus-visible{
    background:rgba(117,103,255,.18);
    border-color:rgba(136,124,255,.34);
    box-shadow:0 7px 20px rgba(64,60,180,.18);
    outline:none;
  }
  .vw-player-rail-btn:active{transform:scale(.91)}
  .vw-player-rail-btn.vw-primary{
    background:linear-gradient(135deg,rgba(117,103,255,.96),rgba(72,127,255,.93));
    border-color:rgba(164,155,255,.34);
    box-shadow:0 9px 24px rgba(83,82,238,.25);
  }

  .vw-player-rail-sync{
    width:34px;height:15px;display:flex;align-items:center;justify-content:center;gap:3px;
    color:#7ce0b1;font:800 6px/1 system-ui,sans-serif;letter-spacing:.06em;
    opacity:.9;
  }
  .vw-player-rail-sync i{
    width:5px;height:5px;border-radius:50%;background:#55dba0;
    box-shadow:0 0 10px rgba(85,219,160,.72);
  }

  .vw-premium-drawer-head{
    order:-20;
    position:sticky;
    top:-12px;
    z-index:4;
    display:grid;
    grid-template-columns:minmax(0,1fr) 38px;
    align-items:center;
    gap:8px;
    margin:-12px -12px 2px;
    padding:13px 12px 10px;
    border-bottom:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(8,12,20,.995),rgba(8,12,20,.94));
    backdrop-filter:blur(18px);
  }
  .vw-premium-drawer-head-copy{min-width:0}
  .vw-premium-drawer-head-copy span{
    display:block;color:#8f86ff;font:850 7px/1.1 system-ui,sans-serif;letter-spacing:.15em;
  }
  .vw-premium-drawer-head-copy b{
    display:block;margin-top:4px;color:var(--vw-premium-text);font:850 15px/1.15 system-ui,sans-serif;
  }
  .vw-premium-drawer-head-copy small{
    display:block;margin-top:4px;color:var(--vw-premium-muted);font:650 8.5px/1.3 system-ui,sans-serif;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .vw-premium-drawer-close{
    width:36px;height:36px;border:1px solid var(--vw-premium-line);border-radius:12px;
    background:rgba(255,255,255,.045);color:#fff;font-size:20px;cursor:pointer;
  }

  .vw-premium-drawer-label{
    order:-10;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin:0 1px -2px;color:#8994aa;font:850 7px/1 system-ui,sans-serif;letter-spacing:.13em;
  }
  .vw-premium-drawer-label::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.065)}

  .vw-premium-extras{
    order:5;
    display:grid;
    gap:9px;
    padding-bottom:4px;
  }
  .vw-premium-section{
    border:1px solid rgba(255,255,255,.075);
    border-radius:15px;
    padding:10px;
    background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
  }
  .vw-premium-section-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
  }
  .vw-premium-section-head span{color:#8c96aa;font:850 7px/1 system-ui,sans-serif;letter-spacing:.13em}
  .vw-premium-section-head b{
    max-width:62%;color:#e8ecf7;font:750 9px/1.2 system-ui,sans-serif;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
  }
  .vw-premium-button-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .vw-premium-button-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vw-premium-action{
    min-width:0;min-height:38px;padding:0 8px;border:1px solid rgba(255,255,255,.085);
    border-radius:11px;background:rgba(255,255,255,.04);color:#e8edf8;
    font:800 9px/1.15 system-ui,sans-serif;cursor:pointer;
    transition:.16s ease;
  }
  .vw-premium-action:hover,.vw-premium-action:focus-visible{
    outline:none;background:rgba(117,103,255,.13);border-color:rgba(124,112,255,.28)
  }
  .vw-premium-action:active{transform:scale(.97)}

  .vw-premium-range{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;margin-top:8px;
  }
  .vw-premium-range label{grid-column:1/-1;display:flex;justify-content:space-between;color:#aab4c5;font:750 8px/1 system-ui,sans-serif}
  .vw-premium-range input{grid-column:1/-1;width:100%}
  .vw-premium-range em{font-style:normal;color:#8f86ff}

  #vwPlayerPremiumScrim{
    position:fixed;
    inset:0;
    z-index:2147482680;
    opacity:0;
    pointer-events:none;
    background:rgba(2,5,10,.30);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    transition:opacity .2s ease;
  }
  body.vw-player-control-drawer-open #vwPlayerPremiumScrim{
    opacity:1;
    pointer-events:auto;
  }

  /* Personal Messages + SAME main room player. */
  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open{
    --vw-premium-pm-player-height:220px;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open .stage{
    box-sizing:border-box!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--vw-private-vv-top,0px)!important;
    width:100vw!important;
    height:var(--vw-premium-pm-player-height)!important;
    min-height:0!important;
    max-height:var(--vw-premium-pm-player-height)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:2147482700!important;
    border:0!important;
    border-radius:0 0 18px 18px!important;
    background:#000!important;
    box-shadow:0 16px 36px rgba(0,0,0,.38)!important;
    transition:height .22s var(--vw-premium-ease),box-shadow .22s ease!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open #videoWrap{
    box-sizing:border-box!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    border-radius:0 0 18px 18px!important;
    overflow:hidden!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open #videoWrap video,
  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open #video{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    object-fit:contain!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open .private-messages-surface{
    top:calc(var(--vw-private-vv-top,0px) + var(--vw-premium-pm-player-height) + var(--vw-premium-pm-player-gap))!important;
    height:auto!important;
    max-height:none!important;
    transition:top .22s var(--vw-premium-ease)!important;
  }

  /* In keyboard mode preserve the Android shell's VisualViewport ownership,
     but subtract the reserved main-player lane from PM height. */
  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open.vw-android-keyboard-open{
    --vw-premium-pm-player-height:150px;
    --vw-premium-pm-player-gap:4px;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open.vw-android-keyboard-open .private-messages-surface{
    top:calc(var(--vw-private-vv-top,0px) + var(--vw-premium-pm-player-height) + var(--vw-premium-pm-player-gap))!important;
    bottom:auto!important;
    height:calc(var(--vw-private-vv-height,100dvh) - var(--vw-premium-pm-player-height) - var(--vw-premium-pm-player-gap))!important;
    max-height:none!important;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open.vw-android-keyboard-open.vw-android-keyboard-tight{
    --vw-premium-pm-player-height:110px;
  }

  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open.vw-android-keyboard-open.vw-android-keyboard-tight #vwPlayerPremiumRail{
    transform:translate3d(0,-50%,0) scale(.88);
    transform-origin:left center;
  }

  /* Keep the focused PM header compact enough that the reserved movie lane
     does not leave too little message space on short keyboards. */
  body.vw-android-room-shell.vw-player-premium-ready.vw-private-thread-open.vw-android-keyboard-open .private-thread-head{
    min-height:48px!important;
  }

  /* Smooth PM reveal without touching message/render state. */
  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open .private-messages-surface{
    animation:vwPremiumPmReveal .24s var(--vw-premium-ease) both;
  }
  @keyframes vwPremiumPmReveal{
    from{opacity:.65;transform:translate3d(0,8px,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  /* In fullscreen the rail stays because it is inside #videoWrap.
     Hide the drawer opener so fullscreen remains a clean 3-control surface. */
  #videoWrap:fullscreen #vwPlayerPremiumMenu,
  #videoWrap:-webkit-full-screen #vwPlayerPremiumMenu{display:none!important}
  #videoWrap:fullscreen #vwPlayerPremiumRail,
  #videoWrap:-webkit-full-screen #vwPlayerPremiumRail{
    left:max(12px,env(safe-area-inset-left,0px));
  }
}

@media(max-width:380px){
  body.vw-android-room-shell.vw-player-premium-ready #vwPlayerPremiumRail{
    width:43px;padding:5px;border-radius:15px;gap:5px;
  }
  body.vw-android-room-shell.vw-player-premium-ready .vw-player-rail-btn{width:31px;height:31px;min-width:31px;border-radius:10px}
  body.vw-android-room-shell.vw-player-premium-ready .vw-player-rail-sync{width:31px}
  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer{
    width:min(92vw,350px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #vwPlayerPremiumRail,
  #vwPlayerPremiumScrim,
  body.vw-player-control-drawer-open .stage .controls.vw-premium-control-drawer,
  body.vw-android-room-shell.vw-player-premium-ready .stage .controls.vw-premium-control-drawer,
  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open .stage,
  body.vw-android-room-shell.vw-player-premium-ready.vw-private-messages-open .private-messages-surface{
    transition:none!important;
    animation:none!important;
  }
}