/* =========================
   MOBILE CALL OPTIMIZATION
   ========================= */

@media (max-width: 768px){

  #callRoomPopup{
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    margin: 0;
    padding: 12px;
    border-radius: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .call-room-shell{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:auto;
  }

  #callStage{
    min-height:280px !important;
    height:40vh;
  }

  #callVideoContainer{
    min-height:280px !important;
    height:40vh;
  }

  .call-panel-card{
    padding:10px;
    border-radius:14px;
  }

  #callParticipantsList,
  #callManageFriendList{
    max-height:220px;
  }

  .call-remote-grid{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:8px;
  }

  .call-remote-tile{
    min-height:120px;
  }

  .call-remote-badge{
    font-size:.75rem;
    padding:4px 8px;
  }

  .call-participant-card{
    flex-wrap:wrap;
  }

  .call-participant-left{
    width:100%;
  }

  #callMicBtn,
  #callCamBtn,
  #callScreenBtn,
  #leaveCallBtn,
  #callManageBtn{
    flex:1;
    min-width:120px;
  }

  #incomingCallPopup,
  #callCreatePopup{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
  }
}


/* Kiçik telefonlar */

@media (max-width: 480px){

  #callStage{
    min-height:220px !important;
    height:32vh;
  }

  #callVideoContainer{
    min-height:220px !important;
    height:32vh;
  }

  .call-remote-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .call-remote-tile{
    min-height:100px;
  }

  .call-participant-left img{
    width:30px;
    height:30px;
  }

  .call-participant-name{
    font-size:.9rem;
  }

  .call-participant-meta{
    font-size:.75rem;
  }

  #callRoomMeta{
    font-size:.8rem;
  }
}