/* GattoMusic 2.0 - Build 9.83 */

/* A 9.82 usava height:100% em um painel position:fixed que também tinha top e
   bottom. Isso podia somar a altura do viewport ao deslocamento superior e
   cortar a base. Na 9.83 top/bottom voltam a ser a fonte de verdade. */
.chat-room-sidepanel-v972.chat-v982-room-layout.chat-v983-room-layout{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:hidden!important;
  grid-template-rows:auto minmax(0,1fr) clamp(96px,17dvh,150px) auto!important;
}
body.chat-v982-room-detached-host .chat-room-sidepanel-v972.chat-v983-room-layout{
  inset:0!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
}
.chat-v983-room-layout>.chat-room-side-scroll-v972{
  min-height:0!important;
  overflow:hidden!important;
  align-content:stretch!important;
}
.chat-v983-room-layout>.chat-room-side-scroll-v972>.chat-room-side-call-v972{
  min-height:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-content:stretch!important;
}
.chat-v983-room-layout .chat-room-grid-v969{
  min-height:0!important;
  max-height:min(30dvh,270px)!important;
  overflow:hidden!important;
}
.chat-v983-room-layout .chat-room-participant-v969{
  min-height:0!important;
  max-height:min(30dvh,270px)!important;
}
.chat-v983-room-layout .chat-room-participant-v969 video{
  max-height:min(25dvh,220px)!important;
  object-fit:contain!important;
}
.chat-v983-room-layout>.chat-room-messages-v972{
  min-height:0!important;
  overflow:hidden!important;
}
.chat-v983-room-layout .chat-room-message-list-v972{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}
.chat-v983-room-layout>.chat-room-message-footer-v980{
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}

/* Todos os controles conectados da faixa da Sala ficam em um menu suspenso
   compacto. O menu abre para cima para não ultrapassar a base da janela. */
.chat-v983-room-layout .chat-room-actions-v969{
  display:block!important;
  min-height:40px!important;
  overflow:visible!important;
  position:relative!important;
}
.chat-v983-room-menu{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  z-index:80!important;
}
.chat-v983-room-menu>summary{
  list-style:none!important;
  cursor:pointer!important;
  width:100%!important;
  min-height:40px!important;
  box-sizing:border-box!important;
}
.chat-v983-room-menu>summary::-webkit-details-marker{display:none!important}
.chat-v983-room-menu-panel{
  display:none;
  position:absolute!important;
  right:0!important;
  bottom:calc(100% + 6px)!important;
  width:min(360px,100%)!important;
  max-width:100%!important;
  max-height:min(62dvh,520px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:8px!important;
  border:1px solid var(--chat-v72-line,var(--line))!important;
  border-radius:12px!important;
  background:var(--chat-v72-panel,var(--panel))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.42)!important;
  box-sizing:border-box!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
}
.chat-v983-room-menu[open]>.chat-v983-room-menu-panel{display:grid!important}
.chat-v983-room-menu-panel>.button,
.chat-v983-room-menu-panel>.chat-v982-blur-controls,
.chat-v983-room-menu-panel>.chat-v982-blur-controls>.button,
.chat-v983-room-menu-panel>.chat-v982-blur-controls>select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.chat-v983-room-menu-panel>.chat-v982-blur-controls{
  grid-template-columns:minmax(0,1fr)!important;
}

@media(max-height:760px) and (min-width:821px){
  .chat-room-sidepanel-v972.chat-v983-room-layout{
    grid-template-rows:auto minmax(0,1fr) clamp(82px,15dvh,122px) auto!important;
    gap:6px!important;
    padding:8px!important;
  }
  .chat-v983-room-layout .chat-room-grid-v969{max-height:min(25dvh,220px)!important}
  .chat-v983-room-layout .chat-room-participant-v969{max-height:min(25dvh,220px)!important}
  .chat-v983-room-layout .chat-room-participant-v969 video{max-height:min(20dvh,180px)!important}
  .chat-v983-room-menu-panel{max-height:min(56dvh,420px)!important}
}

@media(max-width:820px){
  .chat-room-sidepanel-v972.chat-v983-room-layout{
    height:auto!important;
    max-height:none!important;
    grid-template-rows:auto minmax(0,1fr) minmax(86px,18dvh) auto!important;
  }
  .chat-v983-room-layout>.chat-room-side-scroll-v972{overflow:hidden!important}
  .chat-v983-room-layout .chat-room-grid-v969{max-height:min(28dvh,230px)!important}
  .chat-v983-room-layout .chat-room-participant-v969 video{max-height:min(22dvh,190px)!important}
  .chat-v983-room-menu-panel{width:100%!important;max-height:min(55dvh,390px)!important}
}

@media(max-width:520px){
  .chat-room-sidepanel-v972.chat-v983-room-layout{
    grid-template-rows:auto minmax(0,1fr) minmax(78px,16dvh) auto!important;
  }
}

/* A faixa sobre a câmera mostra somente o nome, alinhado à direita na mesma
   região visual antes ocupada pelos ícones de mídia. */
.chat-v983-room-layout .chat-room-participant-footer-v969.chat-v983-name-only{
  justify-content:flex-end!important;
  gap:0!important;
}
.chat-v983-room-layout .chat-room-participant-footer-v969.chat-v983-name-only>strong{
  flex:0 1 auto!important;
  max-width:100%!important;
  margin-left:auto!important;
  text-align:right!important;
}
.chat-v983-room-layout .chat-room-participant-footer-v969.chat-v983-name-only .chat-room-media-state-v969,
.chat-v983-room-layout .chat-room-participant-footer-v969.chat-v983-name-only .chat-room-speaking-v969{
  display:none!important;
}