/* FISTY_V134IIG_ROOM_REPAIR */


/* =========================================================
   DESKTOP — USE THE SCREEN
   ========================================================= */

@media(min-width:1000px){

  body.roomActive .shell{
    width:min(
      1200px,
      calc(100vw - 420px)
    )!important;

    max-width:none!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.roomActive #room.active,
  body.roomActive #room #roomWatchHome,
  body.roomActive #room .watchDock{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }

  body.roomActive #room .stage{
    width:100%!important;

    height:clamp(
      430px,
      62vh,
      675px
    )!important;

    min-height:430px!important;
    max-height:675px!important;

    aspect-ratio:auto!important;
  }
}


/* =========================================================
   CONTENT PLAYER ALWAYS FILLS TOGETHER SCREEN
   ========================================================= */

body.roomActive #room #yt,
body.roomActive #room #yt > div,
body.roomActive #room #yt iframe,
body.roomActive #room #massMediaVideo,
body.roomActive #room #togetherStage,
body.roomActive #room #togetherStageInner{
  width:100%!important;
  height:100%!important;

  min-width:100%!important;
  min-height:100%!important;

  max-width:none!important;
  max-height:none!important;
}

body.roomActive #room #yt,
body.roomActive #room #yt > div,
body.roomActive #room #yt iframe{
  position:absolute!important;
  inset:0!important;
}

body.roomActive #room #yt iframe{
  pointer-events:none!important;
}


/* =========================================================
   FIRST THREE LIVE REACTIONS — TOP RIGHT OF CONTENT
   ========================================================= */

/* Retire the older adaptive rail.
   V134IIG owns one consistent desktop/tablet/mobile rail. */

body.roomActive #room #fistyMobileReactionRail{
  display:none!important;
}


body.roomActive #room #fistyV134IIGReactionPips{
  position:absolute!important;

  top:54px!important;
  right:10px!important;

  z-index:76!important;

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

  gap:6px!important;

  width:96px!important;

  pointer-events:none!important;
}


body.roomActive
#room
#fistyV134IIGReactionPips[hidden]{
  display:none!important;
}


.fistyV134IIGReactionPip{
  position:relative;

  width:96px;
  height:68px;

  overflow:hidden;

  border:
    1px solid
    rgba(183,115,255,.74);

  border-radius:13px;

  background:#070914;

  box-shadow:
    0 8px 24px #000b,
    0 0 20px rgba(207,54,255,.20);
}


.fistyV134IIGReactionPip video,
.fistyV134IIGReactionPip canvas,
.fistyV134IIGReactionPip img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}


.fistyV134IIGReactionPipName{
  position:absolute;

  left:4px;
  right:4px;
  bottom:4px;

  overflow:hidden;

  padding:3px 5px;

  border-radius:999px;

  background:#05060bd9;

  color:#fff;

  font-size:7px;
  font-weight:950;

  white-space:nowrap;
  text-overflow:ellipsis;

  text-align:center;
}


/* =========================================================
   LIVE REACTIONS BELOW CONTENT
   ========================================================= */

body.roomActive #room #roomPinnedReactions{
  display:block!important;

  width:100%!important;

  height:auto!important;

  min-height:46px!important;
  max-height:168px!important;

  margin:7px 0 0!important;

  padding:6px!important;

  overflow:hidden!important;
}


body.roomActive
#room
#roomPinnedReactions
.reactionHead{
  display:none!important;
}


#fistyV134IIGReactionHeader{
  display:flex;

  align-items:center;

  gap:8px;

  min-height:34px;

  margin:0 0 6px;

  padding:3px 4px;
}


#fistyV134IIGReactionHeader
.fistyV134IIGReactionTitle{
  min-width:0;
  flex:1;
}


#fistyV134IIGReactionHeader b{
  display:block;

  color:#fff;

  font-size:10px;
  font-weight:1000;
}


#fistyV134IIGReactionHeader small{
  display:block;

  margin-top:2px;

  overflow:hidden;

  color:#969db0;

  font-size:8px;

  white-space:nowrap;
  text-overflow:ellipsis;
}


#fistyV134IIGReactionHeader
button{
  flex:0 0 auto;

  min-height:28px;

  border:
    1px solid
    #393f59;

  border-radius:999px;

  padding:5px 9px;

  background:#111522;

  color:#fff;

  font-size:7px;
  font-weight:1000;

  cursor:pointer;
}


@keyframes fistyV134IIGGoLiveBlink{
  0%,100%{
    opacity:1;
    box-shadow:
      0 0 0 rgba(255,46,135,0);
  }

  50%{
    opacity:.58;
    box-shadow:
      0 0 22px
      rgba(255,46,135,.82);
  }
}


#fistyV134IIGGoLive{
  border-color:#ff3d97!important;

  background:
    linear-gradient(
      105deg,
      #ff286f,
      #9a38ff
    )!important;

  animation:
    fistyV134IIGGoLiveBlink
    1.05s
    infinite!important;
}


body.cameraIsLive
#fistyV134IIGGoLive{
  display:none!important;
}


body.roomActive #room #camGrid{
  display:flex!important;

  flex-flow:row nowrap!important;

  gap:7px!important;

  width:100%!important;

  height:104px!important;
  min-height:104px!important;
  max-height:104px!important;

  overflow-x:auto!important;
  overflow-y:hidden!important;

  scrollbar-width:thin!important;

  -webkit-overflow-scrolling:touch!important;
}


body.roomActive
#room
#camGrid
>
.fistyV134IIGStageSource{
  display:none!important;
}


