.MessagesPage {

  .chat,
  .container.clearfix {
    width: 100% !important;
    max-width: unset;
  }
}

.MessagesDropdown {
  .tiblock {
    align-items: center;
    display: flex;
    height: 23px;
    margin: 13px;
  }

  .tidot {
    -webkit-animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
    border-radius: 13px;
    display: inline-block;
    height: 13px;
    margin-right: 2px;
    width: 13px;
    background-color: ~'var(--neoncube-private-messages-sender-background-color)';
  }

  @-webkit-keyframes mercuryTypingAnimation {
    0% {
      -webkit-transform: translateY(0px)
    }

    28% {
      -webkit-transform: translateY(-5px)
    }

    44% {
      -webkit-transform: translateY(0px)
    }
  }

  .tidot:nth-child(1) {
    -webkit-animation-delay: 200ms;
  }

  .tidot:nth-child(2) {
    -webkit-animation-delay: 300ms;
  }

  .tidot:nth-child(3) {
    -webkit-animation-delay: 400ms;
  }

  .Dropdown-menu {
    display: flex;
    max-height: ~"calc(100vh - var(--header-height) - 0.5em)";

    @media(min-width: @screen-desktop) {
      width: 725px;
    }
  }
}

.StartConversationModal {
  h2 {
    text-align: center;
  }
}

.ConversationsPage {
  display: flex;
}

.ConversationsList {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-auto-rows: 100%;
  flex: 1;
  padding: 0;
  background: @control-bg;
  border-radius: @border-radius;

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  .ConversationsList-list {
    overflow-y: auto;
  }

  .people-list {
    display: flex;
    flex-direction: column;

    .Button--primary {
      margin: 15px 10px;
      width: 90%
    }

    .ConversationsList-list.desktop {
      display: none;
    }

    .ConversationsList-list.mobile {
      display: flex;
    }

    @media(min-width: @screen-desktop) {
      .ConversationsList-list.desktop {
        display: flex;
      }

      .ConversationsList-list.mobile {
        display: none;
      }
    }

    .ConversationsList-list {
      flex-direction: column;
      padding: 10px;
      gap: 10px;
    }

    .UserListItem {
      cursor: pointer;
      padding: 10px;
      border-radius: @border-radius;

      &.active {
        background-color: ~'var(--neoncube-private-messages-sender-background-color)';
      }

      &:hover {
        background: mix(@control-bg, @muted-color, 50%);
      }

      .tiblock {
        padding-left: 12px;
        margin: 0;
        padding-top: 11px;
        display: inline-block;
        float: right;

        .tidot {
          background-color: @text-color;
        }
      }

      .info {
        display: inline-block;
        margin: 8px;
        font-weight: bold;
        font-size: 15px;

        .UserOnline {
          margin-left: 5px;

          & .fa-circle {
            color: @online-user-circle-color;
          }
        }

      }

      .Avatar {
        width: 40px;
        height: 40px;
        line-height: 40px;
      }
    }

    img {
      float: left;
    }

    .about {
      float: left;
      margin-top: 8px;
    }

    .about {
      padding-left: 8px;
    }

    .status {
      color: @muted-color;
    }

  }

  .chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: @body-bg;
    border-radius: @border-radius;

    .LoadingIndicator-container {
      padding: 20px 0;
    }

    .chat-header {
      padding: 20px;
      border-bottom: 2px solid @control-bg;

      .Avatar {
        float: left;
      }

      img {
        float: left;
      }

      .chat-about {
        float: left;
        padding-left: 10px;
        margin-top: 6px;
      }

      .chat-with {
        font-weight: bold;
        font-size: 16px;
      }

      .chat-num-messages {
        color: @muted-color;
      }
    }

    .chat-history {
      flex: 1;
      padding: 10px;

      .message-read {
        display: flex;
        align-items: end;
        margin-bottom: 2px;
      }

      .startConvo {
        text-align: center;
        padding-bottom: 20px;
      }

      .message-data {
        display: flex;
        margin-bottom: 15px;

        .avatar-inline {
          display: inline-block;

          .Avatar {
            margin-top: 3px;
            width: 16px;
            height: 16px;
            font-size: 8px;
            line-height: 16px;
          }
        }

      }

      .message-data-name {
        font-weight: 600;
        margin-left: 5px;
      }

      .message-data-time {
        color: lighten(@muted-color, 8%);
        padding-left: 6px;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0px;
        margin: 0;
        list-style-type: none;
      }

      .my-message {
        .message-data {
          justify-content: end;
        }

        .message-text-and-indicators {
          flex-direction: row-reverse;
        }

        .message-text {
          background: ~'var(--neoncube-private-messages-sender-background-color)';
          color: ~'var(--neoncube-private-messages-sender-text-color)';

          a {
            color: ~'var(--neoncube-private-messages-sender-text-color)';
          }
        }
      }

      .other-message {
        .message-text {
          background: ~'var(--neoncube-private-messages-recipient-background-color)';
          color: ~'var(--neoncube-private-messages-recipient-text-color)';

          a {
            color: ~'var(--neoncube-private-messages-recipient-text-color)';
          }
        }
      }
    }

    .message-content {
      display: flex;
      flex-direction: column;

      .message-text-and-indicators {
        display: flex;
        gap: 10px;
      }

      .message-text {
        padding: 10px 18px;
        line-height: 26px;
        font-size: 16px;
        word-wrap: break-word;
        border-radius: @border-radius;
        display: inline-block;
        max-width: 95%;

        p {
          margin: 0;
        }

        img {
          max-width: 100%
        }
      }
    }

    .message-preview {
      opacity: 0.5;
    }

    .chat-message {
      background-color: darken(@control-bg, 2%);
      padding: 30px;

      h4 {
        float: right;
      }

      textarea {
        width: 100%;
        border: none;
        padding: 10px 20px;
        background-color: @body-bg;
        font: 14px/22px "Lato", Arial, sans-serif;
        margin-bottom: 10px;
        border-radius: @border-radius;
        resize: none;

      }

      h3 {
        color: #FF4136;
      }

      .fa-file-o,
      .fa-file-image-o {
        font-size: 16px;
        color: gray;
        cursor: pointer;

      }

      button {
        float: right;
        font-size: 16px;
        text-transform: uppercase;
        border: none;
        font-weight: bold;
      }
    }
  }

  .online,
  .offline,
  .me {
    margin-right: 3px;
    font-size: 10px;
  }

  .online {
    color: ~'var(--neoncube-private-messages-sender-background-color)';
  }

  .offline {
    color: ~'var(--neoncube-private-messages-receiver-background-color)';
  }

  .me {
    color: ~'var(--neoncube-private-messages-sender-background-color)';
  }

  .other {
    color: ~'var(--neoncube-private-messages-receiver-background-color)'
  }

  .align-left {
    text-align: left;
  }

  .align-right {
    text-align: right;
  }

  .float-right {
    float: right;
  }

  .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.AddRecipientModal-form {
  textarea {
    width: 100%;
    border: none;
    background-color: @body-bg;
    padding: 10px 20px;
    font: 14px/22px "Lato", Arial, sans-serif;
    margin-bottom: 10px;
    border-radius: @border-radius;
    resize: none;

  }
}

