/* VW_WATCH_TOGETHER_PRIVATE_CHAT_OVERLAY_SMOOTH_V3_15R5_R8_COOP
   Mobile PM thread only. Same player node, same playback/sync, no DB/server changes.
   Player becomes a visual overlay; PM geometry is owned by the canonical composer/viewport. */
:root{
  --vw-r7-overlay-ease:cubic-bezier(.2,.78,.2,1);
}

@media (max-width:980px){
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden){
    --vw-r7-overlay-video-h:clamp(152px,43vw,172px);
    --vw-r7-overlay-head-h:58px;
    --vw-r7-overlay-content-top:calc(var(--vw-r7-overlay-video-h) + var(--vw-r7-overlay-head-h) + 8px);
  }

  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open.vw-android-keyboard-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden),
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open.vw-android-ime-session:not(.vw-gif-tray-open):not(.vw-premium-video-hidden){
    --vw-r7-overlay-video-h:clamp(108px,31vw,132px);
  }

  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open.vw-android-keyboard-tight:not(.vw-gif-tray-open):not(.vw-premium-video-hidden){
    --vw-r7-overlay-video-h:104px;
  }

  /* The room grid is the stable containing block. The video is now an overlay,
     so it no longer consumes PM layout height or causes PM top/height reflow. */
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden) .room-grid{
    position:relative!important;
  }

  body.vw-android-room-shell.vw-pm-overlay-smooth-ready.vw-player-premium-ready.vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden) .stage{
    box-sizing:border-box!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:var(--vw-private-vv-top,0px)!important;
    width:100%!important;
    height:var(--vw-r7-overlay-video-h)!important;
    min-height:var(--vw-r7-overlay-video-h)!important;
    max-height:var(--vw-r7-overlay-video-h)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:2147482700!important;
    transform:translate3d(0,0,0);
    will-change:auto;
    contain:layout paint;
    transition:transform .15s var(--vw-r7-overlay-ease),opacity .13s ease,box-shadow .15s ease!important;
    animation:vwR7OverlayPlayerIn .15s var(--vw-r7-overlay-ease) both;
  }

  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden) #videoWrap{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    transform:translateZ(0);
    contain:paint;
  }

  /* Canonical R3 composer geometry owns PM height. Player height is deliberately
     absent from this calculation. This is the core no-layout-coupling rule. */
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden) .private-messages-surface{
    top:var(--vw-private-vv-top,0px)!important;
    bottom:auto!important;
    height:var(--vw-private-surface-height,calc(var(--vw-private-vv-height,100dvh) - 74px))!important;
    max-height:none!important;
    overflow:hidden!important;
    transition:none!important;
    animation:vwR7PmSurfaceIn .13s ease-out both!important;
    contain:layout paint;
  }

  /* Header floats below the player. Messages own the whole PM scroll plane, so
     once scrolled they pass underneath the player instead of moving the layout. */
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden) .private-thread-head{
    box-sizing:border-box!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:var(--vw-r7-overlay-video-h)!important;
    z-index:8!important;
    margin:0!important;
    transition:opacity .12s ease,transform .12s var(--vw-r7-overlay-ease)!important;
  }

  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden) .private-thread-messages{
    box-sizing:border-box!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding-top:var(--vw-r7-overlay-content-top)!important;
    padding-bottom:12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y!important;
    scroll-behavior:auto!important;
    scroll-padding-top:calc(var(--vw-r7-overlay-video-h) + 8px)!important;
    scroll-padding-bottom:12px!important;
    contain:layout paint style;
    transform:translateZ(0);
  }

  /* Keyboard focus + visible video intentionally hides the large header in the
     existing R6R2 layer. Remove its reserved space too, but keep player overlay. */
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready.vw-r6r2-focus-mode.vw-r6r2-video-visible.vw-private-thread-open:not(.vw-gif-tray-open):not(.vw-premium-video-hidden){
    --vw-r7-overlay-head-h:0px;
    --vw-r7-overlay-content-top:calc(var(--vw-r7-overlay-video-h) + 8px);
  }

  /* Geometry changes should be immediate; visual motion remains transform/opacity.
     This avoids top/height animation reflow during IME resize. */
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open .private-messages-surface,
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open #chatForm{
    transition-property:opacity,transform,box-shadow,border-color!important;
    transition-duration:.12s!important;
  }

  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open #chatForm>button,
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open .vw-premium-pm-icon,
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open .private-thread-close{
    transition:transform .11s ease,opacity .11s ease,background-color .11s ease,border-color .11s ease!important;
  }
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open #chatForm>button:active,
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open .vw-premium-pm-icon:active,
  body.vw-android-room-shell.vw-pm-overlay-smooth-ready:not(.vw-pm-single-owner-ready).vw-private-thread-open .private-thread-close:active{
    transform:scale(.96)!important;
  }

  @keyframes vwR7OverlayPlayerIn{
    from{opacity:.82;transform:translate3d(0,-5px,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }
  @keyframes vwR7PmSurfaceIn{
    from{opacity:.88}
    to{opacity:1}
  }
}

@media (prefers-reduced-motion:reduce){
  body.vw-pm-overlay-smooth-ready .stage,
  body.vw-pm-overlay-smooth-ready .private-messages-surface,
  body.vw-pm-overlay-smooth-ready .private-thread-head,
  body.vw-pm-overlay-smooth-ready #chatForm,
  body.vw-pm-overlay-smooth-ready #chatForm>button{
    transition:none!important;
    animation:none!important;
  }
}