chore: Move unscoped styles to global stylesheet (#3422)

app/javascript/widget/components/UserMessage.vue

@@ -74,61 +74,3 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-.conversation-wrap {
-  .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 {
-      opacity: 0.6;
-    }
-  }
-
-  .has-attachment {
-    padding: 0;
-    overflow: hidden;
-  }
-
-  .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;
-  }
-}
-</style>