#messenger {
  height: 100%;
  width: 100%;
  /*display: grid;*/
  /*grid-template-columns: 25% 75%;*/
}

#messenger .page-title{
/*    border-bottom: 1px solid #ededed;*/
}

#messenger .main-area{
  display: grid;
grid-template-columns: 35% auto;
height: calc(100% - var(--search-bar-height));
}

#messenger .contacts-list {
  height: 100%;
  padding: var(--border-padding);
  border-right: 1px solid #ededed;
}

#messenger .contacts-list .listBtn,
.toast-chat-message {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}

#messenger .contacts-list .listBtn .metadata,
.toast-chat-message .metadata{
    display: flex;
flex-direction: column;
align-items: start;
width: 100%;
}

#messenger .contacts-list .listBtn .contact-name,
.toast-chat-message .contact-name{
font-weight: 450;
font-size: var(--font-size-regular);
font-family: var(--font-apple-system);
}

#messenger .contacts-list .listBtn .last-message,
.toast-chat-message .last-message {
font-size: var(--font-size-body-regular);
font-weight: 400;
display: -webkit-box;
max-height: 50px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-manrope);
}


#messenger .contacts-list .listBtn .last-message-time,
.toast-chat-message .last-message-time {
font-size: var(--font-size-chat-timestamp);
font-weight: 400;
font-family: var(--font-apple-system);
}

#messenger .contacts-list .listBtn .unread-message-count {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--btncolor);
  padding: 0.25rem;
  font-size: 8px;
  height: 1rem;
  width: 1rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 500;
  font-family: var(--font-apple-system) !important;
}

#messenger .chats-container {
  /*border: 1px solid green;*/
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#messenger .chats-container::before {
  content: 'Select a contact to send a message.';
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%,-75%);
  width: 85%;
  text-align: center;
}

#messenger .chats-container .chat {
  height: 100%;
  background: white;
  width: 100%;
overflow: hidden;
}

#messenger .chats-container .titleBar {
display: flex;
justify-content: space-between;
position: absolute;
top: 0;
background: white;
z-index: 99;
width: 100%;
align-items: center;
height: 55px;
padding: calc(var(--border-padding) / 2) var(--border-padding);
box-shadow: var(--box-shadow-titlebar);
overflow-x: hidden;
}

#messenger .chats-container .titleBar div{
  display: flex;
gap: var(--border-padding);
align-items: center;
}

#messenger .chats-container .chat .backArrowIcon{
  display: none !important;
}

#messenger .chats-container .titleBar .profile-picture,
.nav-item.btn-group img{
height: 40px;
width: 40px;
border-radius: 50px;
object-fit: cover;
}

#messenger .chats-container .titleBar .contact-name{
  font-size: var(--font-size-regular);
font-family: var(--font-apple-system);
font-weight: 450;
}


#messenger .chatBox {
height: calc(100% - 110px);
overflow: auto;
  /*padding-bottom: 100px;*/
/*height: 100%;*/
top: 55px;
max-width: 100%;
overflow-x: hidden;
}

#messenger .chatBox .empty-state,
#messenger .chatBox .load-more-chat{
  display: grid;
place-content: center;
padding: var(--border-padding);
position: relative;
}

#messenger .inputBar {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: white;
  height: 55px;
  box-shadow: var(--box-shadow-dock);
  border-radius: var(--border-radius-dock);
}

#messenger .inputBar .chatInputForm{
  display: flex;
justify-content: space-between;
padding: calc(var(--border-padding) / 2) var(--border-padding);
align-items: center;
z-index: 9;
background: white;
height: 100%;
}

#messenger .inputBar .chatInputForm .msgText{
  width: 80%;
  height: 95%;
  border-bottom: 2px solid var(--btncolor-nogradient-op80);
}

#messenger .inputBar .chatInputForm .msgText::placeholder{
  color: var(--btncolor-nogradient-op80);
}

#messenger .inputBar .chatInputForm .msgText.extend {
  width: 92%;
}

#messenger .inputBar .chatInputForm i{
  cursor: pointer;
}

#messenger .chatBox .message {
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  margin: 1rem;
  background: #fff;
  border-radius: var(--border-radius-box) var(--border-radius-box) var(--border-radius-box) 0;
  min-height: 2.25rem;
  width: fit-content;
  max-width: 75%;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
  color: var(--fontDark);
}

#messenger .chatBox .message.this-user {
  margin: 1rem 1rem 1rem auto;
  border-radius: var(--border-radius-box) var(--border-radius-box) 0 var(--border-radius-box);
  background: var(--fontDark);
  color: white;
}

#messenger .chatBox .message.search-highlight{
  background: var(--highlight-color);;
  color: var(--fontDark);
}

