.pending-messages-text {
  float: left;
  text-align: center;
  position: absolute;
  top: 200px;
  z-index: 9999;
}

.pending-messages-filter {
  filter: blur(0.6em);
  pointer-events: none;
}

#new-message-modal pre {
  max-height: 300px;
  overflow: auto;
}

.mu-messages {
  ::selection {
    background: rgba(82, 179, 217, 0.3);
    color: inherit;
  }
  a {
    margin: auto;
  }

  /* M E S S A G E S */

  .mu-chat {
    list-style: none;
    background: $mu-color-content-editable;
    border: 1px solid #cccccc;
    margin: 0;
    padding: 0 0 0 0;
    height: 253px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 10px;
  }
  .mu-chat li {
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
  }
  .mu-chat .avatar {
    width: 40px;
    height: 40px;
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .mu-chat .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  .mu-chat .day {
    position: relative;
    display: block;
    text-align: center;
    color: #c0c0c0;
    height: 20px;
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  .other .message {
    order: 1;
    border-top-left-radius: 0;
  }
  .self {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .self .message {
    order: 1;
    border-top-right-radius: 0;
  }
  .self .avatar {
    order: 2;
  }
  .message {
    background: white;
    border: 1px solid #e6e6e6;
    min-width: 50px;
    padding: 10px;
    border-radius: 15px;
  }
  .message p {
    font-size: 0.9em;
    margin: 0 0 0.2rem 0;
    color: #777;
  }
  .message img {
    :not(.emoji) {
      position: relative;
      display: block;
      border-radius: 5px;
      transition: all .4s cubic-bezier(0.565, -0.260, 0.255, 1.410);
      cursor: default;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }
    &.emoji {
      margin-top: -5px;
    }
  }
  .message .sender {
    font-weight: bold;
    font-size: 0.75em;
    color: #ccc;
    margin-top: 3px;
    float: left;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  .message time {
    font-size: 0.75em;
    color: #ccc;
    margin-top: 3px;
    float: right;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin-left: 15px;
  }
  .passed {
    background-color: $brand-success-light;
  }
  .failed {
    background-color: $brand-danger-light;
  }
  .errored {
    background-color: $brand-danger-light;
  }
  .passed_with_warning {
    background-color: $brand-warning-light;
  }
}

.mu-view-messages {
  overflow-x: hidden;
  overflow-y: auto;

  .mu-chat {
    height: 500px;

    .solution {
      @include display-flex(column, flex-start, flex-end);
      border: none;
      border-top: 1px solid #cccccc;
      border-radius: 0;
      width: 100%;

      a {
        align-self: center;
        margin: auto;
        cursor: pointer;
        top: 0;
        text-decoration: none;
      }

      div {
        width: 100%;

        &.hidden {
          height: 100px;
          overflow: hidden;
        }

        &.visible {
          height: 100%;
        }
      }

      pre {
        background: none;
        font-size: 0.7em;
        margin-top: 0;
        border: none;
        border-radius: 0;
      }
    }
  }
}