.AddRecipientModal-form-input {
  display: flex;
  flex-direction: column;
  position: relative;

  input.RecipientsInput {
    margin: 0 1em;
    width: auto !important;
  }

  ul.Search-results.fade:not(.in) {
    display: none;
  }
}

.AddRecipientModal-form-submit {
  margin-top: 1em;
  display: contents;
}

.Button--cancel {
  margin-left: 15px;
}

.RecipientLabel {
  font-size: 85%;
  font-weight: 600;
  display: inline-block;
  padding: 0.1em 0.5em;
  cursor: pointer;
  border-radius: @border-radius;
  background: @body-bg;
  color: @control-color;
  text-transform: none;
  border: 1px solid ~'var(--neoncube-private-messages-sender-background-color)';

  &.none {
    background: transparent;
    border: 1px dotted @muted-color;
    color: @muted-color;
  }

  .DiscussionHero .RecipientsLabel & {
    font-size: 14px;
  }
}

.RecipientsLabel {

  .RecipientLabel {

    background: transparent;
    border: none;

    .username {
      display: inline-block;
      margin: 8px;
      font-weight: bold;
      font-size: 15px;
    }

    .Avatar {
      width: 40px;
      height: 40px;
      line-height: 40px;
    }
  }
}

.AddRecipientModal-form {
  .RecipientsInput-selected {
    margin: 2vh 0;
  }

  .Search-results {
    position: relative;
    display: block;
    max-height: 70vh;
    overflow: auto;
    left: 0;
    right: 0;

    >li>a {
      white-space: normal;
    }

    .SearchResult .Avatar {
      .Avatar--size(24px);
      margin: -2px 10px -2px 0;
    }

    mark {
      background: none;
      padding: 0;
      font-weight: bold;
      color: inherit;
      box-shadow: none;
    }
  }

  .RecipientsInput {
    overflow: hidden;
    height: auto;

    input {
      display: block;
      outline: none;
      margin-top: -2px;
      border: 0 !important;
      padding: 0;
      background: transparent !important;
    }
  }
}

.ConversationsList .chat .chat-message {
  border-radius: 0 0 @border-radius 0;
}

@media(max-width: @screen-tablet-max) {
  .App--conversations {
    padding-bottom: 0;

    .App-content {
      padding-bottom: 0;
    }
  }

  .ConversationsPage.viewing-conversation .people-list {
    display: none;
  }

  .ConversationsList {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 890px;
  }

  .ConversationsList .chat .chat-message {
    padding: 1em;
  }
}

@media(min-width: @screen-tablet) {
  .ConversationsPage {
    max-height: ~"calc(100vh - (var(--header-height) * 2))";
  }

  .ConversationsList {
    margin: 0 auto;
    max-width: 890px;
    .box-shadow(0 2px 6px @shadow-color);
  }
}

.App-header .ConversationsList-list a,
.ConversationsPage .ConversationsList-list a {
  color: var(--text-color);
}

@media(min-width: @screen-desktop) {
  .ConversationsList .chat .chat-history {
    overflow-y: scroll;
  }
}