SpardaPrime

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');
    })
});

Изменил немного стили

.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
}

javascrpt код по которому при прокрутке до конца страницы выскакивает блок

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');
  })

MutationObserver тебе в помощь , суть такова:

const someElement = document.getElementById('some-element'); // элемент за которым следить

const callback = ()=>{
const otherElement = document.getElementById('other-el');
otherElement .style.display='none';
 }  // делаешь что тебе нужно с другим элементом

const observe = new MutationObserver(callback);//вызываем класс с колбеком

observe.observe(someElement ,{ // вешаешь слушатель , указываешь за каким элементом следить и обьект за какими изменениями следить
    attributes: true,
    childList: true,
    subtree: true
})