/* VW_WATCH_TOGETHER_PREMIUM_PLAYER_BOTTOM_SHEET_FIX_V3_15R4R1
   Root cause proven by V3.15A10:
   the R1 drawer lives inside the app/stage stacking context while its BODY scrim
   is above that context, so the scrim receives taps over visible drawer controls.

   R4 keeps the clean-player R3 UX but replaces the visible R1 drawer with one
   BODY-level premium sheet. Original controls remain the event/state source.
*/

:root{
  --vw-sheet-ease:cubic-bezier(.2,.82,.18,1);
  --vw-sheet-bg:rgba(8,12,20,.985);
  --vw-sheet-card:rgba(255,255,255,.035);
  --vw-sheet-line:rgba(255,255,255,.085);
  --vw-sheet-muted:#8f9aaf;
  --vw-sheet-text:#f2f5ff;
  --vw-sheet-accent:#7768ff;
}

/* Disable the visually broken R1 drawer/scrim, but keep its original controls in DOM. */
@media(max-width:980px){
  body.vw-premium-sheet-ready #vwPlayerPremiumScrim{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body.vw-premium-sheet-ready .stage .controls.vw-premium-control-drawer,
  body.vw-premium-sheet-ready.vw-player-control-drawer-open .stage .controls.vw-premium-control-drawer{
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(-115%,0,0)!important;
  }
}

body.vw-premium-sheet-open{
  overflow:hidden!important;
}

body.vw-premium-sheet-open #vwPremiumRoomPlayerBtn,
body.vw-premium-sheet-open #vwPremiumPmPlayerBtn{
  border-color:rgba(145,132,255,.34)!important;
  background:linear-gradient(135deg,rgba(119,104,255,.92),rgba(77,126,255,.88))!important;
  box-shadow:0 8px 24px rgba(69,62,218,.22)!important;
  color:#fff!important;
}

#vwPremiumSheetBackdrop{
  position:fixed;
  inset:0;
  z-index:2147483200;
  background:rgba(2,5,10,.50);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .20s ease;
}

body.vw-premium-sheet-open #vwPremiumSheetBackdrop{
  opacity:1;
  pointer-events:auto;
}

#vwPremiumPlayerSheet{
  box-sizing:border-box;
  position:fixed;
  left:max(8px,env(safe-area-inset-left,0px));
  right:max(8px,env(safe-area-inset-right,0px));
  bottom:max(8px,env(safe-area-inset-bottom,0px));
  z-index:2147483210;
  width:auto;
  max-width:520px;
  max-height:min(72dvh,620px);
  margin:0 auto;
  padding:8px 10px 12px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:
    radial-gradient(circle at 14% 0%,rgba(119,104,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(11,16,27,.992),rgba(6,10,17,.995));
  color:var(--vw-sheet-text);
  box-shadow:0 26px 90px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  transform:translate3d(0,calc(100% + 30px),0) scale(.985);
  transform-origin:center bottom;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    transform .28s var(--vw-sheet-ease),
    opacity .20s ease,
    visibility 0s linear .28s;
}

body.vw-premium-sheet-open #vwPremiumPlayerSheet{
  transform:translate3d(0,0,0) scale(1);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    transform .28s var(--vw-sheet-ease),
    opacity .20s ease,
    visibility 0s linear 0s;
}

.vw-sheet-handle{
  width:38px;
  height:4px;
  margin:0 auto 8px;
  border-radius:99px;
  background:rgba(255,255,255,.22);
}

.vw-sheet-head{
  position:sticky;
  top:-8px;
  z-index:4;
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  align-items:center;
  gap:9px;
  margin:0 -2px;
  padding:2px 2px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(10,15,25,.995) 72%,rgba(10,15,25,.91));
  backdrop-filter:blur(18px);
}

