@import "variables.scss";

@import "common.scss";

.#{$namespace}conversation-container {
  
  .#{$namespace}message {
    margin: 10px;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    font-family: $fontfamily;
    flex-wrap: wrap;
    position: relative;
  
    .#{$namespace}markdown {
      p {
        margin: 0;
      }
      img {
        max-width: 100%;
      }
    }
  }
  
  .#{$namespace}client {
    @include message-bubble($blue-1, $white);
    background-color: $tertiary ;
    max-width: 85%;
    margin-left: auto;
    overflow-wrap: break-word;
    a {
      color: $turqois-1;
    }
  }
  
  .#{$namespace}response {
    @include message-bubble($grey-2, #000, 0 15px 15px 15px);
    overflow-wrap: break-word;
  }
  
  /* For markdown elements created with default styles */
  .#{$namespace}message-text {
    margin: 0;
    .#{$namespace}markdown{
      p{
        margin-bottom: 1em;
        &:last-child{
          margin-bottom: 0;
        }
      }
    }
  }

}
