.chat-area {
    position: relative;
    width: 66.65%;
    display: flex;
    flex-direction: column;
    height: calc(100% - 12px);
    display: none;
    background: transparent;

    overflow: hidden;
}

.chat-area.dark {
    position: relative;
    width: 66.65%;
    display: flex;
    flex-direction: column;
    height: calc(100% - 12px);
    display: none;
    background-color: #0e1621;
    overflow: hidden;
}

.chat-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("helpers/chat_pattern.png") repeat;
    background-size: 512px auto;
    mix-blend-mode: overlay;
    opacity: .25;
    mask-image: none;
    -webkit-mask-image: none;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 737px){
  .container{
    flex-direction:column;
    display:flex;
    height:calc(var(--vh, 1vh) * 100);
    margin:0;
    padding:0;
  }

  .chat-area{
    width:100%;
    max-height:100%;
    overflow-y:auto;
    padding:10px;
    padding-bottom:70px;
    margin-left:-10px;
    height:calc(var(--vh, 1vh) * 100);
  }
}

.chat-area.shrinked {
    width: calc(100% - 21.6%); 
}

@media (min-width: 738px) {
  .chat-area {
    flex: 1 1 calc(100% - var(--sidebarWidth));
    min-width: 0;
    width: auto;
  }

  .container.sidebar-open .chat-area {
    flex: 0 0 calc(100% - var(--sidebarWidth) - var(--groupSidebarW));
  }
}




@media (max-width: 737px){
  :root{ --header-h:74px; --input-h:0px; }

  html, body, .layout, .container, .chat-area, #messagesArea{
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }

  .edge-block{
    position:fixed; left:0; top:0; bottom:0; width:28px; z-index:99999;
  }


  .container{
    display:flex; flex-direction:column;
    height: calc(100dvh - var(--header-h));
    margin:0; padding:0;
  }

  .chat-area{
    flex-direction:column;
    min-height: calc(100dvh - var(--header-h));
    padding:0; margin:0; overflow:hidden;
  }

  .messages{
    flex:1 1 auto;
    overflow-y:auto;
    padding:10px;
    padding-bottom: var(--input-h, 0);
  }
}

@media (min-width: 738px){
  .chat-area .input-area{
    width: 70%;
    margin: 0 auto 33px;
    border-radius: 16px;
    background: #fbfbfb;
    border: 1px solid #e9e9e9;
    padding: 8px 12px;
    z-index: 10;
  }
}

.input-area{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.chat-area .input-area{
  overflow: visible;
  gap: 8px;
  align-items: flex-end;
}

.input-area #messageInput{
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 0;
}

.chat-area .input-area #messageInput{
  position: relative;
  top: 4px;
}

.input-area .send-button,
.input-area .mic-button{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition: background-color .2s ease, transform .15s ease;
  flex: 0 0 44px;
}

.input-area .send-button:hover,
.input-area .mic-button:hover{
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.input-area .send-button:disabled,
.input-area .mic-button:disabled{
  opacity: .5;
  cursor: default;
}

.input-area .send-button i,
.input-area .mic-button i{
  color: #fff !important;
  font-size: 18px;
  line-height: 1;
  transform: none !important;
}

.input-area .mic-button{
  background-color: var(--color-primary);
  transition: background-color 0.2s ease;
}

.input-area .mic-button.recording{
  background-color: red;
  animation: pulse 1s infinite;
  cursor: default;
}

.input-area .mic-button:hover:not(.recording){
  background-color: var(--color-primary-dark);
}

.input-area .mic-button.recording:hover{
  background-color: red;
}

.input-area > .attach-button,
.input-area > .lock-button{
  align-self: flex-end;
  transform: translateY(-6px);
  color: #535d6e;
}

@media (max-width: 737px){
  .input-area{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 4px 8px max(6px, env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e8e8e8;
    z-index: 1000;
  }

  .input-area .send-button,
  .input-area .mic-button{
    margin: 0 0 0 8px;
  }

  .chat-area .input-area .send-button,
  .chat-area .input-area .mic-button{
    margin-right: 19px;
  }

  .input-area > .attach-button,
  .input-area > .lock-button{
    align-self: center;
    transform: none;
    margin: 0;
  }
}


.date-separator {
    display: flex;
    position: relative;
    justify-content: center;    
    align-items: center;        
    align-self: center;         
    width: fit-content;         
    margin: 12px auto;          
    padding: 6px 18px;
    background: rgba(121, 11, 148, 0.356);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    border-radius: 9999px;
    text-align: center;
    z-index: 10;
}



#messageInput{
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  max-height: 80px;
  overflow-y: auto;
  outline: none;
  font-family: Arial, sans-serif;
  position: relative;
  scrollbar-width: none;
}

#messageInput::-webkit-scrollbar{
  width: 0;
  height: 0;
}

#messageInput.no-scrollbar::-webkit-scrollbar{ display:none; }
#messageInput.no-scrollbar{ scrollbar-width:none; }

#messageInput.placeholder{ color:#c5c6c6; }

#messageInput.is-empty::before{
  content: attr(data-placeholder);
  pointer-events: none;
  color: #999;
  position: absolute;
  margin-left: 10px;
}

#messageInput:not(.is-empty)::before{ content:""; }

#messageInput .input-reply-bubble,
#messageInput .input-reply-bubble *{
  -webkit-user-modify: read-only;
}

#micButton.disabled,
#micButton:disabled{
  opacity: 0.45;
  filter: grayscale(0.3);
  cursor: not-allowed;
}


@media (max-width: 737px){
  #messageInput{
    flex-grow: 6;
    margin-right: 5px;
    margin-bottom: 7px;
    padding: 5px;
    max-height: 200px;
  }

  #messageInput.is-empty::before{
    top: 12px;
    left: 5px;
    margin-left: 0;
  }
}



