/* GattoMusic 2.0 - Build 9.85
   Correcoes incrementais de responsividade:
   - a galeria de cameras da Sala passa a medir apenas as linhas reais de video;
   - a chamada privada de video cabe na viewport em zoom 100% e exibe o quadro
     completo, sem depender de Ctrl+roda/zoom manual. */

/* ========================================================================== */
/* SALA: GALERIA DE CAMERAS COM ALTURA PELO CONTEUDO                         */
/* ========================================================================== */

.chat-room-sidepanel-v972.chat-v984-room-layout.chat-v985-room-layout
  >.chat-room-side-scroll-v972
  >.chat-room-side-call-v972{
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  grid-auto-rows:auto!important;
  align-content:start!important;
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

.chat-v985-room-layout .chat-room-grid-v969{
  align-self:start!important;
  align-content:start!important;
  grid-auto-rows:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

.chat-v985-room-layout .chat-room-participant-v969{
  align-self:start!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:16 / 9!important;
}

.chat-v985-room-layout .chat-room-participant-v969 .chat-room-video-v969{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
}

/* Uma ou duas cameras nao devem esticar a primeira linha para ocupar o espaco
   flexivel da Sala. O historico continua sendo o destino natural do espaco
   vertical que sobrar. */
.chat-v985-room-layout .chat-room-grid-v969[data-v985-participants="1"],
.chat-v985-room-layout .chat-room-grid-v969[data-v985-participants="2"]{
  height:fit-content!important;
  min-height:0!important;
  max-height:none!important;
}

/* Em viewports baixos, reduzir os cards proporcionalmente sem voltar a criar
   uma faixa vazia. Mais participantes continuam podendo gerar novas linhas. */
@media(max-height:760px) and (min-width:821px){
  .chat-v985-room-layout .chat-room-participant-v969{
    aspect-ratio:16 / 8.4!important;
  }
}

@media(max-width:820px){
  .chat-v985-room-layout .chat-room-grid-v969{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .chat-v985-room-layout .chat-room-participant-v969{
    aspect-ratio:16 / 10!important;
  }
}

@media(max-width:520px){
  .chat-v985-room-layout .chat-room-grid-v969{
    gap:5px!important;
  }
}

/* ========================================================================== */
/* CHAT PRIVADO: CHAMADA DE VIDEO RESPONSIVA EM ZOOM 100%                    */
/* ========================================================================== */

#chatCallModal.chat-v985-call-modal{
  box-sizing:border-box!important;
  padding:clamp(4px,1dvh,10px)!important;
  overflow:hidden!important;
}

#chatCallModal .chat-call-panel.chat-v985-call-panel,
body.gattomusic-v92-call-surface #chatCallModal .chat-call-panel.chat-v985-call-panel{
  box-sizing:border-box!important;
  width:min(1060px,100%)!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 8px)!important;
  gap:clamp(5px,.8dvh,9px)!important;
  padding:clamp(8px,1.15vw,14px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  align-content:start!important;
}

#chatCallModal .chat-call-panel.chat-v985-call-panel>*{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage,
body.gattomusic-v92-call-surface #chatCallModal .chat-call-stage.video.chat-v985-responsive-stage{
  justify-self:center!important;
  width:100%!important;
  max-width:100%!important;
  height:min(var(--chat-v985-call-stage-height,46dvh),56dvh,560px)!important;
  min-height:0!important;
  max-height:var(--chat-v985-call-stage-height,56dvh)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* O quadro inteiro e a referencia. Letterbox/pillarbox e preferivel a cortar
   rosto, bordas ou partes da camera. Vale tambem quando as cameras sao trocadas. */
#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage .chat-call-remote-video,
#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage .chat-call-local-video,
#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage.chat-call-layout-swapped .chat-call-remote-video,
#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage.chat-call-layout-swapped .chat-call-local-video{
  object-fit:contain!important;
}

#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage>.chat-call-remote-video,
#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage.chat-call-layout-swapped>.chat-call-local-video{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
}

/* Preview pequeno continua sobreposto, mas mostra o quadro completo e encolhe
   antes de forcar a superficie para fora da viewport. */
#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage:not(.chat-call-layout-swapped)>.chat-call-local-video,
#chatCallModal .chat-call-stage.video.chat-v985-responsive-stage.chat-call-layout-swapped>.chat-call-remote-video{
  width:min(24%,170px)!important;
  height:auto!important;
  max-width:34%!important;
  max-height:min(30%,130px)!important;
  object-fit:contain!important;
}

#chatCallModal .chat-v79-call-actions,
#chatCallModal .chat-call-actions,
#chatCallModal .chat-v79-call-action-group,
#chatCallModal .chat-v87-call-options,
#chatCallModal .chat-v79-call-device-grid{
  min-width:0!important;
  max-width:100%!important;
}

@media(max-width:760px), (max-height:760px){
  #chatCallModal .chat-call-panel.chat-v985-call-panel,
  body.gattomusic-v92-call-surface #chatCallModal .chat-call-panel.chat-v985-call-panel{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 4px)!important;
    padding:clamp(6px,1.4vw,10px)!important;
    gap:5px!important;
  }
  #chatCallModal .chat-call-stage.video.chat-v985-responsive-stage,
  body.gattomusic-v92-call-surface #chatCallModal .chat-call-stage.video.chat-v985-responsive-stage{
    min-height:0!important;
    height:min(var(--chat-v985-call-stage-height,36dvh),42dvh,360px)!important;
  }
  #chatCallModal .chat-call-stage.video.chat-v985-responsive-stage:not(.chat-call-layout-swapped)>.chat-call-local-video,
  #chatCallModal .chat-call-stage.video.chat-v985-responsive-stage.chat-call-layout-swapped>.chat-call-remote-video{
    width:min(30%,150px)!important;
    max-width:38%!important;
    max-height:min(32%,115px)!important;
  }
}

@media(max-width:560px){
  #chatCallModal .chat-v79-call-actions,
  #chatCallModal .chat-call-actions{
    gap:5px!important;
  }
  #chatCallModal .chat-call-actions .button{
    min-width:0!important;
    padding:6px 8px!important;
  }
}