feat: Add RTL Support to Widget (#11022)

This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code.

Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget

https://github.com/chatwoot/chatwoot/issues/9791

Other PR: https://github.com/chatwoot/chatwoot/pull/11016

app/javascript/shared/components/ChatOption.vue

@@ -40,35 +40,16 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .option {
-  border-radius: $space-jumbo;
-  border: 1px solid $color-woot;
-  float: left;
-  margin: $space-smaller;
-  max-width: 100%;
+  @apply rounded-[5rem] border border-solid border-n-brand ltr:float-left rtl:float-right m-1 max-w-full;
 
   .option-button {
-    background: transparent;
-    border-radius: $space-large;
-    border: 0;
-    cursor: pointer;
-    height: auto;
-    line-height: 1.5;
-    min-height: $space-two * 2;
-    text-align: left;
-    white-space: normal;
+    @apply bg-transparent border-0 cursor-pointer h-auto leading-normal ltr:text-left rtl:text-right whitespace-normal rounded-[2rem] min-h-[2.5rem];
 
     span {
       display: inline-block;
       vertical-align: middle;
     }
-
-    > .icon {
-      margin-right: $space-smaller;
-      font-size: $font-size-medium;
-    }
   }
 }
 </style>