.messages {
    flex-grow: 1; 
    overflow-y: auto; 
    height: calc(100vh - 120px); 
    max-height: calc(100vh - 120px); 
    padding: 10px;
}


.message{
  --bubble-bg:#ffffff;
  background:var(--bubble-bg);
  color:#000000;
  display:flex;
  flex-direction:column;
  padding:10px;
  border-radius:9px;
  margin:5px 0;
  max-width:55ch;
  word-wrap:break-word;
  overflow-wrap:break-word;
  align-self:flex-start;
  position:relative;
  z-index: 10;
}

.my-message{
  --bubble-bg:#eaf7fb;
  background:var(--bubble-bg);
  color:#000000;
  align-self:flex-end;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  z-index: 10;
}

.message-time {
    font-size: 12px; 
    color: #bdc3c6; 
    margin-top: 5px;
    align-self: flex-end; 
    position: absolute; 
    bottom: 5px; 
    right: 10px; 
}

.my-message .message-time{
  color:#9eacb3;            
}

.my-message[data-status="read"] .message-time::after {
    content: '';
    display: inline-block;
    width: 21px; 
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg width='26' height='14' viewBox='0 0 26 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.99999 9.17203L2.82796 6L1.76758 7.06038L5.99999 11.2928L15.0603 2.23242L14 1.17203L5.99999 9.17203Z' fill='%239eacb3'/><path d='M11.59501 8.00586L10.53463 6.94548L9.47424 8.00586L11.59501 10.1266L20.6554 1.06622L19.595 0.00585938L11.59501 8.00586Z' fill='%239eacb3'/></svg>") no-repeat center center;
    background-size: contain;
    margin-left: 4px;
    vertical-align: middle;
}

  
.my-message[data-status="unread"] .message-time::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.99999 9.17203L2.82796 6L1.76758 7.06038L5.99999 11.2928L15.0603 2.23242L14 1.17203L5.99999 9.17203Z' fill='%239eacb3'/></svg>") no-repeat center center;
    background-size: contain;
    margin-left: 4px;
    vertical-align: middle;
}

@media (max-width: 737px){
  .chat-area{
    height: 100%;
    min-height: 0;
    flex-direction: column;
  }

  .chat-area .messages{
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    padding-bottom: calc(72px + var(--sab));
  }

  .chat-area .input-area{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 6px 10px calc(6px + var(--sab));
    z-index: 1200;
  }
}

.document-download-button {
    background-color: var(--color-primary); 
    color: #ffffff; 
    border: 2px solid #0077cc;  
    border-radius: 5px; 
    padding: 10px 15px; 
    font-weight: bold; 
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
    position: relative;
    top: -9px; 
}


.document-download-button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.document-download-button i {
    font-size: 21px; 
    transform: translateY(0.1em); 
}

.my-document-download-button i {
    font-size: 21px; 
    transform: translateX(0.7px); 
    transform: translateY(0.1em); 
}

.my-document-download-button {
    background-color: #409f43; 
    color: white; 
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    position: relative;
    top: -9px; 
    align-items: center;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.my-document-download-button:hover {
    background-color: #1c801f;
}

:root{
  --timeWidth: 30px;
}

.message-audio-container{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-direction:row-reverse;
  flex-wrap:nowrap;
  position:relative;

  width:100%;
  max-width:94%;
  box-sizing:border-box;

  padding-right:var(--timeWidth);
  border:none;
  background:transparent;
}

.audio-play-button,
.my-audio-play-button{
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  border:none;
  flex-shrink:0;

  transition:background-color .3s, box-shadow .3s;
}

.audio-play-button{
  background:#6340e3;
  box-shadow:0 4px 6px rgba(0,0,0,.2);
  margin-right:10px;
}

.audio-play-button:hover{
  background:#522fd1;
  box-shadow:0 6px 8px rgba(0,0,0,.3);
}

.my-audio-play-button{
  background:#409f43;
  color:#fff;
}

.my-audio-play-button:hover{
  background:#1c801f;
  box-shadow:0 6px 8px rgba(0,0,0,.3);
}

.audio-play-button i,
.my-audio-play-button i{
  color:#fff;
  transform:translateX(0.2px);
}

.audio-play-button .fa-pause,
.my-audio-play-button .fa-pause{
  color:#fff;
  transform:translateX(.2px);
}

.wavesurfer{
  height:45px;
  border-radius:5px;
  background:transparent;
  overflow:hidden;
  padding:0;
  box-shadow:none;

  flex-grow:1;
  margin-left:7px;
  width:calc(100% - 10px);
}

.wavesurfer .waveform-cursor{
  display:none;
}

.audio-time{
  position:absolute;
  bottom:-6px;
  left:68px;
  transform:none;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  opacity:.9;
  z-index:2;
  color:#bdc3c6;
}

.my-message .audio-time{
  color:#65bd58;
}

.play-icon{
  width:30px;
  height:30px;
  object-fit:contain;
}

.icon-button{
  background:transparent;
  border:none;
  padding:10px;
  display:flex;
  align-items:center;
  cursor:pointer;
}

.icon-button:hover{
  background:#f0f0f0;
}

.icon-button i{
  color:#5f5f5f;
  margin-right:8px;
}


/*#chatSwipeOverlay{
/*  position: fixed;
/*  inset: 0;
/*  background: rgba(0,0,0,0.28);
/*  opacity: 0;
/*  pointer-events: none;
/*  transition: opacity 180ms ease;
/*  z-index: 50;
/*}
/*
/*.chat-area{
/*  will-change: transform;
/*}
/*
/*.chat-area.dragging{
/*  transition: none !important;
/*}
/*
/*.chat-area.snap{
/*  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
/*}
*\