.vw-sheet-head-copy{min-width:0}
.vw-sheet-eyebrow{
  display:block;
  color:#9389ff;
  font:900 7px/1.1 system-ui,sans-serif;
  letter-spacing:.15em;
}
.vw-sheet-title{
  display:block;
  margin-top:4px;
  color:#f5f7ff;
  font:850 16px/1.1 system-ui,sans-serif;
}
.vw-sheet-status{
  display:block;
  margin-top:4px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8d99ae;
  font:700 8px/1.25 system-ui,sans-serif;
}

#vwPremiumSheetClose{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#vwPremiumSheetClose:active{transform:scale(.92)}

.vw-sheet-quick{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0;
}

.vw-sheet-quick-btn{
  min-width:0;
  height:54px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(255,255,255,.045);
  color:#f5f7ff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.vw-sheet-quick-btn svg{width:17px;height:17px;display:block}
.vw-sheet-quick-btn small{color:#a9b3c5;font:750 7px/1 system-ui,sans-serif}
.vw-sheet-quick-btn.vw-primary{
  background:linear-gradient(135deg,#7768ff,#527dff);
  border-color:rgba(166,157,255,.30);
  box-shadow:0 10px 26px rgba(72,65,222,.22);
}
.vw-sheet-quick-btn:active{transform:scale(.95)}

.vw-sheet-card{
  margin-top:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.018));
}

.vw-sheet-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.vw-sheet-row b{color:#f0f3fb;font:800 9px/1 system-ui,sans-serif}
.vw-sheet-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8793a8;
  font:700 8px/1 system-ui,sans-serif;
}

.vw-sheet-range{
  width:100%;
  height:26px;
  margin:0;
  accent-color:var(--vw-sheet-accent);
}

.vw-sheet-two{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7px;
}
.vw-sheet-three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.vw-sheet-action,
.vw-sheet-select{
  box-sizing:border-box;
  min-width:0;
  width:100%;
  min-height:40px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  color:#eaf0fb;
  font:800 8.5px/1.15 system-ui,sans-serif;
  cursor:pointer;
}
.vw-sheet-action:disabled,
.vw-sheet-select:disabled{opacity:.45;cursor:default}
.vw-sheet-action:active{transform:scale(.97)}

.vw-sheet-select{
  appearance:auto;
  outline:none;
  background:#0c121d;
}

.vw-sheet-details{
  margin-top:8px;
  padding:0;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:rgba(255,255,255,.018);
  overflow:hidden;
}
.vw-sheet-details summary{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 11px;
  color:#eef2fb;
  font:800 9px/1 system-ui,sans-serif;
  cursor:pointer;
  list-style:none;
}
.vw-sheet-details summary::-webkit-details-marker{display:none}
.vw-sheet-details[open] summary{border-bottom:1px solid rgba(255,255,255,.06)}
.vw-sheet-advanced{
  display:grid;
  gap:9px;
  padding:10px;
}
.vw-sheet-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#8e9aaf;
  font:800 7px/1 system-ui,sans-serif;
  letter-spacing:.10em;
}
.vw-sheet-subhead span:last-child{
  letter-spacing:0;
  text-transform:none;
  color:#7f8ca2;
  max-width:60%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#vwPremiumSheetAudioList{
  display:none;
  gap:6px;
  margin-top:7px;
}
#vwPremiumSheetAudioList.open{display:grid}
#vwPremiumSheetAudioList .vw-sheet-action{
  text-align:left;
}

@media(max-width:360px){
  #vwPremiumPlayerSheet{
    left:6px;
    right:6px;
    bottom:max(6px,env(safe-area-inset-bottom,0px));
    padding-inline:8px;
    border-radius:19px;
    max-height:min(76dvh,590px);
  }
  .vw-sheet-quick{gap:6px}
  .vw-sheet-quick-btn{height:50px;border-radius:13px}
  .vw-sheet-card{padding:9px}
}

@media(max-height:600px){
  #vwPremiumPlayerSheet{max-height:78dvh}
}

@media(prefers-reduced-motion:reduce){
  #vwPremiumPlayerSheet,
  #vwPremiumSheetBackdrop,
  .vw-sheet-quick-btn,
  .vw-sheet-action{
    transition:none!important;
  }
}