body.roomActive
#room
#camGrid
>
.fistyRailMirrored{
  display:none!important;
}


body.roomActive
#room
#camGrid
.goLivePrompt strong{
  animation:
    fistyV134IIGGoLiveBlink
    1.05s
    infinite;
}


body.fistyV134IIGReactionsCollapsed
#fistyV134IIGReactionPips{
  display:none!important;
}


body.roomActive.fistyV134IIGReactionsCollapsed
#roomPinnedReactions{
  height:42px!important;

  min-height:42px!important;
  max-height:42px!important;
}


body.fistyV134IIGReactionsCollapsed
#roomPinnedReactions
#camGrid{
  display:none!important;
}


/* =========================================================
   CONTROL RAIL — DESKTOP WHEEL + PHONE SWIPE
   ========================================================= */

body.roomActive #room #simpleRoomActions{
  width:100%!important;

  overflow-x:auto!important;
  overflow-y:hidden!important;

  overscroll-behavior-inline:contain!important;

  scroll-snap-type:x proximity!important;

  scrollbar-width:thin!important;

  touch-action:pan-x!important;
}


/* =========================================================
   ALL CONTROL PANELS STAY INSIDE CONTROLS
   ========================================================= */

#fistyV134IIGInlinePanel{
  display:none;

  width:100%;

  margin-top:7px;

  border:
    1px solid
    #31374c;

  border-radius:16px;

  padding:8px;

  background:
    linear-gradient(
      180deg,
      #0b0e19,
      #070911
    );

  overflow:hidden;
}


#fistyV134IIGInlinePanel.hasContent{
  display:block;
}


body.roomActive
#fistyV134IIGInlinePanel
.sheet.fistyV134IIGInlineMoved,
body.roomActive
#fistyV134IIGInlinePanel
#fistyMvpThemeSheet.fistyV134IIGInlineMoved{
  position:static!important;

  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;

  transform:none!important;

  width:100%!important;
  max-width:none!important;

  height:auto!important;

  max-height:440px!important;

  margin:0!important;

  border:0!important;

  border-radius:12px!important;

  padding:10px!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;

  box-shadow:none!important;

  transition:none!important;
}


body.roomActive
#fistyV134IIGInlinePanel
.sheet.fistyV134IIGInlineMoved{
  display:none!important;
}


body.roomActive
#fistyV134IIGInlinePanel
.sheet.fistyV134IIGInlineMoved.open{
  display:block!important;
}


body.roomActive
#fistyV134IIGInlinePanel
#fistyMvpThemeSheet.fistyV134IIGInlineMoved{
  display:none!important;
}


body.roomActive
#fistyV134IIGInlinePanel
#fistyMvpThemeSheet.fistyV134IIGInlineMoved.open{
  display:block!important;
}


/* Theme Studio is no longer a detached right-side window. */

body.roomActive
#fistyV134IIGInlinePanel
#fistyMvpThemeSheet
textarea,
body.roomActive
#fistyV134IIGInlinePanel
#fistyMvpThemeSheet
input,
body.roomActive
#fistyV134IIGInlinePanel
#fistyMvpThemeSheet
select{
  width:100%!important;
  max-width:100%!important;
}


/* =========================================================
   HOST STUDIO ALSO LIVES IN CONTROLS
   ========================================================= */

body.roomActive #room
.hostStudio:not(.fistyV134IIGInlineMoved),
body.roomActive #room
#autoMomentsBar:not(.fistyV134IIGInlineMoved),
body.roomActive #room
#reactionLimitBox:not(.fistyV134IIGInlineMoved),
body.roomActive #room
#autoMomentTray:not(.fistyV134IIGInlineMoved){
  display:none!important;
}


#fistyV134IIGHostWrap{
  display:none;
}


#fistyV134IIGHostWrap.open{
  display:block;
}


#fistyV134IIGHostWrap
.hostStudio,
#fistyV134IIGHostWrap
#autoMomentsBar,
#fistyV134IIGHostWrap
#reactionLimitBox,
#fistyV134IIGHostWrap
#autoMomentTray{
  display:block!important;

  position:static!important;

  width:100%!important;
  max-width:none!important;

  margin:0 0 8px!important;
}


/* =========================================================
   REMOVE LEGACY SPACE BELOW THE FINAL ROOM SURFACE
   ========================================================= */

body.roomActive #room #onlineList,
body.roomActive #room #presenceFooter,
body.roomActive #room #roomCode,
body.roomActive #room .roomIdentity,
body.roomActive #room .roomCreatorMeta,
body.roomActive #room .queueCard,
body.roomActive #room .roomBody{
  display:none!important;
}


/* =========================================================
   PHONE / TABLET
   ========================================================= */

@media(max-width:999px){

  body.roomActive #room .stage{
    width:100%!important;

    height:clamp(
      280px,
      48svh,
      520px
    )!important;

    min-height:280px!important;
    max-height:520px!important;

    aspect-ratio:auto!important;
  }

  body.roomActive
  #room
  #fistyV134IIGReactionPips{
    top:48px!important;
    right:6px!important;

    width:62px!important;

    gap:4px!important;
  }

  .fistyV134IIGReactionPip{
    width:62px;
    height:50px;

    border-radius:10px;
  }

  .fistyV134IIGReactionPipName{
    font-size:6px;
  }

  #fistyV134IIGReactionHeader{
    gap:5px;
  }

  #fistyV134IIGReactionHeader
  button{
    padding:5px 7px;
  }

  #fistyV134IIGInlinePanel{
    max-height:46svh;

    overflow-y:auto;
  }
}