.from-me {
       position: relative;
       display: none; // добавил свойство
       padding: 10px 20px;
       color: white;
       background: #0b93f6;
       border-radius: 25px;
       float: right;
  }

 .loud {
       display: block; // добавил свойство
       animation-duration: 1.5s;
       animation-fill-mode: both;
       animation-timing-function: ease-in-out;
       transform-origin: center center;
       animation-name: loud;
  }
.content {
  width: 100%; // и тут у тебя ошибка widht
  height: 500px
}

const sms = document.querySelector('.from-me');
    
const scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );

  document.addEventListener('scroll',()=>{
    window.pageYOffset+document.documentElement.clientHeight===scrollHeight&&sms.classList.add('loud');
  })

const li  = document.querySelectorAll('li');

document.addEventListener('mouseover',e=>{
    let targ = e.target.closest('li');
    if(!targ) return;

    [...li].forEach(item=>item!==targ?item.style.visibility='hidden':null);
    
    targ.addEventListener('mouseleave',()=>{
        [...li].forEach(item=>item.style.visibility='visible');
    })
});