Chatwoot/app/javascript/widget/assets/scss/views/_conversation.scss

.file-uploads .attachment-button+label {
  cursor: pointer;
}

.conversation-wrap {
  .agent-message {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 0 $space-micro $space-small;
    max-width: 88%;

    .avatar-wrap {
      flex-shrink: 0;
      height: $space-medium;
      width: $space-medium;

      .user-thumbnail-box {
        margin-top: -$space-large;
      }
    }

    .message-wrap {
      flex-grow: 1;
      flex-shrink: 0;
      margin-left: $space-small;
      max-width: 90%;
    }
  }

  &.is-typing .messages-wrap div:last-child {
    .agent-message {
      .agent-name {
        display: none;
      }

      .user-thumbnail-box {
        margin-top: 0;
      }
    }
  }

  .agent-name {
    color: $color-body;
    font-size: $font-size-small;
    font-weight: $font-weight-medium;
    margin: $space-small 0;
    padding-left: $space-micro;
  }

  .has-attachment {
    overflow: hidden;
    padding: 0;

    &.has-text {
      margin-top: $space-smaller;
    }
  }

  .agent-message-wrap {
    +.agent-message-wrap {
      margin-top: $space-micro;

      .agent-message .chat-bubble {
        border-top-left-radius: $space-smaller;
      }
    }

    +.user-message-wrap {
      margin-top: $space-normal;
    }

    &.has-response+.user-message-wrap {
      margin-top: $space-micro;

      .chat-bubble {
        border-top-right-radius: $space-smaller;
      }
    }

    &.has-response+.agent-message-wrap {
      margin-top: $space-normal;
    }
  }

  .user-message {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 0 $space-smaller $space-micro auto;
    max-width: 85%;
    text-align: right;

    .message-wrap {
      margin-right: $space-small;
      max-width: 100%;
    }

    .in-progress,
    .is-failed {
      opacity: 0.6;
    }

    .is-failed {
      align-items: flex-end;
      display: flex;
      flex-direction: row-reverse;

      .chat-bubble.user {
        background: $color-error !important;
        // TODO: Remove the important
      }
    }
  }


  .user.has-attachment {
    .icon-wrap {
      color: $color-white;
    }

    .download {
      color: $color-white;
    }
  }

  .user-message-wrap {
    +.user-message-wrap {
      margin-top: $space-micro;

      .user-message .chat-bubble {
        border-top-right-radius: $space-smaller;
      }
    }

    +.agent-message-wrap {
      margin-top: $space-normal;
    }
  }

  p:not(:last-child) {
    margin-bottom: $space-normal;
  }
}


.unread-messages {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: 0;
  overflow-y: auto;
  padding-bottom: $space-small;
  width: 100%;

  .chat-bubble-wrap {
    margin-bottom: $space-smaller;

    &:first-child {
      margin-top: auto;
    }

    .chat-bubble {
      border: 1px solid $color-border-dark;
    }

    +.chat-bubble-wrap {
      .chat-bubble {
        border-top-left-radius: $space-smaller;
      }
    }

    &:last-child .chat-bubble {
      border-bottom-left-radius: $space-two;
    }
  }
}

.is-widget-right .unread-wrap {
  overflow: hidden;
  text-align: right;

  .chat-bubble-wrap {
    .chat-bubble {
      border-bottom-right-radius: $space-smaller;
      border-radius: $space-two;
    }

    +.chat-bubble-wrap {
      .chat-bubble {
        border-top-right-radius: $space-smaller;
      }
    }

    &:last-child .chat-bubble {
      border-bottom-right-radius: $space-two;
    }
  }

  .close-unread-wrap {
    text-align: right;
  }
}


.chat-bubble {
  @include light-shadow;
  background: $color-woot;
  border-radius: $space-two;
  color: $color-white;
  display: inline-block;
  font-size: $font-size-default;
  line-height: 1.5;
  max-width: 100%;
  padding: $space-slab $space-normal;
  text-align: left;
  word-break: break-word;

  >a {
    color: $color-primary;
    word-break: break-all;
  }

  .link {
    text-decoration: underline;
  }

  &.user {
    border-bottom-right-radius: $space-smaller;

    >a {
      color: $color-white;
    }
  }

  &.agent {
    background: $color-white;
    border-bottom-left-radius: $space-smaller;
    color: $color-body;

    .link {
      color: $color-woot;
      word-break: break-word;
    }
  }
}