flare-ui/src/app/components/chat/chat.component.scss

.start-wrapper {
  display: flex;
  justify-content: center;
  padding: 24px;
}

.chat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #fafafa;
}

.msg-row {
  display: flex;
  margin: 6px 0;

  &.me {
    justify-content: flex-end;

    .bubble {
      background: #d0f0ff;
      color: #000;
    }
  }

  &.bot {
    justify-content: flex-start;

    .bubble {
      background: #eeeeee;
      color: #000;
    }
  }

  .bubble {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 16px;
    line-height: 1.4;
    word-wrap: break-word;
  }
}

.input-row {
  display: flex;
  padding: 8px 16px;

  .flex-1 {
    flex: 1;
  }
}