@media (max-width: 766px) {
    #message-popup {
    display: block;
    height: 100dvh;
    position: absolute;
    /* top: 10rem; */
    width: 100vw;
    bottom: 0;
  }
  

  .message-actions button {
    height: 3rem;
  }

  #new-message {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border-radius: 20px;
  }
  
  .message-bubble {
    font-size: 16px;
  }
  .mainmid {
    display: flex;
    position: absolute;
  }
  .input-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* your normal height/background here */
    padding-bottom: env(safe-area-inset-bottom); /* 👈 add this */
    background: #fff;
  }

  #messages-container{
    padding-bottom:2rem;
  }

  .message-input-wrapper {
    position: absolute;
    display: flex;
    bottom: 0;
    gap: 2px;
  }
  .contact-item {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

}


.message-emoji.placeholder {
  width: 15px;
  height: 15px;
  display: inline-block;
  background-color: #d1d5db;
  border-radius: 50%;
  border: 1px solid darkgray;

  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' opacity='1'>\
  <circle cx='12' cy='12' r='12' fill='%23d1d5db' opacity='.5'/>\
  <circle cx='8' cy='9' r='1.5' fill='gray' opacity='1'/>\
  <circle cx='16' cy='9' r='1.5' fill='gray' opacity='1'/>\
  <path d='M8 15 q4 4 8 0' stroke='gray' stroke-width='1.5' fill='gray' opacity='1'/>\
  </svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;

  /* 👇 add this */
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* show when bubble hovered */
.message-bubble:hover .message-emoji.placeholder {
  opacity: .7;
  pointer-events: auto;
}