/* =========================================
   MESSAGE AREA
========================================= */

.conversation-messages {
  min-height:
    120px;

  max-height:
    430px;

  padding:
    18px 22px;

  overflow-y:
    auto;

  background:
    linear-gradient(
      180deg,
      #f5f7f9 0%,
      #eef3f6 100%
    );

  border-top:
    1px solid
    #dbe3e9;

  border-bottom:
    1px solid
    #d5dee6;
}


/* =========================================
   SCROLLBAR
========================================= */

.conversation-messages::-webkit-scrollbar {
  width:
    8px;
}


.conversation-messages::-webkit-scrollbar-track {
  background:
    transparent;
}


.conversation-messages::-webkit-scrollbar-thumb {
  background-color:
    #c1ccd5;

  border-radius:
    999px;
}


/* =========================================
   MESSAGE ROWS
========================================= */

.message-row {
  display:
    flex;

  justify-content:
    flex-start;

  margin-bottom:
    10px;
}


.message-row:last-child {
  margin-bottom:
    0;
}


.message-row-mine {
  justify-content:
    flex-end;
}


/* =========================================
   MESSAGE WRAPPERS
========================================= */

.message-bubble-wrapper {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  max-width:
    64%;
}


.message-bubble-wrapper-theirs {
  align-items:
    flex-start;
}


/* =========================================
   RECEIVED MESSAGE
========================================= */

.message-bubble {
  max-width:
    100%;

  padding:
    10px 13px;

  color:
    var(--navy);

  background-color:
    #ffffff;

  border:
    1px solid
    #d7e0e8;

  border-radius:
    5px 15px 15px 15px;

  box-shadow:
    0 3px 10px
    rgba(
      15,
      23,
      42,
      0.06
    );
}


/* =========================================
   OWN MESSAGE
========================================= */

.message-bubble-mine {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-light)
    );

  border:
    1px solid
    var(--navy);

  border-radius:
    15px 5px 15px 15px;

  box-shadow:
    0 4px 13px
    rgba(
      24,
      36,
      51,
      0.16
    );
}


/* =========================================
   MESSAGE TEXT
========================================= */

.message-bubble
p {
  margin:
    0;

  font-size:
    0.9rem;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}


/* =========================================
   MESSAGE TIME
========================================= */

.message-bubble
span {
  display:
    block;

  margin-top:
    5px;

  color:
    #8793a0;

  font-size:
    0.63rem;

  line-height:
    1.2;
}


.message-bubble-mine
span {
  color:
    rgba(
      255,
      255,
      255,
      0.68
    );
}


/* =========================================
   MESSAGE USER
========================================= */

.message-sender-name {
  margin:
    0 0 5px 4px;

  color:
    var(--blue);

  font-size:
    0.7rem;

  font-weight:
    800;
}


.message-sender-link {
  text-decoration:
    none;
}


.message-sender-link:hover {
  color:
    var(--orange-dark);

  text-decoration:
    underline;

  text-underline-offset:
    2px;
}


/* =========================================
   DELETE MESSAGE
========================================= */

.message-delete-link {
  margin-top:
    2px;

  margin-right:
    2px;

  color:
    var(--light-muted);

  font-size:
    0.64rem;

  text-decoration:
    none;
}


.message-delete-link:hover {
  color:
    var(--red);
}


/* =========================================
   TABLET
========================================= */

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

  .message-bubble-wrapper {
    max-width:
      76%;
  }

}


/* =========================================
   MOBILE
========================================= */

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

  .conversation-messages {
    min-height:
      110px;

    max-height:
      420px;

    padding:
      16px 14px;
  }


  .message-bubble-wrapper {
    max-width:
      88%;
  }


  .message-bubble {
    padding:
      9px 11px;
  }


  .message-bubble
  p {
    font-size:
      0.87rem;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

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

  .conversation-messages {
    min-height:
      100px;

    padding:
      14px 12px;
  }


  .message-bubble-wrapper {
    max-width:
      94%;
  }

}


/* =========================================
   MOBILE CHAT THREAD POLISH
========================================= */

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

  .conversation-messages {
    min-height:
      150px;

    max-height:
      52vh;

    padding:
      12px 10px;
  }


  .message-row {
    margin-bottom:
      8px;
  }


  .message-bubble-wrapper {
    max-width:
      86%;
  }


  .message-bubble {
    padding:
      8px 10px;

    border-radius:
      5px 13px 13px 13px;
  }


  .message-bubble-mine {
    border-radius:
      13px 5px 13px 13px;
  }


  .message-bubble
  p {
    font-size:
      0.83rem;

    line-height:
      1.38;
  }


  .message-bubble
  span {
    margin-top:
      4px;

    font-size:
      0.58rem;
  }


  .message-sender-name {
    margin-bottom:
      3px;

    font-size:
      0.64rem;
  }

}



/* =========================================
   DESKTOP CHAT THREAD HEIGHT
========================================= */

@media screen and (min-width: 769px) {

  .conversation-messages {
    min-height:
      280px;

    max-height:
      500px;

    padding:
      14px 18px;
  }


  .message-row {
    margin-bottom:
      8px;
  }


  .message-bubble-wrapper {
    max-width:
      58%;
  }

}


/* =========================================
   MOBILE CHAT CLEANUP
========================================= */

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

  .conversation-messages {
    min-height:
      180px;

    max-height:
      56vh;

    padding:
      10px 8px;
  }

  .message-bubble-wrapper {
    max-width:
      82%;
  }

  .message-bubble {
    padding:
      8px 10px;
  }

  .message-bubble p {
    font-size:
      0.82rem;
  }

  .message-sender-name {
    display:
      none;
  }

  .message-delete-link {
    font-size:
      0.56rem;
  }

}


/* =========================================
   DESKTOP CHAT FINAL POLISH
========================================= */

@media screen and (min-width: 769px) {

  .conversation-messages {
    min-height:
      130px;

    max-height:
      420px;

    padding:
      12px 16px;
  }

  .message-row {
    margin-bottom:
      7px;
  }

  .message-bubble-wrapper {
    max-width:
      54%;
  }

}