#messenger .chatBox .message .message-media{
  height: auto;
  max-height: 350px;
width: 100%;
border-radius: var(--border-radius-box) var(--border-radius-box) var(--border-radius-box) 0;
margin: 0.25rem 0;
object-fit: cover;
cursor: pointer;
}

#messenger .chatBox .message.this-user .message-media{
border-radius: var(--border-radius-box) var(--border-radius-box) 0 var(--border-radius-box);
}


#messenger .chatBox .message .message-text{
word-wrap: break-word;
font-size: var(--font-size-body-regular);
font-family: var(--font-manrope);
}

#messenger .chatBox .message .message-metadata{
display: flex;
justify-content: space-between;
font-size: var(--font-size-chat-timestamp);
opacity: 0.6;
gap: var(--border-padding);
font-family: var(--font-apple-system);
}

#messenger .chatBox .message.this-user.blueTick .message-metadata i{
color: #1798fb;
}


#messenger .chats-container .inputBar .mediaPreviewContainer{
  position: absolute;
background: white;
width: 100%;
box-shadow: var(--box-shadow-dock);
bottom: -1000px;
height: auto;
transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  z-index: 9;
  border-radius: var(--border-radius-dock);
}

#messenger .chats-container .inputBar .mediaPreviewContainer.show,
#messenger .chats-container .inputBar .audioCaptureControl.show{
bottom: 0px;
}

#messenger .chats-container .inputBar .mediaPreviewContainer .mediaElement{
  display: grid;
place-items: center;
padding: var(--border-padding);
padding-bottom: 0;
}

#messenger .chats-container .inputBar .mediaPreviewContainer .mediaElement .message-media{
  max-height: 300px;
  width: auto;
  border-radius: var(--border-radius-box);
  margin: 0.25rem 0;
  object-fit: cover;
  max-width: 90%;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 3px;
}

#messenger .chats-container .inputBar .mediaPreviewContainer .mediaInputControl{
display: flex;
justify-content: end;
align-items: center;
padding: var(--border-padding);
gap: var(--border-padding);
}


#messenger .chats-container .inputBar .searchInfoContainer{
  position: absolute;
  background: white;
  width: 100%;
  box-shadow: var(--box-shadow-dock);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: row;
  gap: 1rem;
  z-index: 99;
  place-items: center;
  justify-content: space-evenly;
  bottom: -200px;
  height: auto;
padding: var(--border-padding);
justify-content: space-between;
}

#messenger .chats-container .inputBar .searchInfoContainer.show{
bottom: 55px;
z-index: 1;
}


#messenger .chats-container .inputBar .audioCaptureControl{
  position: absolute;
  background: white;
  width: 100%;
  box-shadow: var(--box-shadow-dock);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: row;
  gap: 1rem;
  z-index: 99;
  place-items: center;
  justify-content: space-evenly;
  bottom: -200px;
  height: auto;
padding: var(--border-padding);
justify-content: space-between;
border-radius: var(--border-radius-dock);
}


#messenger .chats-container .inputBar .audioCaptureControl .info{
display: flex;
place-content: center;
align-items: center;
gap: var(--border-padding);
}

#messenger .chats-container .inputBar .audioCaptureControl .info span{
  font-size: 1.2rem;
letter-spacing: 0.2rem;
}

#messenger .scrollToBottom{
  height: 50px;
  width: 50px;
  border-radius: 50px;
  position: absolute;
  bottom: calc(55px + 2rem);
  right: 2rem;
  cursor: pointer;
  display: grid;
place-content: center;
background: white;
box-shadow: var(--box-shadow-outer-card);
}

#messenger .scrollToBottom i{
  font-size: 1.3rem;
  color: var(--fontDark);
}

#messenger .blinking {
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
  
}

@keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-ms-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}






@media only screen and (max-width: 992px) {

    #messenger{
      grid-template-columns: 100%;
    }

    #messenger .contacts-list{
      position: absolute;
      width: 100%;
      z-index: 1;
      border-right: 0;
    }

    #messenger .chats-container{
      position: absolute;
      left: 100%;
      z-index: 9;
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      height: calc(100% + var(--search-bar-height));
      top: calc(-1 * var(--search-bar-height));
      z-index: 99;
    }


    #messenger .chats-container.open{
      left: 0;
    }

    #messenger .chats-container .chat .backArrowIcon{
      display: block !important;
    }

    #messenger .chats-container .inputBar .chatInputForm .msgText{
      width: 70%;
    }

    #messenger .chats-container .inputBar .chatInputForm .msgText.extend {
      width: 90%;
    }

    #messenger .chats-container .inputBar .audioCaptureControl .info span {
      font-size: 1rem;
      letter-spacing: 0.1rem;
    }

  }