@subiz/widget-v4 4.1.210 → 4.1.211

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/README.md +21 -2
  2. package/assets/less/chatbox.less +9 -0
  3. package/assets/less/form.less +10 -0
  4. package/assets/less/message.less +114 -13
  5. package/assets/less/widget.less +21 -16
  6. package/compiled_src/call/css.js +1 -1
  7. package/compiled_src/chatbox/Buttons.js +7 -4
  8. package/compiled_src/chatbox/ChatButton.js +115 -29
  9. package/compiled_src/chatbox/Event.js +37 -5
  10. package/compiled_src/chatbox/Events.js +348 -129
  11. package/compiled_src/chatbox/FormAttachment.js +1 -1
  12. package/compiled_src/chatbox/Header.js +6 -2
  13. package/compiled_src/chatbox/InfoMessage.js +1 -1
  14. package/compiled_src/chatbox/MessageInput.js +24 -9
  15. package/compiled_src/chatbox/OrderAttachments.js +13 -13
  16. package/compiled_src/chatbox/QuoteMessage.js +3 -2
  17. package/compiled_src/chatbox/TextMessage.js +22 -18
  18. package/compiled_src/chatbox/Widget.js +200 -129
  19. package/compiled_src/chatbox/block.js +39 -29
  20. package/compiled_src/chatbox/conversation-history.js +44 -0
  21. package/compiled_src/chatbox/event-layout.js +59 -0
  22. package/compiled_src/chatbox/greeting.js +32 -0
  23. package/compiled_src/common.js +13 -9
  24. package/compiled_src/form/css.js +1 -1
  25. package/compiled_src/lib.js +22 -32
  26. package/compiled_src/notif/css.js +1 -1
  27. package/compiled_src/plugin.js +11 -18
  28. package/compiled_src/popup/css.js +1 -1
  29. package/compiled_src/popup/popup.js +1 -1
  30. package/compiled_src/store/api.js +0 -2
  31. package/compiled_src/store/api_fake.js +1 -1
  32. package/compiled_src/store/attachments.js +28 -0
  33. package/compiled_src/store/chain.js +24 -10
  34. package/compiled_src/store/kv.js +9 -13
  35. package/compiled_src/store/lsdb.js +1 -1
  36. package/compiled_src/store/store.js +356 -117
  37. package/compiled_src/util/common.js +48 -41
  38. package/compiled_src/util/event.js +15 -0
  39. package/compiled_src/util/pubsub.js +28 -13
  40. package/compiled_src/util/url.js +18 -0
  41. package/dist/.HASH +1 -0
  42. package/dist/127.js +13 -13
  43. package/dist/132.js +1 -1
  44. package/dist/1a0ddc53cbb.127.js +1 -0
  45. package/dist/{1a0d80f6e72.132.js → 1a0ddc53cbb.132.js} +1 -1
  46. package/dist/1a0ddc53cbb.278.js +1 -0
  47. package/dist/{1a0d80f6e72.339.js → 1a0ddc53cbb.339.js} +1 -1
  48. package/dist/1a0ddc53cbb.app.js +1 -0
  49. package/dist/{1a0d80f6e72.chat.html → 1a0ddc53cbb.chat.html} +1 -1
  50. package/dist/1a0ddc53cbb.chat.js +1 -0
  51. package/dist/{1a0d80f6e72.form.html → 1a0ddc53cbb.form.html} +1 -1
  52. package/dist/1a0ddc53cbb.form.js +1 -0
  53. package/dist/{1a0d80f6e72.index.html → 1a0ddc53cbb.index.html} +1 -1
  54. package/dist/{1a0d80f6e72.library.html → 1a0ddc53cbb.library.html} +1 -1
  55. package/dist/1a0ddc53cbb.library.js +1 -0
  56. package/dist/{1a0d80f6e72.preview.html → 1a0ddc53cbb.preview.html} +1 -1
  57. package/dist/1a0ddc53cbb.preview.js +1 -0
  58. package/dist/1a0ddc53cbb.webview.js +1 -0
  59. package/dist/screenshoot.js +1492 -616
  60. package/package.json +10 -3
  61. package/src/chatbox/Buttons.js +5 -4
  62. package/src/chatbox/ChatButton.js +120 -39
  63. package/src/chatbox/Event.js +38 -5
  64. package/src/chatbox/Events.js +306 -134
  65. package/src/chatbox/FormAttachment.js +1 -1
  66. package/src/chatbox/Header.js +4 -4
  67. package/src/chatbox/InfoMessage.js +1 -1
  68. package/src/chatbox/MessageInput.js +15 -10
  69. package/src/chatbox/OrderAttachments.js +13 -13
  70. package/src/chatbox/QuoteMessage.js +3 -2
  71. package/src/chatbox/TextMessage.js +21 -20
  72. package/src/chatbox/Widget.js +150 -150
  73. package/src/chatbox/block.js +29 -27
  74. package/src/chatbox/conversation-history.js +37 -0
  75. package/src/chatbox/event-layout.js +72 -0
  76. package/src/chatbox/greeting.js +13 -0
  77. package/src/common.js +15 -9
  78. package/src/lib.js +22 -35
  79. package/src/plugin.js +11 -13
  80. package/src/popup/popup.js +1 -1
  81. package/src/store/api.js +0 -2
  82. package/src/store/api_fake.js +1 -1
  83. package/src/store/attachments.js +21 -0
  84. package/src/store/chain.js +25 -12
  85. package/src/store/kv.js +10 -19
  86. package/src/store/lsdb.js +1 -1
  87. package/src/store/store.js +313 -130
  88. package/src/util/common.js +48 -43
  89. package/src/util/event.js +7 -0
  90. package/src/util/pubsub.js +27 -8
  91. package/src/util/url.js +14 -0
  92. package/test.cjs +59 -0
  93. package/assets/less/contact.less +0 -126
  94. package/compiled_src/util/common.test.js +0 -414
  95. package/compiled_src/util/event.test.js +0 -38
  96. package/compiled_src/util/extractor.test.js +0 -299
  97. package/compiled_src/util/extractor.test2.js +0 -61
  98. package/compiled_src/util/gate.test.js +0 -18
  99. package/compiled_src/util/pubsub.test.js +0 -35
  100. package/dist/1a0d80f6e72.127.js +0 -1
  101. package/dist/1a0d80f6e72.278.js +0 -1
  102. package/dist/1a0d80f6e72.74.js +0 -1
  103. package/dist/1a0d80f6e72.997.js +0 -1
  104. package/dist/1a0d80f6e72.app.js +0 -1
  105. package/dist/1a0d80f6e72.chat.js +0 -1
  106. package/dist/1a0d80f6e72.form.js +0 -1
  107. package/dist/1a0d80f6e72.library.js +0 -1
  108. package/dist/1a0d80f6e72.preview.js +0 -1
  109. package/dist/1a0d80f6e72.webview.js +0 -1
  110. package/dist/74.js +0 -376
  111. package/dist/997.js +0 -37
  112. package/dist/HASH +0 -1
  113. package/src/contact/contact.js +0 -400
  114. package/src/contact/css.js +0 -1
  115. package/src/util/common.test.js +0 -301
  116. package/src/util/event.test.js +0 -31
  117. package/src/util/extractor.test.js +0 -240
  118. package/src/util/extractor.test2.js +0 -56
  119. package/src/util/gate.test.js +0 -20
  120. package/src/util/pubsub.test.js +0 -37
  121. /package/dist/{1a0d80f6e72.185.js → 1a0ddc53cbb.185.js} +0 -0
  122. /package/dist/{1a0d80f6e72.27.js → 1a0ddc53cbb.27.js} +0 -0
  123. /package/dist/{1a0d80f6e72.459.js → 1a0ddc53cbb.459.js} +0 -0
  124. /package/dist/{1a0d80f6e72.490.js → 1a0ddc53cbb.490.js} +0 -0
@@ -1054,6 +1054,8 @@ class Emoji extends _common_js__WEBPACK_IMPORTED_MODULE_1__/* .Com */ .Mw {
1054
1054
  /* harmony import */ var _Emoji_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2959);
1055
1055
  /* harmony import */ var _common_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2840);
1056
1056
  /* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(172);
1057
+ /* harmony import */ var _util_url_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4339);
1058
+
1057
1059
 
1058
1060
 
1059
1061
 
@@ -1093,9 +1095,8 @@ class Block extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .Mw {
1093
1095
  ele.tag = 'li';
1094
1096
  }
1095
1097
  if (block.type == 'heading') {
1096
- if (block.level < 1) block.level = 1;
1097
- if (block.level > 6) block.level = 6;
1098
- ele.tag = 'h' + block.level;
1098
+ let level = Math.max(1, Math.min(6, Math.floor(Number(block.level) || 1)));
1099
+ ele.tag = 'h' + level;
1099
1100
  }
1100
1101
  if (block.type == 'paragraph' || block.type == 'section' || block.type == 'div') ele.tag = 'div';
1101
1102
  ele.text = block.text;
@@ -1109,8 +1110,10 @@ class Block extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .Mw {
1109
1110
  ele.tag = 'em';
1110
1111
  }
1111
1112
  }
1112
- if (block.underline) ele.Style += 'text-decoration:underline;';
1113
- if (block.strike_through) ele.Style += 'text-decoration: line-through;';
1113
+ let decorations = [];
1114
+ if (block.underline) decorations.push('underline');
1115
+ if (block.strike_through) decorations.push('line-through');
1116
+ if (decorations.length) ele.style += 'text-decoration: ' + decorations.join(' ') + ' !important;';
1114
1117
  }
1115
1118
  if (block.type == 'dynamic-field') {
1116
1119
  let key = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.get(block.attrs, 'key');
@@ -1118,20 +1121,20 @@ class Block extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .Mw {
1118
1121
  }
1119
1122
  if (block.type == 'link') {
1120
1123
  ele.tag = 'a';
1121
- ele.attrs['href'] = block.href;
1124
+ ele.attrs['href'] = (0,_util_url_js__WEBPACK_IMPORTED_MODULE_4__/* .safeUrl */ .P)(block.href);
1122
1125
  ele.attrs['target'] = block.target;
1123
1126
  ele.attrs['title'] = block.title;
1124
1127
  }
1125
1128
  if (block.type == 'mention-agent' || block.type == 'mention') {
1126
1129
  ele.tag = 'span';
1127
1130
  ele.class = 'mention';
1128
- let id = block.attrs.id = '';
1129
- if (block.attrs.id == '*' || block.attrs.id == 'all') {
1130
- ele.text = '@' + this.$t('all');
1131
+ let id = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.get(block, 'attrs.id', '');
1132
+ if (id == '*' || id == 'all') {
1133
+ ele.text = '@' + (this.props.t ? this.props.t('all') : 'all');
1131
1134
  }
1132
- if (id.startsWith('ag')) {
1133
- let ag = store.matchAgent(id);
1134
- let name = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.getAgentDisplayName(ag, insert.mention.fullname);
1135
+ if (typeof id === 'string' && /^(ag|at)/.test(id) && this.props.store) {
1136
+ let ag = this.props.store.matchAgent(id);
1137
+ let name = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.getAgentDisplayName(this.props.store.matchAccount(), ag);
1135
1138
  ele.text = '@' + name;
1136
1139
  }
1137
1140
  }
@@ -1139,18 +1142,15 @@ class Block extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .Mw {
1139
1142
  if (block.type == 'emoji') {
1140
1143
  let code = '';
1141
1144
  if (_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.size(block.attrs) > 0) code = block.attrs['code'];
1142
- if (code == '') code = block.Text;
1145
+ if (!code) code = block.text || block.Text;
1143
1146
  if (code != '') {
1144
1147
  ele.tag = 'Emoji';
1145
1148
  ele.attrs['emojiCode'] = code;
1146
1149
  }
1147
1150
  }
1148
- if (block.type == 'table') {
1149
- return null;
1150
- }
1151
1151
  if (block.type === 'image') {
1152
1152
  ele.tag = 'img';
1153
- ele.attrs['src'] = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.get(block, 'image.url');
1153
+ ele.attrs['src'] = (0,_util_url_js__WEBPACK_IMPORTED_MODULE_4__/* .safeUrl */ .P)(_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.get(block, 'image.url'), true);
1154
1154
  ele.attrs['alt'] = block.alt_text;
1155
1155
  }
1156
1156
  if (block.type == 'hard_break') {
@@ -1167,10 +1167,13 @@ class Block extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .Mw {
1167
1167
  if (!url.startsWith('//') && !url.startsWith('https://') && !url.startsWith('http://') && !url.startsWith('data:')) {
1168
1168
  url = '//' + url;
1169
1169
  }
1170
+ url = (0,_util_url_js__WEBPACK_IMPORTED_MODULE_4__/* .safeUrl */ .P)(url);
1171
+ if (!url) return tag.text;
1170
1172
  return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("a", {
1171
1173
  href: url,
1172
1174
  target: "_blank",
1173
- onClick: e => this.props.onLink(e, url)
1175
+ rel: "noopener noreferrer",
1176
+ onClick: e => this.props.onLink && this.props.onLink(e, url)
1174
1177
  }, tag.text);
1175
1178
  }
1176
1179
  if (tag.type === 'phone') return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("a", {
@@ -1187,10 +1190,12 @@ class Block extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .Mw {
1187
1190
  }
1188
1191
  switch (ele.tag) {
1189
1192
  case 'img':
1193
+ if (!ele.attrs.src) return block.alt_text || null;
1190
1194
  return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("a", {
1191
1195
  class: this.props.textMessage ? 'message-text-inline-image-wrapper' : '',
1192
1196
  href: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.get(ele, 'attrs.src'),
1193
- target: "_blank"
1197
+ target: "_blank",
1198
+ rel: "noopener noreferrer"
1194
1199
  }, (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("img", {
1195
1200
  class: this.props.textMessage ? 'message-text-inline-image' : '',
1196
1201
  src: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.get(ele, 'attrs.src'),
@@ -1231,37 +1236,43 @@ class Block extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .Mw {
1231
1236
  class: this.props.textMessage ? 'text-message-li' : ''
1232
1237
  }, $body);
1233
1238
  case 'span':
1234
- return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("span", null, $body);
1239
+ return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("span", {
1240
+ class: ele.class,
1241
+ style: ele.style
1242
+ }, $body);
1235
1243
  case 'em':
1236
- return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("em", null, $body);
1244
+ return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("em", {
1245
+ style: ele.style
1246
+ }, $body);
1237
1247
  case 'b':
1238
- return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("b", null, $body);
1248
+ return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("b", {
1249
+ style: ele.style
1250
+ }, $body);
1239
1251
  case 'hr':
1240
1252
  return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("hr", null);
1241
1253
  case 'br':
1242
1254
  return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("br", null);
1243
1255
  case 'a':
1256
+ if (!ele.attrs.href) return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("span", null, $body);
1244
1257
  return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)("a", {
1245
1258
  class: this.props.textMessage ? 'message-text-link' : '',
1246
1259
  href: ele.attrs['href'],
1247
1260
  target: this.props.textMessage ? '_blank' : ele.attrs['target'],
1248
- title: ele.attrs['title']
1261
+ title: ele.attrs['title'],
1262
+ rel: "noopener noreferrer",
1263
+ onClick: e => this.props.onLink && this.props.onLink(e, ele.attrs.href)
1249
1264
  }, $body);
1250
1265
  case 'Emoji':
1251
1266
  return (0,preact__WEBPACK_IMPORTED_MODULE_3__.h)(_Emoji_js__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .A, {
1252
1267
  emojiCode: ele.attrs['emojiCode']
1253
1268
  });
1254
1269
  }
1255
- return null;
1270
+ return $body;
1256
1271
  }
1257
1272
  render() {
1258
1273
  return this.renderBlock(this.props.block);
1259
1274
  }
1260
1275
  }
1261
- function absLink(url) {
1262
- if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) return 'http://' + url;
1263
- return url;
1264
- }
1265
1276
 
1266
1277
  /***/ },
1267
1278
 
@@ -1548,15 +1559,19 @@ class Com extends preact__WEBPACK_IMPORTED_MODULE_0__/* .Component */ .uA {
1548
1559
  constructor(props) {
1549
1560
  super(props);
1550
1561
  this._isMounted = true;
1551
- _util_index_js__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .A.setTimeout(() => {
1552
- if (this.componentWillUnmount) {
1553
- let old = this.componentWillUnmount.bind(this);
1554
- this.componentWillUnmount = () => {
1555
- old();
1556
- this._isMounted = false;
1557
- };
1558
- }
1559
- }, 10);
1562
+ this._subscriptions = new Set();
1563
+ const onUnmount = this.componentWillUnmount;
1564
+ this.componentWillUnmount = () => {
1565
+ if (!this._isMounted) return;
1566
+ this._isMounted = false;
1567
+ for (const unsubscribe of this._subscriptions) unsubscribe();
1568
+ this._subscriptions.clear();
1569
+ if (onUnmount) onUnmount.call(this);
1570
+ };
1571
+ }
1572
+ onDispose(cleanup) {
1573
+ if (this._isMounted) this._subscriptions.add(cleanup);else cleanup();
1574
+ return () => this._subscriptions.delete(cleanup);
1560
1575
  }
1561
1576
  }
1562
1577
  class Clickaway extends Com {
@@ -1920,7 +1935,16 @@ function pipeExtracts(text, extractors) {
1920
1935
  return out;
1921
1936
  }
1922
1937
  function extractText(text) {
1923
- var link = extractLinks;
1938
+ var link = value => {
1939
+ const emails = extractEmails(value);
1940
+ return extractLinks(value).map(span => {
1941
+ const matched = value.substr(span.index, span.length);
1942
+ return {
1943
+ ...span,
1944
+ length: matched.replace(/[.,;!?]+$/, '').length
1945
+ };
1946
+ }).filter(span => !emails.some(email => span.index >= email.index && span.index + span.length <= email.index + email.length));
1947
+ };
1924
1948
  link.type = 'link';
1925
1949
  var email = extractEmails;
1926
1950
  email.type = 'email';
@@ -2192,8 +2216,14 @@ function orderByF(a, f, d) {
2192
2216
  return clone;
2193
2217
  }
2194
2218
  function isPhone(phone) {
2195
- var re = /^[\+]?[(]?[0-9]{2,3}[)]?[-\s\.]?[0-9]{3,4}[-\s\.]?[0-9]{4,6}$/im;
2196
- return re.test(String(phone));
2219
+ if (typeof phone !== 'string' && typeof phone !== 'number') return false;
2220
+ const value = String(phone).trim();
2221
+ const ungrouped = value.replace(/\((\d+)\)/g, '$1');
2222
+ if (!/^\+?\d+(?:[ .-]\d+)*$/.test(ungrouped)) return false;
2223
+ const digits = value.replace(/\D/g, '');
2224
+ if (digits.length < 7 || digits.length > 15 || /^(\d)\1+$/.test(digits)) return false;
2225
+ if (value.startsWith('+') && digits.startsWith('0')) return false;
2226
+ return true;
2197
2227
  }
2198
2228
  function isURL(url) {
2199
2229
  var re = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi;
@@ -2204,8 +2234,17 @@ function isNumber(num) {
2204
2234
  return re.test(String(num));
2205
2235
  }
2206
2236
  function isEmail(email) {
2237
+ if (typeof email !== 'string') return false;
2238
+ const value = email.trim();
2239
+ if (value.length > 254) return false;
2240
+ const at = value.lastIndexOf('@');
2241
+ const local = value.slice(0, at);
2242
+ const domain = value.slice(at + 1);
2243
+ if (!local || local.length > 64) return false;
2244
+ if (!local.startsWith('"') && (local.startsWith('.') || local.endsWith('.') || local.includes('..'))) return false;
2245
+ if (!domain.startsWith('[') && domain.split('.').some(label => label.length > 63 || !/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i.test(label))) return false;
2207
2246
  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
2208
- return re.test(String(email).toLowerCase());
2247
+ return re.test(value.toLowerCase());
2209
2248
  }
2210
2249
  function last(array) {
2211
2250
  var length = array == null ? 0 : array.length;
@@ -2474,7 +2513,7 @@ function js2css(js, onlyprops, variables) {
2474
2513
  return style;
2475
2514
  }
2476
2515
  function browserName() {
2477
- var isOpera = !!window.opr && !!opr.addons || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
2516
+ var isOpera = !!window.opr && !!window.opr.addons || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
2478
2517
  var isFirefox = typeof InstallTrigger !== 'undefined';
2479
2518
  var isSafari = /constructor/i.test(window.HTMLElement) || function (p) {
2480
2519
  return p.toString() === '[object SafariRemoteNotification]';
@@ -2593,8 +2632,8 @@ function checkRunConditions(freq, conds, lastrun, store) {
2593
2632
  break;
2594
2633
  case 'user_is_a_contact':
2595
2634
  let attributes = op.get(store.matchUser(), 'attributes', []);
2596
- let emailAttr = find(attributes, att => att.key === 'emails' && attr.text && att.key === 'related_email' && attr.text);
2597
- let phoneAttr = find(attributes, att => att.key === 'phones' && attr.text && att.key === 'related_phone' && attr.text);
2635
+ let emailAttr = find(attributes, att => (att.key === 'emails' || att.key === 'related_email') && att.text);
2636
+ let phoneAttr = find(attributes, att => (att.key === 'phones' || att.key === 'related_phone') && att.text);
2598
2637
  let hasContact = emailAttr || phoneAttr;
2599
2638
  if (cond.user_is_a_contact) {
2600
2639
  if (!hasContact) return false;
@@ -2890,8 +2929,7 @@ function unicodeToAscii(str) {
2890
2929
  str = str.replaceAll('đ', 'd').replaceAll('Đ', 'D');
2891
2930
  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
2892
2931
  }
2893
- function scrollIntoViewIfNeeded($ele) {
2894
- centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
2932
+ function scrollIntoViewIfNeeded($ele, centerIfNeeded = true) {
2895
2933
  var parent = $ele.parentNode;
2896
2934
  var parentComputedStyle = window.getComputedStyle(parent, null);
2897
2935
  var parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'));
@@ -2922,51 +2960,31 @@ function blockToText(block) {
2922
2960
  return _blockToText(block).trim();
2923
2961
  }
2924
2962
  function isBlockEmpty(block) {
2925
- return _isBlockEmpty(block);
2926
- }
2927
- function _isBlockEmpty(block = {}) {
2928
- if (!size(block.content)) {
2929
- if ((block.text || '').trim()) return false;
2930
- return true;
2931
- }
2932
- let result = true;
2933
- map(block.content, content => {
2934
- result = result && _isBlockEmpty(content);
2935
- });
2936
- return result;
2963
+ return isEmptyBlock(block);
2937
2964
  }
2938
2965
  function _blockToText(block) {
2939
- if (!block || !block.type) return '';
2966
+ if (!block) return '';
2940
2967
  let out = '';
2941
2968
  if (block.type == 'bullet_list' || block.type == 'ordered_list') {
2942
- map(block.content, item => {
2943
- preifx = '\n* ';
2944
- if (block.type == 'ordered_list') {
2945
- prefix = i + '\n. ';
2946
- }
2947
- out += prefix + blockToText(item).trim();
2969
+ map(block.content, (item, i) => {
2970
+ let prefix = block.type == 'ordered_list' ? '\n' + (Number(i) + 1) + '. ' : '\n* ';
2971
+ out += prefix + _blockToText(item).trim();
2948
2972
  });
2949
2973
  return out;
2950
2974
  }
2951
2975
  if (block.type == 'heading' || block.type == 'paragraph') {
2952
2976
  out += '\n';
2953
2977
  }
2954
- if (block.type == '' || block.type == 'text' || block.type == 'link' || block.type == 'mention-agent' || block.type == 'dynamic-field') {
2955
- return out + block.text;
2978
+ if (block.type == '' || block.type == 'text' || block.type == 'link' || block.type == 'mention-agent' || block.type == 'mention' || block.type == 'dynamic-field') {
2979
+ if (!size(block.content)) return out + (block.text || '');
2956
2980
  }
2957
2981
  if (block.type == 'horizontal_rule') return out + '\n---\n';
2958
2982
  if (block.type == 'emoji') {
2959
- let code;
2960
- if (size(block.attrs) > 0) code = block.attrs['code'];
2961
- if (code == '') code = block.text;
2962
- if (code != '') {
2963
- let emoji = find(LEXICAL_EMOJI_LIST, emoji => emoji.code === code);
2964
- out + op.get(emoji, 'text', code);
2965
- }
2966
- return out;
2983
+ return out + (op.get(block, 'attrs.code') || block.text || block.Text || '');
2967
2984
  }
2968
- map(block.content, block => {
2969
- out += blockToText(block);
2985
+ if (!size(block.content)) return out + (block.text || '');
2986
+ map(block.content, child => {
2987
+ out += _blockToText(child);
2970
2988
  });
2971
2989
  return out;
2972
2990
  }
@@ -2992,12 +3010,16 @@ function absLink(url) {
2992
3010
  return url;
2993
3011
  }
2994
3012
  function isEmptyBlock(block) {
2995
- if (!block || !block.type) return true;
3013
+ if (!block) return true;
3014
+ if (block.type === 'image' && op.get(block, 'image.url')) return false;
3015
+ if (block.type === 'emoji' && (op.get(block, 'attrs.code') || block.Text)) return false;
3016
+ if (block.type === 'horizontal_rule') return false;
2996
3017
  let hasContent = size(filter(map(block.content, block => isEmptyBlock(block)), isEmpty => !isEmpty)) > 0;
2997
3018
  return !trim(block.text) && !hasContent;
2998
3019
  }
2999
3020
  function isEmptyMessage(msg) {
3000
3021
  if (!msg) return true;
3022
+ if (msg.deleted) return false;
3001
3023
  if (!msg.text && isEmptyBlock(msg.block) && isEmptyAttachment(msg)) return true;
3002
3024
  return false;
3003
3025
  }
@@ -3268,26 +3290,41 @@ var pubsub_namespaceFn = /*#__PURE__*/__webpack_require__.cw(function(module, __
3268
3290
  /* harmony export */ __webpack_require__.d(__webpack_exports__, {
3269
3291
  /* harmony export */ A: () => (/* binding */ Pubsub)
3270
3292
  /* harmony export */ });
3271
- var {
3272
- filter,
3273
- map
3274
- } = (common_namespaceFn());
3275
3293
  class Pubsub {
3276
3294
  constructor() {
3277
3295
  this.listeners = {};
3278
3296
  }
3279
- publish(topic, payload, payload2, payload3) {
3280
- this.listeners[topic] = filter(this.listeners[topic], sub => sub.obj._isMounted);
3281
- map(this.listeners[topic], ({
3282
- cb
3283
- }) => cb(payload, payload2, payload3));
3297
+ publish(topic, ...payload) {
3298
+ const subscriptions = (this.listeners[topic] || []).slice();
3299
+ for (const subscription of subscriptions) {
3300
+ if (!subscription.obj._isMounted) subscription.unsubscribe();
3301
+ if (subscription.active) subscription.cb(...payload);
3302
+ }
3284
3303
  }
3285
3304
  on2(obj, topic, cb) {
3286
- if (!this.listeners[topic]) this.listeners[topic] = [];
3287
- this.listeners[topic].push({
3305
+ const subscription = {
3288
3306
  obj,
3289
- cb
3290
- });
3307
+ cb,
3308
+ active: true
3309
+ };
3310
+ let release = () => {};
3311
+ const unsubscribe = () => {
3312
+ if (!subscription.active) return;
3313
+ subscription.active = false;
3314
+ this.listeners[topic] = (this.listeners[topic] || []).filter(sub => sub !== subscription);
3315
+ if (!this.listeners[topic].length) delete this.listeners[topic];
3316
+ release();
3317
+ };
3318
+ subscription.unsubscribe = unsubscribe;
3319
+ if (!this.listeners[topic]) this.listeners[topic] = [];
3320
+ this.listeners[topic].push(subscription);
3321
+ if (typeof obj.onDispose === 'function') release = obj.onDispose(unsubscribe);
3322
+ return unsubscribe;
3323
+ }
3324
+ clear() {
3325
+ for (const subscriptions of Object.values(this.listeners)) {
3326
+ for (const subscription of subscriptions.slice()) subscription.unsubscribe();
3327
+ }
3291
3328
  }
3292
3329
  }
3293
3330
  });
@@ -3402,6 +3439,28 @@ sb = Object.assign(sb, campaign_namespaceObject);
3402
3439
 
3403
3440
  /***/ },
3404
3441
 
3442
+ /***/ 4339
3443
+ (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3444
+
3445
+ "use strict";
3446
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
3447
+ /* harmony export */ P: () => (/* binding */ safeUrl)
3448
+ /* harmony export */ });
3449
+ function safeUrl(value, image = false) {
3450
+ if (typeof value !== 'string') return '';
3451
+ const url = value.trim();
3452
+ const normalized = url.replace(/[\u0000-\u0020\u007f]/g, '');
3453
+ const scheme = normalized.match(/^([a-z][a-z0-9+.-]*):/i);
3454
+ if (!scheme) return url;
3455
+ if (/^https?$/i.test(scheme[1])) return url;
3456
+ if (!image && /^(mailto|tel)$/i.test(scheme[1])) return url;
3457
+ if (image && /^blob$/i.test(scheme[1])) return url;
3458
+ if (image && /^data:image\/(png|jpe?g|gif|webp|avif);base64,/i.test(normalized)) return url;
3459
+ return '';
3460
+ }
3461
+
3462
+ /***/ },
3463
+
3405
3464
  /***/ 5672
3406
3465
  (module) {
3407
3466
 
@@ -3699,7 +3758,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_21___ = _node_modules_css_loader_dist_runtime_
3699
3758
  var ___CSS_LOADER_URL_REPLACEMENT_22___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()((_img_emoji_messenger_sub_23_529_60_784_png__WEBPACK_IMPORTED_MODULE_24___default()));
3700
3759
  var ___CSS_LOADER_URL_REPLACEMENT_23___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()((_img_emoji_messenger_sub_23_529_58_824_png__WEBPACK_IMPORTED_MODULE_25___default()));
3701
3760
  // Module
3702
- ___CSS_LOADER_EXPORT___.push([module.id, "#sbz92 * {\n all: unset !important;\n}\n.sbz_no_scroll {\n overflow: hidden !important;\n overflow-x: hidden !important;\n overflow-y: hidden !important;\n}\n#sbz92 {\n /* Handle on hover */\n /*\n.widget-header--button-close {\n\tdisplay: flex;\n\tborder-radius: 6px;\n\tjustify-self: flex-end;\n\talign-items: center;\n\talign-self: flex-start;\n\n\tfilter: brightness(0.95);\n\t&:hover {\n\t\topacity: 1;\n\t\tfilter: brightness(1.1);\n\t\tscale: 1.1;\n\t}\n}\n*/\n /*\n[data-tooltip]::after {\n\ttext-align: center;\n\tmin-width: 60px;\n\tmax-width: 350px;\n\n\ttransform: translate3d(0, 0, 0);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\twill-change: transform;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity @tooltip-transition-duration @tooltip-transition-easing @tooltip-transition-delay;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\tz-index: @z-index + 2000;\n\ttransform-origin: top;\n\twhite-space: pre-wrap;\n\twidth: 100%;\n\n\tbackground: @black;\n\tborder-radius: 5px;\n\n\t.color(@white);\n\n\tcontent: attr(data-tooltip);\n\tfont-size: @tooltip-font-size;\n\tfont-weight: @tooltip-font-weight;\n\ttext-transform: @tooltip-text-transform;\n\tpadding: 0.5em;\n\tbox-sizing: content-box;\n}\n\n[data-tooltip]:hover::after,\n[data-tooltip]:focus::after {\n\topacity: 1;\n\tpointer-events: auto;\n}\n\n// ------------------------------------------------\n// [2] Position Modifiers\n// ------------------------------------------------\n\n[data-tooltip][data-tooltip-position|='top']::after {\n\tmargin-bottom: @tooltip-margin;\n\ttransform: translate3d(-50%, -5px, 0);\n\tbottom: 100%;\n\tleft: 50%;\n}\n\n// ------------------------------------------------\n// [2.1] Top Left\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='top-left']::after {\n\ttransform: translate3d(~'calc(-100% + 16px)', -5px, 0);\n\tbottom: 100%;\n}\n\n// ------------------------------------------------\n// [2.2] Top Right\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='top-right']::after {\n\ttransform: translate3d(~'calc(0% + -16px)', -5px, 0);\n\tbottom: 100%;\n}\n\n// ------------------------------------------------\n// [2.3] Bottom\n// ------------------------------------------------\n\n[data-tooltip][data-tooltip-position|='bottom']::after,\n[data-tooltip]:not([data-tooltip-position])::after {\n\ttransform: translate3d(-50%, 0, 0);\n\tmargin-top: @tooltip-margin;\n\tleft: 50%;\n\ttop: 100%;\n}\n\n// ------------------------------------------------\n// [2.4] Bottom Left\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='bottom-left']::after {\n\ttransform: translate3d(~'calc(-100% + 16px)', 0, 0);\n}\n\n// ------------------------------------------------\n// [2.5] Bottom Right\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='bottom-right']::after {\n\ttransform: translate3d(~'calc(0% + -16px)', 0, 0);\n}\n\n// ------------------------------------------------\n// [2.6] Left\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='left']::after {\n\tbottom: auto;\n\tleft: auto;\n\tright: 100%;\n\ttop: 50%;\n\ttransform: translate3d(0, -50%, 0);\n\tmargin-right: @tooltip-margin;\n}\n\n// ------------------------------------------------\n// [2.7] Right\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='right']::after {\n\tbottom: auto;\n\tleft: 100%;\n\ttop: 50%;\n\ttransform: translate3d(0, -50%, 0);\n\tmargin-left: @tooltip-margin;\n}\n\n*/\n}\n#sbz92 *,\n#sbz92 *::before,\n#sbz92 *::after {\n box-sizing: border-box !important;\n}\n#sbz92 [tabindex='-1']:focus:not(:focus-visible) {\n outline: 0 !important;\n}\n#sbz92 b,\n#sbz92 strong {\n font-weight: 500 !important;\n}\n#sbz92 a {\n color: #020202 !important;\n text-decoration: none !important;\n background-color: transparent !important;\n font-weight: 600 !important;\n}\n#sbz92 a:hover {\n cursor: pointer !important;\n color: #000000 !important;\n text-decoration: underline !important;\n}\n#sbz92 a:not([href]) {\n color: inherit !important;\n text-decoration: none !important;\n}\n#sbz92 a:not([href]):hover {\n color: inherit !important;\n text-decoration: none !important;\n}\n#sbz92 img {\n vertical-align: middle !important;\n border-style: none !important;\n}\n#sbz92 svg {\n overflow: hidden !important;\n vertical-align: middle !important;\n}\n#sbz92 label {\n display: inline-block !important;\n}\n#sbz92 button {\n border-radius: 0 !important;\n}\n#sbz92 button:focus {\n outline: 1px dotted !important;\n outline: 5px auto -webkit-focus-ring-color !important;\n}\n#sbz92 input,\n#sbz92 button,\n#sbz92 select,\n#sbz92 optgroup,\n#sbz92 textarea {\n margin: 0 !important;\n}\n#sbz92 button,\n#sbz92 input {\n overflow: visible !important;\n}\n#sbz92 button,\n#sbz92 select {\n text-transform: none !important;\n}\n#sbz92 select {\n word-wrap: normal !important;\n}\n#sbz92 button,\n#sbz92 [type=\"button\"],\n#sbz92 [type=\"reset\"],\n#sbz92 [type=\"submit\"] {\n -webkit-appearance: button !important;\n}\n#sbz92 button:not(:disabled),\n#sbz92 [type='button']:not(:disabled),\n#sbz92 [type='reset']:not(:disabled),\n#sbz92 [type='submit']:not(:disabled) {\n cursor: pointer !important;\n}\n#sbz92 button::-moz-focus-inner,\n#sbz92 [type='button']::-moz-focus-inner,\n#sbz92 [type='reset']::-moz-focus-inner,\n#sbz92 [type='submit']::-moz-focus-inner {\n padding: 0 !important;\n border-style: none !important;\n}\n#sbz92 input[type='radio'],\n#sbz92 input[type='checkbox'] {\n box-sizing: border-box !important;\n padding: 0 !important;\n}\n#sbz92 input[type='date'],\n#sbz92 input[type='time'],\n#sbz92 input[type='datetime-local'],\n#sbz92 input[type='month'] {\n -webkit-appearance: listbox !important;\n}\n#sbz92 textarea {\n overflow: auto !important;\n resize: vertical !important;\n}\n#sbz92 [type='number']::-webkit-inner-spin-button,\n#sbz92 [type='number']::-webkit-outer-spin-button {\n height: auto !important;\n}\n#sbz92 [hidden] {\n display: none !important;\n}\n#sbz92 ::-webkit-input-placeholder {\n /* Edge */\n color: #777 !important;\n}\n#sbz92 :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: #777 !important;\n}\n#sbz92 ::placeholder {\n color: #777 !important;\n}\n#sbz92 div {\n display: block !important;\n text-rendering: geometricPrecision !important;\n -webkit-font-smoothing: antialiased !important;\n -moz-osx-font-smoothing: grayscale !important;\n}\n#sbz92 ::-webkit-scrollbar {\n width: 7px !important;\n height: 7px !important;\n}\n#sbz92 ::-webkit-scrollbar-track {\n border-radius: 10px !important;\n}\n#sbz92 ::-webkit-scrollbar-thumb {\n border-radius: 10px !important;\n background: #d6d6d6 !important;\n}\n#sbz92 ::-webkit-scrollbar-thumb:hover {\n background: #aaa !important;\n}\n#sbz92 .badge {\n padding: 2px 8px !important;\n font-size: 12px !important;\n font-weight: 600 !important;\n border-radius: 6px !important;\n display: inline-flex !important;\n align-items: center !important;\n}\n#sbz92 .badge.badge--success {\n color: #28a745 !important;\n -webkit-text-fill-color: #28a745 !important;\n background: #28a74526 !important;\n}\n#sbz92 .dot {\n width: 8px !important;\n height: 8px !important;\n border-radius: 4px !important;\n flex-shrink: 0 !important;\n background: #000 !important;\n}\n#sbz92 .dot.dot--success {\n background: #28a745 !important;\n}\n#sbz92 * {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;\n -webkit-tap-highlight-color: transparent !important;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;\n font-size: 16px !important;\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n box-sizing: border-box !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n vertical-align: baseline !important;\n}\n#sbz92 button:focus {\n outline: none !important;\n}\n#sbz92 img {\n overflow: hidden !important;\n flex-shrink: 0 !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n background-size: 100% 100% !important;\n -webkit-user-select: none !important;\n -khtml-user-select: none !important;\n -moz-user-select: none !important;\n -o-user-select: none !important;\n user-select: none !important;\n -webkit-user-drag: none !important;\n}\n#sbz92 .pos-relative {\n position: relative !important;\n}\n#sbz92 .flex-row {\n flex-direction: row !important;\n}\n#sbz92 .flex-column {\n flex-direction: column !important;\n}\n#sbz92 .flex-grow-1 {\n flex-grow: 1 !important;\n}\n#sbz92 .align-self-end {\n align-self: flex-end !important;\n}\n#sbz92 .align-items-end {\n align-items: flex-end !important;\n}\n#sbz92 .justify-content-center {\n justify-content: center !important;\n}\n#sbz92 .h-full {\n height: 100% !important;\n}\n#sbz92 .w-full {\n width: 100% !important;\n}\n#sbz92 .text-muted {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .text-lg {\n font-size: 18px !important;\n}\n#sbz92 .text-xl {\n font-size: 20px !important;\n}\n#sbz92 .text-sm {\n font-size: 14px !important;\n}\n#sbz92 .text-center {\n text-align: center !important;\n}\n#sbz92 .text-danger {\n color: #ea3d2f !important;\n}\n#sbz92 .text-italic {\n font-style: italic !important;\n}\n#sbz92 .d-none {\n display: none !important;\n}\n#sbz92 .d-flex {\n display: flex !important;\n}\n#sbz92 .d-inline-block {\n display: inline-block !important;\n}\n#sbz92 .ml-1 {\n margin-left: 7.5px !important;\n}\n#sbz92 .pl-2 {\n padding-left: 15px !important;\n}\n#sbz92 .pr-2 {\n padding-right: 15px !important;\n}\n#sbz92 .pb-2 {\n padding-bottom: 15px !important;\n}\n#sbz92 .mt-1 {\n margin-top: 7.5px !important;\n}\n#sbz92 .mt-2 {\n margin-top: 15px !important;\n}\n#sbz92 .ml-2 {\n margin-left: 15px !important;\n}\n#sbz92 .mr-1 {\n margin-right: 7.5px !important;\n}\n#sbz92 .mr-2 {\n margin-right: 15px !important;\n}\n#sbz92 .pt-3 {\n padding-top: 22.5px !important;\n}\n#sbz92 .pl-3 {\n padding-left: 22.5px !important;\n}\n#sbz92 .pr-3 {\n padding-right: 22.5px !important;\n}\n#sbz92 .pb-3 {\n padding-bottom: 22.5px !important;\n}\n#sbz92 .mt-3 {\n margin-top: 22.5px !important;\n}\n#sbz92 .ml-3 {\n margin-left: 22.5px !important;\n}\n#sbz92 .mr-3 {\n margin-right: 22.5px !important;\n}\n#sbz92 .mb-3 {\n margin-bottom: 22.5px !important;\n}\n#sbz92 .mb-2 {\n margin-bottom: 15px !important;\n}\n#sbz92 .mb-1 {\n margin-bottom: 7.5px !important;\n}\n#sbz92 .muted {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .i {\n font-style: italic !important;\n}\n#sbz92 .align-items-center {\n align-items: center !important;\n}\n#sbz92 .text-truncate {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .flex_1 {\n flex: 1 !important;\n flex-shrink: 0 !important;\n}\n#sbz92 .justify-content-between {\n justify-content: space-between !important;\n}\n#sbz92 .no-shrink {\n flex-shrink: 0 !important;\n}\n#sbz92 .loading {\n flex: 1 !important;\n align-items: center !important;\n justify-content: center !important;\n display: flex !important;\n flex-direction: column !important;\n background: white !important;\n}\n#sbz92 .avatar-container {\n text-align: center !important;\n}\n#sbz92 .avatar {\n position: relative !important;\n object-fit: cover !important;\n display: inline-block !important;\n}\n#sbz92 .group-avatar--primary .avatar {\n width: 40px !important;\n height: 40px !important;\n border-radius: 35px !important;\n}\n#sbz92 .group-avatar--secondary .avatar {\n position: relative !important;\n width: 35px !important;\n height: 35px !important;\n border-radius: 35px !important;\n}\n#sbz92 .avatar.avatar__account {\n width: 38px !important;\n height: 38px !important;\n border-radius: 38px !important;\n margin-right: 7.5px !important;\n}\n#sbz92 .group-avatar--primary .group-avatar--agent-middle {\n width: 50px !important;\n height: 50px !important;\n margin-left: -10px !important;\n z-index: 3 !important;\n position: relative !important;\n}\n#sbz92 .group-avatar--primary .group-avatar--agent-left {\n z-index: 2 !important;\n}\n#sbz92 .group-avatar--primary .group-avatar--agent-right {\n z-index: 2 !important;\n margin-left: -10px !important;\n}\n#sbz92 .group-avatar--secondary .group-avatar--agent-left {\n z-index: 3 !important;\n}\n#sbz92 .group-avatar--secondary .group-avatar--agent-middle {\n z-index: 2 !important;\n margin-left: -15px !important;\n}\n#sbz92 .group-avatar--secondary .group-avatar--agent-right {\n z-index: 1 !important;\n margin-left: -15px !important;\n}\n#sbz92 .widget-header {\n z-index: -1 !important;\n position: relative !important;\n transition: height 0.2s !important;\n border-radius: 15px 15px 0px 0px !important;\n background: '@background' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n width: 100% !important;\n}\n#sbz92 .widget-header .widget-header--total-unread-convo {\n font-size: 13px !important;\n font-weight: 500 !important;\n background: #ef000d !important;\n display: flex !important;\n border-radius: 50% !important;\n justify-content: center !important;\n align-items: center !important;\n width: 20px !important;\n height: 20px !important;\n position: absolute !important;\n cursor: pointer !important;\n right: -8px !important;\n top: -4px !important;\n}\n#sbz92 .widget-header--collapsed {\n height: auto !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--collapsed {\n height: auto !important;\n padding: 15px 22.5px !important;\n position: relative !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--collapsed .widget-header--title {\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n text-overflow: ellipsis !important;\n font-size: 16px !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--collapsed .widget-header--description {\n font-size: 14px !important;\n overflow: hidden !important;\n opacity: 0.7 !important;\n flex: 1 !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n margin-top: 2.5px !important;\n position: relative !important;\n line-height: 1.5 !important;\n}\n#sbz92 .mobile .widget-header {\n border-radius: 0px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded {\n height: 224px !important;\n padding: 15px 22.5px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--top-wrapper {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n margin-bottom: 10px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--avatar-wrapper {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--title {\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n text-overflow: ellipsis !important;\n flex: 1 !important;\n font-size: 16px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--description {\n position: relative !important;\n text-align: center !important;\n margin-top: 15px !important;\n white-space: pre-wrap !important;\n display: -webkit-box !important;\n -webkit-box-orient: vertical !important;\n -webkit-line-clamp: 2 !important;\n overflow: hidden !important;\n line-height: 1.5 !important;\n}\n#sbz92 .widget-header--convo-expanded {\n height: 224px !important;\n}\n#sbz92 .widget-header--inner {\n position: absolute !important;\n top: 0 !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 100% !important;\n opacity: 1 !important;\n display: flex !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--hidden {\n opacity: 0 !important;\n transform: scale(0) !important;\n animation-duration: 0.05s !important;\n animation-name: hide !important;\n}\n#sbz92 .widget-header--title-container {\n min-width: 0 !important;\n flex: 1 !important;\n display: flex !important;\n flex-direction: column !important;\n z-index: 1 !important;\n}\n#sbz92 .widget-header--button-close {\n display: flex !important;\n border-radius: 6px !important;\n justify-self: flex-end !important;\n align-items: center !important;\n align-self: flex-start !important;\n opacity: 0.6 !important;\n transition: opacity 0.15s ease, scale 0.15s ease, filter 0.15s ease !important;\n filter: brightness(0.95) !important;\n}\n#sbz92 .widget-header--button-close:hover {\n opacity: 1 !important;\n filter: brightness(1.1) !important;\n scale: 1.1 !important;\n}\n#sbz92 .widget-header--button-close-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci14Ij48bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ij48L2xpbmU+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCI+PC9saW5lPjwvc3ZnPgo=') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n cursor: pointer !important;\n}\n#sbz92 .widget-header--button-back {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IndoaXRlIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTQgNmwxNiAwIiAvPjxwYXRoIGQ9Ik00IDEybDE2IDAiIC8+PHBhdGggZD0iTTQgMThsMTYgMCIgLz48L3N2Zz4K') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n background-size: 24px 24px !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n position: relative !important;\n}\n#sbz92 .widget-header--wrap-button-back {\n display: flex !important;\n position: relative !important;\n margin-right: 7.5px !important;\n cursor: pointer !important;\n scale: 1 !important;\n opacity: 0.6 !important;\n transition: opacity 0.15s ease, scale 0.15s ease, filter 0.15s ease !important;\n filter: brightness(0.95) !important;\n}\n#sbz92 .widget-header--wrap-button-back:hover {\n opacity: 1 !important;\n filter: brightness(1.1) !important;\n scale: 1.1 !important;\n}\n#sbz92 .fade-enter-active,\n#sbz92 .fade-leave-active {\n transition: opacity 0.5s ease-out 0.2s !important;\n}\n#sbz92 .fade-enter,\n#sbz92 .fade-leave-to {\n opacity: 0 !important;\n}\n#sbz92 .slide-fade-enter-active {\n transition: all 0.3s ease !important;\n}\n#sbz92 .slide-fade-leave-active {\n transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .slide-fade-enter,\n#sbz92 .slide-fade-leave-to {\n transform: translateX(10px) !important;\n opacity: 0 !important;\n}\n#sbz92 .widget_header__body {\n padding-bottom: 70px !important;\n}\n#sbz92 .widget_header__body.widget_header__body__social {\n display: flex !important;\n}\n#sbz92 .social__account_logo {\n height: 90px !important;\n width: 90px !important;\n margin-right: 15px !important;\n border-radius: 15px !important;\n object-fit: cover !important;\n}\n#sbz92 .social__introduction {\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n max-height: 72px !important;\n overflow: hidden !important;\n display: -webkit-box !important;\n -webkit-box-orient: vertical !important;\n -webkit-line-clamp: 3 !important;\n}\n#sbz92 .social__links {\n display: flex !important;\n flex-direction: row !important;\n}\n#sbz92 .social__links-logo {\n height: 30px !important;\n width: 30px !important;\n border-radius: 50% !important;\n margin-right: 10px !important;\n margin-top: 5px !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n display: block !important;\n}\n#sbz92 .social__links-logo--facebook {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20fill%3D%22%230264FF%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.2944%2029.8252C16.5464%2029.9404%2015.7803%2030%2015%2030C14.0962%2030%2013.2109%2029.9199%2012.3511%2029.7666V18.4775H10V14.4287H12.3511V11.8086C12.3511%209.93457%2013.2744%207%2017.3384%207L21%207.01465V10.9453H18.3433C17.9075%2010.9453%2017.2947%2011.1553%2017.2947%2012.0488V14.4326H20.989L20.5571%2018.4775H17.2944V29.8252Z%22%20fill%3D%22white%22/%3E%3C/svg%3E') !important;\n}\n#sbz92 .social__links-logo--messenger {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2230%22%20height%3D%2230%22%20rx%3D%2215%22%20fill%3D%22%23007FFF%22/%3E%3Crect%20x%3D%224.28564%22%20y%3D%226%22%20width%3D%2221.4286%22%20height%3D%2218.8571%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M14.9478%2014.5713C14.8228%2014.5917%2014.6974%2014.6104%2014.5715%2014.6276C14.6974%2014.6104%2014.8228%2014.5917%2014.9478%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7507%2014.5713C14.691%2014.5823%2014.6313%2014.5923%2014.5715%2014.6026C14.6313%2014.5923%2014.691%2014.5823%2014.7507%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M15.0126%2014.5713C14.8663%2014.5878%2014.7192%2014.6024%2014.5715%2014.6148C14.7192%2014.6024%2014.8663%2014.5878%2015.0126%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.783%2014.5713C14.7128%2014.5807%2014.642%2014.5894%2014.5715%2014.5976C14.642%2014.5894%2014.7128%2014.5807%2014.783%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7299%2014.5713C14.6773%2014.5825%2014.6244%2014.5937%2014.5715%2014.6045C14.6244%2014.5937%2014.6773%2014.5825%2014.7299%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.6992%2014.5713C14.6567%2014.5834%2014.6141%2014.5949%2014.5715%2014.6068C14.6141%2014.5949%2014.6567%2014.5834%2014.6992%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7107%2014.5713C14.6645%2014.5834%2014.618%2014.5958%2014.5715%2014.6075C14.618%2014.5958%2014.6645%2014.5836%2014.7107%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7194%2014.5713C14.6704%2014.5827%2014.621%2014.5935%2014.5715%2014.6045C14.621%2014.5935%2014.6704%2014.5827%2014.7194%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.8087%2014.5713C14.7297%2014.5779%2014.6507%2014.5839%2014.5715%2014.5891C14.6507%2014.5839%2014.7297%2014.5779%2014.8087%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M15.0417%2014.5713C14.8856%2014.5814%2014.7288%2014.5894%2014.5715%2014.5946C14.7288%2014.5894%2014.8856%2014.5814%2015.0417%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.8206%2014.5713C14.7377%2014.574%2014.6546%2014.5761%2014.5715%2014.5775C14.6546%2014.5761%2014.7377%2014.574%2014.8206%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.1547%2012.3174L9.29419%2017.4636L13.7176%2015.0365L16.0288%2017.4636L20.8621%2012.3174L16.4877%2014.7019L14.1547%2012.3174Z%22%20fill%3D%22%23448AFF%22/%3E%3Cpath%20d%3D%22M15%200C6.717%200%200%206.717%200%2015C0%2023.283%206.717%2030%2015%2030C23.283%2030%2030%2023.283%2030%2015C30%206.717%2023.283%200%2015%200ZM15.1172%2023.0294C14.1886%2023.0294%2013.2923%2022.8983%2012.4491%2022.6554L9.42421%2024.375V21.14C7.39815%2019.5982%206.10428%2017.2501%206.10428%2014.6203C6.10428%209.97581%2010.1395%206.21094%2015.1172%206.21094C20.0951%206.21094%2024.1301%209.97581%2024.1301%2014.6203C24.1301%2019.2643%2020.0951%2023.0294%2015.1172%2023.0294V23.0294Z%22%20fill%3D%22%23007FFF%22/%3E%3C/svg%3E') !important;\n}\n#sbz92 .social__links-logo--email {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M22.6875%2012.9688C21.9375%2013.5625%2020.3125%2014.75%2017.875%2016.5L17.5625%2016.75C17.0625%2017.125%2016.6875%2017.4062%2016.375%2017.5625C15.875%2017.875%2015.4062%2018%2015%2018C14.5625%2018%2014.125%2017.875%2013.625%2017.5938C13.3125%2017.4375%2012.9375%2017.1562%2012.4375%2016.7812L12.125%2016.5C9.59375%2014.6875%208%2013.5%207.3125%2012.9688C7.25%2012.9375%207.15625%2012.9375%207.09375%2012.9688C7.03125%2013%207%2013.0625%207%2013.125V19.5C7%2019.9375%207.125%2020.2812%207.4375%2020.5625C7.71875%2020.875%208.0625%2021%208.5%2021H21.5C21.9062%2021%2022.25%2020.875%2022.5625%2020.5625C22.8438%2020.2812%2023%2019.9375%2023%2019.5V13.125C23%2013.0625%2022.9375%2013%2022.875%2012.9375C22.8125%2012.9062%2022.75%2012.9062%2022.6875%2012.9688ZM15%2017C14.7188%2017%2014.375%2016.875%2014%2016.625C13.75%2016.5%2013.4375%2016.2812%2013.0312%2015.9375L12.7188%2015.7188C10.1562%2013.8438%208.40625%2012.5625%207.5%2011.8438L7.28125%2011.6875C7.09375%2011.5625%207%2011.3438%207%2011.0938V10.5C7%2010.0938%207.125%209.75%207.4375%209.4375C7.71875%209.15625%208.0625%209%208.5%209H21.5C21.9062%209%2022.25%209.15625%2022.5625%209.4375C22.8438%209.75%2023%2010.0938%2023%2010.5V11.0938C23%2011.3438%2022.9062%2011.5625%2022.7188%2011.6875L22.5625%2011.8125C21.6562%2012.5312%2019.9062%2013.8438%2017.2812%2015.7188L16.9688%2015.9375C16.5312%2016.2812%2016.2188%2016.5%2016%2016.625C15.5938%2016.875%2015.25%2017%2015%2017Z%22%20fill%3D%22white%22/%3E%3C/svg%3E') !important;\n}\n#sbz92 .social__links-logo--zalo {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M29.9999%2014.9385C29.9669%206.68262%2023.2639%200%2015%200C6.7157%200%200%206.71582%200%2015C0%2023.2842%206.7157%2030%2015%2030C23.2639%2030%2029.9669%2023.3174%2029.9999%2015.0615C29.9999%2015.041%2030%2015.0205%2030%2015C30%2014.9795%2029.9999%2014.959%2029.9999%2014.9385Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M24.5612%2017.4695C22.9394%2017.4726%2021.6242%2016.1862%2021.6279%2014.6005C21.6316%2013.0345%2022.9474%2011.7445%2024.5473%2011.7383C26.1556%2011.732%2027.4826%2013.0349%2027.4786%2014.6162C27.4746%2016.1926%2026.1719%2017.4665%2024.5612%2017.4695ZM22.8416%2014.6183C22.8459%2015.5573%2023.6166%2016.3004%2024.5777%2016.2923C25.5165%2016.2845%2026.2699%2015.5301%2026.2673%2014.6005C26.2646%2013.6712%2025.51%2012.9317%2024.56%2012.9277C23.6012%2012.9237%2022.8373%2013.6751%2022.8416%2014.6183Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20d%3D%22M19.5054%2010.0762H20.795V17.4217H19.9447C19.7021%2017.4217%2019.5054%2017.225%2019.5054%2016.9823V10.0762Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20d%3D%22M18.5227%2011.8907H17.2881V12.2935C16.5767%2011.8601%2015.8509%2011.6775%2015.06%2011.831C14.2526%2011.9876%2013.6164%2012.4043%2013.167%2013.0917C12.4538%2014.1826%2012.5894%2015.5904%2013.4938%2016.5431C14.3504%2017.4454%2015.8628%2017.8178%2017.2815%2016.9247C17.2835%2016.934%2017.286%2016.9422%2017.2881%2016.9511V16.9826C17.2881%2017.2252%2017.4849%2017.422%2017.7275%2017.422H18.5227V11.8907V11.8907ZM15.5853%2016.2787C14.6636%2016.268%2013.8924%2015.5006%2013.8986%2014.6004C13.9048%2013.692%2014.6716%2012.9481%2015.602%2012.9479C16.5427%2012.9477%2017.2871%2013.6781%2017.2882%2014.6026C17.2893%2015.5333%2016.521%2016.2896%2015.5853%2016.2787Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20d%3D%22M8.0481%2016.2438C9.39854%2014.5856%2010.6939%2012.9885%2011.9984%2011.3989C12.2464%2011.0968%2012.3662%2010.7671%2012.3731%2010.3807C12.3761%2010.2135%2012.3261%2010.1646%2012.1596%2010.165C11.6056%2010.1666%206.41195%2010.165%206.41195%2010.165V11.4709H10.4978C10.4424%2011.543%207.83556%2014.7218%206.57932%2016.2403C6.37112%2016.4919%206.26503%2016.7645%206.25401%2017.0936C6.24628%2017.3242%206.28864%2017.4139%206.52267%2017.4211V17.4217H11.9356C12.1782%2017.4217%2012.3749%2017.225%2012.3749%2016.9823V16.2487V16.2438H8.0481V16.2438Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.948%2026.1338C6.03613%2027.1172%207.26917%2027.9424%208.61108%2028.5752V26.1338H4.948ZM0.00268555%2014.7119C0.0775146%2010.7393%201.69666%207.14453%204.28479%204.50293C4.0459%204.98242%203.83435%205.47949%203.64661%205.99121C2.58862%208.87598%202.31299%2011.8506%202.69116%2014.8916C2.95862%2017.042%203.55518%2019.0869%204.63391%2020.9775C4.8269%2021.3154%205.02271%2021.6582%205.26489%2021.9609C5.76672%2022.5879%205.80981%2023.2725%205.59888%2024.0049C5.4873%2024.3926%205.32227%2024.75%205.11304%2025.082C4.95691%2025.3291%204.77612%2025.5635%204.57434%2025.7842C1.81921%2023.1201%200.0819092%2019.4102%200.00280762%2015.2939C0.000976562%2015.1963%200%2015.0986%200%2015C0%2014.9033%200.000854492%2014.8076%200.00268555%2014.7119Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M24.8226%2026.3367C22.191%2028.6189%2018.7568%2029.9998%2015%2029.9998C11.1449%2029.9998%207.62952%2028.5457%204.97241%2026.156C6.32458%2026.1921%207.61877%2025.9031%208.86353%2025.3464C8.97681%2025.2957%209.06262%2025.3113%209.16443%2025.364C12.2258%2026.9646%2015.5131%2027.5125%2018.926%2027.3962C20.9574%2027.3269%2022.9333%2027.0046%2024.8226%2026.3367Z%22%20fill%3D%22%23015BDF%22/%3E%3C/svg%3E') !important;\n}\n@keyframes hide {\n 100% {\n opacity: 0;\n transform: scale(0);\n }\n}\n#sbz92 .widget-header-expand-container {\n width: 100% !important;\n}\n#sbz92 .message-input {\n width: 100% !important;\n border-top: 1px solid #e3e3e3 !important;\n display: flex !important;\n flex-direction: row !important;\n padding: 15px 22.5px !important;\n}\n#sbz92 .message-input--disabled {\n background: #f0f0f0 !important;\n opacity: 0.6 !important;\n filter: grayscale(1) !important;\n}\n#sbz92 textarea[disabled='disabled']::-webkit-input-placeholder {\n color: #a4a4a4 !important;\n -webkit-text-fill-color: #a4a4a4 !important;\n}\n#sbz92 textarea[disabled='disabled']:-ms-input-placeholder {\n color: #a4a4a4 !important;\n -webkit-text-fill-color: #a4a4a4 !important;\n}\n#sbz92 textarea[disabled='disabled']::placeholder {\n color: #a4a4a4 !important;\n -webkit-text-fill-color: #a4a4a4 !important;\n}\n#sbz92 .message-input--input {\n word-wrap: break-word !important;\n resize: none !important;\n flex: 1 !important;\n align-self: center !important;\n margin-right: 7.5px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .message-input--input::placeholder {\n opacity: 0.5 !important;\n /* Firefox */\n}\n#sbz92 .message-input--input::-ms-input-placeholder {\n /* Edge 12 -18 */\n opacity: 0.5 !important;\n /* Firefox */\n}\n#sbz92 .message-input--emoji-button {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXNtaWxlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBhdGggZD0iTTggMTRzMS41IDIgNCAyIDQtMiA0LTIiPjwvcGF0aD48bGluZSB4MT0iOSIgeTE9IjkiIHgyPSI5LjAxIiB5Mj0iOSI+PC9saW5lPjxsaW5lIHgxPSIxNSIgeTE9IjkiIHgyPSIxNS4wMSIgeTI9IjkiPjwvbGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .message-input--button {\n background-size: 70% !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 32px !important;\n height: 32px !important;\n display: block !important;\n cursor: pointer !important;\n position: relative !important;\n border-radius: 20px !important;\n transition: background-color 0.2s !important;\n}\n#sbz92 .message-input--button:hover {\n background-color: #eeeeee !important;\n}\n#sbz92 .message-input--disabled .message-input--button {\n cursor: default !important;\n}\n#sbz92 .message-input--disabled .message-input--button {\n cursor: default !important;\n}\n#sbz92 .message-input--attachment-button {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXBhcGVyY2xpcCI+PHBhdGggZD0iTTIxLjQ0IDExLjA1bC05LjE5IDkuMTlhNiA2IDAgMCAxLTguNDktOC40OWw5LjE5LTkuMTlhNCA0IDAgMCAxIDUuNjYgNS42NmwtOS4yIDkuMTlhMiAyIDAgMCAxLTIuODMtMi44M2w4LjQ5LTguNDgiPjwvcGF0aD48L3N2Zz4K') !important;\n}\n#sbz92 .message-input--send-button {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22@esc-primary-color-esc%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M4.698%204.034l16.302%207.966l-16.302%207.966a.503%20.503%200%200%201%20-.546%20-.124a.555%20.555%200%200%201%20-.12%20-.568l2.468%20-7.274l-2.468%20-7.274a.555%20.555%200%200%201%20.12%20-.568a.503%20.503%200%200%201%20.546%20-.124z%22%20fill%3D%22@esc-primary-color-esc%22/%3E%3Cpath%20d%3D%22M6.5%2012h14.5%22%20/%3E%3C/svg%3E') !important;\n background-size: 82% !important;\n}\n#sbz92 .message-input--preform {\n justify-content: center !important;\n padding: 11px !important;\n @spacer 2;\n}\n#sbz92 .btn--preform {\n border-radius: 7px !important;\n padding-left: 32px !important;\n padding-right: 32px !important;\n height: 40px !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n font-size: 14px !important;\n line-height: 20px !important;\n text-align: center !important;\n background: '@primary_color' !important;\n width: 60% !important;\n}\n#sbz92 .widget-body.embed-chat .message-input {\n border: 1px solid #e3e3e3 !important;\n border-radius: 8px !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .form-label {\n margin-top: 15px !important;\n}\n#sbz92 .form {\n border: 1px solid #eeeeee !important;\n box-sizing: border-box !important;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15) !important;\n border-radius: 7px !important;\n}\n#sbz92 textarea.form-control {\n resize: none !important;\n word-wrap: break-word !important;\n}\n#sbz92 .form-control--container {\n position: relative !important;\n}\n#sbz92 input.form-control[disabled] {\n background: #f9f9f9 !important;\n}\n#sbz92 .form-control--container .form-control--check {\n position: absolute !important;\n right: 10px !important;\n top: 10px !important;\n background-size: 100% 100% !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 20px !important;\n height: 20px !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1QkFBMUQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZWNrIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .form-control--valid-input--error {\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n font-size: 14px !important;\n padding-top: 5px !important;\n}\n#sbz92 input[type='text'].form-control.input--error,\n#sbz92 input[type='number'].form-control.input--error,\n#sbz92 input[type='date'].form-control.input--error,\n#sbz92 textarea.form-control.input--error,\n#sbz92 select.form-control.input--error {\n border: 1px solid #dc3545 !important;\n background: #dd41500f !important;\n}\n#sbz92 input[type='text'].form-control,\n#sbz92 input[type='number'].form-control,\n#sbz92 input[type='date'].form-control,\n#sbz92 textarea.form-control,\n#sbz92 select.form-control {\n width: 100% !important;\n border: 1px solid #c4c4c4 !important;\n border-radius: 8px !important;\n transition: all 100ms ease !important;\n padding: 10px 12px !important;\n}\n#sbz92 input[type='text'].form-control:hover,\n#sbz92 input[type='number'].form-control:hover,\n#sbz92 input[type='date'].form-control:hover,\n#sbz92 textarea.form-control:hover,\n#sbz92 select.form-control:hover {\n border: 1px solid #6c757d !important;\n}\n#sbz92 input[type='text'].form-control.input--error:hover,\n#sbz92 input[type='number'].form-control.input--error:hover,\n#sbz92 input[type='date'].form-control.input--error:hover,\n#sbz92 textarea.form-control.input--error:hover,\n#sbz92 select.form-control.input--error:hover {\n border: 1px solid #dc3545 !important;\n}\n#sbz92 select.form-control {\n padding: 1px 8px !important;\n}\n#sbz92 input[type='date'].form-control {\n height: 40px !important;\n width: 100% !important;\n background-color: #fff !important;\n}\n#sbz92 .form-wrapper-attachment input[type='date'].form-control {\n height: 32px !important;\n padding-top: 6px !important;\n padding-bottom: 6px !important;\n}\n#sbz92 input[type='text'].form-control:focus,\n#sbz92 input[type='number'].form-control:focus,\n#sbz92 input[type='date'].form-control:focus,\n#sbz92 textarea.form-control:focus,\n#sbz92 select.form-control:focus {\n border: 1px solid '@primary_color' !important;\n}\n#sbz92 input[type='text'].form-control.input--error:focus,\n#sbz92 input[type='number'].form-control.input--error:focus,\n#sbz92 input[type='date'].form-control.input--error:focus,\n#sbz92 textarea.form-control.input--error:focus,\n#sbz92 select.form-control.input--error:focus {\n border: 1px solid #dc3545 !important;\n}\n#sbz92 .label {\n display: block !important;\n padding-bottom: 6px !important;\n margin-top: 8px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n font-size: 14px !important;\n font-weight: 500 !important;\n}\n#sbz92 .form--btn-submit {\n border-radius: 7px !important;\n padding-left: 32px !important;\n padding-right: 32px !important;\n width: 100% !important;\n}\n#sbz92 .form .radio {\n display: block !important;\n position: relative !important;\n width: 100% !important;\n margin-top: 5px !important;\n}\n#sbz92 .form .radio:first-of-type {\n margin-top: 0 !important;\n}\n#sbz92 .form input[type='radio'] {\n position: absolute !important;\n visibility: hidden !important;\n}\n#sbz92 .form .radio--label {\n padding-left: 22px !important;\n display: block !important;\n position: relative !important;\n z-index: 9 !important;\n cursor: pointer !important;\n}\n#sbz92 .form .radio--check {\n display: block !important;\n position: absolute !important;\n border: 1px solid #aaa !important;\n border-radius: 100% !important;\n height: 16px !important;\n width: 16px !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 5 !important;\n transition: border 0.15s linear !important;\n -webkit-transition: border 0.15s linear !important;\n}\n#sbz92 .form .radio--check:hover {\n border: 1px solid #888 !important;\n}\n#sbz92 .form .radio--check::before {\n display: block !important;\n position: absolute !important;\n content: '' !important;\n border-radius: 100% !important;\n height: 10px !important;\n width: 10px !important;\n top: 2px !important;\n left: 2px !important;\n margin: auto !important;\n transition: background 0.15s linear !important;\n -webkit-transition: background 0.15s linear !important;\n}\n#sbz92 .form input[type='radio']:checked ~ .radio--check {\n border: 1px solid '@primary_color' !important;\n}\n#sbz92 .form input[type='radio']:checked ~ .radio--check::before {\n background: '@primary_color' !important;\n}\n#sbz92 .form .checkbox {\n display: block !important;\n position: relative !important;\n width: 100% !important;\n margin-top: 5px !important;\n}\n#sbz92 .form .checkbox:first-of-type {\n margin-top: 0 !important;\n}\n#sbz92 .form input[type='checkbox'] {\n position: absolute !important;\n visibility: hidden !important;\n}\n#sbz92 .form .checkbox--label {\n padding-left: 22px !important;\n display: block !important;\n position: relative !important;\n z-index: 9 !important;\n cursor: pointer !important;\n}\n#sbz92 .form .checkbox--check {\n display: block !important;\n position: absolute !important;\n border: 1px solid #aaa !important;\n border-radius: 4 px !important;\n height: 16px !important;\n width: 16px !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 5 !important;\n transition: border 0.15s linear !important;\n -webkit-transition: border 0.15s linear !important;\n}\n#sbz92 .form .checkbox--check:hover {\n border: 1px solid #888 !important;\n}\n#sbz92 .form .checkbox--check::before {\n display: block !important;\n position: absolute !important;\n content: '' !important;\n height: 100% !important;\n width: 100% !important;\n margin: auto !important;\n transition: background 0.15s linear !important;\n -webkit-transition: background 0.15s linear !important;\n}\n#sbz92 .form input[type='checkbox']:checked ~ .checkbox--check {\n border: 1px solid '@primary_color' !important;\n}\n#sbz92 .form input[type='checkbox']:checked ~ .checkbox--check::before {\n background: '@primary_color' !important;\n}\n#sbz92 .form .select .form-control {\n padding-right: 20px !important;\n}\n#sbz92 .form select {\n /*background: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjQxMDU4IDYuOTExMDdDNC43MzYwMiA2LjU4NTYzIDUuMjYzNjYgNi41ODU2MyA1LjU4OTA5IDYuOTExMDdMOS45OTk4NCAxMS4zMjE4TDE0LjQxMDYgNi45MTEwN0MxNC43MzYgNi41ODU2MyAxNS4yNjM3IDYuNTg1NjMgMTUuNTg5MSA2LjkxMTA3QzE1LjkxNDUgNy4yMzY1MSAxNS45MTQ1IDcuNzY0MTQgMTUuNTg5MSA4LjA4OTU4TDEwLjU4OTEgMTMuMDg5NkMxMC4yNjM3IDEzLjQxNSA5LjczNjAyIDEzLjQxNSA5LjQxMDU4IDEzLjA4OTZMNC40MTA1OCA4LjA4OTU4QzQuMDg1MTQgNy43NjQxNCA0LjA4NTE0IDcuMjM2NTEgNC40MTA1OCA2LjkxMTA3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+\") no-repeat right;*/\n}\n#sbz92 .form-require-info--list {\n background: #fff !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n}\n#sbz92 .form-require-info--title {\n font-size: 18px !important;\n line-height: 20px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n background: #fff !important;\n border-bottom: 1px solid #f0f0f0 !important;\n}\n#sbz92 .form-require-info--item {\n border-bottom: 1px solid #f0f0f0 !important;\n}\n#sbz92 .form-require-info--item:hover {\n cursor: pointer !important;\n background: #e0e0e0 !important;\n}\n#sbz92 input[type='checkbox'] {\n background-color: initial !important;\n cursor: default !important;\n -webkit-appearance: checkbox !important;\n box-sizing: border-box !important;\n margin: 3px 3px 3px 4px !important;\n padding: initial !important;\n border: initial !important;\n}\n#sbz92 input[type='radio'] {\n background-color: initial !important;\n cursor: default !important;\n -webkit-appearance: radio !important;\n box-sizing: border-box !important;\n margin: 3px 3px 0px 5px !important;\n padding: initial !important;\n border: initial !important;\n}\n#sbz92 option {\n font-weight: normal !important;\n display: block !important;\n white-space: pre !important;\n min-height: 1.2em !important;\n padding: 0px 2px 1px !important;\n}\n#sbz92 select {\n -webkit-writing-mode: horizontal-tb !important;\n text-rendering: auto !important;\n color: -internal-light-dark-color(black, white) !important;\n letter-spacing: normal !important;\n word-spacing: normal !important;\n text-transform: none !important;\n text-indent: 0px !important;\n text-shadow: none !important;\n display: inline-block !important;\n text-align: start !important;\n -webkit-appearance: menulist !important;\n box-sizing: border-box !important;\n align-items: center !important;\n white-space: pre !important;\n -webkit-rtl-ordering: logical !important;\n background-color: -internal-light-dark-color(white, black) !important;\n cursor: default !important;\n margin: 0em !important;\n font: 400 13.3333px Arial !important;\n border-radius: 0px !important;\n border-width: 1px !important;\n border-style: solid !important;\n border-color: #a9a9a9 !important;\n border-image: initial !important;\n}\n#sbz92 select {\n position: relative !important;\n display: inline-block !important;\n border: 2px #cccc solid !important;\n border-radius: 5px !important;\n height: 36px !important;\n line-height: 34px !important;\n padding: 0 12px !important;\n font-size: 14px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .custom-select--wrap-selected {\n display: flex !important;\n position: relative !important;\n justify-content: space-between !important;\n cursor: pointer !important;\n border: 1px solid #d8d8d8 !important;\n border-radius: 5px !important;\n padding: 5px !important;\n}\n#sbz92 .custom-select--selected-items {\n display: flex !important;\n align-items: center !important;\n flex-wrap: wrap !important;\n}\n#sbz92 .custom-select--selected-item {\n display: flex !important;\n align-items: center !important;\n margin: 3px 3px !important;\n padding: 1px 6px !important;\n border-radius: 5px !important;\n border: 1px solid #d8d8d8 !important;\n font-size: 14px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n vertical-align: top !important;\n}\n#sbz92 .icn-delete:before {\n display: flex !important;\n justify-items: center !important;\n font-size: 12px !important;\n margin-left: 5px !important;\n opacity: 0.5 !important;\n content: '\\2715' !important;\n}\n#sbz92 .custom-select--wrap-options {\n display: flex !important;\n flex-direction: column !important;\n position: absolute !important;\n left: 0 !important;\n top: 100% !important;\n border: 1px solid #dadce0 !important;\n -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n border-radius: 5px !important;\n width: 100% !important;\n background: #fff !important;\n z-index: 11 !important;\n max-height: 200px !important;\n overflow-y: auto !important;\n}\n#sbz92 .custom-select--input-search {\n font-size: 15px !important;\n padding: 8px !important;\n border-bottom: 1px solid #d8d8d8 !important;\n}\n#sbz92 .custom-select--items-options {\n margin: 0 !important;\n display: flex !important;\n flex-direction: column !important;\n}\n#sbz92 .custom-select--item-options {\n padding: 10px !important;\n cursor: pointer !important;\n}\n#sbz92 .custom-select--item-options:hover {\n background-color: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n}\n#sbz92 .custom-select--icon-dropdown {\n margin-left: auto !important;\n float: right !important;\n cursor: pointer !important;\n}\n#sbz92 .custom-select--icon-dropdown path {\n d: path('M 7 9.5 L 12 14.5 L 17 9.5 H 7 Z') !important;\n fill: black !important;\n}\n#sbz92 .form-component {\n margin-bottom: 15px !important;\n}\n#sbz92 .form-component:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .form-component.submitted {\n margin-bottom: 8px !important;\n}\n#sbz92 .form-component.form-component-submit-button {\n margin-top: 20px !important;\n}\n#sbz92 .form-wrapper.form {\n padding: 20px !important;\n background-color: #fff !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form {\n padding: 12px 15px !important;\n margin-top: 5px !important;\n box-shadow: 0 0 0 1px #eeeeee !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='text'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='number'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='date'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form select.form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form textarea.form-control {\n padding: 6px 10px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component {\n margin-bottom: 12px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component.submitted {\n margin-bottom: 5px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component.submitted:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component:first-child .label {\n margin-top: 0 !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component.form-component-submit-button {\n margin-top: 16px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .label {\n padding-bottom: 4px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-control--valid-input--error {\n padding-top: 3px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .btn--start-convo {\n height: 36px !important;\n}\n#sbz92 select.form-control.form-control--empty {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n@media only screen and (min-width: 968px) {\n #sbz92 .form-radios-wrapper.horizontal {\n display: flex;\n flex-wrap: wrap;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio {\n margin-right: 10px;\n width: 300px;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio:first-child {\n margin-top: 0;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio:nth-child(2) {\n margin-top: 0;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio:nth-child(2n) {\n margin-right: 0;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal {\n display: flex;\n flex-wrap: wrap;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox {\n margin-right: 10px;\n width: 300px;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox:first-child {\n margin-top: 0;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox:nth-child(2) {\n margin-top: 0;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox:nth-child(2n) {\n margin-right: 0;\n }\n}\n#sbz92 .form-ratings-wrapper {\n display: inline-flex !important;\n}\n#sbz92 .star {\n width: 32px !important;\n height: 30px !important;\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") !important;\n background-position: 0px 0px !important;\n background-size: cover !important;\n}\n#sbz92 .form-wrapper-attachment .star-wrapper {\n padding-right: 12px !important;\n}\n#sbz92 .star-wrapper {\n cursor: pointer !important;\n padding-right: 20px !important;\n}\n#sbz92 .star-wrapper:last-child {\n padding-right: 0 !important;\n}\n#sbz92 .star-wrapper.hovering .star {\n background-position: -32px 0 !important;\n}\n#sbz92 .star-wrapper.selected {\n cursor: auto !important;\n}\n#sbz92 .star-wrapper.selected .star {\n background-position: -64px 0 !important;\n}\n#sbz92 .widget-body--events-container {\n overflow-x: hidden !important;\n overflow-y: auto !important;\n display: flex !important;\n flex-direction: column !important;\n flex: 1 !important;\n padding-left: 22.5px !important;\n padding-right: 22.5px !important;\n}\n#sbz92 .widget-body--events {\n padding-top: 20px !important;\n flex: 1 !important;\n}\n#sbz92 .mobile .widget-body--events {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-end !important;\n padding-bottom: 15px !important;\n}\n#sbz92 .widget-body--events-container.widget-body--events-container__error {\n align-items: center !important;\n justify-content: center !important;\n}\n#sbz92 .convo-event {\n position: relative !important;\n}\n#sbz92 .convo-event-time {\n text-align: center !important;\n margin-top: 15px !important;\n}\n#sbz92 .convo-event-time span {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .file-attachment {\n padding: 10px !important;\n border-radius: 10px !important;\n cursor: pointer !important;\n margin: 5px 0 0 0 !important;\n}\n#sbz92 .file-attachment--agent {\n background-color: '@primary_color' !important;\n width: fit-content !important;\n}\n#sbz92 .file-attachment--user {\n background-color: #eeeeee !important;\n align-self: flex-end !important;\n}\n#sbz92 .file-attachment--link {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n width: fit-content !important;\n}\n#sbz92 .file-attachment--agent .file-attachment--filename {\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n text-decoration: underline !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n max-width: 200px !important;\n}\n#sbz92 .file-attachment--user .file-attachment--filename {\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n text-decoration: underline !important;\n text-overflow: ellipsis !important;\n overflow: hidden !important;\n white-space: nowrap !important;\n max-width: 200px !important;\n}\n#sbz92 .file-attachment--download {\n width: 24px !important;\n height: 24px !important;\n border-radius: 30px !important;\n display: inline-block !important;\n}\n#sbz92 .file-attachment--agent .file-attachment--download {\n background: '@text_color' !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMjY1RkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFycm93LWRvd24iPjxsaW5lIHgxPSIxMiIgeTE9IjUiIHgyPSIxMiIgeTI9IjE5Ij48L2xpbmU+PHBvbHlsaW5lIHBvaW50cz0iMTkgMTIgMTIgMTkgNSAxMiI+PC9wb2x5bGluZT48L3N2Zz4K') !important;\n background-size: 15px 15px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n}\n#sbz92 .file-attachment--user .file-attachment--download {\n background: #c4c4c4 !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1kb3duIj48bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiPjwvcG9seWxpbmU+PC9zdmc+Cg==') !important;\n background-size: 15px 15px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n}\n#sbz92 .message-text--user {\n line-height: 1.5 !important;\n margin: 5px 0 0 !important;\n display: inline-block !important;\n font-weight: 500 !important;\n background-color: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n padding: 12px 16px 12px 16px !important;\n}\n#sbz92 .message-text--user.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .message-text--agent.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .message-text--user.message-user--error {\n background-color: #dc3545 !important;\n}\n#sbz92 .message-text--agent.message-text--deleted {\n opacity: 0.7 !important;\n font-style: italic !important;\n}\n#sbz92 .message-text--agent {\n line-height: 1.5 !important;\n white-space: pre-wrap !important;\n display: inline-block !important;\n background: '@primary_color_faded' !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n padding: 12px 16px 12px 16px !important;\n}\n#sbz92 .message-agent.message-text--agent {\n max-width: 100% !important;\n margin-top: 0 !important;\n}\n#sbz92 .message-block-pre {\n max-width: 100% !important;\n margin: 0 !important;\n overflow-x: auto !important;\n white-space: pre !important;\n}\n#sbz92 .message-block-code {\n font-family: monospace !important;\n}\n#sbz92 .message-user__container {\n display: flex !important;\n flex-direction: row !important;\n align-items: flex-end !important;\n justify-content: flex-end !important;\n}\n#sbz92 .sending_dot.sending_dot__hide {\n opacity: 0 !important;\n background-color: #000 !important;\n}\n#sbz92 .sending_dot {\n width: 15px !important;\n height: 15px !important;\n margin-right: 5px !important;\n border-radius: 50% !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3NzciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNsb2NrIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBvbHlsaW5lIHBvaW50cz0iMTIgNiAxMiAxMiAxNiAxNCI+PC9wb2x5bGluZT48L3N2Zz4K') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n}\n#sbz92 .message-user {\n border-radius: 18px !important;\n border-bottom-right-radius: 4px !important;\n max-width: 85% !important;\n align-self: flex-end !important;\n word-break: break-word !important;\n position: relative !important;\n white-space: pre-wrap !important;\n}\n#sbz92 .message-user.message-user-images-container {\n width: 85% !important;\n display: flex !important;\n justify-content: flex-end !important;\n}\n#sbz92 .message-user.message-user-audio {\n flex: 1 !important;\n}\n#sbz92 .message-agent {\n border-radius: 18px !important;\n border-bottom-left-radius: 4px !important;\n max-width: 85% !important;\n word-break: break-word !important;\n position: relative !important;\n}\n#sbz92 a.message_error {\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n opacity: 0.8 !important;\n display: block !important;\n text-align: end !important;\n font-size: 13px !important;\n margin-top: 5px !important;\n margin-bottom: 10px !important;\n}\n#sbz92 a.message_error:hover {\n opacity: 1 !important;\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n}\n#sbz92 .message_error__text {\n display: inline-block !important;\n vertical-align: text-top !important;\n}\n#sbz92 .message_error__icon {\n display: inline-block !important;\n vertical-align: bottom !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZGMzNTQ1IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFsZXJ0LWNpcmNsZSI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMiIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMi4wMSIgeTI9IjE2Ij48L2xpbmU+PC9zdmc+Cgo=') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 20px !important;\n height: 20px !important;\n}\n#sbz92 .image-attachment__img {\n width: 100% !important;\n margin: 5px 0 0 0 !important;\n border-radius: 7px !important;\n border: 1px solid #eeeeee !important;\n}\n#sbz92 .audio-attachment {\n width: 100% !important;\n margin: 5px 0 0 0 !important;\n height: 45px !important;\n display: inline !important;\n}\n#sbz92 .audio-attachment__audio {\n all: inherit !important;\n width: 100% !important;\n}\n#sbz92 .video-attachment {\n border-radius: 7px !important;\n width: 100% !important;\n margin: 5px 0 0 0 !important;\n}\n#sbz92 .video-attachment__video {\n all: inherit !important;\n width: 100% !important;\n}\n#sbz92 .info-message {\n text-align: center !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n margin: 10px !important;\n}\n#sbz92 .message-sender {\n margin-top: 10px !important;\n}\n#sbz92 .message-sender-avatar {\n border-radius: 50% !important;\n width: 25px !important;\n height: 25px !important;\n margin-right: 10px !important;\n}\n#sbz92 .message-sender-name {\n color: #495057 !important;\n -webkit-text-fill-color: #495057 !important;\n vertical-align: middle !important;\n}\n#sbz92 .message-system {\n text-align: center !important;\n margin: 10px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .form-attachment {\n display: flex !important;\n flex-direction: column !important;\n padding: 10px !important;\n -webkit-box-shadow: 0 0 10px #dee2e6 !important;\n box-shadow: 0 0 10px #dee2e6 !important;\n border-radius: 7px !important;\n margin-top: 10px !important;\n}\n#sbz92 .form-attachment-field {\n display: flex !important;\n flex-direction: column !important;\n margin-bottom: 0px !important;\n}\n#sbz92 .form-attachment-field__title {\n color: #4c4c4c !important;\n -webkit-text-fill-color: #4c4c4c !important;\n}\n#sbz92 .form-attachment-field__text {\n width: 100% !important;\n border: 1px solid #dbdbdb !important;\n padding: 10px !important;\n margin: 3px 0px 0px 0px !important;\n border-radius: 7px !important;\n}\n#sbz92 .input--error {\n border: 1px solid red !important;\n}\n#sbz92 .input--success {\n background-color: #f9f9f9 !important;\n pointer-events: none !important;\n}\n#sbz92 .form-attachment-field__error {\n color: brown !important;\n -webkit-text-fill-color: brown !important;\n float: right !important;\n}\n#sbz92 .form-attachment-field__checkbox {\n width: 100% !important;\n all: inherit !important;\n -webkit-appearance: textfield !important;\n margin-right: 8px !important;\n}\n#sbz92 .form-attachment-field__checkbox:hover {\n cursor: pointer !important;\n}\n#sbz92 .form-attachment-field__list-item {\n display: flex !important;\n align-items: center !important;\n margin: 4px !important;\n margin-left: 0px !important;\n}\n#sbz92 .form-attachment-field__radio {\n width: 100% !important;\n all: inherit !important;\n -webkit-appearance: textfield !important;\n margin-right: 8px !important;\n}\n#sbz92 .form-attachment-field__datetime {\n width: 100% !important;\n border: 1px solid #dbdbdb !important;\n padding: 10px !important;\n margin: 3px 0px 0px 0px !important;\n border-radius: 7px !important;\n}\n#sbz92 .form-attachment--submit-btn {\n background-color: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n width: 100% !important;\n margin-top: 10px !important;\n border-radius: 7px !important;\n padding: 10px !important;\n text-align: center !important;\n font-size: 16px !important;\n}\n#sbz92 .form-attachment--submit-btn:hover {\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n}\n#sbz92 .red {\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n}\n#sbz92 .typing {\n background-color: #f4f5f7 !important;\n color: #7a7a7b !important;\n -webkit-text-fill-color: #7a7a7b !important;\n padding: 10px !important;\n opacity: 1 !important;\n transition: all 0.2s !important;\n position: absolute !important;\n bottom: 0px !important;\n left: 0px !important;\n width: 100% !important;\n}\n#sbz92 .typing--hidden {\n opacity: 0 !important;\n display: none !important;\n}\n#sbz92 .markdown-message img {\n max-width: 100% !important;\n margin-top: 10px !important;\n}\n#sbz92 .button-attachments {\n display: block !important;\n margin-top: 5px !important;\n}\n#sbz92 .url-button-attachment:first-child {\n border-top-left-radius: 7px !important;\n border-top-right-radius: 7px !important;\n}\n#sbz92 .url-button-attachment:last-child {\n border-bottom-left-radius: 7px !important;\n border-bottom-right-radius: 7px !important;\n border-bottom: 1px solid '@primary_color' !important;\n}\n#sbz92 .agent-message .url-button-attachment {\n text-decoration: none !important;\n padding: 10px 18px !important;\n display: block !important;\n text-align: center !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n border: 1px solid #000 !important;\n border-radius: 12px !important;\n text-overflow: ellipsis !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n white-space: nowrap !important;\n}\n#sbz92 .agent-message .url-button-attachment:hover {\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n border-color: '@primary_color' !important;\n}\n#sbz92 .message_quick_replies {\n display: flex !important;\n flex-wrap: wrap !important;\n flex-direction: column !important;\n}\n#sbz92 .message_quick_reply {\n cursor: pointer !important;\n position: relative !important;\n padding: 10px 18px !important;\n margin-top: 8px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n border-radius: 12px !important;\n user-select: none !important;\n overflow: hidden !important;\n white-space: nowrap !important;\n width: fit-content !important;\n font-weight: 500 !important;\n max-width: 100% !important;\n text-overflow: ellipsis !important;\n border: 1px solid #000 !important;\n transition: all 100ms ease !important;\n}\n#sbz92 .message_quick_reply:hover {\n background: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n border-color: '@primary_color' !important;\n}\n#sbz92 .generic-attachment-container {\n position: relative !important;\n margin-top: 10px !important;\n}\n#sbz92 .generic-attachments {\n display: block !important;\n}\n#sbz92 .generic-attachment {\n display: flex !important;\n width: 100% !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n user-select: none !important;\n cursor: grab !important;\n}\n#sbz92 .generic-attachment--element-content {\n flex: 1 !important;\n}\n#sbz92 .generic-attachment--element {\n border: 1px solid #d8d8d8 !important;\n background: white !important;\n border-radius: 7px !important;\n overflow: hidden !important;\n width: 220px !important;\n margin-right: 10px !important;\n vertical-align: top !important;\n display: flex !important;\n flex-direction: column !important;\n flex-shrink: 0 !important;\n}\n#sbz92 .generic-attachment--element:last-child {\n margin-right: 0 !important;\n}\n#sbz92 .generic-attachment--element .generic-attachment--element-img {\n width: 100% !important;\n height: 150px !important;\n object-fit: cover !important;\n}\n#sbz92 .generic-attachment--element .url-button-attachment:first-child {\n border-radius: 0 !important;\n}\n#sbz92 .generic-attachment--element .url-button-attachment {\n padding: 10px !important;\n display: block !important;\n padding-top: 9px !important;\n padding-button: 9px !important;\n text-align: center !important;\n border: none !important;\n border-top: 1px solid #d8d8d8 !important;\n width: 100% !important;\n color: #0d6efd !important;\n -webkit-text-fill-color: #0d6efd !important;\n}\n#sbz92 .generic-attachment--element .url-button-attachment:hover {\n color: #024dbc !important;\n -webkit-text-fill-color: #024dbc !important;\n border-color: #d8d8d8 !important;\n}\n#sbz92 .generic-attachment--element .generic-attachment--element-title {\n padding: 0px 13px !important;\n margin-top: 13px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n font-weight: 600 !important;\n font-size: 16px !important;\n line-height: 20px !important;\n white-space: normal !important;\n}\n#sbz92 .generic-attachment--element .generic-attachment--element-subtitle {\n padding: 0px 13px !important;\n color: gray !important;\n -webkit-text-fill-color: gray !important;\n margin-top: 5px !important;\n white-space: pre-wrap !important;\n display: -webkit-box !important;\n -webkit-line-clamp: 4 !important;\n -webkit-box-orient: vertical !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n}\n#sbz92 .generic-attachment--element.clickable {\n cursor: pointer !important;\n}\n#sbz92 .widget_body__events__error_msg {\n margin-top: 50px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n text-align: center !important;\n}\n#sbz92 .widget_body__events__error_retry {\n margin-top: 10px !important;\n}\n#sbz92 .generic-attachment-navigator {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n cursor: pointer !important;\n width: 20px !important;\n font-size: 80px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n color: rgba(255, 255, 255, 0.85) !important;\n -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;\n text-shadow: 0 10px 25px rgba(0, 0, 0, 0.75) !important;\n z-index: 999 !important;\n user-select: none !important;\n}\n#sbz92 .generic-attachment-navigator:hover {\n text-shadow: 0 10px 20px rgba(0, 0, 0, 0.75) !important;\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n}\n#sbz92 .generic-attachment-navigator.generic-attachment-navigator--disabled {\n display: none !important;\n}\n#sbz92 .generic-attachment-navigator.generic-attachment-navigator--left {\n left: 2px !important;\n}\n#sbz92 .generic-attachment-navigator.generic-attachment-navigator--right {\n right: 2px !important;\n}\n#sbz92 .generic-attachment-navigator-icon {\n font-size: 80px !important;\n}\n#sbz92 .order_attachment__product_img {\n width: 40px !important;\n height: 40px !important;\n margin-right: 10px !important;\n border-radius: 5px !important;\n flex-shrink: 0 !important;\n display: block !important;\n object-fit: contain !important;\n background: whitesmoke !important;\n}\n#sbz92 .order_attachment__product_name {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n}\n#sbz92 .order_attachment__header {\n padding-bottom: 5px !important;\n border-bottom: 1px solid #ccc !important;\n margin-bottom: 5px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: space-between !important;\n}\n#sbz92 .order_attachment__product_desc {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n color: #999 !important;\n -webkit-text-fill-color: #999 !important;\n font-size: 13px !important;\n}\n#sbz92 .order_attachment__product {\n display: flex !important;\n align-items: center !important;\n margin-top: 5px !important;\n margin-bottom: 5 !important;\n}\n#sbz92 .order_attachment__text_sm {\n font-size: 13px !important;\n}\n#sbz92 .order_attachment__text_muted {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .order_attachment__text_truncate {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .order_attachment {\n margin-top: 10px !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n border: 1px solid #aaa !important;\n background: white !important;\n border-radius: 8px !important;\n width: 220px !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n padding: 10px !important;\n}\n#sbz92 .order_attachment__footer {\n margin-top: 10px !important;\n padding-top: 10px !important;\n border-top: 1px solid #ccc !important;\n}\n#sbz92 .order_attachment__total {\n font-size: 16px !important;\n}\n#sbz92 .order_attachment__label {\n font-size: 13px !important;\n color: #777 !important;\n -webkit-text-fill-color: #777 !important;\n margin-top: 10px !important;\n}\n#sbz92 .order_attachment__label.no_margin {\n margin-top: 0 !important;\n}\n#sbz92 .order_attachment.order_attachment__user {\n margin-right: 50px !important;\n align-self: flex-end !important;\n margin-right: 0 !important;\n margin-left: 50px !important;\n align-self: flex-start !important;\n}\n#sbz92 .product_attachment {\n margin-top: 10px !important;\n border: 1px solid #d8d8d8 !important;\n background: white !important;\n border-radius: 7px !important;\n overflow: hidden !important;\n width: 200px !important;\n display: inline-block !important;\n vertical-align: top !important;\n transition: all 0.1s !important;\n}\n#sbz92 .product_attachment.product_attachment__user {\n margin-right: 50px !important;\n align-self: flex-end !important;\n margin-right: 0 !important;\n margin-left: 50px !important;\n align-self: flex-start !important;\n}\n#sbz92 .product_attachment__img {\n width: 200px !important;\n height: 200px !important;\n border-bottom: 1px solid #d8d8d8 !important;\n object-fit: cover !important;\n display: block !important;\n}\n#sbz92 .product_attachment__price {\n padding-left: 10px !important;\n}\n#sbz92 .product_attachment__btns {\n margin-top: 5px !important;\n}\n#sbz92 .product_attachment__btn {\n border-top: 1px solid #d8d8d8 !important;\n display: flex !important;\n padding: 8px 10px !important;\n align-items: center !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n justify-content: center !important;\n cursor: pointer !important;\n text-transform: capitalize !important;\n}\n#sbz92 .product_attachment__btn:last-child {\n margin-right: 0 !important;\n}\n#sbz92 .product_attachment__btn:hover {\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n}\n#sbz92 a.product_attachment__title {\n display: block !important;\n padding: 8px 10px 0 10px !important;\n font-weight: 500 !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n word-break: break-word !important;\n margin-bottom: 5px !important;\n}\n#sbz92 .product_attachment__subtitle {\n white-space: pre-wrap !important;\n display: -webkit-box !important;\n -webkit-line-clamp: 3 !important;\n -webkit-box-orient: vertical !important;\n overflow: hidden !important;\n padding: 5px 10px !important;\n color: #aaa !important;\n -webkit-text-fill-color: #aaa !important;\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n margin-bottom: 5px !important;\n}\n#sbz92 .product_attachment__btn_external_link {\n width: 16px !important;\n height: 16px !important;\n margin-left: 5px !important;\n margin-top: -2px !important;\n}\n#sbz92 .agent-convo-event-wrapper {\n max-width: 85% !important;\n margin-top: 5px !important;\n}\n#sbz92 .agent-convo-event-wrapper.full {\n max-width: 100% !important;\n}\n#sbz92 .agent-convo-event-inner {\n position: relative !important;\n display: inline-block !important;\n max-width: 100% !important;\n}\n#sbz92 .message-event-actions {\n position: absolute !important;\n bottom: -10px !important;\n opacity: 0.7 !important;\n left: calc(100% - 25px) !important;\n display: none !important;\n border: 1px solid #dee2e6 !important;\n background-color: white !important;\n border-radius: 4px !important;\n z-index: 10 !important;\n}\n#sbz92 .message-event-actions.ended {\n bottom: -10px !important;\n}\n#sbz92 .message-event-actions:hover {\n opacity: 1 !important;\n}\n#sbz92 .agent-convo-event-inner:hover .message-event-actions {\n display: flex !important;\n}\n#sbz92 .message-event-actions-static {\n display: none !important;\n margin-top: 2px !important;\n border: none !important;\n padding: 0 !important;\n gap: 4px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-actions {\n display: none !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-actions-static {\n display: flex !important;\n position: absolute !important;\n bottom: -30px !important;\n left: 0 !important;\n z-index: 2 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn {\n padding: 0 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn .message-event-action-btn-svg {\n width: 24px !important;\n height: 24px !important;\n background-position: 2px 2px !important;\n background-size: 20px 20px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n padding-right: 10px !important;\n border-radius: 5px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev .message-event-action-btn-svg {\n width: 24px !important;\n height: 24px !important;\n background-position: 2px 2px !important;\n background-size: 20px 20px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev:hover {\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev.message-event-action-btn_like.active {\n color: #34c759 !important;\n -webkit-text-fill-color: #34c759 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev.message-event-action-btn_like.active {\n color: #34c759 !important;\n -webkit-text-fill-color: #34c759 !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev:hover {\n background-color: unset !important;\n}\n#sbz92 .message-event-action-btn {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n cursor: pointer !important;\n padding: 2px !important;\n}\n#sbz92 .message-event-action-btn:hover {\n background-color: #ececec !important;\n}\n#sbz92 .message-event-action-btn.active:hover {\n background-color: #dbfde3 !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev {\n padding: 0px !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev:hover {\n background-color: unset !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev.active:hover {\n background-color: unset !important;\n}\n#sbz92 .message-event-action-btn .message-event-action-btn-svg {\n width: 20px !important;\n height: 20px !important;\n border-radius: 4px !important;\n background-position: 2px 2px !important;\n background-size: 16px 16px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n}\n#sbz92 .message-event-action-btn-svg.like {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiM2Yzc1N2QiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGh1bWItdXAiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDExdjhhMSAxIDAgMCAxIC0xIDFoLTJhMSAxIDAgMCAxIC0xIC0xdi03YTEgMSAwIDAgMSAxIC0xaDNhNCA0IDAgMCAwIDQgLTR2LTFhMiAyIDAgMCAxIDQgMHY1aDNhMiAyIDAgMCAxIDIgMmwtMSA1YTIgMyAwIDAgMSAtMiAyaC03YTMgMyAwIDAgMSAtMyAtMyIgLz48L3N2Zz4K') !important;\n}\n#sbz92 .message-event-action-btn-svg.dislike {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiM2Yzc1N2QiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGh1bWItZG93biI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTcgMTN2LThhMSAxIDAgMCAwIC0xIC0xaC0yYTEgMSAwIDAgMCAtMSAxdjdhMSAxIDAgMCAwIDEgMWgzYTQgNCAwIDAgMSA0IDR2MWEyIDIgMCAwIDAgNCAwdi01aDNhMiAyIDAgMCAwIDIgLTJsLTEgLTVhMiAzIDAgMCAwIC0yIC0yaC03YTMgMyAwIDAgMCAtMyAzIiAvPjwvc3ZnPgo=') !important;\n}\n#sbz92 .message-event-action-btn-svg.info {\n background-image: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiM2Yzc1N2QiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTMgMTJhOSA5IDAgMSAwIDE4IDBhOSA5IDAgMCAwIC0xOCAwIiAvPgogIDxwYXRoIGQ9Ik0xMiA5aC4wMSIgLz4KICA8cGF0aCBkPSJNMTEgMTJoMXY0aDEiIC8+Cjwvc3ZnPgo=') !important;\n}\n#sbz92 .message-event-action-btn:hover .message-event-action-btn-svg.like {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImJsYWNrIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXRodW1iLXVwIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNyAxMXY4YTEgMSAwIDAgMSAtMSAxaC0yYTEgMSAwIDAgMSAtMSAtMXYtN2ExIDEgMCAwIDEgMSAtMWgzYTQgNCAwIDAgMCA0IC00di0xYTIgMiAwIDAgMSA0IDB2NWgzYTIgMiAwIDAgMSAyIDJsLTEgNWEyIDMgMCAwIDEgLTIgMmgtN2EzIDMgMCAwIDEgLTMgLTMiIC8+PC9zdmc+Cg==') !important;\n}\n#sbz92 .message-event-action-btn:hover .message-event-action-btn-svg.dislike {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImJsYWNrIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXRodW1iLWRvd24iPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDEzdi04YTEgMSAwIDAgMCAtMSAtMWgtMmExIDEgMCAwIDAgLTEgMXY3YTEgMSAwIDAgMCAxIDFoM2E0IDQgMCAwIDEgNCA0djFhMiAyIDAgMCAwIDQgMHYtNWgzYTIgMiAwIDAgMCAyIC0ybC0xIC01YTIgMyAwIDAgMCAtMiAtMmgtN2EzIDMgMCAwIDAgLTMgMyIgLz48L3N2Zz4K') !important;\n}\n#sbz92 .message-event-action-btn:hover .message-event-action-btn-svg.info {\n background-image: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiMwMDAiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTMgMTJhOSA5IDAgMSAwIDE4IDBhOSA5IDAgMCAwIC0xOCAwIiAvPgogIDxwYXRoIGQ9Ik0xMiA5aC4wMSIgLz4KICA8cGF0aCBkPSJNMTEgMTJoMXY0aDEiIC8+Cjwvc3ZnPgo=') !important;\n}\n#sbz92 .message-event-action-btn.active .message-event-action-btn-svg.like {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9IiMzNEM3NTkiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItZmlsbGVkIGljb24tdGFibGVyLXRodW1iLXVwIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTMgM2EzIDMgMCAwIDEgMi45OTUgMi44MjRsLjAwNSAuMTc2djRoMmEzIDMgMCAwIDEgMi45OCAyLjY1bC4wMTUgLjE3NGwuMDA1IC4xNzZsLS4wMiAuMTk2bC0xLjAwNiA1LjAzMmMtLjM4MSAxLjYyNiAtMS41MDIgMi43OTYgLTIuODEgMi43OGwtLjE2NCAtLjAwOGgtOGExIDEgMCAwIDEgLS45OTMgLS44ODNsLS4wMDcgLS4xMTdsLjAwMSAtOS41MzZhMSAxIDAgMCAxIC41IC0uODY1YTIuOTk4IDIuOTk4IDAgMCAwIDEuNDkyIC0yLjM5N2wuMDA3IC0uMjAydi0xYTMgMyAwIDAgMSAzIC0zeiIgLz48cGF0aCBkPSJNNSAxMGExIDEgMCAwIDEgLjk5MyAuODgzbC4wMDcgLjExN3Y5YTEgMSAwIDAgMSAtLjg4MyAuOTkzbC0uMTE3IC4wMDdoLTFhMiAyIDAgMCAxIC0xLjk5NSAtMS44NWwtLjAwNSAtLjE1di03YTIgMiAwIDAgMSAxLjg1IC0xLjk5NWwuMTUgLS4wMDVoMXoiIC8+PC9zdmc+Cg==') !important;\n}\n#sbz92 .message-event-action-btn.active .message-event-action-btn-svg.dislike {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI0ODBfOTUpIj4KPHBhdGggZD0iTTEzIDIxLjAwNzlDMTMuNzY1IDIxLjAwOCAxNC41MDEyIDIwLjcxNTcgMTUuMDU3OSAyMC4xOTFDMTUuNjE0NyAxOS42NjYyIDE1Ljk0OTkgMTguOTQ4NiAxNS45OTUgMTguMTg0OUwxNiAxOC4wMDc5VjE0LjAwNzlIMThDMTguNzM1MSAxNC4wMDggMTkuNDQ0NyAxMy43MzgyIDE5Ljk5NCAxMy4yNDk3QzIwLjU0MzQgMTIuNzYxMiAyMC44OTQyIDEyLjA4OCAyMC45OCAxMS4zNTc5TDIwLjk5NSAxMS4xODQ5TDIxIDExLjAwNzlMMjAuOTggMTAuODExOUwxOS45NzQgNS43Nzk5MkMxOS41OTMgNC4xNTQ5MiAxOC40NzIgMi45ODM5MiAxNy4xNjQgMi45OTk5MkwxNyAzLjAwNzkySDlDOC43NTQ5MSAzLjAwNzk4IDguNTE4MzggMy4wOTgwNCA4LjMzNTMzIDMuMjYxMDFDOC4xNTIyNyAzLjQyMzk3IDguMDM1NDMgMy42NDg0OSA4LjAwNyAzLjg5MTkyTDggNC4wMDc5Mkw4LjAwMSAxMy41NDM5QzguMDAxIDEzLjcxOTUgOC4wNDcyMSAxMy44OTE5IDguMTM0OTggMTQuMDQzOUM4LjIyMjc1IDE0LjE5NTkgOC4zNDg5OCAxNC4zMjIyIDguNTAxIDE0LjQwOTlDOC45MjcyOSAxNC42NTYxIDkuMjg2NCAxNS4wMDM1IDkuNTQ2NjEgMTUuNDIxM0M5LjgwNjgyIDE1LjgzOTIgOS45NjAxMyAxNi4zMTQ3IDkuOTkzIDE2LjgwNTlMMTAgMTcuMDA3OVYxOC4wMDc5QzEwIDE4LjgwMzYgMTAuMzE2MSAxOS41NjY2IDEwLjg3ODcgMjAuMTI5MkMxMS40NDEzIDIwLjY5MTggMTIuMjA0NCAyMS4wMDc5IDEzIDIxLjAwNzlaIiBmaWxsPSIjMzMzMzMzIi8+CjxwYXRoIGQ9Ik01IDE0LjAwODFDNS4yNDQ5MyAxNC4wMDggNS40ODEzNCAxMy45MTgxIDUuNjY0MzcgMTMuNzU1M0M1Ljg0NzQxIDEzLjU5MjYgNS45NjQzNCAxMy4zNjgzIDUuOTkzIDEzLjEyNTFMNiAxMy4wMDgxVjQuMDA4MDZDNS45OTk5NyAzLjc2MzEyIDUuOTEwMDQgMy41MjY3MiA1Ljc0NzI4IDMuMzQzNjhDNS41ODQ1MyAzLjE2MDY1IDUuMzYwMjUgMy4wNDM3MSA1LjExNyAzLjAxNTA2TDUgMy4wMDgwNkg0QzMuNDk1MSAzLjAwNzkzIDMuMDA4ODQgMy4xOTg3OCAyLjYzODgxIDMuNTQyMjlDMi4yNjg3OCAzLjg4NTc5IDIuMDQyMzYgNC4zNTY1NCAyLjAwNSA0Ljg2MDA2TDIgNS4wMTAwNlYxMi4wMTAxQzIuMDAwMDkgMTIuNTE0NSAyLjE5MDc3IDEzLjAwMDIgMi41MzM4NCAxMy4zN0MyLjg3NjkgMTMuNzM5NyAzLjM0NzAyIDEzLjk2NjIgMy44NSAxNC4wMDQxTDQgMTQuMDA5MUw1IDE0LjAwODFaIiBmaWxsPSIjMzMzMzMzIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjQ4MF85NSI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K') !important;\n}\n#sbz92 .inline-time {\n font-size: 13px !important;\n margin-top: 6px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n font-weight: 500 !important;\n opacity: 0.4 !important;\n}\n#sbz92 .message-text-inline-image-wrapper {\n display: block !important;\n margin-top: 8px !important;\n margin-bottom: 8px !important;\n max-width: 100% !important;\n}\n#sbz92 .message-text-inline-image {\n width: 100% !important;\n}\n#sbz92 .text-message-ul {\n display: block !important;\n list-style-type: disc !important;\n margin-block-start: 8px !important;\n margin-block-end: 8px !important;\n padding-inline-start: 20px !important;\n}\n#sbz92 .text-message-ol {\n display: block !important;\n list-style-type: decimal !important;\n margin-block-start: 8px !important;\n margin-block-end: 8px !important;\n padding-inline-start: 20px !important;\n}\n#sbz92 .text-message-li {\n display: list-item !important;\n}\n#sbz92 .agent-message .text-message-link {\n color: #0d6efd !important;\n -webkit-text-fill-color: #0d6efd !important;\n font-weight: 400 !important;\n}\n#sbz92 .agent-message .text-message-link:hover {\n color: #024dbc !important;\n -webkit-text-fill-color: #024dbc !important;\n}\n#sbz92 .user-message .text-message-link {\n text-decoration: underline !important;\n text-decoration-color: rgba(255, 255, 255, 0.6) !important;\n text-underline-offset: 4px !important;\n}\n#sbz92 .user-message .text-message-link:hover {\n text-decoration-color: #fff !important;\n background-color: rgba(255, 255, 255, 0.08) !important;\n}\n#sbz92 .message-quote {\n padding: 6px 10px !important;\n border-left: 3px solid '@primary_color' !important;\n background-color: #dfdfdf !important;\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n margin-bottom: 8px !important;\n max-width: 100% !important;\n}\n#sbz92 .message-quote-title {\n font-weight: 600 !important;\n font-size: 14px !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .message-quote-content {\n opacity: 0.7 !important;\n color: '@secondary_color' !important;\n -webkit-text-fill-color: '@secondary_color' !important;\n font-size: 14px !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .message-quote-inner-img {\n width: 36px !important;\n height: 36px !important;\n object-fit: cover !important;\n}\n#sbz92 .message-quote-inner {\n margin-left: 15px !important;\n flex: 1 !important;\n overflow: hidden !important;\n}\n#sbz92 .image-attachment.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .file-attachment.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .widget_body_empty_img {\n max-width: 150px !important;\n max-height: 150px !important;\n}\n#sbz92 .emoji {\n position: relative !important;\n width: 20px !important;\n height: 20px !important;\n background-size: 100% !important;\n background-repeat: no-repeat !important;\n border: none !important;\n display: inline-block !important;\n vertical-align: text-bottom !important;\n}\n#sbz92 .emoji--angry {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") !important;\n}\n#sbz92 .emoji--confused {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") !important;\n}\n#sbz92 .emoji--crying,\n#sbz92 .emoji--cry {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_3___ + ") !important;\n}\n#sbz92 .emoji--grinning {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_4___ + ") !important;\n}\n#sbz92 .emoji--heart_eyes,\n#sbz92 .emoji--heart-eyes {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_5___ + ") !important;\n}\n#sbz92 .emoji--neutral_face,\n#sbz92 .emoji--neutral {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_6___ + ") !important;\n}\n#sbz92 .emoji--disappointed,\n#sbz92 .emoji--sad {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_7___ + ") !important;\n}\n#sbz92 .emoji--sleepy {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_8___ + ") !important;\n}\n#sbz92 .emoji--smile,\n#sbz92 .emoji--smiling {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_9___ + ") !important;\n}\n#sbz92 .emoji--open_mouth,\n#sbz92 .emoji--surprised {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_10___ + ") !important;\n}\n#sbz92 .emoji--tired_face,\n#sbz92 .emoji--tired {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_11___ + ") !important;\n}\n#sbz92 .emoji--stuck_out_tongue,\n#sbz92 .emoji--tongue-out {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_12___ + ") !important;\n}\n#sbz92 .emoji--wink {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_13___ + ") !important;\n}\n#sbz92 .emoji--moyai {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_14___ + ") !important;\n}\n#sbz92 .emoji--dislike,\n#sbz92 .emoji--unlike,\n#sbz92 .emoji--thumbsdown {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_15___ + ") !important;\n}\n#sbz92 .emoji--like,\n#sbz92 .emoji--thumbsup {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_16___ + ") !important;\n}\n#sbz92 .emoji--ok_hand {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_17___ + ") !important;\n}\n#sbz92 .emoji--octopus {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_18___ + ") !important;\n}\n#sbz92 .emoji--pig2 {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_19___ + ") !important;\n}\n#sbz92 .emoji--wave {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_20___ + ") !important;\n}\n#sbz92 .emoji--mouse {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_21___ + ") !important;\n}\n#sbz92 .emoji--mouse2 {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_22___ + ") !important;\n}\n#sbz92 .emoji--rat {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_23___ + ") !important;\n}\n#sbz92 .emoji-picker {\n display: flex !important;\n flex-direction: row !important;\n z-index: 20 !important;\n position: absolute !important;\n max-width: 240px !important;\n background: #fff !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n border-radius: 10px !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n right: 15px !important;\n bottom: 55px !important;\n flex-wrap: wrap !important;\n padding: 10px !important;\n justify-content: space-between !important;\n align-items: center !important;\n}\n#sbz92 .emoji-picker--item {\n background-size: 100% !important;\n width: 30px !important;\n height: 30px !important;\n position: relative !important;\n background-repeat: no-repeat !important;\n display: inline-block !important;\n vertical-align: text-bottom !important;\n margin: 5px !important;\n cursor: pointer !important;\n transition: background-color 0.2s !important;\n}\n#sbz92 .emoji-picker-background-item {\n background-size: 50% !important;\n width: 40px !important;\n height: 40px !important;\n border-radius: 100% !important;\n}\n#sbz92 .emoji-picker-background-item:hover {\n background-color: #dee2e6 !important;\n}\n#sbz92 .convo-list {\n display: flex !important;\n flex-direction: column !important;\n flex: 1 !important;\n width: 100% !important;\n justify-content: space-between !important;\n overflow: auto !important;\n margin-top: -60px !important;\n padding-left: 22.5px !important;\n padding-right: 22.5px !important;\n}\n#sbz92 .convo-list--list {\n background: #fff !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n}\n#sbz92 .convo-list--title {\n font-weight: 500 !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n background: #fff !important;\n border-bottom: 1px solid #f0f0f0 !important;\n padding: 15px !important;\n}\n#sbz92 .convo-list--container {\n border-radius: 10px !important;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;\n overflow: auto !important;\n display: flex !important;\n flex-direction: column !important;\n user-select: none !important;\n}\n#sbz92 .convo-list--footer {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n margin-top: 22.5px !important;\n}\n#sbz92 .convo-list--convo-last-info {\n overflow: hidden !important;\n white-space: nowrap !important;\n justify-content: center !important;\n display: flex !important;\n flex-direction: column !important;\n flex: 1 !important;\n margin-left: 15px !important;\n}\n#sbz92 .convo-list--convo-last-message {\n font-weight: normal !important;\n flex: 1 !important;\n cursor: pointer !important;\n display: flex !important;\n width: 100% !important;\n overflow: hidden !important;\n align-items: center !important;\n}\n#sbz92 .convo-list--convo-last-mes {\n text-overflow: ellipsis !important;\n opacity: 0.6 !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: normal !important;\n}\n#sbz92 .convo-list--convo-title {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n}\n#sbz92 .convo-list--convo-completed {\n width: 14px !important;\n}\n#sbz92 .convo-list--convo-name {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n flex: 1 !important;\n margin-right: 16px !important;\n cursor: pointer !important;\n}\n#sbz92 .convo-list--item {\n cursor: pointer !important;\n border-bottom: 1px solid '@primary_color_faded' !important;\n padding: 15px !important;\n display: flex !important;\n flex-direction: row !important;\n transition: background 0.15s ease !important;\n}\n#sbz92 .convo-list--item:hover {\n background: '@primary_color_faded' !important;\n}\n#sbz92 .convo-list--convo-time span {\n font-size: 14px !important;\n line-height: 20px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n opacity: 0.6 !important;\n min-width: 70px !important;\n cursor: pointer !important;\n}\n#sbz92 .convo-list--item-unread {\n width: 8px !important;\n height: 8px !important;\n background: #dc3545 !important;\n border-radius: 50% !important;\n margin-left: 15px !important;\n align-self: center !important;\n}\n#sbz92 .convo-list--item-avatar {\n width: 32px !important;\n height: 32px !important;\n}\n#sbz92 .widget-body--empty {\n display: flex !important;\n flex: 1 !important;\n justify-content: center !important;\n align-items: center !important;\n flex-direction: column !important;\n}\n#sbz92 .widget-body--empty-text {\n color: #343a40 !important;\n -webkit-text-fill-color: #343a40 !important;\n margin-top: 30px !important;\n text-align: center !important;\n}\n#sbz92 .widget-body--empty-icon {\n width: 128px !important;\n height: 128px !important;\n -webkit-mask-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%20data-name%3D%22Layer%202%22%3E%3Cpath%20d%3D%22M130.9%20366.9a9.9%209.9%200%200%200-2.9%207.1%2010.33%2010.33%200%200%200%202.9%207.1%209.73%209.73%200%200%200%207.1%202.9%2010.33%2010.33%200%200%200%207.1-2.9%209.73%209.73%200%200%200%202.9-7.1%2010.52%2010.52%200%200%200-2.9-7.1%209.9%209.9%200%200%200-7.1-2.9%2010.33%2010.33%200%200%200-7.1%202.9zM483.7%20282a183.07%20183.07%200%200%200%2028.3-98C512%2082.5%20429.5%200%20328%200a183.16%20183.16%200%200%200-96%2027%2010%2010%200%200%200%2010.5%2017.1A162.67%20162.67%200%200%201%20328%2020c90.4%200%20164%2073.6%20164%20164a162.73%20162.73%200%200%201-27.9%2091.5%2010.07%2010.07%200%200%200%20.3%2011.6l11%2040.9-44-11.8a10%2010%200%200%200-8.4%201.5%20164.32%20164.32%200%200%201-151.8%2020.2%20138.68%20138.68%200%200%200-97.1-97.1%20164.31%20164.31%200%200%201%2014.5-143.2%2010%2010%200%200%200-17-10.6%20184%20184%200%200%200-19.9%20149.6c-4.5-.4-9.1-.7-13.7-.7C61.9%20236%200%20297.9%200%20374a136.88%20136.88%200%200%200%2022.9%2076.1L12.2%20490a10%2010%200%200%200%2012.3%2012.3l40.9-11a137.71%20137.71%200%200%200%20146.5-.8%2010%2010%200%200%200-10.7-16.9%20118.09%20118.09%200%200%201-128.6-1.5%209.73%209.73%200%200%200-8.1-1.3L36%20478.5l7.4-27.7a10%2010%200%200%200-1.5-8.4%20117.95%20117.95%200%201%201%20207-28%2010%2010%200%200%200%2018.8%206.8%20137.72%20137.72%200%200%200%208.3-47.3%20124.44%20124.44%200%200%200-.7-13.7%20183.93%20183.93%200%200%200%20155.3-23.6l56.2%2015.1a10%2010%200%200%200%2012.3-12.3zm-246%20162.2a10.52%2010.52%200%200%200-7.1%202.9%209.73%209.73%200%200%200-2.9%207.1%2010.33%2010.33%200%200%200%202.9%207.1%209.73%209.73%200%200%200%207.1%202.9%2010.52%2010.52%200%200%200%207.1-2.9%209.73%209.73%200%200%200%202.9-7.1%209.9%209.9%200%200%200-10-10zM205.3%2070.7a10.52%2010.52%200%200%200%207.1-2.9%209.73%209.73%200%200%200%202.9-7.1%2010.14%2010.14%200%200%200-2.9-7.1%209.9%209.9%200%200%200-7.1-2.9%2010.52%2010.52%200%200%200-7.1%202.9%209.9%209.9%200%200%200-2.9%207.1%2010.52%2010.52%200%200%200%202.9%207.1%209.9%209.9%200%200%200%207.1%202.9zm-19.4%20296.2a9.9%209.9%200%200%200-2.9%207.1%2010.33%2010.33%200%200%200%202.9%207.1%209.73%209.73%200%200%200%207.1%202.9%2010.33%2010.33%200%200%200%207.1-2.9%209.73%209.73%200%200%200%202.9-7.1%2010.33%2010.33%200%200%200-2.9-7.1%209.9%209.9%200%200%200-7.1-2.9%2010.33%2010.33%200%200%200-7.1%202.9zm210.8-201.1a9.8%209.8%200%200%200%205.2-1.5l1.3-.8a9.92%209.92%200%200%200%203.3-13.7%2010.06%2010.06%200%200%200-13.8-3.3l-1.3.8a10%2010%200%200%200%205.3%2018.5zm-68.1%20107.4a58%2058%200%200%200%2057.9-57.9%207%207%200%200%200-7-7H277.7a7%207%200%200%200-7%207%2058%2058%200%200%200%2057.9%2057.9zm-43.5-50.9h87.1l-1%203.7a43.93%2043.93%200%200%201-85.2%200zm-25.8-56.5a9.8%209.8%200%200%200%205.2-1.5l1.3-.8a9.92%209.92%200%200%200%203.3-13.7%2010.06%2010.06%200%200%200-13.8-3.3l-1.3.8a10%2010%200%200%200%205.3%2018.5zM75.9%20366.9A9.9%209.9%200%200%200%2073%20374a10.33%2010.33%200%200%200%202.9%207.1A9.73%209.73%200%200%200%2083%20384a10.33%2010.33%200%200%200%207.1-2.9A9.73%209.73%200%200%200%2093%20374a10.33%2010.33%200%200%200-2.9-7.1A9.9%209.9%200%200%200%2083%20364a10.33%2010.33%200%200%200-7.1%202.9z%22%20fill%3D%22%234285f4%22%20data-name%3D%22Capa%201%22/%3E%3C/g%3E%3C/svg%3E') !important;\n border-radius: 0 !important;\n background-color: '@primary_color' !important;\n}\n#sbz92 .mobile .widget-container {\n border-radius: 0px !important;\n max-height: 100% !important;\n margin-bottom: 0 !important;\n top: auto !important;\n left: 0 !important;\n right: 0 !important;\n width: 100% !important;\n height: '@mobile_height' !important;\n opacity: 1 !important;\n transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .mobile .widget-container.widget-container--left {\n left: 0 !important;\n right: 0 !important;\n}\n#sbz92 .mobile .widget-container.widget-container--right {\n right: 0 !important;\n left: 0 !important;\n}\n#sbz92 .mobile .widget-container.widget-container--hide {\n top: -100vh !important;\n opacity: 0 !important;\n transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1), bottom 0.15s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .widget-container.widget-container--left {\n left: '@desktop_button.margin_x' !important;\n right: unset !important;\n}\n#sbz92 .widget-container.widget-container--right {\n right: '@desktop_button.margin_x' !important;\n left: unset !important;\n}\n#sbz92 .widget-container {\n max-height: 100% !important;\n max-height: '@desktop_widget_max_height' !important;\n max-width: 100% !important;\n background: #fff !important;\n z-index: '@z_index_3' !important;\n border-radius: 15px !important;\n box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.13) !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n position: '@widget_position' !important;\n margin-bottom: '@desktop_button.margin_y' !important;\n width: '@width' !important;\n height: '@height' !important;\n bottom: 0 !important;\n opacity: 1 !important;\n transform: translateY(0) !important;\n transition: transform 0.15s cubic-bezier(1, 0.5, 0.8, 1), opacity 0.2s cubic-bezier(1, 0.5, 0.8, 1), scale 0.15s ease !important;\n visibility: visible !important;\n overflow: hidden !important;\n}\n#sbz92 .widget-container.widget-container--full {\n max-height: 100% !important;\n height: 100% !important;\n margin-bottom: 0 !important;\n}\n#sbz92 .widget-container.widget-container--hide {\n opacity: 0 !important;\n transform: translateY(20px) !important;\n visibility: hidden !important;\n transition: transform 0.15s cubic-bezier(1, 0.5, 0.8, 1), opacity 0.1s cubic-bezier(1, 0.5, 0.8, 1), visibility 0.1s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .btn--start-convo {\n border-radius: 7px !important;\n flex-shrink: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n padding-left: 32px !important;\n padding-right: 32px !important;\n height: 42px !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n font-size: 16px !important;\n font-weight: 500 !important;\n line-height: 20px !important;\n text-align: center !important;\n background: '@primary_color' !important;\n width: 100% !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n transition: filter 250ms ease !important;\n}\n#sbz92 .btn--start-convo::after {\n display: none !important;\n}\n#sbz92 .btn--start-convo:hover {\n filter: brightness(1.1) !important;\n}\n#sbz92 .btn--start-convo:disabled {\n opacity: 0.5 !important;\n cursor: default !important;\n pointer-events: none !important;\n}\n#sbz92 .widget-body.widget-body--none {\n display: none !important;\n}\n#sbz92 .widget-body {\n flex: 1 !important;\n flex-grow: 1 !important;\n z-index: -1 !important;\n width: 100% !important;\n overflow-y: auto !important;\n flex-direction: column !important;\n display: flex !important;\n position: relative !important;\n}\n#sbz92 .embed-chat .widget-body--events {\n width: 600px !important;\n margin: 0 auto !important;\n max-width: 100% !important;\n}\n#sbz92 .embed-chat .message-input {\n max-width: 600px !important;\n margin: 20px auto !important;\n}\n#sbz92 .embed-chat .widget-header--inner {\n max-width: 100% !important;\n width: 600px !important;\n}\n#sbz92 .embed-chat .widget-body--content {\n width: 600px !important;\n margin: 0 auto !important;\n max-width: 100% !important;\n}\n#sbz92 .embed-chat .convo-list {\n width: 600px !important;\n margin: 0 auto !important;\n max-width: 100% !important;\n}\n#sbz92 .widget-body--content {\n overflow-y: auto !important;\n overflow-x: hidden !important;\n flex: 1 !important;\n display: flex !important;\n flex-direction: column !important;\n position: relative !important;\n min-height: 0 !important;\n}\n#sbz92 .poweredby {\n margin-bottom: 15px !important;\n text-align: center !important;\n}\n#sbz92 .poweredby .poweredby--text {\n text-decoration: none !important;\n font-size: 13px !important;\n color: #7c7c7c !important;\n -webkit-text-fill-color: #7c7c7c !important;\n vertical-align: baseline !important;\n}\n#sbz92 .poweredby .poweredby--text .poweredby--subiz-logo {\n opacity: 0.7 !important;\n margin-top: -1px !important;\n height: 12px !important;\n}\n#sbz92 .poweredby .poweredby--text:hover {\n color: #333 !important;\n -webkit-text-fill-color: #333 !important;\n}\n#sbz92 .poweredby .poweredby--text:hover .poweredby--subiz-logo {\n opacity: 1 !important;\n}\n#sbz92 .empty-container {\n display: flex !important;\n justify-content: center !important;\n flex-direction: column !important;\n margin-top: 30px !important;\n margin-bottom: 30px !important;\n}\n#sbz92 .empty-desc {\n text-align: center !important;\n margin: 30px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .chat-button--white-bg {\n display: none !important;\n z-index: -1 !important;\n}\n#sbz92 .chat-button--white-bg--mask-only {\n background: white !important;\n width: 66px !important;\n height: 66px !important;\n top: 2px !important;\n left: 2px !important;\n position: absolute !important;\n border-radius: 50% !important;\n display: block !important;\n}\n#sbz92 .mobile .chat-button--default {\n width: '@mobile_button.width' !important;\n height: '@mobile_button.height' !important;\n background: '@background' !important;\n border-radius: '@mobile_button.border_radius' !important;\n}\n#sbz92 .mobile .widget-layout {\n bottom: '@mobile_button.margin_y' !important;\n}\n#sbz92 .mobile .widget-layout.widget-layout--left {\n left: '@mobile_button.margin_x' !important;\n right: unset !important;\n}\n#sbz92 .mobile .widget-layout.widget-layout--right {\n right: '@mobile_button.margin_x' !important;\n left: unset !important;\n}\n#sbz92 .mobile .chat-button--img {\n min-width: '@mobile_button.width' !important;\n}\n#sbz92 .chat-button {\n cursor: pointer !important;\n position: relative !important;\n scale: 1 !important;\n transition: filter 250ms ease, opacity 0.15s ease-in, scale 0.125s ease-in-out, transform 0.2s ease-in-out !important;\n}\n#sbz92 .chat-button.hidden {\n opacity: 0 !important;\n}\n#sbz92 .chat-button:hover {\n filter: brightness(1.1) !important;\n scale: 1.05 !important;\n}\n#sbz92 .chat-button--img {\n opacity: 0 !important;\n min-width: '@desktop_button.width' !important;\n display: block !important;\n}\n#sbz92 .chat-button.chat-button--left {\n float: left !important;\n}\n#sbz92 .chat-button.chat-button--right {\n float: right !important;\n}\n#sbz92 .widget-layout {\n z-index: '@z_index_2' !important;\n position: '@widget_position' !important;\n bottom: '@desktop_button.margin_y' !important;\n transition: opacity 150ms !important;\n opacity: 1 !important;\n}\n#sbz92 .widget-layout.widget-layout--hidden {\n opacity: 0 !important;\n pointer-events: none !important;\n}\n#sbz92 .widget-layout.widget-layout--left {\n left: '@desktop_button.margin_x' !important;\n right: unset !important;\n}\n#sbz92 .widget-layout.widget-layout--right {\n right: '@desktop_button.margin_x' !important;\n left: unset !important;\n}\n#sbz92 .chat-button--unread {\n position: absolute !important;\n right: 0px !important;\n top: -5px !important;\n background: #dc3545 !important;\n padding-left: 5px !important;\n padding-right: 5px !important;\n padding-top: 2px !important;\n padding-bottom: 2px !important;\n border-radius: 5px !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n}\n#sbz92 .widget-preview {\n z-index: '@z_index_3' !important;\n background: #fff !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n border-radius: 15px !important;\n max-width: 100% !important;\n width: 340px !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .widget-preview.widget-preview--hidden {\n display: none !important;\n}\n#sbz92 .widget-preview--btn-close {\n cursor: pointer !important;\n opacity: 0.5 !important;\n align-self: flex-start !important;\n background-color: #e5e5e5 !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K') !important;\n background-size: 16px 16px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n border-radius: 100% !important;\n transition: background-color 0.2s !important;\n}\n#sbz92 .widget-preview--btn-close:hover {\n opacity: 1 !important;\n}\n#sbz92 .widget-preview--avatar {\n width: 45px !important;\n height: 45px !important;\n border: 1px solid rgba(31, 54, 90, 0.1) !important;\n border-radius: 100% !important;\n margin-right: 15px !important;\n}\n#sbz92 .widget-preview--body {\n display: flex !important;\n padding: 15px !important;\n}\n#sbz92 .widget-preview--title {\n display: block !important;\n font-size: 15px !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n margin-bottom: 5px !important;\n opacity: 0.7 !important;\n}\n#sbz92 .widget-preview--content {\n cursor: pointer !important;\n flex: 1 !important;\n overflow: hidden !important;\n}\n#sbz92 .widget-preview--message {\n white-space: pre-wrap !important;\n word-wrap: break-word !important;\n font-weight: 500 !important;\n font-size: 16px !important;\n display: block !important;\n margin: 0 !important;\n margin-bottom: 0px !important;\n max-height: 78px !important;\n overflow: hidden !important;\n}\n#sbz92 .widget-preview--action {\n border-top: 1px solid #f0f0f0 !important;\n cursor: pointer !important;\n padding: 13px !important;\n}\n#sbz92 .widget-preview--action-text {\n display: block !important;\n text-align: center !important;\n font-weight: 500 !important;\n font-size: 16px !important;\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n margin: 0 !important;\n}\n#sbz92 .widget-internet-status {\n position: absolute !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n font-size: 14px !important;\n z-index: 10 !important;\n text-align: center !important;\n padding: 6px 5px !important;\n}\n#sbz92 .widget-internet-status.negative {\n background-color: #212325 !important;\n color: #fff !important;\n}\n#sbz92 .widget-internet-status.positive {\n background-color: #19b600 !important;\n color: #fff !important;\n}\n#sbz92 .widget-preview-text-message--header {\n display: flex !important;\n overflow: hidden !important;\n align-items: center !important;\n width: 100% !important;\n}\n#sbz92 .widget-preview-text-message--header .widget-preview--avatar {\n width: 24px !important;\n height: 24px !important;\n flex-shrink: 0 !important;\n margin-right: 10px !important;\n}\n#sbz92 .widget-preview-text-message--author {\n flex: 1 !important;\n overflow: hidden !important;\n display: flex !important;\n align-items: center !important;\n}\n#sbz92 .widget-preview-text-message--author .badge {\n margin-left: 10px !important;\n}\n#sbz92 .widget-preview-text-message--author-text {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n line-height: 1.5 !important;\n color: '@secondary_color' !important;\n -webkit-text-fill-color: '@secondary_color' !important;\n}\n#sbz92 .widget-preview-text-message--content {\n margin-top: 10px !important;\n white-space: pre-wrap !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper {\n z-index: '@z_index_3' !important;\n width: 100% !important;\n margin-bottom: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.right {\n align-items: flex-end !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal {\n flex-direction: row !important;\n flex-wrap: wrap !important;\n align-items: center !important;\n gap: 10px !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal.right {\n justify-content: flex-end !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal.left {\n justify-content: flex-start !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal .widget-preview-quick-reply-item {\n margin: 0 !important;\n max-width: 200px !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n padding: 6px 15px !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal .widget-preview-quick-reply-item:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .widget-preview-quick-reply-item {\n border-radius: 20px !important;\n padding: 8px 20px !important;\n background: #fff !important;\n border: 1.5px solid !important;\n border-color: '@primary_color' !important;\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n margin-bottom: 15px !important;\n cursor: pointer !important;\n transition: 0.3s ease !important;\n position: relative !important;\n}\n#sbz92 .widget-preview-quick-reply-item:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .widget-preview-quick-reply-item:hover {\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n background-color: '@primary_color' !important;\n}\n#sbz92 .widget-preview-image-wrapper {\n z-index: '@z_index_3' !important;\n width: 100% !important;\n margin-bottom: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n}\n#sbz92 .widget-preview-image-wrapper.right {\n align-items: flex-end !important;\n}\n#sbz92 .widget-preview-image-item {\n max-width: 300px !important;\n border-radius: 15px !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n border: 1px solid #dee2e6 !important;\n overflow: hidden !important;\n cursor: pointer !important;\n}\n#sbz92 .widget-preview-image-item img {\n width: 100% !important;\n max-height: 300px !important;\n object-fit: cover !important;\n}\n#sbz92 .widget-preview-text-message {\n z-index: '@z_index_3' !important;\n background: #fff !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n border: 1px solid #dee2e6 !important;\n border-radius: 15px !important;\n max-width: 100% !important;\n min-width: 210px !important;\n margin-bottom: 15px !important;\n padding: 15px 20px !important;\n positive: relative !important;\n cursor: pointer !important;\n}\n#sbz92 .widget-preview-text-message.right {\n border-bottom-right-radius: 8px !important;\n}\n#sbz92 .widget-preview-text-message.left {\n border-bottom-left-radius: 8px !important;\n}\n#sbz92 .widget-preview-new-wrapper {\n max-width: '@preview_max_width' !important;\n position: relative !important;\n opacity: 1 !important;\n transition: opacity 0.15s ease-in, transform 0.15s ease-in !important;\n transform: translateY(0) !important;\n}\n#sbz92 .widget-preview-new-wrapper.hidden {\n transform: translateY(20px) !important;\n transition: opacity 0.15s ease-out, transform 0.15s ease-out !important;\n opacity: 0 !important;\n}\n#sbz92 .widget-preview-new-wrapper:hover .widget-preview-x-wrapper {\n display: flex !important;\n}\n#sbz92 .widget-preview-x-wrapper {\n display: none !important;\n justify-content: flex-start !important;\n width: calc(100% + 40px) !important;\n position: absolute !important;\n padding: 15px 20px !important;\n left: -20px !important;\n bottom: 100% !important;\n}\n#sbz92 .widget-preview-x-wrapper.mobile {\n display: flex !important;\n}\n#sbz92 .widget-preview-x-wrapper.right {\n justify-content: flex-end !important;\n left: unset !important;\n right: -20px !important;\n}\n#sbz92 .widget-preview-x-wrapper .widget-preview--btn-close {\n opacity: 1 !important;\n width: 32px !important;\n height: 32px !important;\n border: 1px solid #ececec !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n background-color: #00000040 !important;\n background-size: 16px 16px !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .widget-preview-x-wrapper .widget-preview--btn-close:hover {\n border-color: #fff !important;\n background-color: #00000066 !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .rating--overlay {\n position: absolute !important;\n height: 100% !important;\n width: 100% !important;\n background: black !important;\n opacity: 0.3 !important;\n top: 0 !important;\n left: 0 !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n z-index: 9 !important;\n}\n#sbz92 .rating {\n border-top-left-radius: 10px !important;\n border-top-right-radius: 10px !important;\n overflow: hidden !important;\n position: absolute !important;\n height: 400px !important;\n max-height: 80% !important;\n width: 100% !important;\n bottom: 0 !important;\n /* centering */\n left: 0 !important;\n background: white !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n z-index: 10 !important;\n}\n#sbz92 .rating .rating--comment {\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n resize: none !important;\n margin-left: 20px !important;\n margin-right: 20px !important;\n border: 2px solid lightgray !important;\n border-radius: 5px !important;\n padding: 10px !important;\n height: 60px !important;\n min-height: 60px !important;\n}\n#sbz92 .rating .rating--close-btn {\n right: 20px !important;\n top: -2px !important;\n width: 22px !important;\n height: 22px !important;\n position: absolute !important;\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23acacac%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C/line%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C/line%3E%3C/svg%3E') !important;\n cursor: pointer !important;\n}\n#sbz92 .rating .rating--close-btn:hover {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C/line%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C/line%3E%3C/svg%3E') !important;\n}\n#sbz92 .rating .rating--handle:hover .rating--thumb {\n background: #e0e0e0 !important;\n}\n#sbz92 .rating .rating--thumb {\n width: 70px !important;\n height: 6px !important;\n background: #eaeaea !important;\n border-radius: 5px !important;\n margin: 0 auto !important;\n cursor: grabbing !important;\n margin-top: 8px !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .rating .rating--content {\n display: flex !important;\n flex: 1 !important;\n flex-grow: 1 !important;\n height: calc(100% - 40px) !important;\n flex-direction: column !important;\n justify-content: space-between !important;\n}\n#sbz92 .rating .rating--heading {\n margin: 0 !important;\n font-weight: 500 !important;\n font-size: 20px !important;\n line-height: 20px !important;\n text-align: center !important;\n flex-grow: 1 !important;\n position: relative !important;\n}\n#sbz92 .rating .rating--description {\n text-align: center !important;\n flex-grow: 1 !important;\n font-size: 15px !important;\n padding-left: 20px !important;\n padding-right: 20px !important;\n display: flex !important;\n align-items: center !important;\n margin-top: 10px !important;\n margin-bottom: 15px !important;\n}\n#sbz92 .rating .rating-faces-container {\n flex: 5 !important;\n display: flex !important;\n justify-content: space-around !important;\n align-items: center !important;\n margin: 10px 10px !important;\n}\n#sbz92 .rating .rating-face-container {\n padding: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n cursor: pointer !important;\n border-radius: 10px !important;\n user-select: none !important;\n -webkit-transition: all 0.1s !important;\n transition: all 0.1s !important;\n}\n#sbz92 .rating .rating-face-container:hover {\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) !important;\n}\n#sbz92 .rating .rating-face--text {\n margin-top: 10px !important;\n margin-bottom: 0px !important;\n font-size: 13px !important;\n color: #4d4d4d !important;\n -webkit-text-fill-color: #4d4d4d !important;\n}\n#sbz92 .rating .rating-no-thanks {\n flex: 10 !important;\n text-align: center !important;\n cursor: pointer !important;\n display: flex !important;\n justify-content: center !important;\n align-items: flex-end !important;\n color: #acacac !important;\n -webkit-text-fill-color: #acacac !important;\n}\n#sbz92 .rating .rating-no-thanks:hover {\n color: black !important;\n -webkit-text-fill-color: black !important;\n}\n#sbz92 .text__danger {\n color: #dc3545 !important;\n}\n#sbz92 .extension--close-btn {\n background: #00000088 !important;\n border-radius: 8px !important;\n color: #ffffffaa !important;\n -webkit-text-fill-color: #ffffffaa !important;\n right: 10px !important;\n top: -35px !important;\n font-size: 14px !important;\n position: absolute !important;\n padding: 5px 15px !important;\n cursor: pointer !important;\n}\n#sbz92 .extension--close-btn:hover {\n background: #000000 !important;\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n}\n#sbz92 .extension--handle {\n margin-bottom: 10px !important;\n}\n#sbz92 .extension--handle:hover .extension--thumb {\n background: #e0e0e0 !important;\n}\n#sbz92 .extension--thumb {\n width: 70px !important;\n cursor: grabbing !important;\n margin: 0 auto !important;\n height: 6px !important;\n background: #eaeaea !important;\n border-radius: 5px !important;\n flex: 1 !important;\n margin-top: 5px !important;\n}\n#sbz92 .extension {\n border-top-left-radius: 10px !important;\n position: absolute !important;\n border-top-right-radius: 10px !important;\n width: 100% !important;\n bottom: 0 !important;\n /* centering */\n left: 0 !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n background: white !important;\n z-index: 10 !important;\n}\n#sbz92 .extension--overlay {\n position: absolute !important;\n height: 100% !important;\n width: 100% !important;\n background: black !important;\n opacity: 0.3 !important;\n top: 0 !important;\n left: 0 !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n z-index: 9 !important;\n}\n#sbz92 .order__footer {\n margin-top: 40px !important;\n color: #888 !important;\n -webkit-text-fill-color: #888 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .order__footer_delimiter {\n width: 1px !important;\n height: 15px !important;\n border-right: 1px solid #bbb !important;\n}\n#sbz92 .order__footer_link {\n padding: 0 10px !important;\n font-size: 14px !important;\n cursor: pointer !important;\n}\n#sbz92 .order__footer_link:hover {\n text-decoration: none !important;\n color: #555 !important;\n -webkit-text-fill-color: #555 !important;\n}\n#sbz92 .desktop.order {\n border-radius: 0 !important;\n width: 780px !important;\n margin: 0 auto !important;\n height: 100% !important;\n}\n#sbz92 .desktop.order .order_section__line {\n display: none !important;\n}\n#sbz92 .desktop.order .desktop_order__heading {\n line-height: 20px !important;\n}\n#sbz92 .desktop.order .order_attachment__product_img {\n width: 50px !important;\n height: 50px !important;\n}\n#sbz92 .desktop.order .order_label {\n font-weight: 500 !important;\n margin-top: 30px !important;\n margin-bottom: 10px !important;\n font-size: 16px !important;\n}\n#sbz92 .desktop.order .order_label:first-child {\n margin-top: 0 !important;\n}\n#sbz92 .desktop.order .order_recap {\n margin-top: 0px !important;\n background: #f4f4f4 !important;\n margin-top: 20px !important;\n width: 270px !important;\n box-shadow: 0 0 0 1px hsla(0, 0%, 69%, 0.2), 0 15px 35px 0 rgba(49, 49, 93, 0.08), 0 5px 15px 0 rgba(0, 0, 0, 0.06) !important;\n border-radius: 6px !important;\n background-color: #fff !important;\n padding: 32px 32px 20px !important;\n}\n#sbz92 .desktop.order .order_acc_header {\n display: flex !important;\n align-items: center !important;\n margin-top: 20px !important;\n}\n#sbz92 .desktop.order .order_acc_logo {\n height: 50px !important;\n}\n#sbz92 .desktop.order .order_acc_name {\n font-size: 16px !important;\n margin-left: 10px !important;\n border-left: 1px solid #aaa !important;\n padding-left: 10px !important;\n}\n#sbz92 .desktop.order .order_summary_line {\n align-items: center !important;\n overflow: hidden !important;\n padding: 5px 0 !important;\n display: flex !important;\n justify-content: space-between !important;\n}\n#sbz92 .desktop_order__content {\n display: flex !important;\n}\n#sbz92 .order {\n width: 100% !important;\n display: flex !important;\n flex-direction: column !important;\n background: white !important;\n z-index: 10 !important;\n}\n#sbz92 .order .ship_card {\n display: flex !important;\n align-items: center !important;\n overflow: hidden !important;\n width: 190px !important;\n cursor: pointer !important;\n padding: 10px 15px !important;\n box-shadow: none !important;\n border: 2px solid #eee !important;\n color: #777 !important;\n -webkit-text-fill-color: #777 !important;\n margin-top: 5px !important;\n border-radius: 8px !important;\n background: white !important;\n transition: all 150ms ease-out !important;\n}\n#sbz92 .order .ship_card:hover {\n color: #555 !important;\n -webkit-text-fill-color: #555 !important;\n border: 2px solid #aaa !important;\n}\n#sbz92 .order .ship_card.ship_card__active {\n color: #333 !important;\n -webkit-text-fill-color: #333 !important;\n border: 2px solid #777 !important;\n background: #fafafa !important;\n}\n#sbz92 .order .order_ship_icon {\n margin-top: -3px !important;\n width: 15px !important;\n height: 15px !important;\n opacity: 0.6 !important;\n}\n#sbz92 .order .card_section {\n margin-top: 20px !important;\n max-width: 500px !important;\n box-shadow: 0 0 0 1px hsla(0, 0%, 69%, 0.2), 0 15px 35px 0 rgba(49, 49, 93, 0.08), 0 5px 15px 0 rgba(0, 0, 0, 0.06) !important;\n border-radius: 6px !important;\n background-color: #fff !important;\n padding: 32px !important;\n}\n#sbz92 .order input[type='text'].form-control,\n#sbz92 .order input[type='number'].form-control,\n#sbz92 .order input[type='date'].form-control,\n#sbz92 .order textarea.form-control,\n#sbz92 .order select.form-control {\n background: #f4f4f4 !important;\n border: 1px solid transparent !important;\n padding: 7px 10px !important;\n}\n#sbz92 .order input[type='text'].form-control:hover,\n#sbz92 .order input[type='number'].form-control:hover,\n#sbz92 .order input[type='date'].form-control:hover,\n#sbz92 .order textarea.form-control:hover,\n#sbz92 .order select.form-control:hover {\n background: #f0f0f0 !important;\n}\n#sbz92 .order input[type='text'].form-control:focus,\n#sbz92 .order input[type='number'].form-control:focus,\n#sbz92 .order input[type='date'].form-control:focus,\n#sbz92 .order textarea.form-control:focus,\n#sbz92 .order select.form-control:focus,\n#sbz92 .order input[type='text'].form-control:active,\n#sbz92 .order input[type='number'].form-control:active,\n#sbz92 .order input[type='date'].form-control:active,\n#sbz92 .order textarea.form-control:active,\n#sbz92 .order select.form-control:active {\n background: #eee !important;\n}\n#sbz92 .order input[type='text'].form-control.err,\n#sbz92 .order input[type='number'].form-control.err,\n#sbz92 .order input[type='date'].form-control.err,\n#sbz92 .order textarea.form-control.err,\n#sbz92 .order select.form-control.err {\n background: #ffe6e6 !important;\n border: 1px solid #ff8a8a !important;\n}\n#sbz92 .order .form {\n box-shadow: none !important;\n border: none !important;\n padding: 0 !important;\n}\n#sbz92 .order .form .radio {\n height: unset !important;\n}\n#sbz92 .order .order--content {\n display: flex !important;\n flex: 1 !important;\n flex-direction: column !important;\n}\n#sbz92 .order .order--content-content {\n flex: 1 !important;\n overflow: auto !important;\n}\n#sbz92 .order .order--heading {\n margin: 0 !important;\n margin-top: 20px !important;\n padding-left: 20px !important;\n padding-right: 20px !important;\n padding-bottom: 8px !important;\n line-height: 20px !important;\n position: relative !important;\n}\n#sbz92 .order .order--header-desc {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n font-size: 13px !important;\n}\n#sbz92 .order .order__product_line {\n display: flex !important;\n overflow: hidden !important;\n}\n#sbz92 .order .order--footer {\n text-align: k center !important;\n cursor: pointer !important;\n display: flex !important;\n justify-content: center !important;\n align-items: flex-end !important;\n color: #acacac !important;\n -webkit-text-fill-color: #acacac !important;\n}\n#sbz92 .order .order--footer:hover {\n color: black !important;\n -webkit-text-fill-color: black !important;\n}\n#sbz92 .order .order_section_label {\n color: #444 !important;\n -webkit-text-fill-color: #444 !important;\n margin-bottom: 5px !important;\n text-transform: uppercase !important;\n font-size: 13px !important;\n font-weight: 500 !important;\n}\n#sbz92 .order .order_label {\n color: #444 !important;\n -webkit-text-fill-color: #444 !important;\n margin-bottom: 5px !important;\n text-transform: uppercase !important;\n font-size: 13px !important;\n font-weight: 500 !important;\n}\n#sbz92 .order .order_section {\n padding-left: 20px !important;\n padding-right: 20px !important;\n padding-bottom: 15px !important;\n padding-top: 15px !important;\n}\n#sbz92 .order .order_section__line {\n border-top: 4px solid #eee !important;\n width: 100% !important;\n}\n#sbz92 .order .order_summary_line {\n overflow: hidden !important;\n padding: 3px 0 !important;\n display: flex !important;\n justify-content: space-between !important;\n}\n#sbz92 .order .order_btn {\n width: 100% !important;\n}\n#sbz92 .order .order_tracking_link {\n text-decoration: underline !important;\n cursor: pointer !important;\n}\n#sbz92 .order .order_tracking_link:hover {\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n}\n#sbz92 .order .order_tracking_link_icon {\n margin-top: -3px !important;\n width: 15px !important;\n height: 15px !important;\n}\n#sbz92 .order .order_shipping_provider_logo {\n width: 32px !important;\n height: 32px !important;\n margin-right: 10px !important;\n}\n#sbz92 .order .order_btn.order__btn__light {\n background: #f0f0f0 !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n border-radius: 6px !important;\n text-align: center !important;\n padding: 8px !important;\n cursor: pointer !important;\n}\n#sbz92 .order .order_btn.order__btn__light:hover {\n color: black !important;\n -webkit-text-fill-color: black !important;\n background: #ddd !important;\n}\n#sbz92 div.order__card {\n display: flex !important;\n padding: 15px !important;\n box-shadow: none !important;\n border: 2px solid #eee !important;\n margin-top: 10px !important;\n border-radius: 8px !important;\n background: #fafafa !important;\n}\n#sbz92 div.order__card.order__card__active {\n border: 2px solid #777 !important;\n background: white !important;\n}\n#sbz92 .order_form_label {\n margin-top: 10px !important;\n margin-bottom: 4px !important;\n}\n#sbz92 .btn-confirm-order {\n width: 100% !important;\n background: '@primary_color' !important;\n display: flex !important;\n align-items: center !important;\n border-radius: 5px !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n padding: 15px 10px !important;\n cursor: pointer !important;\n justify-content: center !important;\n font-weight: 500 !important;\n margin-top: 10px !important;\n}\n#sbz92 .btn-confirm-order:hover {\n background: #0053d4 !important;\n}\n#sbz92 .order__total {\n font-weight: 500 !important;\n font-size: 20px !important;\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n}\n#sbz92 .btn-cancel-order {\n color: #666 !important;\n -webkit-text-fill-color: #666 !important;\n text-decoration: underline !important;\n display: inline-block !important;\n margin-top: 10px !important;\n cursor: pointer !important;\n}\n#sbz92 .btn-cancel-order:hover {\n color: #333 !important;\n -webkit-text-fill-color: #333 !important;\n}\n#sbz92 .order_status {\n text-transform: uppercase !important;\n background: black !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n display: inline-block !important;\n border-radius: 4px !important;\n padding: 6px 6px 4px 6px !important;\n line-height: 1 !important;\n font-weight: 500 !important;\n font-size: 12px !important;\n}\n#sbz92 .order_status.order_status__canceled {\n background: whitesmoke !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .order_status.order_status__cancel {\n background: whitesmoke !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .order_status.order_status__confirmed {\n background: '@primary_color' !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__shipping {\n background: #000 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__fullfilled {\n background: #28a745 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__hold {\n background: #dc3545 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__draft {\n background: #ffc107 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__open {\n background: #ffc107 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_error {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n height: 100% !important;\n width: 100% !important;\n}\n#sbz92 .order_attachment__note {\n font-size: 14px !important;\n white-space: pre-wrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n display: -webkit-box !important;\n -webkit-line-clamp: 3 !important;\n -webkit-box-orient: vertical !important;\n}\n#sbz92 .dropdown_select {\n position: absolute !important;\n background: white !important;\n -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n border-radius: 5px !important;\n width: 150px !important;\n z-index: 20 !important;\n overflow: hidden !important;\n}\n#sbz92 .dropdown_select__overlay {\n top: 0 !important;\n overflow: hidden !important;\n position: absolute !important;\n background: #000000aa !important;\n z-index: 19 !important;\n left: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n}\n#sbz92 .dropdown_select__item {\n padding: 7px 10px !important;\n cursor: pointer !important;\n}\n#sbz92 .dropdown_select__item:hover {\n background: '@primary_color' !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n}\n#sbz92 .dropdown_select_filter {\n padding: 8px 10px !important;\n border-bottom: 1px solid #eee !important;\n position: relative !important;\n}\n#sbz92 .dropdown_select_filter:hover .dropdown_select_filter__icon {\n opacity: 1 !important;\n}\n#sbz92 .dropdown_select_filter_input {\n border-radius: 5px !important;\n width: 100% !important;\n display: block !important;\n background: #f4f4f4 !important;\n border: none !important;\n padding: 7px 10px !important;\n padding-left: 35px !important;\n}\n#sbz92 .dropdown_select_filter_input:hover {\n background: #f0f0f0 !important;\n}\n#sbz92 .dropdown_select_filter_input:focus,\n#sbz92 .dropdown_select_filter_input:active {\n background: #eee !important;\n}\n#sbz92 .dropdown_select_input {\n border-radius: 5px !important;\n overflow: hidden !important;\n cursor: pointer !important;\n flex-wrap: nowrap !important;\n display: flex !important;\n background: #f4f4f4 !important;\n border: 1px solid trasparent !important;\n padding: 7px 10px !important;\n height: 32px !important;\n min-width: 120px !important;\n width: 100% !important;\n}\n#sbz92 .dropdown_select_input:hover {\n background: #f0f0f0 !important;\n}\n#sbz92 .dropdown_select_input:focus,\n#sbz92 .dropdown_select_input:active {\n background: #eee !important;\n}\n#sbz92 .dropdown_select_input.err {\n background: #ffe6e6 !important;\n border: 1px solid #ff8a8a !important;\n}\n#sbz92 .dropdown_select__items {\n max-height: 300px !important;\n min-height: 100px !important;\n overflow-x: hidden !important;\n overflow-y: auto !important;\n}\n#sbz92 .dropdown_select_filter__icon {\n width: 22px !important;\n height: 15px !important;\n position: absolute !important;\n z-index: 2 !important;\n top: 15px !important;\n left: 18px !important;\n border-right: 1px solid #aaa !important;\n padding-right: 7px !important;\n opacity: 0.5 !important;\n}\n#sbz92 .dropdown_select_filter__empty {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n flex-direction: column !important;\n}\n#sbz92 .dropdown_select_filter__empty_img {\n height: 50px !important;\n margin-top: 10px !important;\n margin-bottom: 10px !important;\n}\n#sbz92 .dropdown_select__caret {\n width: 14px !important;\n margin-top: 3px !important;\n opacity: 0.6 !important;\n height: 15px !important;\n}\ndiv#sbz92 {\n all: initial;\n}\nbody div#sbz92 {\n all: initial !important;\n}\n", ""]);
3761
+ ___CSS_LOADER_EXPORT___.push([module.id, "#sbz92 * {\n all: unset !important;\n}\n.sbz_no_scroll {\n overflow: hidden !important;\n overflow-x: hidden !important;\n overflow-y: hidden !important;\n}\n#sbz92 {\n /* Handle on hover */\n /*\n.widget-header--button-close {\n\tdisplay: flex;\n\tborder-radius: 6px;\n\tjustify-self: flex-end;\n\talign-items: center;\n\talign-self: flex-start;\n\n\tfilter: brightness(0.95);\n\t&:hover {\n\t\topacity: 1;\n\t\tfilter: brightness(1.1);\n\t\tscale: 1.1;\n\t}\n}\n*/\n /*\n[data-tooltip]::after {\n\ttext-align: center;\n\tmin-width: 60px;\n\tmax-width: 350px;\n\n\ttransform: translate3d(0, 0, 0);\n\t-webkit-backface-visibility: hidden;\n\tbackface-visibility: hidden;\n\twill-change: transform;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity @tooltip-transition-duration @tooltip-transition-easing @tooltip-transition-delay;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\tz-index: @z-index + 2000;\n\ttransform-origin: top;\n\twhite-space: pre-wrap;\n\twidth: 100%;\n\n\tbackground: @black;\n\tborder-radius: 5px;\n\n\t.color(@white);\n\n\tcontent: attr(data-tooltip);\n\tfont-size: @tooltip-font-size;\n\tfont-weight: @tooltip-font-weight;\n\ttext-transform: @tooltip-text-transform;\n\tpadding: 0.5em;\n\tbox-sizing: content-box;\n}\n\n[data-tooltip]:hover::after,\n[data-tooltip]:focus::after {\n\topacity: 1;\n\tpointer-events: auto;\n}\n\n// ------------------------------------------------\n// [2] Position Modifiers\n// ------------------------------------------------\n\n[data-tooltip][data-tooltip-position|='top']::after {\n\tmargin-bottom: @tooltip-margin;\n\ttransform: translate3d(-50%, -5px, 0);\n\tbottom: 100%;\n\tleft: 50%;\n}\n\n// ------------------------------------------------\n// [2.1] Top Left\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='top-left']::after {\n\ttransform: translate3d(~'calc(-100% + 16px)', -5px, 0);\n\tbottom: 100%;\n}\n\n// ------------------------------------------------\n// [2.2] Top Right\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='top-right']::after {\n\ttransform: translate3d(~'calc(0% + -16px)', -5px, 0);\n\tbottom: 100%;\n}\n\n// ------------------------------------------------\n// [2.3] Bottom\n// ------------------------------------------------\n\n[data-tooltip][data-tooltip-position|='bottom']::after,\n[data-tooltip]:not([data-tooltip-position])::after {\n\ttransform: translate3d(-50%, 0, 0);\n\tmargin-top: @tooltip-margin;\n\tleft: 50%;\n\ttop: 100%;\n}\n\n// ------------------------------------------------\n// [2.4] Bottom Left\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='bottom-left']::after {\n\ttransform: translate3d(~'calc(-100% + 16px)', 0, 0);\n}\n\n// ------------------------------------------------\n// [2.5] Bottom Right\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='bottom-right']::after {\n\ttransform: translate3d(~'calc(0% + -16px)', 0, 0);\n}\n\n// ------------------------------------------------\n// [2.6] Left\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='left']::after {\n\tbottom: auto;\n\tleft: auto;\n\tright: 100%;\n\ttop: 50%;\n\ttransform: translate3d(0, -50%, 0);\n\tmargin-right: @tooltip-margin;\n}\n\n// ------------------------------------------------\n// [2.7] Right\n// ------------------------------------------------\n[data-tooltip][data-tooltip-position='right']::after {\n\tbottom: auto;\n\tleft: 100%;\n\ttop: 50%;\n\ttransform: translate3d(0, -50%, 0);\n\tmargin-left: @tooltip-margin;\n}\n\n*/\n}\n#sbz92 *,\n#sbz92 *::before,\n#sbz92 *::after {\n box-sizing: border-box !important;\n}\n#sbz92 [tabindex='-1']:focus:not(:focus-visible) {\n outline: 0 !important;\n}\n#sbz92 b,\n#sbz92 strong {\n font-weight: 500 !important;\n}\n#sbz92 a {\n color: #020202 !important;\n text-decoration: none !important;\n background-color: transparent !important;\n font-weight: 600 !important;\n}\n#sbz92 a:hover {\n cursor: pointer !important;\n color: #000000 !important;\n text-decoration: underline !important;\n}\n#sbz92 a:not([href]) {\n color: inherit !important;\n text-decoration: none !important;\n}\n#sbz92 a:not([href]):hover {\n color: inherit !important;\n text-decoration: none !important;\n}\n#sbz92 img {\n vertical-align: middle !important;\n border-style: none !important;\n}\n#sbz92 svg {\n overflow: hidden !important;\n vertical-align: middle !important;\n}\n#sbz92 label {\n display: inline-block !important;\n}\n#sbz92 button {\n border-radius: 0 !important;\n}\n#sbz92 button:focus {\n outline: 1px dotted !important;\n outline: 5px auto -webkit-focus-ring-color !important;\n}\n#sbz92 input,\n#sbz92 button,\n#sbz92 select,\n#sbz92 optgroup,\n#sbz92 textarea {\n margin: 0 !important;\n}\n#sbz92 button,\n#sbz92 input {\n overflow: visible !important;\n}\n#sbz92 button,\n#sbz92 select {\n text-transform: none !important;\n}\n#sbz92 select {\n word-wrap: normal !important;\n}\n#sbz92 button,\n#sbz92 [type=\"button\"],\n#sbz92 [type=\"reset\"],\n#sbz92 [type=\"submit\"] {\n -webkit-appearance: button !important;\n}\n#sbz92 button:not(:disabled),\n#sbz92 [type='button']:not(:disabled),\n#sbz92 [type='reset']:not(:disabled),\n#sbz92 [type='submit']:not(:disabled) {\n cursor: pointer !important;\n}\n#sbz92 button::-moz-focus-inner,\n#sbz92 [type='button']::-moz-focus-inner,\n#sbz92 [type='reset']::-moz-focus-inner,\n#sbz92 [type='submit']::-moz-focus-inner {\n padding: 0 !important;\n border-style: none !important;\n}\n#sbz92 input[type='radio'],\n#sbz92 input[type='checkbox'] {\n box-sizing: border-box !important;\n padding: 0 !important;\n}\n#sbz92 input[type='date'],\n#sbz92 input[type='time'],\n#sbz92 input[type='datetime-local'],\n#sbz92 input[type='month'] {\n -webkit-appearance: listbox !important;\n}\n#sbz92 textarea {\n overflow: auto !important;\n resize: vertical !important;\n}\n#sbz92 [type='number']::-webkit-inner-spin-button,\n#sbz92 [type='number']::-webkit-outer-spin-button {\n height: auto !important;\n}\n#sbz92 [hidden] {\n display: none !important;\n}\n#sbz92 ::-webkit-input-placeholder {\n /* Edge */\n color: #777 !important;\n}\n#sbz92 :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: #777 !important;\n}\n#sbz92 ::placeholder {\n color: #777 !important;\n}\n#sbz92 div {\n display: block !important;\n text-rendering: geometricPrecision !important;\n -webkit-font-smoothing: antialiased !important;\n -moz-osx-font-smoothing: grayscale !important;\n}\n#sbz92 ::-webkit-scrollbar {\n width: 7px !important;\n height: 7px !important;\n}\n#sbz92 ::-webkit-scrollbar-track {\n border-radius: 10px !important;\n}\n#sbz92 ::-webkit-scrollbar-thumb {\n border-radius: 10px !important;\n background: #d6d6d6 !important;\n}\n#sbz92 ::-webkit-scrollbar-thumb:hover {\n background: #aaa !important;\n}\n#sbz92 .badge {\n padding: 2px 8px !important;\n font-size: 12px !important;\n font-weight: 600 !important;\n border-radius: 6px !important;\n display: inline-flex !important;\n align-items: center !important;\n}\n#sbz92 .badge.badge--success {\n color: #28a745 !important;\n -webkit-text-fill-color: #28a745 !important;\n background: #28a74526 !important;\n}\n#sbz92 .dot {\n width: 8px !important;\n height: 8px !important;\n border-radius: 4px !important;\n flex-shrink: 0 !important;\n background: #000 !important;\n}\n#sbz92 .dot.dot--success {\n background: #28a745 !important;\n}\n#sbz92 * {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;\n -webkit-tap-highlight-color: transparent !important;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;\n font-size: 16px !important;\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n box-sizing: border-box !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n vertical-align: baseline !important;\n}\n#sbz92 button:focus {\n outline: none !important;\n}\n#sbz92 button:focus-visible {\n outline: 2px solid #6c757d !important;\n outline-offset: 3px !important;\n}\n#sbz92 button:not(:disabled) {\n cursor: pointer !important;\n}\n#sbz92 img {\n overflow: hidden !important;\n flex-shrink: 0 !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n background-size: 100% 100% !important;\n -webkit-user-select: none !important;\n -khtml-user-select: none !important;\n -moz-user-select: none !important;\n -o-user-select: none !important;\n user-select: none !important;\n -webkit-user-drag: none !important;\n}\n#sbz92 .pos-relative {\n position: relative !important;\n}\n#sbz92 .flex-row {\n flex-direction: row !important;\n}\n#sbz92 .flex-column {\n flex-direction: column !important;\n}\n#sbz92 .flex-grow-1 {\n flex-grow: 1 !important;\n}\n#sbz92 .align-self-end {\n align-self: flex-end !important;\n}\n#sbz92 .align-items-end {\n align-items: flex-end !important;\n}\n#sbz92 .justify-content-center {\n justify-content: center !important;\n}\n#sbz92 .h-full {\n height: 100% !important;\n}\n#sbz92 .w-full {\n width: 100% !important;\n}\n#sbz92 .text-muted {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .text-lg {\n font-size: 18px !important;\n}\n#sbz92 .text-xl {\n font-size: 20px !important;\n}\n#sbz92 .text-sm {\n font-size: 14px !important;\n}\n#sbz92 .text-center {\n text-align: center !important;\n}\n#sbz92 .text-danger {\n color: #ea3d2f !important;\n}\n#sbz92 .text-italic {\n font-style: italic !important;\n}\n#sbz92 .d-none {\n display: none !important;\n}\n#sbz92 .d-flex {\n display: flex !important;\n}\n#sbz92 .d-inline-block {\n display: inline-block !important;\n}\n#sbz92 .ml-1 {\n margin-left: 7.5px !important;\n}\n#sbz92 .pl-2 {\n padding-left: 15px !important;\n}\n#sbz92 .pr-2 {\n padding-right: 15px !important;\n}\n#sbz92 .pb-2 {\n padding-bottom: 15px !important;\n}\n#sbz92 .mt-1 {\n margin-top: 7.5px !important;\n}\n#sbz92 .mt-2 {\n margin-top: 15px !important;\n}\n#sbz92 .ml-2 {\n margin-left: 15px !important;\n}\n#sbz92 .mr-1 {\n margin-right: 7.5px !important;\n}\n#sbz92 .mr-2 {\n margin-right: 15px !important;\n}\n#sbz92 .pt-3 {\n padding-top: 22.5px !important;\n}\n#sbz92 .pl-3 {\n padding-left: 22.5px !important;\n}\n#sbz92 .pr-3 {\n padding-right: 22.5px !important;\n}\n#sbz92 .pb-3 {\n padding-bottom: 22.5px !important;\n}\n#sbz92 .mt-3 {\n margin-top: 22.5px !important;\n}\n#sbz92 .ml-3 {\n margin-left: 22.5px !important;\n}\n#sbz92 .mr-3 {\n margin-right: 22.5px !important;\n}\n#sbz92 .mb-3 {\n margin-bottom: 22.5px !important;\n}\n#sbz92 .mb-2 {\n margin-bottom: 15px !important;\n}\n#sbz92 .mb-1 {\n margin-bottom: 7.5px !important;\n}\n#sbz92 .muted {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .i {\n font-style: italic !important;\n}\n#sbz92 .align-items-center {\n align-items: center !important;\n}\n#sbz92 .text-truncate {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .flex_1 {\n flex: 1 !important;\n flex-shrink: 0 !important;\n}\n#sbz92 .justify-content-between {\n justify-content: space-between !important;\n}\n#sbz92 .no-shrink {\n flex-shrink: 0 !important;\n}\n#sbz92 .loading {\n flex: 1 !important;\n align-items: center !important;\n justify-content: center !important;\n display: flex !important;\n flex-direction: column !important;\n background: white !important;\n}\n#sbz92 .avatar-container {\n text-align: center !important;\n}\n#sbz92 .avatar {\n position: relative !important;\n object-fit: cover !important;\n display: inline-block !important;\n}\n#sbz92 .group-avatar--primary .avatar {\n width: 40px !important;\n height: 40px !important;\n border-radius: 35px !important;\n}\n#sbz92 .group-avatar--secondary .avatar {\n position: relative !important;\n width: 35px !important;\n height: 35px !important;\n border-radius: 35px !important;\n}\n#sbz92 .avatar.avatar__account {\n width: 38px !important;\n height: 38px !important;\n border-radius: 38px !important;\n margin-right: 7.5px !important;\n}\n#sbz92 .group-avatar--primary .group-avatar--agent-middle {\n width: 50px !important;\n height: 50px !important;\n margin-left: -10px !important;\n z-index: 3 !important;\n position: relative !important;\n}\n#sbz92 .group-avatar--primary .group-avatar--agent-left {\n z-index: 2 !important;\n}\n#sbz92 .group-avatar--primary .group-avatar--agent-right {\n z-index: 2 !important;\n margin-left: -10px !important;\n}\n#sbz92 .group-avatar--secondary .group-avatar--agent-left {\n z-index: 3 !important;\n}\n#sbz92 .group-avatar--secondary .group-avatar--agent-middle {\n z-index: 2 !important;\n margin-left: -15px !important;\n}\n#sbz92 .group-avatar--secondary .group-avatar--agent-right {\n z-index: 1 !important;\n margin-left: -15px !important;\n}\n#sbz92 .widget-header {\n z-index: -1 !important;\n position: relative !important;\n transition: height 0.2s !important;\n border-radius: 15px 15px 0px 0px !important;\n background: '@background' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n width: 100% !important;\n}\n#sbz92 .widget-header .widget-header--total-unread-convo {\n font-size: 13px !important;\n font-weight: 500 !important;\n background: #ef000d !important;\n display: flex !important;\n border-radius: 50% !important;\n justify-content: center !important;\n align-items: center !important;\n width: 20px !important;\n height: 20px !important;\n position: absolute !important;\n cursor: pointer !important;\n right: -8px !important;\n top: -4px !important;\n}\n#sbz92 .widget-header--collapsed {\n height: auto !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--collapsed {\n height: auto !important;\n padding: 15px 22.5px !important;\n position: relative !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--collapsed .widget-header--title {\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n text-overflow: ellipsis !important;\n font-size: 16px !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--collapsed .widget-header--description {\n font-size: 14px !important;\n overflow: hidden !important;\n opacity: 0.7 !important;\n flex: 1 !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n margin-top: 2.5px !important;\n position: relative !important;\n line-height: 1.5 !important;\n}\n#sbz92 .mobile .widget-header {\n border-radius: 0px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded {\n height: 224px !important;\n padding: 15px 22.5px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--top-wrapper {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n margin-bottom: 10px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--avatar-wrapper {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--title {\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n text-overflow: ellipsis !important;\n flex: 1 !important;\n font-size: 16px !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--expanded .widget-header--description {\n position: relative !important;\n text-align: center !important;\n margin-top: 15px !important;\n white-space: pre-wrap !important;\n display: -webkit-box !important;\n -webkit-box-orient: vertical !important;\n -webkit-line-clamp: 2 !important;\n overflow: hidden !important;\n line-height: 1.5 !important;\n}\n#sbz92 .widget-header--convo-expanded {\n height: 224px !important;\n}\n#sbz92 .widget-header--inner {\n position: absolute !important;\n top: 0 !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 100% !important;\n opacity: 1 !important;\n display: flex !important;\n}\n#sbz92 .widget-header--inner.widget-header--inner--hidden {\n opacity: 0 !important;\n transform: scale(0) !important;\n animation-duration: 0.05s !important;\n animation-name: hide !important;\n}\n#sbz92 .widget-header--title-container {\n min-width: 0 !important;\n flex: 1 !important;\n display: flex !important;\n flex-direction: column !important;\n z-index: 1 !important;\n}\n#sbz92 .widget-header--button-close {\n display: flex !important;\n border-radius: 6px !important;\n justify-self: flex-end !important;\n align-items: center !important;\n align-self: flex-start !important;\n opacity: 0.6 !important;\n transition: opacity 0.15s ease, scale 0.15s ease, filter 0.15s ease !important;\n filter: brightness(0.95) !important;\n}\n#sbz92 .widget-header--button-close:hover {\n opacity: 1 !important;\n filter: brightness(1.1) !important;\n scale: 1.1 !important;\n}\n#sbz92 .widget-header--button-close-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci14Ij48bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ij48L2xpbmU+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCI+PC9saW5lPjwvc3ZnPgo=') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n cursor: pointer !important;\n}\n#sbz92 .widget-header--button-back {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IndoaXRlIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTQgNmwxNiAwIiAvPjxwYXRoIGQ9Ik00IDEybDE2IDAiIC8+PHBhdGggZD0iTTQgMThsMTYgMCIgLz48L3N2Zz4K') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n background-size: 24px 24px !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n position: relative !important;\n}\n#sbz92 .widget-header--wrap-button-back {\n display: flex !important;\n position: relative !important;\n margin-right: 7.5px !important;\n cursor: pointer !important;\n scale: 1 !important;\n opacity: 0.6 !important;\n transition: opacity 0.15s ease, scale 0.15s ease, filter 0.15s ease !important;\n filter: brightness(0.95) !important;\n}\n#sbz92 .widget-header--wrap-button-back:hover {\n opacity: 1 !important;\n filter: brightness(1.1) !important;\n scale: 1.1 !important;\n}\n#sbz92 .fade-enter-active,\n#sbz92 .fade-leave-active {\n transition: opacity 0.5s ease-out 0.2s !important;\n}\n#sbz92 .fade-enter,\n#sbz92 .fade-leave-to {\n opacity: 0 !important;\n}\n#sbz92 .slide-fade-enter-active {\n transition: all 0.3s ease !important;\n}\n#sbz92 .slide-fade-leave-active {\n transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .slide-fade-enter,\n#sbz92 .slide-fade-leave-to {\n transform: translateX(10px) !important;\n opacity: 0 !important;\n}\n#sbz92 .widget_header__body {\n padding-bottom: 70px !important;\n}\n#sbz92 .widget_header__body.widget_header__body__social {\n display: flex !important;\n}\n#sbz92 .social__account_logo {\n height: 90px !important;\n width: 90px !important;\n margin-right: 15px !important;\n border-radius: 15px !important;\n object-fit: cover !important;\n}\n#sbz92 .social__introduction {\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n max-height: 72px !important;\n overflow: hidden !important;\n display: -webkit-box !important;\n -webkit-box-orient: vertical !important;\n -webkit-line-clamp: 3 !important;\n}\n#sbz92 .social__links {\n display: flex !important;\n flex-direction: row !important;\n}\n#sbz92 .social__links-logo {\n height: 30px !important;\n width: 30px !important;\n border-radius: 50% !important;\n margin-right: 10px !important;\n margin-top: 5px !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n display: block !important;\n}\n#sbz92 .social__links-logo--facebook {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20fill%3D%22%230264FF%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.2944%2029.8252C16.5464%2029.9404%2015.7803%2030%2015%2030C14.0962%2030%2013.2109%2029.9199%2012.3511%2029.7666V18.4775H10V14.4287H12.3511V11.8086C12.3511%209.93457%2013.2744%207%2017.3384%207L21%207.01465V10.9453H18.3433C17.9075%2010.9453%2017.2947%2011.1553%2017.2947%2012.0488V14.4326H20.989L20.5571%2018.4775H17.2944V29.8252Z%22%20fill%3D%22white%22/%3E%3C/svg%3E') !important;\n}\n#sbz92 .social__links-logo--messenger {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2230%22%20height%3D%2230%22%20rx%3D%2215%22%20fill%3D%22%23007FFF%22/%3E%3Crect%20x%3D%224.28564%22%20y%3D%226%22%20width%3D%2221.4286%22%20height%3D%2218.8571%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M14.9478%2014.5713C14.8228%2014.5917%2014.6974%2014.6104%2014.5715%2014.6276C14.6974%2014.6104%2014.8228%2014.5917%2014.9478%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7507%2014.5713C14.691%2014.5823%2014.6313%2014.5923%2014.5715%2014.6026C14.6313%2014.5923%2014.691%2014.5823%2014.7507%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M15.0126%2014.5713C14.8663%2014.5878%2014.7192%2014.6024%2014.5715%2014.6148C14.7192%2014.6024%2014.8663%2014.5878%2015.0126%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.783%2014.5713C14.7128%2014.5807%2014.642%2014.5894%2014.5715%2014.5976C14.642%2014.5894%2014.7128%2014.5807%2014.783%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7299%2014.5713C14.6773%2014.5825%2014.6244%2014.5937%2014.5715%2014.6045C14.6244%2014.5937%2014.6773%2014.5825%2014.7299%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.6992%2014.5713C14.6567%2014.5834%2014.6141%2014.5949%2014.5715%2014.6068C14.6141%2014.5949%2014.6567%2014.5834%2014.6992%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7107%2014.5713C14.6645%2014.5834%2014.618%2014.5958%2014.5715%2014.6075C14.618%2014.5958%2014.6645%2014.5836%2014.7107%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.7194%2014.5713C14.6704%2014.5827%2014.621%2014.5935%2014.5715%2014.6045C14.621%2014.5935%2014.6704%2014.5827%2014.7194%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.8087%2014.5713C14.7297%2014.5779%2014.6507%2014.5839%2014.5715%2014.5891C14.6507%2014.5839%2014.7297%2014.5779%2014.8087%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M15.0417%2014.5713C14.8856%2014.5814%2014.7288%2014.5894%2014.5715%2014.5946C14.7288%2014.5894%2014.8856%2014.5814%2015.0417%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.8206%2014.5713C14.7377%2014.574%2014.6546%2014.5761%2014.5715%2014.5775C14.6546%2014.5761%2014.7377%2014.574%2014.8206%2014.5713Z%22%20fill%3D%22black%22/%3E%3Cpath%20d%3D%22M14.1547%2012.3174L9.29419%2017.4636L13.7176%2015.0365L16.0288%2017.4636L20.8621%2012.3174L16.4877%2014.7019L14.1547%2012.3174Z%22%20fill%3D%22%23448AFF%22/%3E%3Cpath%20d%3D%22M15%200C6.717%200%200%206.717%200%2015C0%2023.283%206.717%2030%2015%2030C23.283%2030%2030%2023.283%2030%2015C30%206.717%2023.283%200%2015%200ZM15.1172%2023.0294C14.1886%2023.0294%2013.2923%2022.8983%2012.4491%2022.6554L9.42421%2024.375V21.14C7.39815%2019.5982%206.10428%2017.2501%206.10428%2014.6203C6.10428%209.97581%2010.1395%206.21094%2015.1172%206.21094C20.0951%206.21094%2024.1301%209.97581%2024.1301%2014.6203C24.1301%2019.2643%2020.0951%2023.0294%2015.1172%2023.0294V23.0294Z%22%20fill%3D%22%23007FFF%22/%3E%3C/svg%3E') !important;\n}\n#sbz92 .social__links-logo--email {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M22.6875%2012.9688C21.9375%2013.5625%2020.3125%2014.75%2017.875%2016.5L17.5625%2016.75C17.0625%2017.125%2016.6875%2017.4062%2016.375%2017.5625C15.875%2017.875%2015.4062%2018%2015%2018C14.5625%2018%2014.125%2017.875%2013.625%2017.5938C13.3125%2017.4375%2012.9375%2017.1562%2012.4375%2016.7812L12.125%2016.5C9.59375%2014.6875%208%2013.5%207.3125%2012.9688C7.25%2012.9375%207.15625%2012.9375%207.09375%2012.9688C7.03125%2013%207%2013.0625%207%2013.125V19.5C7%2019.9375%207.125%2020.2812%207.4375%2020.5625C7.71875%2020.875%208.0625%2021%208.5%2021H21.5C21.9062%2021%2022.25%2020.875%2022.5625%2020.5625C22.8438%2020.2812%2023%2019.9375%2023%2019.5V13.125C23%2013.0625%2022.9375%2013%2022.875%2012.9375C22.8125%2012.9062%2022.75%2012.9062%2022.6875%2012.9688ZM15%2017C14.7188%2017%2014.375%2016.875%2014%2016.625C13.75%2016.5%2013.4375%2016.2812%2013.0312%2015.9375L12.7188%2015.7188C10.1562%2013.8438%208.40625%2012.5625%207.5%2011.8438L7.28125%2011.6875C7.09375%2011.5625%207%2011.3438%207%2011.0938V10.5C7%2010.0938%207.125%209.75%207.4375%209.4375C7.71875%209.15625%208.0625%209%208.5%209H21.5C21.9062%209%2022.25%209.15625%2022.5625%209.4375C22.8438%209.75%2023%2010.0938%2023%2010.5V11.0938C23%2011.3438%2022.9062%2011.5625%2022.7188%2011.6875L22.5625%2011.8125C21.6562%2012.5312%2019.9062%2013.8438%2017.2812%2015.7188L16.9688%2015.9375C16.5312%2016.2812%2016.2188%2016.5%2016%2016.625C15.5938%2016.875%2015.25%2017%2015%2017Z%22%20fill%3D%22white%22/%3E%3C/svg%3E') !important;\n}\n#sbz92 .social__links-logo--zalo {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M29.9999%2014.9385C29.9669%206.68262%2023.2639%200%2015%200C6.7157%200%200%206.71582%200%2015C0%2023.2842%206.7157%2030%2015%2030C23.2639%2030%2029.9669%2023.3174%2029.9999%2015.0615C29.9999%2015.041%2030%2015.0205%2030%2015C30%2014.9795%2029.9999%2014.959%2029.9999%2014.9385Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M24.5612%2017.4695C22.9394%2017.4726%2021.6242%2016.1862%2021.6279%2014.6005C21.6316%2013.0345%2022.9474%2011.7445%2024.5473%2011.7383C26.1556%2011.732%2027.4826%2013.0349%2027.4786%2014.6162C27.4746%2016.1926%2026.1719%2017.4665%2024.5612%2017.4695ZM22.8416%2014.6183C22.8459%2015.5573%2023.6166%2016.3004%2024.5777%2016.2923C25.5165%2016.2845%2026.2699%2015.5301%2026.2673%2014.6005C26.2646%2013.6712%2025.51%2012.9317%2024.56%2012.9277C23.6012%2012.9237%2022.8373%2013.6751%2022.8416%2014.6183Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20d%3D%22M19.5054%2010.0762H20.795V17.4217H19.9447C19.7021%2017.4217%2019.5054%2017.225%2019.5054%2016.9823V10.0762Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20d%3D%22M18.5227%2011.8907H17.2881V12.2935C16.5767%2011.8601%2015.8509%2011.6775%2015.06%2011.831C14.2526%2011.9876%2013.6164%2012.4043%2013.167%2013.0917C12.4538%2014.1826%2012.5894%2015.5904%2013.4938%2016.5431C14.3504%2017.4454%2015.8628%2017.8178%2017.2815%2016.9247C17.2835%2016.934%2017.286%2016.9422%2017.2881%2016.9511V16.9826C17.2881%2017.2252%2017.4849%2017.422%2017.7275%2017.422H18.5227V11.8907V11.8907ZM15.5853%2016.2787C14.6636%2016.268%2013.8924%2015.5006%2013.8986%2014.6004C13.9048%2013.692%2014.6716%2012.9481%2015.602%2012.9479C16.5427%2012.9477%2017.2871%2013.6781%2017.2882%2014.6026C17.2893%2015.5333%2016.521%2016.2896%2015.5853%2016.2787Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20d%3D%22M8.0481%2016.2438C9.39854%2014.5856%2010.6939%2012.9885%2011.9984%2011.3989C12.2464%2011.0968%2012.3662%2010.7671%2012.3731%2010.3807C12.3761%2010.2135%2012.3261%2010.1646%2012.1596%2010.165C11.6056%2010.1666%206.41195%2010.165%206.41195%2010.165V11.4709H10.4978C10.4424%2011.543%207.83556%2014.7218%206.57932%2016.2403C6.37112%2016.4919%206.26503%2016.7645%206.25401%2017.0936C6.24628%2017.3242%206.28864%2017.4139%206.52267%2017.4211V17.4217H11.9356C12.1782%2017.4217%2012.3749%2017.225%2012.3749%2016.9823V16.2487V16.2438H8.0481V16.2438Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.948%2026.1338C6.03613%2027.1172%207.26917%2027.9424%208.61108%2028.5752V26.1338H4.948ZM0.00268555%2014.7119C0.0775146%2010.7393%201.69666%207.14453%204.28479%204.50293C4.0459%204.98242%203.83435%205.47949%203.64661%205.99121C2.58862%208.87598%202.31299%2011.8506%202.69116%2014.8916C2.95862%2017.042%203.55518%2019.0869%204.63391%2020.9775C4.8269%2021.3154%205.02271%2021.6582%205.26489%2021.9609C5.76672%2022.5879%205.80981%2023.2725%205.59888%2024.0049C5.4873%2024.3926%205.32227%2024.75%205.11304%2025.082C4.95691%2025.3291%204.77612%2025.5635%204.57434%2025.7842C1.81921%2023.1201%200.0819092%2019.4102%200.00280762%2015.2939C0.000976562%2015.1963%200%2015.0986%200%2015C0%2014.9033%200.000854492%2014.8076%200.00268555%2014.7119Z%22%20fill%3D%22%230068FE%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M24.8226%2026.3367C22.191%2028.6189%2018.7568%2029.9998%2015%2029.9998C11.1449%2029.9998%207.62952%2028.5457%204.97241%2026.156C6.32458%2026.1921%207.61877%2025.9031%208.86353%2025.3464C8.97681%2025.2957%209.06262%2025.3113%209.16443%2025.364C12.2258%2026.9646%2015.5131%2027.5125%2018.926%2027.3962C20.9574%2027.3269%2022.9333%2027.0046%2024.8226%2026.3367Z%22%20fill%3D%22%23015BDF%22/%3E%3C/svg%3E') !important;\n}\n@keyframes hide {\n 100% {\n opacity: 0;\n transform: scale(0);\n }\n}\n#sbz92 .widget-header-expand-container {\n width: 100% !important;\n}\n#sbz92 .message-input {\n width: 100% !important;\n border-top: 1px solid #e3e3e3 !important;\n display: flex !important;\n flex-direction: row !important;\n padding: 15px 22.5px !important;\n}\n#sbz92 .message-input--disabled {\n background: #f0f0f0 !important;\n opacity: 0.6 !important;\n filter: grayscale(1) !important;\n}\n#sbz92 textarea[disabled='disabled']::-webkit-input-placeholder {\n color: #a4a4a4 !important;\n -webkit-text-fill-color: #a4a4a4 !important;\n}\n#sbz92 textarea[disabled='disabled']:-ms-input-placeholder {\n color: #a4a4a4 !important;\n -webkit-text-fill-color: #a4a4a4 !important;\n}\n#sbz92 textarea[disabled='disabled']::placeholder {\n color: #a4a4a4 !important;\n -webkit-text-fill-color: #a4a4a4 !important;\n}\n#sbz92 .message-input--input {\n word-wrap: break-word !important;\n resize: none !important;\n flex: 1 !important;\n align-self: center !important;\n margin-right: 7.5px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .message-input--input::placeholder {\n opacity: 0.5 !important;\n /* Firefox */\n}\n#sbz92 .message-input--input::-ms-input-placeholder {\n /* Edge 12 -18 */\n opacity: 0.5 !important;\n /* Firefox */\n}\n#sbz92 .message-input--emoji-button {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXNtaWxlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBhdGggZD0iTTggMTRzMS41IDIgNCAyIDQtMiA0LTIiPjwvcGF0aD48bGluZSB4MT0iOSIgeTE9IjkiIHgyPSI5LjAxIiB5Mj0iOSI+PC9saW5lPjxsaW5lIHgxPSIxNSIgeTE9IjkiIHgyPSIxNS4wMSIgeTI9IjkiPjwvbGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .message-input--button {\n background-size: 70% !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 32px !important;\n height: 32px !important;\n display: block !important;\n cursor: pointer !important;\n position: relative !important;\n border-radius: 20px !important;\n transition: background-color 0.2s !important;\n}\n#sbz92 .message-input--button:hover {\n background-color: #eeeeee !important;\n}\n#sbz92 .message-input--disabled .message-input--button {\n cursor: default !important;\n}\n#sbz92 .message-input--disabled .message-input--button {\n cursor: default !important;\n}\n#sbz92 .message-input--attachment-button {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXBhcGVyY2xpcCI+PHBhdGggZD0iTTIxLjQ0IDExLjA1bC05LjE5IDkuMTlhNiA2IDAgMCAxLTguNDktOC40OWw5LjE5LTkuMTlhNCA0IDAgMCAxIDUuNjYgNS42NmwtOS4yIDkuMTlhMiAyIDAgMCAxLTIuODMtMi44M2w4LjQ5LTguNDgiPjwvcGF0aD48L3N2Zz4K') !important;\n}\n#sbz92 .message-input--send-button {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22@esc-primary-color-esc%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M4.698%204.034l16.302%207.966l-16.302%207.966a.503%20.503%200%200%201%20-.546%20-.124a.555%20.555%200%200%201%20-.12%20-.568l2.468%20-7.274l-2.468%20-7.274a.555%20.555%200%200%201%20.12%20-.568a.503%20.503%200%200%201%20.546%20-.124z%22%20fill%3D%22@esc-primary-color-esc%22/%3E%3Cpath%20d%3D%22M6.5%2012h14.5%22%20/%3E%3C/svg%3E') !important;\n background-size: 82% !important;\n}\n#sbz92 .message-input--preform {\n justify-content: center !important;\n padding: 11px !important;\n @spacer 2;\n}\n#sbz92 .btn--preform {\n border-radius: 7px !important;\n padding-left: 32px !important;\n padding-right: 32px !important;\n height: 40px !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n font-size: 14px !important;\n line-height: 20px !important;\n text-align: center !important;\n background: '@primary_color' !important;\n width: 60% !important;\n}\n#sbz92 .widget-body.embed-chat .message-input {\n border: 1px solid #e3e3e3 !important;\n border-radius: 8px !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .form-label {\n margin-top: 15px !important;\n}\n#sbz92 .form {\n border: 1px solid #eeeeee !important;\n box-sizing: border-box !important;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15) !important;\n border-radius: 7px !important;\n}\n#sbz92 textarea.form-control {\n resize: none !important;\n word-wrap: break-word !important;\n}\n#sbz92 .form-control--container {\n position: relative !important;\n}\n#sbz92 input.form-control[disabled] {\n background: #f9f9f9 !important;\n}\n#sbz92 .form-control--container .form-control--check {\n position: absolute !important;\n right: 10px !important;\n top: 10px !important;\n background-size: 100% 100% !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 20px !important;\n height: 20px !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1QkFBMUQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZWNrIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .form-control--valid-input--error {\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n font-size: 14px !important;\n padding-top: 5px !important;\n}\n#sbz92 input[type='text'].form-control.input--error,\n#sbz92 input[type='tel'].form-control.input--error,\n#sbz92 input[type='email'].form-control.input--error,\n#sbz92 input[type='number'].form-control.input--error,\n#sbz92 input[type='date'].form-control.input--error,\n#sbz92 textarea.form-control.input--error,\n#sbz92 select.form-control.input--error {\n border: 1px solid #dc3545 !important;\n background: #dd41500f !important;\n}\n#sbz92 input[type='text'].form-control,\n#sbz92 input[type='tel'].form-control,\n#sbz92 input[type='email'].form-control,\n#sbz92 input[type='number'].form-control,\n#sbz92 input[type='date'].form-control,\n#sbz92 textarea.form-control,\n#sbz92 select.form-control {\n width: 100% !important;\n border: 1px solid #c4c4c4 !important;\n border-radius: 8px !important;\n transition: all 100ms ease !important;\n padding: 10px 12px !important;\n}\n#sbz92 input[type='text'].form-control:hover,\n#sbz92 input[type='tel'].form-control:hover,\n#sbz92 input[type='email'].form-control:hover,\n#sbz92 input[type='number'].form-control:hover,\n#sbz92 input[type='date'].form-control:hover,\n#sbz92 textarea.form-control:hover,\n#sbz92 select.form-control:hover {\n border: 1px solid #6c757d !important;\n}\n#sbz92 input[type='text'].form-control.input--error:hover,\n#sbz92 input[type='tel'].form-control.input--error:hover,\n#sbz92 input[type='email'].form-control.input--error:hover,\n#sbz92 input[type='number'].form-control.input--error:hover,\n#sbz92 input[type='date'].form-control.input--error:hover,\n#sbz92 textarea.form-control.input--error:hover,\n#sbz92 select.form-control.input--error:hover {\n border: 1px solid #dc3545 !important;\n}\n#sbz92 select.form-control {\n padding: 1px 8px !important;\n}\n#sbz92 input[type='date'].form-control {\n height: 40px !important;\n width: 100% !important;\n background-color: #fff !important;\n}\n#sbz92 .form-wrapper-attachment input[type='date'].form-control {\n height: 32px !important;\n padding-top: 6px !important;\n padding-bottom: 6px !important;\n}\n#sbz92 input[type='text'].form-control:focus,\n#sbz92 input[type='tel'].form-control:focus,\n#sbz92 input[type='email'].form-control:focus,\n#sbz92 input[type='number'].form-control:focus,\n#sbz92 input[type='date'].form-control:focus,\n#sbz92 textarea.form-control:focus,\n#sbz92 select.form-control:focus {\n border: 1px solid '@primary_color' !important;\n}\n#sbz92 input[type='text'].form-control.input--error:focus,\n#sbz92 input[type='tel'].form-control.input--error:focus,\n#sbz92 input[type='email'].form-control.input--error:focus,\n#sbz92 input[type='number'].form-control.input--error:focus,\n#sbz92 input[type='date'].form-control.input--error:focus,\n#sbz92 textarea.form-control.input--error:focus,\n#sbz92 select.form-control.input--error:focus {\n border: 1px solid #dc3545 !important;\n}\n#sbz92 .label {\n display: block !important;\n padding-bottom: 6px !important;\n margin-top: 8px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n font-size: 14px !important;\n font-weight: 500 !important;\n}\n#sbz92 .form--btn-submit {\n border-radius: 7px !important;\n padding-left: 32px !important;\n padding-right: 32px !important;\n width: 100% !important;\n}\n#sbz92 .form .radio {\n display: block !important;\n position: relative !important;\n width: 100% !important;\n margin-top: 5px !important;\n}\n#sbz92 .form .radio:first-of-type {\n margin-top: 0 !important;\n}\n#sbz92 .form input[type='radio'] {\n position: absolute !important;\n visibility: hidden !important;\n}\n#sbz92 .form .radio--label {\n padding-left: 22px !important;\n display: block !important;\n position: relative !important;\n z-index: 9 !important;\n cursor: pointer !important;\n}\n#sbz92 .form .radio--check {\n display: block !important;\n position: absolute !important;\n border: 1px solid #aaa !important;\n border-radius: 100% !important;\n height: 16px !important;\n width: 16px !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 5 !important;\n transition: border 0.15s linear !important;\n -webkit-transition: border 0.15s linear !important;\n}\n#sbz92 .form .radio--check:hover {\n border: 1px solid #888 !important;\n}\n#sbz92 .form .radio--check::before {\n display: block !important;\n position: absolute !important;\n content: '' !important;\n border-radius: 100% !important;\n height: 10px !important;\n width: 10px !important;\n top: 2px !important;\n left: 2px !important;\n margin: auto !important;\n transition: background 0.15s linear !important;\n -webkit-transition: background 0.15s linear !important;\n}\n#sbz92 .form input[type='radio']:checked ~ .radio--check {\n border: 1px solid '@primary_color' !important;\n}\n#sbz92 .form input[type='radio']:checked ~ .radio--check::before {\n background: '@primary_color' !important;\n}\n#sbz92 .form .checkbox {\n display: block !important;\n position: relative !important;\n width: 100% !important;\n margin-top: 5px !important;\n}\n#sbz92 .form .checkbox:first-of-type {\n margin-top: 0 !important;\n}\n#sbz92 .form input[type='checkbox'] {\n position: absolute !important;\n visibility: hidden !important;\n}\n#sbz92 .form .checkbox--label {\n padding-left: 22px !important;\n display: block !important;\n position: relative !important;\n z-index: 9 !important;\n cursor: pointer !important;\n}\n#sbz92 .form .checkbox--check {\n display: block !important;\n position: absolute !important;\n border: 1px solid #aaa !important;\n border-radius: 4 px !important;\n height: 16px !important;\n width: 16px !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 5 !important;\n transition: border 0.15s linear !important;\n -webkit-transition: border 0.15s linear !important;\n}\n#sbz92 .form .checkbox--check:hover {\n border: 1px solid #888 !important;\n}\n#sbz92 .form .checkbox--check::before {\n display: block !important;\n position: absolute !important;\n content: '' !important;\n height: 100% !important;\n width: 100% !important;\n margin: auto !important;\n transition: background 0.15s linear !important;\n -webkit-transition: background 0.15s linear !important;\n}\n#sbz92 .form input[type='checkbox']:checked ~ .checkbox--check {\n border: 1px solid '@primary_color' !important;\n}\n#sbz92 .form input[type='checkbox']:checked ~ .checkbox--check::before {\n background: '@primary_color' !important;\n}\n#sbz92 .form .select .form-control {\n padding-right: 20px !important;\n}\n#sbz92 .form select {\n /*background: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjQxMDU4IDYuOTExMDdDNC43MzYwMiA2LjU4NTYzIDUuMjYzNjYgNi41ODU2MyA1LjU4OTA5IDYuOTExMDdMOS45OTk4NCAxMS4zMjE4TDE0LjQxMDYgNi45MTEwN0MxNC43MzYgNi41ODU2MyAxNS4yNjM3IDYuNTg1NjMgMTUuNTg5MSA2LjkxMTA3QzE1LjkxNDUgNy4yMzY1MSAxNS45MTQ1IDcuNzY0MTQgMTUuNTg5MSA4LjA4OTU4TDEwLjU4OTEgMTMuMDg5NkMxMC4yNjM3IDEzLjQxNSA5LjczNjAyIDEzLjQxNSA5LjQxMDU4IDEzLjA4OTZMNC40MTA1OCA4LjA4OTU4QzQuMDg1MTQgNy43NjQxNCA0LjA4NTE0IDcuMjM2NTEgNC40MTA1OCA2LjkxMTA3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+\") no-repeat right;*/\n}\n#sbz92 .form-require-info--list {\n background: #fff !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n}\n#sbz92 .form-require-info--title {\n font-size: 18px !important;\n line-height: 20px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n background: #fff !important;\n border-bottom: 1px solid #f0f0f0 !important;\n}\n#sbz92 .form-require-info--item {\n border-bottom: 1px solid #f0f0f0 !important;\n}\n#sbz92 .form-require-info--item:hover {\n cursor: pointer !important;\n background: #e0e0e0 !important;\n}\n#sbz92 input[type='checkbox'] {\n background-color: initial !important;\n cursor: default !important;\n -webkit-appearance: checkbox !important;\n box-sizing: border-box !important;\n margin: 3px 3px 3px 4px !important;\n padding: initial !important;\n border: initial !important;\n}\n#sbz92 input[type='radio'] {\n background-color: initial !important;\n cursor: default !important;\n -webkit-appearance: radio !important;\n box-sizing: border-box !important;\n margin: 3px 3px 0px 5px !important;\n padding: initial !important;\n border: initial !important;\n}\n#sbz92 option {\n font-weight: normal !important;\n display: block !important;\n white-space: pre !important;\n min-height: 1.2em !important;\n padding: 0px 2px 1px !important;\n}\n#sbz92 select {\n -webkit-writing-mode: horizontal-tb !important;\n text-rendering: auto !important;\n color: -internal-light-dark-color(black, white) !important;\n letter-spacing: normal !important;\n word-spacing: normal !important;\n text-transform: none !important;\n text-indent: 0px !important;\n text-shadow: none !important;\n display: inline-block !important;\n text-align: start !important;\n -webkit-appearance: menulist !important;\n box-sizing: border-box !important;\n align-items: center !important;\n white-space: pre !important;\n -webkit-rtl-ordering: logical !important;\n background-color: -internal-light-dark-color(white, black) !important;\n cursor: default !important;\n margin: 0em !important;\n font: 400 13.3333px Arial !important;\n border-radius: 0px !important;\n border-width: 1px !important;\n border-style: solid !important;\n border-color: #a9a9a9 !important;\n border-image: initial !important;\n}\n#sbz92 select {\n position: relative !important;\n display: inline-block !important;\n border: 2px #cccc solid !important;\n border-radius: 5px !important;\n height: 36px !important;\n line-height: 34px !important;\n padding: 0 12px !important;\n font-size: 14px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .custom-select--wrap-selected {\n display: flex !important;\n position: relative !important;\n justify-content: space-between !important;\n cursor: pointer !important;\n border: 1px solid #d8d8d8 !important;\n border-radius: 5px !important;\n padding: 5px !important;\n}\n#sbz92 .custom-select--selected-items {\n display: flex !important;\n align-items: center !important;\n flex-wrap: wrap !important;\n}\n#sbz92 .custom-select--selected-item {\n display: flex !important;\n align-items: center !important;\n margin: 3px 3px !important;\n padding: 1px 6px !important;\n border-radius: 5px !important;\n border: 1px solid #d8d8d8 !important;\n font-size: 14px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n vertical-align: top !important;\n}\n#sbz92 .icn-delete:before {\n display: flex !important;\n justify-items: center !important;\n font-size: 12px !important;\n margin-left: 5px !important;\n opacity: 0.5 !important;\n content: '\\2715' !important;\n}\n#sbz92 .custom-select--wrap-options {\n display: flex !important;\n flex-direction: column !important;\n position: absolute !important;\n left: 0 !important;\n top: 100% !important;\n border: 1px solid #dadce0 !important;\n -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n border-radius: 5px !important;\n width: 100% !important;\n background: #fff !important;\n z-index: 11 !important;\n max-height: 200px !important;\n overflow-y: auto !important;\n}\n#sbz92 .custom-select--input-search {\n font-size: 15px !important;\n padding: 8px !important;\n border-bottom: 1px solid #d8d8d8 !important;\n}\n#sbz92 .custom-select--items-options {\n margin: 0 !important;\n display: flex !important;\n flex-direction: column !important;\n}\n#sbz92 .custom-select--item-options {\n padding: 10px !important;\n cursor: pointer !important;\n}\n#sbz92 .custom-select--item-options:hover {\n background-color: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n}\n#sbz92 .custom-select--icon-dropdown {\n margin-left: auto !important;\n float: right !important;\n cursor: pointer !important;\n}\n#sbz92 .custom-select--icon-dropdown path {\n d: path('M 7 9.5 L 12 14.5 L 17 9.5 H 7 Z') !important;\n fill: black !important;\n}\n#sbz92 .form-component {\n margin-bottom: 15px !important;\n}\n#sbz92 .form-component:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .form-component.submitted {\n margin-bottom: 8px !important;\n}\n#sbz92 .form-component.form-component-submit-button {\n margin-top: 20px !important;\n}\n#sbz92 .form-wrapper.form {\n padding: 20px !important;\n background-color: #fff !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form {\n padding: 12px 15px !important;\n margin-top: 5px !important;\n box-shadow: 0 0 0 1px #eeeeee !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='text'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='tel'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='email'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='number'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form input[type='date'].form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form select.form-control,\n#sbz92 .form-wrapper.form-wrapper-attachment.form textarea.form-control {\n padding: 6px 10px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component {\n margin-bottom: 12px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component.submitted {\n margin-bottom: 5px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component.submitted:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component:first-child .label {\n margin-top: 0 !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-component.form-component-submit-button {\n margin-top: 16px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .label {\n padding-bottom: 4px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .form-control--valid-input--error {\n padding-top: 3px !important;\n}\n#sbz92 .form-wrapper.form-wrapper-attachment.form .btn--start-convo {\n height: 36px !important;\n}\n#sbz92 select.form-control.form-control--empty {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n@media only screen and (min-width: 968px) {\n #sbz92 .form-radios-wrapper.horizontal {\n display: flex;\n flex-wrap: wrap;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio {\n margin-right: 10px;\n width: 300px;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio:first-child {\n margin-top: 0;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio:nth-child(2) {\n margin-top: 0;\n }\n #sbz92 .form-radios-wrapper.horizontal .radio:nth-child(2n) {\n margin-right: 0;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal {\n display: flex;\n flex-wrap: wrap;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox {\n margin-right: 10px;\n width: 300px;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox:first-child {\n margin-top: 0;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox:nth-child(2) {\n margin-top: 0;\n }\n #sbz92 .form-checkboxes-wrapper.horizontal .checkbox:nth-child(2n) {\n margin-right: 0;\n }\n}\n#sbz92 .form-ratings-wrapper {\n display: inline-flex !important;\n}\n#sbz92 .star {\n width: 32px !important;\n height: 30px !important;\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") !important;\n background-position: 0px 0px !important;\n background-size: cover !important;\n}\n#sbz92 .form-wrapper-attachment .star-wrapper {\n padding-right: 12px !important;\n}\n#sbz92 .star-wrapper {\n cursor: pointer !important;\n padding-right: 20px !important;\n}\n#sbz92 .star-wrapper:last-child {\n padding-right: 0 !important;\n}\n#sbz92 .star-wrapper.hovering .star {\n background-position: -32px 0 !important;\n}\n#sbz92 .star-wrapper.selected {\n cursor: auto !important;\n}\n#sbz92 .star-wrapper.selected .star {\n background-position: -64px 0 !important;\n}\n#sbz92 .conversation-history-error {\n display: flex !important;\n align-items: center !important;\n gap: 8px !important;\n margin: 8px 0 16px !important;\n padding: 8px 10px !important;\n border-radius: 10px !important;\n background: #f5f6f8 !important;\n color: #737782 !important;\n font-size: 12px !important;\n line-height: 18px !important;\n text-align: left !important;\n}\n#sbz92 .conversation-history-error__text {\n flex: 1 !important;\n min-width: 0 !important;\n}\n#sbz92 .conversation-history-error__retry {\n position: relative !important;\n flex-shrink: 0 !important;\n border: 0 !important;\n border-radius: 6px !important;\n padding: 5px 8px !important;\n background: transparent !important;\n color: #545866 !important;\n font-size: 12px !important;\n font-weight: 600 !important;\n line-height: 18px !important;\n cursor: pointer !important;\n}\n#sbz92 .conversation-history-error__retry:hover:not(:disabled) {\n background: #e8eaf0 !important;\n}\n#sbz92 .conversation-history-error__retry:disabled {\n cursor: wait !important;\n}\n#sbz92 .conversation-history-error__retry:focus-visible {\n outline: 2px solid #737782 !important;\n outline-offset: 2px !important;\n}\n#sbz92 .conversation-history-error__spinner {\n position: absolute !important;\n inset: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n}\n#sbz92 .widget-body--events-container {\n overflow-x: hidden !important;\n overflow-y: auto !important;\n display: flex !important;\n flex-direction: column !important;\n flex: 1 !important;\n padding-left: 22.5px !important;\n padding-right: 22.5px !important;\n}\n#sbz92 .widget-body--events {\n padding-top: 20px !important;\n flex: 1 !important;\n}\n#sbz92 .mobile .widget-body--events {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-end !important;\n padding-bottom: 15px !important;\n}\n#sbz92 .widget-body--events-container.widget-body--events-container__error {\n align-items: center !important;\n justify-content: center !important;\n}\n#sbz92 .convo-event {\n position: relative !important;\n}\n#sbz92 .convo-event-time {\n text-align: center !important;\n margin-top: 15px !important;\n}\n#sbz92 .convo-event-time span {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .file-attachment {\n padding: 10px !important;\n border-radius: 10px !important;\n cursor: pointer !important;\n margin: 5px 0 0 0 !important;\n}\n#sbz92 .file-attachment--agent {\n background-color: '@primary_color' !important;\n width: fit-content !important;\n}\n#sbz92 .file-attachment--user {\n background-color: #eeeeee !important;\n align-self: flex-end !important;\n}\n#sbz92 .file-attachment--link {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n width: fit-content !important;\n}\n#sbz92 .file-attachment--agent .file-attachment--filename {\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n text-decoration: underline !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n max-width: 200px !important;\n}\n#sbz92 .file-attachment--user .file-attachment--filename {\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n text-decoration: underline !important;\n text-overflow: ellipsis !important;\n overflow: hidden !important;\n white-space: nowrap !important;\n max-width: 200px !important;\n}\n#sbz92 .file-attachment--download {\n width: 24px !important;\n height: 24px !important;\n border-radius: 30px !important;\n display: inline-block !important;\n}\n#sbz92 .file-attachment--agent .file-attachment--download {\n background: '@text_color' !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMjY1RkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFycm93LWRvd24iPjxsaW5lIHgxPSIxMiIgeTE9IjUiIHgyPSIxMiIgeTI9IjE5Ij48L2xpbmU+PHBvbHlsaW5lIHBvaW50cz0iMTkgMTIgMTIgMTkgNSAxMiI+PC9wb2x5bGluZT48L3N2Zz4K') !important;\n background-size: 15px 15px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n}\n#sbz92 .file-attachment--user .file-attachment--download {\n background: #c4c4c4 !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1kb3duIj48bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiPjwvcG9seWxpbmU+PC9zdmc+Cg==') !important;\n background-size: 15px 15px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n}\n#sbz92 .message-text--user {\n line-height: 1.5 !important;\n margin: 5px 0 0 !important;\n display: inline-block !important;\n font-weight: 500 !important;\n background-color: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n padding: 12px 16px 12px 16px !important;\n}\n#sbz92 .message-text--user.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .message-text--agent.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .message-text--user.message-user--error {\n background-color: #dc3545 !important;\n}\n#sbz92 .message-text--deleted {\n opacity: 0.7 !important;\n font-style: italic !important;\n}\n#sbz92 .message-text--agent {\n line-height: 1.5 !important;\n white-space: pre-wrap !important;\n display: inline-block !important;\n background: '@primary_color_faded' !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n padding: 12px 16px 12px 16px !important;\n}\n#sbz92 .message-agent.message-text--agent {\n max-width: 100% !important;\n margin-top: 0 !important;\n}\n#sbz92 .message-block-pre {\n display: block !important;\n min-width: 0 !important;\n max-width: 100% !important;\n margin: 4px 0 !important;\n padding: 10px 12px !important;\n border: 1px solid rgba(0, 0, 0, 0.06) !important;\n border-radius: 8px !important;\n background: rgba(0, 0, 0, 0.03) !important;\n white-space: pre-wrap !important;\n overflow-wrap: anywhere !important;\n word-break: normal !important;\n}\n#sbz92 .message-block-code,\n#sbz92 .message-block-code * {\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;\n font-size: 13px !important;\n line-height: 20px !important;\n}\n#sbz92 .message-block-pre .message-block-code {\n display: block !important;\n}\n#sbz92 .message-user__container {\n display: flex !important;\n flex-direction: row !important;\n align-items: flex-end !important;\n justify-content: flex-end !important;\n}\n#sbz92 .sending_dot.sending_dot__hide {\n opacity: 0 !important;\n background-color: #000 !important;\n}\n#sbz92 .sending_dot {\n width: 15px !important;\n height: 15px !important;\n margin-right: 5px !important;\n border-radius: 50% !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM3NzciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNsb2NrIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBvbHlsaW5lIHBvaW50cz0iMTIgNiAxMiAxMiAxNiAxNCI+PC9wb2x5bGluZT48L3N2Zz4K') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n}\n#sbz92 .message-user {\n border-radius: 18px !important;\n border-bottom-right-radius: 4px !important;\n max-width: 85% !important;\n align-self: flex-end !important;\n word-break: break-word !important;\n position: relative !important;\n white-space: pre-wrap !important;\n}\n#sbz92 .message-user.message-user-images-container {\n width: 85% !important;\n display: flex !important;\n justify-content: flex-end !important;\n}\n#sbz92 .message-user.message-user-audio {\n flex: 1 !important;\n}\n#sbz92 .message-agent {\n border-radius: 18px !important;\n border-bottom-left-radius: 4px !important;\n max-width: 85% !important;\n word-break: break-word !important;\n position: relative !important;\n}\n#sbz92 a.message_error {\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n opacity: 0.8 !important;\n display: block !important;\n text-align: end !important;\n font-size: 13px !important;\n margin-top: 5px !important;\n margin-bottom: 10px !important;\n}\n#sbz92 a.message_error:hover {\n opacity: 1 !important;\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n}\n#sbz92 .message_error__text {\n display: inline-block !important;\n vertical-align: text-top !important;\n}\n#sbz92 .message_error__icon {\n display: inline-block !important;\n vertical-align: bottom !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZGMzNTQ1IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFsZXJ0LWNpcmNsZSI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMiIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMi4wMSIgeTI9IjE2Ij48L2xpbmU+PC9zdmc+Cgo=') !important;\n background-size: contain !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 20px !important;\n height: 20px !important;\n}\n#sbz92 .image-attachment__img {\n width: 100% !important;\n margin: 5px 0 0 0 !important;\n border-radius: 7px !important;\n border: 1px solid #eeeeee !important;\n}\n#sbz92 .audio-attachment {\n width: 100% !important;\n margin: 5px 0 0 0 !important;\n height: 45px !important;\n display: inline !important;\n}\n#sbz92 .audio-attachment__audio {\n all: inherit !important;\n width: 100% !important;\n}\n#sbz92 .video-attachment {\n border-radius: 7px !important;\n width: 100% !important;\n margin: 5px 0 0 0 !important;\n}\n#sbz92 .video-attachment__video {\n all: inherit !important;\n width: 100% !important;\n}\n#sbz92 .info-message {\n text-align: center !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n margin: 10px !important;\n}\n#sbz92 .info-message--ended {\n padding-top: 16px !important;\n}\n#sbz92 .conversation-event {\n display: block !important;\n min-width: 0 !important;\n border: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n}\n#sbz92 .conversation-history-start {\n display: block !important;\n height: 1px !important;\n flex-shrink: 0 !important;\n}\n#sbz92 .message-user__container--send {\n transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;\n transform: translate3d(0, 0, 0) !important;\n}\n#sbz92 .message-user__container--send.message-user__container--enter {\n transform: translate3d(0, 14px, 0) !important;\n}\n@media (prefers-reduced-motion: reduce) {\n #sbz92 .message-user__container--send {\n transition: none !important;\n }\n #sbz92 .message-user__container--send.message-user__container--enter {\n transform: none !important;\n }\n}\n#sbz92 .conversation-event--history {\n filter: grayscale(0.8) !important;\n}\n#sbz92 .conversation-event--history + .conversation-event:not(.conversation-event--history)::before {\n content: '' !important;\n display: block !important;\n border-top: 2px solid '@primary_color_faded' !important;\n margin: 60px 40px !important;\n}\n#sbz92 .message-sender {\n margin-top: 10px !important;\n}\n#sbz92 .message-sender-avatar {\n border-radius: 50% !important;\n width: 25px !important;\n height: 25px !important;\n margin-right: 10px !important;\n}\n#sbz92 .message-sender-name {\n color: #495057 !important;\n -webkit-text-fill-color: #495057 !important;\n vertical-align: middle !important;\n}\n#sbz92 .message-system {\n text-align: center !important;\n margin: 10px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .form-attachment {\n display: flex !important;\n flex-direction: column !important;\n padding: 10px !important;\n -webkit-box-shadow: 0 0 10px #dee2e6 !important;\n box-shadow: 0 0 10px #dee2e6 !important;\n border-radius: 7px !important;\n margin-top: 10px !important;\n}\n#sbz92 .form-attachment-field {\n display: flex !important;\n flex-direction: column !important;\n margin-bottom: 0px !important;\n}\n#sbz92 .form-attachment-field__title {\n color: #4c4c4c !important;\n -webkit-text-fill-color: #4c4c4c !important;\n}\n#sbz92 .form-attachment-field__text {\n width: 100% !important;\n border: 1px solid #dbdbdb !important;\n padding: 10px !important;\n margin: 3px 0px 0px 0px !important;\n border-radius: 7px !important;\n}\n#sbz92 .input--error {\n border: 1px solid red !important;\n}\n#sbz92 .input--success {\n background-color: #f9f9f9 !important;\n pointer-events: none !important;\n}\n#sbz92 .form-attachment-field__error {\n color: brown !important;\n -webkit-text-fill-color: brown !important;\n float: right !important;\n}\n#sbz92 .form-attachment-field__checkbox {\n width: 100% !important;\n all: inherit !important;\n -webkit-appearance: textfield !important;\n margin-right: 8px !important;\n}\n#sbz92 .form-attachment-field__checkbox:hover {\n cursor: pointer !important;\n}\n#sbz92 .form-attachment-field__list-item {\n display: flex !important;\n align-items: center !important;\n margin: 4px !important;\n margin-left: 0px !important;\n}\n#sbz92 .form-attachment-field__radio {\n width: 100% !important;\n all: inherit !important;\n -webkit-appearance: textfield !important;\n margin-right: 8px !important;\n}\n#sbz92 .form-attachment-field__datetime {\n width: 100% !important;\n border: 1px solid #dbdbdb !important;\n padding: 10px !important;\n margin: 3px 0px 0px 0px !important;\n border-radius: 7px !important;\n}\n#sbz92 .form-attachment--submit-btn {\n background-color: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n width: 100% !important;\n margin-top: 10px !important;\n border-radius: 7px !important;\n padding: 10px !important;\n text-align: center !important;\n font-size: 16px !important;\n}\n#sbz92 .form-attachment--submit-btn:hover {\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n}\n#sbz92 .red {\n color: #dc3545 !important;\n -webkit-text-fill-color: #dc3545 !important;\n}\n#sbz92 .typing {\n background-color: #f4f5f7 !important;\n color: #7a7a7b !important;\n -webkit-text-fill-color: #7a7a7b !important;\n padding: 10px !important;\n opacity: 1 !important;\n transition: all 0.2s !important;\n position: absolute !important;\n bottom: 0px !important;\n left: 0px !important;\n width: 100% !important;\n}\n#sbz92 .typing--hidden {\n opacity: 0 !important;\n display: none !important;\n}\n#sbz92 .markdown-message img {\n max-width: 100% !important;\n margin-top: 10px !important;\n}\n#sbz92 .button-attachments {\n display: block !important;\n margin-top: 5px !important;\n}\n#sbz92 .url-button-attachment:first-child {\n border-top-left-radius: 7px !important;\n border-top-right-radius: 7px !important;\n}\n#sbz92 .url-button-attachment:last-child {\n border-bottom-left-radius: 7px !important;\n border-bottom-right-radius: 7px !important;\n border-bottom: 1px solid '@primary_color' !important;\n}\n#sbz92 .agent-message .url-button-attachment {\n text-decoration: none !important;\n padding: 10px 18px !important;\n display: block !important;\n text-align: center !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n border: 1px solid #000 !important;\n border-radius: 12px !important;\n text-overflow: ellipsis !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n white-space: nowrap !important;\n}\n#sbz92 .agent-message .url-button-attachment:hover {\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n border-color: '@primary_color' !important;\n}\n#sbz92 .message_quick_replies {\n display: flex !important;\n flex-wrap: wrap !important;\n flex-direction: column !important;\n}\n#sbz92 .message_quick_reply {\n cursor: pointer !important;\n position: relative !important;\n padding: 10px 18px !important;\n margin-top: 8px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n border-radius: 12px !important;\n user-select: none !important;\n overflow: hidden !important;\n white-space: nowrap !important;\n width: fit-content !important;\n font-weight: 500 !important;\n max-width: 100% !important;\n text-overflow: ellipsis !important;\n border: 1px solid #000 !important;\n transition: all 100ms ease !important;\n}\n#sbz92 .message_quick_reply:hover {\n background: '@primary_color' !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n border-color: '@primary_color' !important;\n}\n#sbz92 .generic-attachment-container {\n position: relative !important;\n margin-top: 10px !important;\n}\n#sbz92 .generic-attachments {\n display: block !important;\n}\n#sbz92 .generic-attachment {\n display: flex !important;\n width: 100% !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n user-select: none !important;\n cursor: grab !important;\n}\n#sbz92 .generic-attachment--element-content {\n flex: 1 !important;\n}\n#sbz92 .generic-attachment--element {\n border: 1px solid #d8d8d8 !important;\n background: white !important;\n border-radius: 7px !important;\n overflow: hidden !important;\n width: 220px !important;\n margin-right: 10px !important;\n vertical-align: top !important;\n display: flex !important;\n flex-direction: column !important;\n flex-shrink: 0 !important;\n}\n#sbz92 .generic-attachment--element:last-child {\n margin-right: 0 !important;\n}\n#sbz92 .generic-attachment--element .generic-attachment--element-img {\n width: 100% !important;\n height: 150px !important;\n object-fit: cover !important;\n}\n#sbz92 .generic-attachment--element .url-button-attachment {\n padding: 10px !important;\n display: block !important;\n padding-top: 9px !important;\n padding-bottom: 9px !important;\n text-align: center !important;\n border: none !important;\n border-top: 1px solid #d8d8d8 !important;\n border-radius: 0 !important;\n width: 100% !important;\n color: #0d6efd !important;\n -webkit-text-fill-color: #0d6efd !important;\n}\n#sbz92 .generic-attachment--element .url-button-attachment:hover {\n color: #024dbc !important;\n -webkit-text-fill-color: #024dbc !important;\n border-color: #d8d8d8 !important;\n}\n#sbz92 .generic-attachment--element .generic-attachment--element-title {\n padding: 0px 13px !important;\n margin-top: 13px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n font-weight: 600 !important;\n font-size: 16px !important;\n line-height: 20px !important;\n white-space: normal !important;\n}\n#sbz92 .generic-attachment--element .generic-attachment--element-subtitle {\n padding: 0px 13px !important;\n color: gray !important;\n -webkit-text-fill-color: gray !important;\n margin-top: 5px !important;\n white-space: pre-wrap !important;\n display: -webkit-box !important;\n -webkit-line-clamp: 4 !important;\n -webkit-box-orient: vertical !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n}\n#sbz92 .generic-attachment--element.clickable {\n cursor: pointer !important;\n}\n#sbz92 .widget_body__events__error_msg {\n margin-top: 50px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n text-align: center !important;\n}\n#sbz92 .widget_body__events__error_retry {\n margin-top: 10px !important;\n}\n#sbz92 .generic-attachment-navigator {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n cursor: pointer !important;\n width: 20px !important;\n font-size: 80px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n color: rgba(255, 255, 255, 0.85) !important;\n -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;\n text-shadow: 0 10px 25px rgba(0, 0, 0, 0.75) !important;\n z-index: 999 !important;\n user-select: none !important;\n}\n#sbz92 .generic-attachment-navigator:hover {\n text-shadow: 0 10px 20px rgba(0, 0, 0, 0.75) !important;\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n}\n#sbz92 .generic-attachment-navigator.generic-attachment-navigator--disabled {\n display: none !important;\n}\n#sbz92 .generic-attachment-navigator.generic-attachment-navigator--left {\n left: 2px !important;\n}\n#sbz92 .generic-attachment-navigator.generic-attachment-navigator--right {\n right: 2px !important;\n}\n#sbz92 .generic-attachment-navigator-icon {\n font-size: 80px !important;\n}\n#sbz92 .order_attachment__product_img {\n width: 40px !important;\n height: 40px !important;\n margin-right: 10px !important;\n border-radius: 5px !important;\n flex-shrink: 0 !important;\n display: block !important;\n object-fit: contain !important;\n background: whitesmoke !important;\n}\n#sbz92 .order_attachment__product_name {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n}\n#sbz92 .order_attachment__header {\n padding-bottom: 5px !important;\n border-bottom: 1px solid #ccc !important;\n margin-bottom: 5px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: space-between !important;\n}\n#sbz92 .order_attachment__product_desc {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n color: #999 !important;\n -webkit-text-fill-color: #999 !important;\n font-size: 13px !important;\n}\n#sbz92 .order_attachment__product {\n display: flex !important;\n align-items: center !important;\n margin-top: 5px !important;\n margin-bottom: 5 !important;\n}\n#sbz92 .order_attachment__text_sm {\n font-size: 13px !important;\n}\n#sbz92 .order_attachment__text_muted {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .order_attachment__text_truncate {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .order_attachment {\n margin-top: 10px !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n border: 1px solid #aaa !important;\n background: white !important;\n border-radius: 8px !important;\n width: 220px !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n padding: 10px !important;\n}\n#sbz92 .order_attachment__footer {\n margin-top: 10px !important;\n padding-top: 10px !important;\n border-top: 1px solid #ccc !important;\n}\n#sbz92 .order_attachment__total {\n font-size: 16px !important;\n}\n#sbz92 .order_attachment__label {\n font-size: 13px !important;\n color: #777 !important;\n -webkit-text-fill-color: #777 !important;\n margin-top: 10px !important;\n}\n#sbz92 .order_attachment__label.no_margin {\n margin-top: 0 !important;\n}\n#sbz92 .order_attachment.order_attachment__user {\n margin-right: 50px !important;\n align-self: flex-end !important;\n margin-right: 0 !important;\n margin-left: 50px !important;\n align-self: flex-start !important;\n}\n#sbz92 .product_attachment {\n margin-top: 10px !important;\n border: 1px solid #d8d8d8 !important;\n background: white !important;\n border-radius: 7px !important;\n overflow: hidden !important;\n width: 200px !important;\n display: inline-block !important;\n vertical-align: top !important;\n transition: all 0.1s !important;\n}\n#sbz92 .product_attachment.product_attachment__user {\n margin-right: 50px !important;\n align-self: flex-end !important;\n margin-right: 0 !important;\n margin-left: 50px !important;\n align-self: flex-start !important;\n}\n#sbz92 .product_attachment__img {\n width: 200px !important;\n height: 200px !important;\n border-bottom: 1px solid #d8d8d8 !important;\n object-fit: cover !important;\n display: block !important;\n}\n#sbz92 .product_attachment__price {\n padding-left: 10px !important;\n}\n#sbz92 .product_attachment__btns {\n margin-top: 5px !important;\n}\n#sbz92 .product_attachment__btn {\n border-top: 1px solid #d8d8d8 !important;\n display: flex !important;\n padding: 8px 10px !important;\n align-items: center !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n justify-content: center !important;\n cursor: pointer !important;\n text-transform: capitalize !important;\n}\n#sbz92 .product_attachment__btn:last-child {\n margin-right: 0 !important;\n}\n#sbz92 .product_attachment__btn:hover {\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n}\n#sbz92 a.product_attachment__title {\n display: block !important;\n padding: 8px 10px 0 10px !important;\n font-weight: 500 !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n word-break: break-word !important;\n margin-bottom: 5px !important;\n}\n#sbz92 .product_attachment__subtitle {\n white-space: pre-wrap !important;\n display: -webkit-box !important;\n -webkit-line-clamp: 3 !important;\n -webkit-box-orient: vertical !important;\n overflow: hidden !important;\n padding: 5px 10px !important;\n color: #aaa !important;\n -webkit-text-fill-color: #aaa !important;\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n margin-bottom: 5px !important;\n}\n#sbz92 .product_attachment__btn_external_link {\n width: 16px !important;\n height: 16px !important;\n margin-left: 5px !important;\n margin-top: -2px !important;\n}\n#sbz92 .agent-convo-event-wrapper {\n max-width: 85% !important;\n margin-top: 5px !important;\n}\n#sbz92 .agent-convo-event-wrapper.full {\n max-width: 100% !important;\n}\n#sbz92 .agent-convo-event-inner {\n position: relative !important;\n display: inline-block !important;\n max-width: 100% !important;\n}\n#sbz92 .message-event-actions {\n position: absolute !important;\n bottom: -10px !important;\n opacity: 0.7 !important;\n left: calc(100% - 25px) !important;\n display: none !important;\n border: 1px solid #dee2e6 !important;\n background-color: white !important;\n border-radius: 4px !important;\n z-index: 10 !important;\n}\n#sbz92 .message-event-actions.ended {\n bottom: -10px !important;\n}\n#sbz92 .message-event-actions:hover {\n opacity: 1 !important;\n}\n#sbz92 .agent-convo-event-inner:hover .message-event-actions {\n display: flex !important;\n}\n#sbz92 .message-event-actions-static {\n display: none !important;\n margin-top: 2px !important;\n border: none !important;\n padding: 0 !important;\n gap: 4px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-actions {\n display: none !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-actions-static {\n display: flex !important;\n position: absolute !important;\n bottom: -30px !important;\n left: 0 !important;\n z-index: 2 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn {\n padding: 0 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn .message-event-action-btn-svg {\n width: 24px !important;\n height: 24px !important;\n background-position: 2px 2px !important;\n background-size: 20px 20px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n padding-right: 10px !important;\n border-radius: 5px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev .message-event-action-btn-svg {\n width: 24px !important;\n height: 24px !important;\n background-position: 2px 2px !important;\n background-size: 20px 20px !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev:hover {\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev.message-event-action-btn_like.active {\n color: #34c759 !important;\n -webkit-text-fill-color: #34c759 !important;\n}\n#sbz92 .agent-convo-event-inner.last .message-event-action-btn.message-event-action-btn__dev.message-event-action-btn_like.active {\n color: #34c759 !important;\n -webkit-text-fill-color: #34c759 !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev:hover {\n background-color: unset !important;\n}\n#sbz92 .message-event-action-btn {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n cursor: pointer !important;\n padding: 2px !important;\n}\n#sbz92 .message-event-action-btn:hover {\n background-color: #ececec !important;\n}\n#sbz92 .message-event-action-btn.active:hover {\n background-color: #dbfde3 !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev {\n padding: 0px !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev:hover {\n background-color: unset !important;\n}\n#sbz92 .message-event-action-btn.message-event-action-btn__dev.active:hover {\n background-color: unset !important;\n}\n#sbz92 .message-event-action-btn .message-event-action-btn-svg {\n width: 20px !important;\n height: 20px !important;\n border-radius: 4px !important;\n background-position: 2px 2px !important;\n background-size: 16px 16px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n}\n#sbz92 .message-event-action-btn-svg.like {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiM2Yzc1N2QiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGh1bWItdXAiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDExdjhhMSAxIDAgMCAxIC0xIDFoLTJhMSAxIDAgMCAxIC0xIC0xdi03YTEgMSAwIDAgMSAxIC0xaDNhNCA0IDAgMCAwIDQgLTR2LTFhMiAyIDAgMCAxIDQgMHY1aDNhMiAyIDAgMCAxIDIgMmwtMSA1YTIgMyAwIDAgMSAtMiAyaC03YTMgMyAwIDAgMSAtMyAtMyIgLz48L3N2Zz4K') !important;\n}\n#sbz92 .message-event-action-btn-svg.dislike {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiM2Yzc1N2QiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdGh1bWItZG93biI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTcgMTN2LThhMSAxIDAgMCAwIC0xIC0xaC0yYTEgMSAwIDAgMCAtMSAxdjdhMSAxIDAgMCAwIDEgMWgzYTQgNCAwIDAgMSA0IDR2MWEyIDIgMCAwIDAgNCAwdi01aDNhMiAyIDAgMCAwIDIgLTJsLTEgLTVhMiAzIDAgMCAwIC0yIC0yaC03YTMgMyAwIDAgMCAtMyAzIiAvPjwvc3ZnPgo=') !important;\n}\n#sbz92 .message-event-action-btn-svg.info {\n background-image: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiM2Yzc1N2QiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTMgMTJhOSA5IDAgMSAwIDE4IDBhOSA5IDAgMCAwIC0xOCAwIiAvPgogIDxwYXRoIGQ9Ik0xMiA5aC4wMSIgLz4KICA8cGF0aCBkPSJNMTEgMTJoMXY0aDEiIC8+Cjwvc3ZnPgo=') !important;\n}\n#sbz92 .message-event-action-btn:hover .message-event-action-btn-svg.like {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImJsYWNrIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXRodW1iLXVwIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNyAxMXY4YTEgMSAwIDAgMSAtMSAxaC0yYTEgMSAwIDAgMSAtMSAtMXYtN2ExIDEgMCAwIDEgMSAtMWgzYTQgNCAwIDAgMCA0IC00di0xYTIgMiAwIDAgMSA0IDB2NWgzYTIgMiAwIDAgMSAyIDJsLTEgNWEyIDMgMCAwIDEgLTIgMmgtN2EzIDMgMCAwIDEgLTMgLTMiIC8+PC9zdmc+Cg==') !important;\n}\n#sbz92 .message-event-action-btn:hover .message-event-action-btn-svg.dislike {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImJsYWNrIiAgc3Ryb2tlLXdpZHRoPSIyIiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXRodW1iLWRvd24iPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik03IDEzdi04YTEgMSAwIDAgMCAtMSAtMWgtMmExIDEgMCAwIDAgLTEgMXY3YTEgMSAwIDAgMCAxIDFoM2E0IDQgMCAwIDEgNCA0djFhMiAyIDAgMCAwIDQgMHYtNWgzYTIgMiAwIDAgMCAyIC0ybC0xIC01YTIgMyAwIDAgMCAtMiAtMmgtN2EzIDMgMCAwIDAgLTMgMyIgLz48L3N2Zz4K') !important;\n}\n#sbz92 .message-event-action-btn:hover .message-event-action-btn-svg.info {\n background-image: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiMwMDAiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTMgMTJhOSA5IDAgMSAwIDE4IDBhOSA5IDAgMCAwIC0xOCAwIiAvPgogIDxwYXRoIGQ9Ik0xMiA5aC4wMSIgLz4KICA8cGF0aCBkPSJNMTEgMTJoMXY0aDEiIC8+Cjwvc3ZnPgo=') !important;\n}\n#sbz92 .message-event-action-btn.active .message-event-action-btn-svg.like {\n background-image: url('data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9IiMzNEM3NTkiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItZmlsbGVkIGljb24tdGFibGVyLXRodW1iLXVwIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTMgM2EzIDMgMCAwIDEgMi45OTUgMi44MjRsLjAwNSAuMTc2djRoMmEzIDMgMCAwIDEgMi45OCAyLjY1bC4wMTUgLjE3NGwuMDA1IC4xNzZsLS4wMiAuMTk2bC0xLjAwNiA1LjAzMmMtLjM4MSAxLjYyNiAtMS41MDIgMi43OTYgLTIuODEgMi43OGwtLjE2NCAtLjAwOGgtOGExIDEgMCAwIDEgLS45OTMgLS44ODNsLS4wMDcgLS4xMTdsLjAwMSAtOS41MzZhMSAxIDAgMCAxIC41IC0uODY1YTIuOTk4IDIuOTk4IDAgMCAwIDEuNDkyIC0yLjM5N2wuMDA3IC0uMjAydi0xYTMgMyAwIDAgMSAzIC0zeiIgLz48cGF0aCBkPSJNNSAxMGExIDEgMCAwIDEgLjk5MyAuODgzbC4wMDcgLjExN3Y5YTEgMSAwIDAgMSAtLjg4MyAuOTkzbC0uMTE3IC4wMDdoLTFhMiAyIDAgMCAxIC0xLjk5NSAtMS44NWwtLjAwNSAtLjE1di03YTIgMiAwIDAgMSAxLjg1IC0xLjk5NWwuMTUgLS4wMDVoMXoiIC8+PC9zdmc+Cg==') !important;\n}\n#sbz92 .message-event-action-btn.active .message-event-action-btn-svg.dislike {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI0ODBfOTUpIj4KPHBhdGggZD0iTTEzIDIxLjAwNzlDMTMuNzY1IDIxLjAwOCAxNC41MDEyIDIwLjcxNTcgMTUuMDU3OSAyMC4xOTFDMTUuNjE0NyAxOS42NjYyIDE1Ljk0OTkgMTguOTQ4NiAxNS45OTUgMTguMTg0OUwxNiAxOC4wMDc5VjE0LjAwNzlIMThDMTguNzM1MSAxNC4wMDggMTkuNDQ0NyAxMy43MzgyIDE5Ljk5NCAxMy4yNDk3QzIwLjU0MzQgMTIuNzYxMiAyMC44OTQyIDEyLjA4OCAyMC45OCAxMS4zNTc5TDIwLjk5NSAxMS4xODQ5TDIxIDExLjAwNzlMMjAuOTggMTAuODExOUwxOS45NzQgNS43Nzk5MkMxOS41OTMgNC4xNTQ5MiAxOC40NzIgMi45ODM5MiAxNy4xNjQgMi45OTk5MkwxNyAzLjAwNzkySDlDOC43NTQ5MSAzLjAwNzk4IDguNTE4MzggMy4wOTgwNCA4LjMzNTMzIDMuMjYxMDFDOC4xNTIyNyAzLjQyMzk3IDguMDM1NDMgMy42NDg0OSA4LjAwNyAzLjg5MTkyTDggNC4wMDc5Mkw4LjAwMSAxMy41NDM5QzguMDAxIDEzLjcxOTUgOC4wNDcyMSAxMy44OTE5IDguMTM0OTggMTQuMDQzOUM4LjIyMjc1IDE0LjE5NTkgOC4zNDg5OCAxNC4zMjIyIDguNTAxIDE0LjQwOTlDOC45MjcyOSAxNC42NTYxIDkuMjg2NCAxNS4wMDM1IDkuNTQ2NjEgMTUuNDIxM0M5LjgwNjgyIDE1LjgzOTIgOS45NjAxMyAxNi4zMTQ3IDkuOTkzIDE2LjgwNTlMMTAgMTcuMDA3OVYxOC4wMDc5QzEwIDE4LjgwMzYgMTAuMzE2MSAxOS41NjY2IDEwLjg3ODcgMjAuMTI5MkMxMS40NDEzIDIwLjY5MTggMTIuMjA0NCAyMS4wMDc5IDEzIDIxLjAwNzlaIiBmaWxsPSIjMzMzMzMzIi8+CjxwYXRoIGQ9Ik01IDE0LjAwODFDNS4yNDQ5MyAxNC4wMDggNS40ODEzNCAxMy45MTgxIDUuNjY0MzcgMTMuNzU1M0M1Ljg0NzQxIDEzLjU5MjYgNS45NjQzNCAxMy4zNjgzIDUuOTkzIDEzLjEyNTFMNiAxMy4wMDgxVjQuMDA4MDZDNS45OTk5NyAzLjc2MzEyIDUuOTEwMDQgMy41MjY3MiA1Ljc0NzI4IDMuMzQzNjhDNS41ODQ1MyAzLjE2MDY1IDUuMzYwMjUgMy4wNDM3MSA1LjExNyAzLjAxNTA2TDUgMy4wMDgwNkg0QzMuNDk1MSAzLjAwNzkzIDMuMDA4ODQgMy4xOTg3OCAyLjYzODgxIDMuNTQyMjlDMi4yNjg3OCAzLjg4NTc5IDIuMDQyMzYgNC4zNTY1NCAyLjAwNSA0Ljg2MDA2TDIgNS4wMTAwNlYxMi4wMTAxQzIuMDAwMDkgMTIuNTE0NSAyLjE5MDc3IDEzLjAwMDIgMi41MzM4NCAxMy4zN0MyLjg3NjkgMTMuNzM5NyAzLjM0NzAyIDEzLjk2NjIgMy44NSAxNC4wMDQxTDQgMTQuMDA5MUw1IDE0LjAwODFaIiBmaWxsPSIjMzMzMzMzIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjQ4MF85NSI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K') !important;\n}\n#sbz92 .inline-time {\n font-size: 13px !important;\n margin-top: 6px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n font-weight: 500 !important;\n opacity: 0.4 !important;\n}\n#sbz92 .message-text-inline-image-wrapper {\n display: block !important;\n margin-top: 8px !important;\n margin-bottom: 8px !important;\n max-width: 100% !important;\n}\n#sbz92 .message-text-inline-image {\n width: 100% !important;\n}\n#sbz92 .text-message-ul {\n display: block !important;\n list-style-type: disc !important;\n margin-block-start: 8px !important;\n margin-block-end: 8px !important;\n padding-inline-start: 20px !important;\n}\n#sbz92 .text-message-ol {\n display: block !important;\n list-style-type: decimal !important;\n margin-block-start: 8px !important;\n margin-block-end: 8px !important;\n padding-inline-start: 20px !important;\n}\n#sbz92 .text-message-li {\n display: list-item !important;\n}\n#sbz92 .agent-message .text-message-link {\n color: #0d6efd !important;\n -webkit-text-fill-color: #0d6efd !important;\n font-weight: 400 !important;\n}\n#sbz92 .agent-message .text-message-link:hover {\n color: #024dbc !important;\n -webkit-text-fill-color: #024dbc !important;\n}\n#sbz92 .user-message .text-message-link {\n text-decoration: underline !important;\n text-decoration-color: rgba(255, 255, 255, 0.6) !important;\n text-underline-offset: 4px !important;\n}\n#sbz92 .user-message .text-message-link:hover {\n text-decoration-color: #fff !important;\n background-color: rgba(255, 255, 255, 0.08) !important;\n}\n#sbz92 .message-quote {\n padding: 6px 10px !important;\n border-left: 3px solid '@primary_color' !important;\n background-color: #dfdfdf !important;\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n margin-bottom: 8px !important;\n max-width: 100% !important;\n}\n#sbz92 .message-quote-title {\n font-weight: 600 !important;\n font-size: 14px !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .message-quote-content {\n opacity: 0.7 !important;\n color: '@secondary_color' !important;\n -webkit-text-fill-color: '@secondary_color' !important;\n font-size: 14px !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n}\n#sbz92 .message-quote-inner-img {\n width: 36px !important;\n height: 36px !important;\n object-fit: cover !important;\n}\n#sbz92 .message-quote-inner {\n margin-left: 15px !important;\n flex: 1 !important;\n overflow: hidden !important;\n}\n#sbz92 .image-attachment.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .file-attachment.just-focused {\n box-shadow: 0 0 0 2px #000 !important;\n}\n#sbz92 .widget_body_empty_img {\n max-width: 150px !important;\n max-height: 150px !important;\n}\n#sbz92 .emoji {\n position: relative !important;\n width: 20px !important;\n height: 20px !important;\n background-size: 100% !important;\n background-repeat: no-repeat !important;\n border: none !important;\n display: inline-block !important;\n vertical-align: text-bottom !important;\n}\n#sbz92 .emoji--angry {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") !important;\n}\n#sbz92 .emoji--confused {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") !important;\n}\n#sbz92 .emoji--crying,\n#sbz92 .emoji--cry {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_3___ + ") !important;\n}\n#sbz92 .emoji--grinning {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_4___ + ") !important;\n}\n#sbz92 .emoji--heart_eyes,\n#sbz92 .emoji--heart-eyes {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_5___ + ") !important;\n}\n#sbz92 .emoji--neutral_face,\n#sbz92 .emoji--neutral {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_6___ + ") !important;\n}\n#sbz92 .emoji--disappointed,\n#sbz92 .emoji--sad {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_7___ + ") !important;\n}\n#sbz92 .emoji--sleepy {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_8___ + ") !important;\n}\n#sbz92 .emoji--smile,\n#sbz92 .emoji--smiling {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_9___ + ") !important;\n}\n#sbz92 .emoji--open_mouth,\n#sbz92 .emoji--surprised {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_10___ + ") !important;\n}\n#sbz92 .emoji--tired_face,\n#sbz92 .emoji--tired {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_11___ + ") !important;\n}\n#sbz92 .emoji--stuck_out_tongue,\n#sbz92 .emoji--tongue-out {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_12___ + ") !important;\n}\n#sbz92 .emoji--wink {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_13___ + ") !important;\n}\n#sbz92 .emoji--moyai {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_14___ + ") !important;\n}\n#sbz92 .emoji--dislike,\n#sbz92 .emoji--unlike,\n#sbz92 .emoji--thumbsdown {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_15___ + ") !important;\n}\n#sbz92 .emoji--like,\n#sbz92 .emoji--thumbsup {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_16___ + ") !important;\n}\n#sbz92 .emoji--ok_hand {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_17___ + ") !important;\n}\n#sbz92 .emoji--octopus {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_18___ + ") !important;\n}\n#sbz92 .emoji--pig2 {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_19___ + ") !important;\n}\n#sbz92 .emoji--wave {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_20___ + ") !important;\n}\n#sbz92 .emoji--mouse {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_21___ + ") !important;\n}\n#sbz92 .emoji--mouse2 {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_22___ + ") !important;\n}\n#sbz92 .emoji--rat {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_23___ + ") !important;\n}\n#sbz92 .emoji-picker {\n display: flex !important;\n flex-direction: row !important;\n z-index: 20 !important;\n position: absolute !important;\n max-width: 240px !important;\n background: #fff !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n border-radius: 10px !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n right: 15px !important;\n bottom: 55px !important;\n flex-wrap: wrap !important;\n padding: 10px !important;\n justify-content: space-between !important;\n align-items: center !important;\n}\n#sbz92 .emoji-picker--item {\n background-size: 100% !important;\n width: 30px !important;\n height: 30px !important;\n position: relative !important;\n background-repeat: no-repeat !important;\n display: inline-block !important;\n vertical-align: text-bottom !important;\n margin: 5px !important;\n cursor: pointer !important;\n transition: background-color 0.2s !important;\n}\n#sbz92 .emoji-picker-background-item {\n background-size: 50% !important;\n width: 40px !important;\n height: 40px !important;\n border-radius: 100% !important;\n}\n#sbz92 .emoji-picker-background-item:hover {\n background-color: #dee2e6 !important;\n}\n#sbz92 .convo-list {\n display: flex !important;\n flex-direction: column !important;\n flex: 1 !important;\n width: 100% !important;\n justify-content: space-between !important;\n overflow: auto !important;\n margin-top: -60px !important;\n padding-left: 22.5px !important;\n padding-right: 22.5px !important;\n}\n#sbz92 .convo-list--list {\n background: #fff !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n}\n#sbz92 .convo-list--title {\n font-weight: 500 !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n background: #fff !important;\n border-bottom: 1px solid #f0f0f0 !important;\n padding: 15px !important;\n}\n#sbz92 .convo-list--container {\n border-radius: 10px !important;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;\n overflow: auto !important;\n display: flex !important;\n flex-direction: column !important;\n user-select: none !important;\n}\n#sbz92 .convo-list--footer {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n margin-top: 22.5px !important;\n}\n#sbz92 .convo-list--convo-last-info {\n overflow: hidden !important;\n white-space: nowrap !important;\n justify-content: center !important;\n display: flex !important;\n flex-direction: column !important;\n flex: 1 !important;\n margin-left: 15px !important;\n}\n#sbz92 .convo-list--convo-last-message {\n font-weight: normal !important;\n flex: 1 !important;\n cursor: pointer !important;\n display: flex !important;\n width: 100% !important;\n overflow: hidden !important;\n align-items: center !important;\n}\n#sbz92 .convo-list--convo-last-mes {\n text-overflow: ellipsis !important;\n opacity: 0.6 !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: normal !important;\n}\n#sbz92 .convo-list--convo-title {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n font-weight: 500 !important;\n}\n#sbz92 .convo-list--convo-completed {\n width: 14px !important;\n}\n#sbz92 .convo-list--convo-name {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n flex: 1 !important;\n margin-right: 16px !important;\n cursor: pointer !important;\n}\n#sbz92 .convo-list--item {\n cursor: pointer !important;\n border-bottom: 1px solid '@primary_color_faded' !important;\n padding: 15px !important;\n display: flex !important;\n flex-direction: row !important;\n transition: background 0.15s ease !important;\n}\n#sbz92 .convo-list--item:hover {\n background: '@primary_color_faded' !important;\n}\n#sbz92 .convo-list--convo-time span {\n font-size: 14px !important;\n line-height: 20px !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n opacity: 0.6 !important;\n min-width: 70px !important;\n cursor: pointer !important;\n}\n#sbz92 .convo-list--item-unread {\n width: 8px !important;\n height: 8px !important;\n background: #dc3545 !important;\n border-radius: 50% !important;\n margin-left: 15px !important;\n align-self: center !important;\n}\n#sbz92 .convo-list--item-avatar {\n width: 32px !important;\n height: 32px !important;\n}\n#sbz92 .widget-body--empty {\n display: flex !important;\n flex: 1 !important;\n justify-content: center !important;\n align-items: center !important;\n flex-direction: column !important;\n}\n#sbz92 .widget-body--empty-text {\n color: #343a40 !important;\n -webkit-text-fill-color: #343a40 !important;\n margin-top: 30px !important;\n text-align: center !important;\n}\n#sbz92 .mobile .widget-container {\n border-radius: 0px !important;\n max-height: 100% !important;\n margin-bottom: 0 !important;\n top: auto !important;\n left: 0 !important;\n right: 0 !important;\n width: 100% !important;\n height: '@mobile_height' !important;\n opacity: 1 !important;\n transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .mobile .widget-container.widget-container--left {\n left: 0 !important;\n right: 0 !important;\n}\n#sbz92 .mobile .widget-container.widget-container--right {\n right: 0 !important;\n left: 0 !important;\n}\n#sbz92 .mobile .widget-container.widget-container--hide {\n top: -100vh !important;\n opacity: 0 !important;\n transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1), bottom 0.15s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .widget-container.widget-container--left {\n left: '@desktop_button.margin_x' !important;\n right: unset !important;\n}\n#sbz92 .widget-container.widget-container--right {\n right: '@desktop_button.margin_x' !important;\n left: unset !important;\n}\n#sbz92 .widget-container {\n max-height: 100% !important;\n max-height: '@desktop_widget_max_height' !important;\n max-width: 100% !important;\n background: #fff !important;\n z-index: '@z_index_3' !important;\n border-radius: 15px !important;\n box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.13) !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n position: '@widget_position' !important;\n margin-bottom: '@desktop_button.margin_y' !important;\n width: '@width' !important;\n height: '@height' !important;\n bottom: 0 !important;\n opacity: 1 !important;\n transform: translateY(0) !important;\n transition: transform 0.15s cubic-bezier(1, 0.5, 0.8, 1), opacity 0.2s cubic-bezier(1, 0.5, 0.8, 1), scale 0.15s ease !important;\n visibility: visible !important;\n overflow: hidden !important;\n}\n#sbz92 .widget-container.widget-container--full {\n max-height: 100% !important;\n height: 100% !important;\n margin-bottom: 0 !important;\n}\n#sbz92 .widget-container.widget-container--hide {\n opacity: 0 !important;\n transform: translateY(20px) !important;\n visibility: hidden !important;\n transition: transform 0.15s cubic-bezier(1, 0.5, 0.8, 1), opacity 0.1s cubic-bezier(1, 0.5, 0.8, 1), visibility 0.1s cubic-bezier(1, 0.5, 0.8, 1) !important;\n}\n#sbz92 .btn--start-convo {\n border-radius: 7px !important;\n flex-shrink: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n padding-left: 32px !important;\n padding-right: 32px !important;\n height: 42px !important;\n color: '@text_color' !important;\n -webkit-text-fill-color: '@text_color' !important;\n font-size: 16px !important;\n font-weight: 500 !important;\n line-height: 20px !important;\n text-align: center !important;\n background: '@primary_color' !important;\n width: 100% !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n transition: filter 250ms ease !important;\n}\n#sbz92 .btn--start-convo::after {\n display: none !important;\n}\n#sbz92 .btn--start-convo:hover {\n filter: brightness(1.1) !important;\n}\n#sbz92 .btn--start-convo:disabled {\n opacity: 0.5 !important;\n cursor: default !important;\n pointer-events: none !important;\n}\n#sbz92 .widget-body.widget-body--none {\n display: none !important;\n}\n#sbz92 .widget-body {\n flex: 1 !important;\n flex-grow: 1 !important;\n z-index: -1 !important;\n width: 100% !important;\n overflow-y: auto !important;\n flex-direction: column !important;\n display: flex !important;\n position: relative !important;\n}\n#sbz92 .embed-chat .widget-body--events {\n width: 600px !important;\n margin: 0 auto !important;\n max-width: 100% !important;\n}\n#sbz92 .embed-chat .message-input {\n max-width: 600px !important;\n margin: 20px auto !important;\n}\n#sbz92 .embed-chat .widget-header--inner {\n max-width: 100% !important;\n width: 600px !important;\n}\n#sbz92 .embed-chat .widget-body--content {\n width: 600px !important;\n margin: 0 auto !important;\n max-width: 100% !important;\n}\n#sbz92 .embed-chat .convo-list {\n width: 600px !important;\n margin: 0 auto !important;\n max-width: 100% !important;\n}\n#sbz92 .widget-body--content {\n overflow-y: auto !important;\n overflow-x: hidden !important;\n flex: 1 !important;\n display: flex !important;\n flex-direction: column !important;\n position: relative !important;\n min-height: 0 !important;\n}\n#sbz92 .poweredby {\n margin-bottom: 15px !important;\n text-align: center !important;\n}\n#sbz92 .poweredby .poweredby--text {\n text-decoration: none !important;\n font-size: 13px !important;\n color: #7c7c7c !important;\n -webkit-text-fill-color: #7c7c7c !important;\n vertical-align: baseline !important;\n}\n#sbz92 .poweredby .poweredby--text .poweredby--subiz-logo {\n opacity: 0.7 !important;\n margin-top: -1px !important;\n height: 12px !important;\n}\n#sbz92 .poweredby .poweredby--text:hover {\n color: #333 !important;\n -webkit-text-fill-color: #333 !important;\n}\n#sbz92 .poweredby .poweredby--text:hover .poweredby--subiz-logo {\n opacity: 1 !important;\n}\n#sbz92 .empty-container {\n display: flex !important;\n justify-content: center !important;\n flex-direction: column !important;\n margin-top: 30px !important;\n margin-bottom: 30px !important;\n}\n#sbz92 .empty-desc {\n text-align: center !important;\n margin: 30px !important;\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n}\n#sbz92 .chat-button--white-bg {\n display: none !important;\n z-index: -1 !important;\n}\n#sbz92 .chat-button--white-bg--mask-only {\n background: white !important;\n width: 66px !important;\n height: 66px !important;\n top: 2px !important;\n left: 2px !important;\n position: absolute !important;\n border-radius: 50% !important;\n display: block !important;\n}\n#sbz92 .mobile .chat-button--default {\n width: '@mobile_button.width' !important;\n height: '@mobile_button.height' !important;\n background: '@background' !important;\n border-radius: '@mobile_button.border_radius' !important;\n}\n#sbz92 .mobile .widget-layout {\n bottom: '@mobile_button.margin_y' !important;\n}\n#sbz92 .mobile .widget-layout.widget-layout--left {\n left: '@mobile_button.margin_x' !important;\n right: unset !important;\n}\n#sbz92 .mobile .widget-layout.widget-layout--right {\n right: '@mobile_button.margin_x' !important;\n left: unset !important;\n}\n#sbz92 .mobile .chat-button--img {\n min-width: '@mobile_button.width' !important;\n}\n#sbz92 .chat-button {\n cursor: pointer !important;\n position: relative !important;\n scale: 1 !important;\n transition: opacity 200ms ease-in, scale 250ms cubic-bezier(0.34, 1.5, 0.64, 1) !important;\n}\n#sbz92 .chat-button.hidden {\n visibility: hidden !important;\n opacity: 0 !important;\n scale: 0.2 !important;\n pointer-events: none !important;\n}\n@starting-style {\n #sbz92 .chat-button:not(.hidden) {\n opacity: 0 !important;\n scale: 0.25 !important;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n #sbz92 .chat-button {\n transition: none !important;\n }\n}\n#sbz92 .chat-button:not(.hidden):hover {\n filter: brightness(1.1) !important;\n scale: 1.05 !important;\n}\n#sbz92 .chat-button--img {\n opacity: 0 !important;\n min-width: '@desktop_button.width' !important;\n display: block !important;\n}\n#sbz92 .chat-button.chat-button--left {\n float: left !important;\n}\n#sbz92 .chat-button.chat-button--right {\n float: right !important;\n}\n#sbz92 .widget-layout {\n z-index: '@z_index_2' !important;\n position: '@widget_position' !important;\n bottom: '@desktop_button.margin_y' !important;\n transition: opacity 150ms !important;\n opacity: 1 !important;\n}\n#sbz92 .widget-layout.widget-layout--hidden {\n opacity: 0 !important;\n pointer-events: none !important;\n}\n#sbz92 .widget-layout.widget-layout--left {\n left: '@desktop_button.margin_x' !important;\n right: unset !important;\n}\n#sbz92 .widget-layout.widget-layout--right {\n right: '@desktop_button.margin_x' !important;\n left: unset !important;\n}\n#sbz92 .chat-button--unread {\n position: absolute !important;\n right: 0px !important;\n top: -5px !important;\n background: #dc3545 !important;\n padding-left: 5px !important;\n padding-right: 5px !important;\n padding-top: 2px !important;\n padding-bottom: 2px !important;\n border-radius: 5px !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n}\n#sbz92 .widget-preview {\n z-index: '@z_index_3' !important;\n background: #fff !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n border-radius: 15px !important;\n max-width: 100% !important;\n width: 340px !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .widget-preview.widget-preview--hidden {\n display: none !important;\n}\n#sbz92 .widget-preview--btn-close {\n cursor: pointer !important;\n opacity: 0.5 !important;\n align-self: flex-start !important;\n background-color: #e5e5e5 !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K') !important;\n background-size: 16px 16px !important;\n background-repeat: no-repeat !important;\n background-position: center !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n border-radius: 100% !important;\n transition: background-color 0.2s !important;\n}\n#sbz92 .widget-preview--btn-close:hover {\n opacity: 1 !important;\n}\n#sbz92 .widget-preview--avatar {\n width: 45px !important;\n height: 45px !important;\n border: 1px solid rgba(31, 54, 90, 0.1) !important;\n border-radius: 100% !important;\n margin-right: 15px !important;\n}\n#sbz92 .widget-preview--body {\n display: flex !important;\n padding: 15px !important;\n}\n#sbz92 .widget-preview--title {\n display: block !important;\n font-size: 15px !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n margin-bottom: 5px !important;\n opacity: 0.7 !important;\n}\n#sbz92 .widget-preview--content {\n cursor: pointer !important;\n flex: 1 !important;\n overflow: hidden !important;\n}\n#sbz92 .widget-preview--message {\n white-space: pre-wrap !important;\n word-wrap: break-word !important;\n font-weight: 500 !important;\n font-size: 16px !important;\n display: block !important;\n margin: 0 !important;\n margin-bottom: 0px !important;\n max-height: 78px !important;\n overflow: hidden !important;\n}\n#sbz92 .widget-preview--action {\n border-top: 1px solid #f0f0f0 !important;\n cursor: pointer !important;\n padding: 13px !important;\n}\n#sbz92 .widget-preview--action-text {\n display: block !important;\n text-align: center !important;\n font-weight: 500 !important;\n font-size: 16px !important;\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n margin: 0 !important;\n}\n#sbz92 .widget-internet-status {\n position: absolute !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n font-size: 14px !important;\n z-index: 10 !important;\n text-align: center !important;\n padding: 6px 5px !important;\n}\n#sbz92 .widget-internet-status.negative {\n background-color: #212325 !important;\n color: #fff !important;\n}\n#sbz92 .widget-internet-status.positive {\n background-color: #19b600 !important;\n color: #fff !important;\n}\n#sbz92 .widget-preview-text-message--header {\n display: flex !important;\n overflow: hidden !important;\n align-items: center !important;\n width: 100% !important;\n}\n#sbz92 .widget-preview-text-message--header .widget-preview--avatar {\n width: 24px !important;\n height: 24px !important;\n flex-shrink: 0 !important;\n margin-right: 10px !important;\n}\n#sbz92 .widget-preview-text-message--author {\n flex: 1 !important;\n overflow: hidden !important;\n display: flex !important;\n align-items: center !important;\n}\n#sbz92 .widget-preview-text-message--author .badge {\n margin-left: 10px !important;\n}\n#sbz92 .widget-preview-text-message--author-text {\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n line-height: 1.5 !important;\n color: '@secondary_color' !important;\n -webkit-text-fill-color: '@secondary_color' !important;\n}\n#sbz92 .widget-preview-text-message--content {\n margin-top: 10px !important;\n white-space: pre-wrap !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper {\n z-index: '@z_index_3' !important;\n width: 100% !important;\n margin-bottom: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.right {\n align-items: flex-end !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal {\n flex-direction: row !important;\n flex-wrap: wrap !important;\n align-items: center !important;\n gap: 10px !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal.right {\n justify-content: flex-end !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal.left {\n justify-content: flex-start !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal .widget-preview-quick-reply-item {\n margin: 0 !important;\n max-width: 200px !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n white-space: nowrap !important;\n padding: 6px 15px !important;\n}\n#sbz92 .widget-preview-quick-reply-wrapper.horizontal .widget-preview-quick-reply-item:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .widget-preview-quick-reply-item {\n border-radius: 20px !important;\n padding: 8px 20px !important;\n background: #fff !important;\n border: 1.5px solid !important;\n border-color: '@primary_color' !important;\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n margin-bottom: 15px !important;\n cursor: pointer !important;\n transition: 0.3s ease !important;\n position: relative !important;\n}\n#sbz92 .widget-preview-quick-reply-item:last-child {\n margin-bottom: 0 !important;\n}\n#sbz92 .widget-preview-quick-reply-item:hover {\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n background-color: '@primary_color' !important;\n}\n#sbz92 .widget-preview-image-wrapper {\n z-index: '@z_index_3' !important;\n width: 100% !important;\n margin-bottom: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: flex-start !important;\n}\n#sbz92 .widget-preview-image-wrapper.right {\n align-items: flex-end !important;\n}\n#sbz92 .widget-preview-image-item {\n max-width: 300px !important;\n border-radius: 15px !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n border: 1px solid #dee2e6 !important;\n overflow: hidden !important;\n cursor: pointer !important;\n}\n#sbz92 .widget-preview-image-item img {\n width: 100% !important;\n max-height: 300px !important;\n object-fit: cover !important;\n}\n#sbz92 .widget-preview-text-message {\n z-index: '@z_index_3' !important;\n background: #fff !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n border-radius: 15px !important;\n max-width: 100% !important;\n min-width: 210px !important;\n margin-bottom: 15px !important;\n padding: 15px 20px !important;\n position: relative !important;\n cursor: pointer !important;\n}\n#sbz92 .widget-preview-text-message.right {\n border-bottom-right-radius: 8px !important;\n}\n#sbz92 .widget-preview-text-message.left {\n border-bottom-left-radius: 8px !important;\n}\n#sbz92 .widget-preview-new-wrapper {\n max-width: '@preview_max_width' !important;\n position: relative !important;\n opacity: 1 !important;\n transition: opacity 0.15s ease-in, transform 0.15s ease-in !important;\n transform: translateY(0) !important;\n}\n#sbz92 .widget-preview-new-wrapper.hidden {\n transform: translateY(20px) !important;\n transition: opacity 0.15s ease-out, transform 0.15s ease-out !important;\n opacity: 0 !important;\n}\n#sbz92 .widget-preview-new-wrapper:hover .widget-preview-x-wrapper {\n display: flex !important;\n}\n#sbz92 .widget-preview-x-wrapper {\n display: none !important;\n justify-content: flex-start !important;\n width: calc(100% + 40px) !important;\n position: absolute !important;\n padding: 15px 20px !important;\n left: -20px !important;\n bottom: 100% !important;\n}\n#sbz92 .widget-preview-x-wrapper.mobile {\n display: flex !important;\n}\n#sbz92 .widget-preview-x-wrapper.right {\n justify-content: flex-end !important;\n left: unset !important;\n right: -20px !important;\n}\n#sbz92 .widget-preview-x-wrapper .widget-preview--btn-close {\n opacity: 1 !important;\n width: 32px !important;\n height: 32px !important;\n border: 1px solid #ececec !important;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15) !important;\n background-color: #00000040 !important;\n background-size: 16px 16px !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .widget-preview-x-wrapper .widget-preview--btn-close:hover {\n border-color: #fff !important;\n background-color: #00000066 !important;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K') !important;\n}\n#sbz92 .rating--overlay {\n position: absolute !important;\n height: 100% !important;\n width: 100% !important;\n background: black !important;\n opacity: 0.3 !important;\n top: 0 !important;\n left: 0 !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n z-index: 9 !important;\n}\n#sbz92 .rating {\n border-top-left-radius: 10px !important;\n border-top-right-radius: 10px !important;\n overflow: hidden !important;\n position: absolute !important;\n height: 400px !important;\n max-height: 80% !important;\n width: 100% !important;\n bottom: 0 !important;\n /* centering */\n left: 0 !important;\n background: white !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n z-index: 10 !important;\n}\n#sbz92 .rating .rating--comment {\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n resize: none !important;\n margin-left: 20px !important;\n margin-right: 20px !important;\n border: 2px solid lightgray !important;\n border-radius: 5px !important;\n padding: 10px !important;\n height: 60px !important;\n min-height: 60px !important;\n}\n#sbz92 .rating .rating--close-btn {\n right: 20px !important;\n top: -2px !important;\n width: 22px !important;\n height: 22px !important;\n position: absolute !important;\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23acacac%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C/line%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C/line%3E%3C/svg%3E') !important;\n cursor: pointer !important;\n}\n#sbz92 .rating .rating--close-btn:hover {\n background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-x%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C/line%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C/line%3E%3C/svg%3E') !important;\n}\n#sbz92 .rating .rating--handle:hover .rating--thumb {\n background: #e0e0e0 !important;\n}\n#sbz92 .rating .rating--thumb {\n width: 70px !important;\n height: 6px !important;\n background: #eaeaea !important;\n border-radius: 5px !important;\n margin: 0 auto !important;\n cursor: grabbing !important;\n margin-top: 8px !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .rating .rating--content {\n display: flex !important;\n flex: 1 !important;\n flex-grow: 1 !important;\n height: calc(100% - 40px) !important;\n flex-direction: column !important;\n justify-content: space-between !important;\n}\n#sbz92 .rating .rating--heading {\n margin: 0 !important;\n font-weight: 500 !important;\n font-size: 20px !important;\n line-height: 20px !important;\n text-align: center !important;\n flex-grow: 1 !important;\n position: relative !important;\n}\n#sbz92 .rating .rating--description {\n text-align: center !important;\n flex-grow: 1 !important;\n font-size: 15px !important;\n padding-left: 20px !important;\n padding-right: 20px !important;\n display: flex !important;\n align-items: center !important;\n margin-top: 10px !important;\n margin-bottom: 15px !important;\n}\n#sbz92 .rating .rating-faces-container {\n flex: 5 !important;\n display: flex !important;\n justify-content: space-around !important;\n align-items: center !important;\n margin: 10px 10px !important;\n}\n#sbz92 .rating .rating-face-container {\n padding: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n cursor: pointer !important;\n border-radius: 10px !important;\n user-select: none !important;\n -webkit-transition: all 0.1s !important;\n transition: all 0.1s !important;\n}\n#sbz92 .rating .rating-face-container:hover {\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) !important;\n}\n#sbz92 .rating .rating-face--text {\n margin-top: 10px !important;\n margin-bottom: 0px !important;\n font-size: 13px !important;\n color: #4d4d4d !important;\n -webkit-text-fill-color: #4d4d4d !important;\n}\n#sbz92 .rating .rating-no-thanks {\n flex: 10 !important;\n text-align: center !important;\n cursor: pointer !important;\n display: flex !important;\n justify-content: center !important;\n align-items: flex-end !important;\n color: #acacac !important;\n -webkit-text-fill-color: #acacac !important;\n}\n#sbz92 .rating .rating-no-thanks:hover {\n color: black !important;\n -webkit-text-fill-color: black !important;\n}\n#sbz92 .text__danger {\n color: #dc3545 !important;\n}\n#sbz92 .extension--close-btn {\n background: #00000088 !important;\n border-radius: 8px !important;\n color: #ffffffaa !important;\n -webkit-text-fill-color: #ffffffaa !important;\n right: 10px !important;\n top: -35px !important;\n font-size: 14px !important;\n position: absolute !important;\n padding: 5px 15px !important;\n cursor: pointer !important;\n}\n#sbz92 .extension--close-btn:hover {\n background: #000000 !important;\n color: #ffffff !important;\n -webkit-text-fill-color: #ffffff !important;\n}\n#sbz92 .extension--handle {\n margin-bottom: 10px !important;\n}\n#sbz92 .extension--handle:hover .extension--thumb {\n background: #e0e0e0 !important;\n}\n#sbz92 .extension--thumb {\n width: 70px !important;\n cursor: grabbing !important;\n margin: 0 auto !important;\n height: 6px !important;\n background: #eaeaea !important;\n border-radius: 5px !important;\n flex: 1 !important;\n margin-top: 5px !important;\n}\n#sbz92 .extension {\n border-top-left-radius: 10px !important;\n position: absolute !important;\n border-top-right-radius: 10px !important;\n width: 100% !important;\n bottom: 0 !important;\n /* centering */\n left: 0 !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n display: flex !important;\n flex-direction: column !important;\n background: white !important;\n z-index: 10 !important;\n}\n#sbz92 .extension--overlay {\n position: absolute !important;\n height: 100% !important;\n width: 100% !important;\n background: black !important;\n opacity: 0.3 !important;\n top: 0 !important;\n left: 0 !important;\n border-bottom-left-radius: 15px !important;\n border-bottom-right-radius: 15px !important;\n z-index: 9 !important;\n}\n#sbz92 .order__footer {\n margin-top: 40px !important;\n color: #888 !important;\n -webkit-text-fill-color: #888 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n margin-bottom: 20px !important;\n}\n#sbz92 .order__footer_delimiter {\n width: 1px !important;\n height: 15px !important;\n border-right: 1px solid #bbb !important;\n}\n#sbz92 .order__footer_link {\n padding: 0 10px !important;\n font-size: 14px !important;\n cursor: pointer !important;\n}\n#sbz92 .order__footer_link:hover {\n text-decoration: none !important;\n color: #555 !important;\n -webkit-text-fill-color: #555 !important;\n}\n#sbz92 .desktop.order {\n border-radius: 0 !important;\n width: 780px !important;\n margin: 0 auto !important;\n height: 100% !important;\n}\n#sbz92 .desktop.order .order_section__line {\n display: none !important;\n}\n#sbz92 .desktop.order .desktop_order__heading {\n line-height: 20px !important;\n}\n#sbz92 .desktop.order .order_attachment__product_img {\n width: 50px !important;\n height: 50px !important;\n}\n#sbz92 .desktop.order .order_label {\n font-weight: 500 !important;\n margin-top: 30px !important;\n margin-bottom: 10px !important;\n font-size: 16px !important;\n}\n#sbz92 .desktop.order .order_label:first-child {\n margin-top: 0 !important;\n}\n#sbz92 .desktop.order .order_recap {\n margin-top: 0px !important;\n background: #f4f4f4 !important;\n margin-top: 20px !important;\n width: 270px !important;\n box-shadow: 0 0 0 1px hsla(0, 0%, 69%, 0.2), 0 15px 35px 0 rgba(49, 49, 93, 0.08), 0 5px 15px 0 rgba(0, 0, 0, 0.06) !important;\n border-radius: 6px !important;\n background-color: #fff !important;\n padding: 32px 32px 20px !important;\n}\n#sbz92 .desktop.order .order_acc_header {\n display: flex !important;\n align-items: center !important;\n margin-top: 20px !important;\n}\n#sbz92 .desktop.order .order_acc_logo {\n height: 50px !important;\n}\n#sbz92 .desktop.order .order_acc_name {\n font-size: 16px !important;\n margin-left: 10px !important;\n border-left: 1px solid #aaa !important;\n padding-left: 10px !important;\n}\n#sbz92 .desktop.order .order_summary_line {\n align-items: center !important;\n overflow: hidden !important;\n padding: 5px 0 !important;\n display: flex !important;\n justify-content: space-between !important;\n}\n#sbz92 .desktop_order__content {\n display: flex !important;\n}\n#sbz92 .order {\n width: 100% !important;\n display: flex !important;\n flex-direction: column !important;\n background: white !important;\n z-index: 10 !important;\n}\n#sbz92 .order .ship_card {\n display: flex !important;\n align-items: center !important;\n overflow: hidden !important;\n width: 190px !important;\n cursor: pointer !important;\n padding: 10px 15px !important;\n box-shadow: none !important;\n border: 2px solid #eee !important;\n color: #777 !important;\n -webkit-text-fill-color: #777 !important;\n margin-top: 5px !important;\n border-radius: 8px !important;\n background: white !important;\n transition: all 150ms ease-out !important;\n}\n#sbz92 .order .ship_card:hover {\n color: #555 !important;\n -webkit-text-fill-color: #555 !important;\n border: 2px solid #aaa !important;\n}\n#sbz92 .order .ship_card.ship_card__active {\n color: #333 !important;\n -webkit-text-fill-color: #333 !important;\n border: 2px solid #777 !important;\n background: #fafafa !important;\n}\n#sbz92 .order .order_ship_icon {\n margin-top: -3px !important;\n width: 15px !important;\n height: 15px !important;\n opacity: 0.6 !important;\n}\n#sbz92 .order .card_section {\n margin-top: 20px !important;\n max-width: 500px !important;\n box-shadow: 0 0 0 1px hsla(0, 0%, 69%, 0.2), 0 15px 35px 0 rgba(49, 49, 93, 0.08), 0 5px 15px 0 rgba(0, 0, 0, 0.06) !important;\n border-radius: 6px !important;\n background-color: #fff !important;\n padding: 32px !important;\n}\n#sbz92 .order input[type='text'].form-control,\n#sbz92 .order input[type='number'].form-control,\n#sbz92 .order input[type='date'].form-control,\n#sbz92 .order textarea.form-control,\n#sbz92 .order select.form-control {\n background: #f4f4f4 !important;\n border: 1px solid transparent !important;\n padding: 7px 10px !important;\n}\n#sbz92 .order input[type='text'].form-control:hover,\n#sbz92 .order input[type='number'].form-control:hover,\n#sbz92 .order input[type='date'].form-control:hover,\n#sbz92 .order textarea.form-control:hover,\n#sbz92 .order select.form-control:hover {\n background: #f0f0f0 !important;\n}\n#sbz92 .order input[type='text'].form-control:focus,\n#sbz92 .order input[type='number'].form-control:focus,\n#sbz92 .order input[type='date'].form-control:focus,\n#sbz92 .order textarea.form-control:focus,\n#sbz92 .order select.form-control:focus,\n#sbz92 .order input[type='text'].form-control:active,\n#sbz92 .order input[type='number'].form-control:active,\n#sbz92 .order input[type='date'].form-control:active,\n#sbz92 .order textarea.form-control:active,\n#sbz92 .order select.form-control:active {\n background: #eee !important;\n}\n#sbz92 .order input[type='text'].form-control.err,\n#sbz92 .order input[type='number'].form-control.err,\n#sbz92 .order input[type='date'].form-control.err,\n#sbz92 .order textarea.form-control.err,\n#sbz92 .order select.form-control.err {\n background: #ffe6e6 !important;\n border: 1px solid #ff8a8a !important;\n}\n#sbz92 .order .form {\n box-shadow: none !important;\n border: none !important;\n padding: 0 !important;\n}\n#sbz92 .order .form .radio {\n height: unset !important;\n}\n#sbz92 .order .order--content {\n display: flex !important;\n flex: 1 !important;\n flex-direction: column !important;\n}\n#sbz92 .order .order--content-content {\n flex: 1 !important;\n overflow: auto !important;\n}\n#sbz92 .order .order--heading {\n margin: 0 !important;\n margin-top: 20px !important;\n padding-left: 20px !important;\n padding-right: 20px !important;\n padding-bottom: 8px !important;\n line-height: 20px !important;\n position: relative !important;\n}\n#sbz92 .order .order--header-desc {\n color: #6c757d !important;\n -webkit-text-fill-color: #6c757d !important;\n font-size: 13px !important;\n}\n#sbz92 .order .order__product_line {\n display: flex !important;\n overflow: hidden !important;\n}\n#sbz92 .order .order--footer {\n text-align: k center !important;\n cursor: pointer !important;\n display: flex !important;\n justify-content: center !important;\n align-items: flex-end !important;\n color: #acacac !important;\n -webkit-text-fill-color: #acacac !important;\n}\n#sbz92 .order .order--footer:hover {\n color: black !important;\n -webkit-text-fill-color: black !important;\n}\n#sbz92 .order .order_section_label {\n color: #444 !important;\n -webkit-text-fill-color: #444 !important;\n margin-bottom: 5px !important;\n text-transform: uppercase !important;\n font-size: 13px !important;\n font-weight: 500 !important;\n}\n#sbz92 .order .order_label {\n color: #444 !important;\n -webkit-text-fill-color: #444 !important;\n margin-bottom: 5px !important;\n text-transform: uppercase !important;\n font-size: 13px !important;\n font-weight: 500 !important;\n}\n#sbz92 .order .order_section {\n padding-left: 20px !important;\n padding-right: 20px !important;\n padding-bottom: 15px !important;\n padding-top: 15px !important;\n}\n#sbz92 .order .order_section__line {\n border-top: 4px solid #eee !important;\n width: 100% !important;\n}\n#sbz92 .order .order_summary_line {\n overflow: hidden !important;\n padding: 3px 0 !important;\n display: flex !important;\n justify-content: space-between !important;\n}\n#sbz92 .order .order_btn {\n width: 100% !important;\n}\n#sbz92 .order .order_tracking_link {\n text-decoration: underline !important;\n cursor: pointer !important;\n}\n#sbz92 .order .order_tracking_link:hover {\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n}\n#sbz92 .order .order_tracking_link_icon {\n margin-top: -3px !important;\n width: 15px !important;\n height: 15px !important;\n}\n#sbz92 .order .order_shipping_provider_logo {\n width: 32px !important;\n height: 32px !important;\n margin-right: 10px !important;\n}\n#sbz92 .order .order_btn.order__btn__light {\n background: #f0f0f0 !important;\n color: black !important;\n -webkit-text-fill-color: black !important;\n border-radius: 6px !important;\n text-align: center !important;\n padding: 8px !important;\n cursor: pointer !important;\n}\n#sbz92 .order .order_btn.order__btn__light:hover {\n color: black !important;\n -webkit-text-fill-color: black !important;\n background: #ddd !important;\n}\n#sbz92 div.order__card {\n display: flex !important;\n padding: 15px !important;\n box-shadow: none !important;\n border: 2px solid #eee !important;\n margin-top: 10px !important;\n border-radius: 8px !important;\n background: #fafafa !important;\n}\n#sbz92 div.order__card.order__card__active {\n border: 2px solid #777 !important;\n background: white !important;\n}\n#sbz92 .order_form_label {\n margin-top: 10px !important;\n margin-bottom: 4px !important;\n}\n#sbz92 .btn-confirm-order {\n width: 100% !important;\n background: '@primary_color' !important;\n display: flex !important;\n align-items: center !important;\n border-radius: 5px !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n padding: 15px 10px !important;\n cursor: pointer !important;\n justify-content: center !important;\n font-weight: 500 !important;\n margin-top: 10px !important;\n}\n#sbz92 .btn-confirm-order:hover {\n background: #0053d4 !important;\n}\n#sbz92 .order__total {\n font-weight: 500 !important;\n font-size: 20px !important;\n color: '@primary_color' !important;\n -webkit-text-fill-color: '@primary_color' !important;\n}\n#sbz92 .btn-cancel-order {\n color: #666 !important;\n -webkit-text-fill-color: #666 !important;\n text-decoration: underline !important;\n display: inline-block !important;\n margin-top: 10px !important;\n cursor: pointer !important;\n}\n#sbz92 .btn-cancel-order:hover {\n color: #333 !important;\n -webkit-text-fill-color: #333 !important;\n}\n#sbz92 .order_status {\n text-transform: uppercase !important;\n background: black !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n display: inline-block !important;\n border-radius: 4px !important;\n padding: 6px 6px 4px 6px !important;\n line-height: 1 !important;\n font-weight: 500 !important;\n font-size: 12px !important;\n}\n#sbz92 .order_status.order_status__canceled {\n background: whitesmoke !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .order_status.order_status__cancel {\n background: whitesmoke !important;\n color: #000 !important;\n -webkit-text-fill-color: #000 !important;\n}\n#sbz92 .order_status.order_status__confirmed {\n background: '@primary_color' !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__shipping {\n background: #000 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__fullfilled {\n background: #28a745 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__hold {\n background: #dc3545 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__draft {\n background: #ffc107 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_status.order_status__open {\n background: #ffc107 !important;\n color: white !important;\n -webkit-text-fill-color: white !important;\n}\n#sbz92 .order_error {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n height: 100% !important;\n width: 100% !important;\n}\n#sbz92 .order_attachment__note {\n font-size: 14px !important;\n white-space: pre-wrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n display: -webkit-box !important;\n -webkit-line-clamp: 3 !important;\n -webkit-box-orient: vertical !important;\n}\n#sbz92 .dropdown_select {\n position: absolute !important;\n background: white !important;\n -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;\n border-radius: 5px !important;\n width: 150px !important;\n z-index: 20 !important;\n overflow: hidden !important;\n}\n#sbz92 .dropdown_select__overlay {\n top: 0 !important;\n overflow: hidden !important;\n position: absolute !important;\n background: #000000aa !important;\n z-index: 19 !important;\n left: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n}\n#sbz92 .dropdown_select__item {\n padding: 7px 10px !important;\n cursor: pointer !important;\n}\n#sbz92 .dropdown_select__item:hover {\n background: '@primary_color' !important;\n color: #fff !important;\n -webkit-text-fill-color: #fff !important;\n}\n#sbz92 .dropdown_select_filter {\n padding: 8px 10px !important;\n border-bottom: 1px solid #eee !important;\n position: relative !important;\n}\n#sbz92 .dropdown_select_filter:hover .dropdown_select_filter__icon {\n opacity: 1 !important;\n}\n#sbz92 .dropdown_select_filter_input {\n border-radius: 5px !important;\n width: 100% !important;\n display: block !important;\n background: #f4f4f4 !important;\n border: none !important;\n padding: 7px 10px !important;\n padding-left: 35px !important;\n}\n#sbz92 .dropdown_select_filter_input:hover {\n background: #f0f0f0 !important;\n}\n#sbz92 .dropdown_select_filter_input:focus,\n#sbz92 .dropdown_select_filter_input:active {\n background: #eee !important;\n}\n#sbz92 .dropdown_select_input {\n border-radius: 5px !important;\n overflow: hidden !important;\n cursor: pointer !important;\n flex-wrap: nowrap !important;\n display: flex !important;\n background: #f4f4f4 !important;\n border: 1px solid trasparent !important;\n padding: 7px 10px !important;\n height: 32px !important;\n min-width: 120px !important;\n width: 100% !important;\n}\n#sbz92 .dropdown_select_input:hover {\n background: #f0f0f0 !important;\n}\n#sbz92 .dropdown_select_input:focus,\n#sbz92 .dropdown_select_input:active {\n background: #eee !important;\n}\n#sbz92 .dropdown_select_input.err {\n background: #ffe6e6 !important;\n border: 1px solid #ff8a8a !important;\n}\n#sbz92 .dropdown_select__items {\n max-height: 300px !important;\n min-height: 100px !important;\n overflow-x: hidden !important;\n overflow-y: auto !important;\n}\n#sbz92 .dropdown_select_filter__icon {\n width: 22px !important;\n height: 15px !important;\n position: absolute !important;\n z-index: 2 !important;\n top: 15px !important;\n left: 18px !important;\n border-right: 1px solid #aaa !important;\n padding-right: 7px !important;\n opacity: 0.5 !important;\n}\n#sbz92 .dropdown_select_filter__empty {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n flex-direction: column !important;\n}\n#sbz92 .dropdown_select_filter__empty_img {\n height: 50px !important;\n margin-top: 10px !important;\n margin-bottom: 10px !important;\n}\n#sbz92 .dropdown_select__caret {\n width: 14px !important;\n margin-top: 3px !important;\n opacity: 0.6 !important;\n height: 15px !important;\n}\ndiv#sbz92 {\n all: initial;\n}\nbody div#sbz92 {\n all: initial !important;\n}\n", ""]);
3703
3762
  // Exports
3704
3763
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
3705
3764
 
@@ -4497,7 +4556,6 @@ let trackResponseFn = (param, done) => {
4497
4556
  };
4498
4557
  /* harmony default export */ const api = { default: (class {
4499
4558
  constructor(ApiURL, FileURL) {
4500
- _defineProperty(this, "sendBugReport", str => this.bugReq.post('/bugs', str));
4501
4559
  _defineProperty(this, "listConversations", _ => this.apireq.addQuery('user_id', this.uid).addQuery('integration_id', `${this.accid}.subizv4.subikon`).get(`/accounts/${this.accid}/conversations`));
4502
4560
  _defineProperty(this, "listMessages", (cid, limit, start_id) => this.apireq.addQuery('limit', limit).addQuery('start_id', start_id).get(`/accounts/${this.accid}/conversations/${cid}/messages`));
4503
4561
  _defineProperty(this, "ajax", api_ajax);
@@ -4667,7 +4725,6 @@ let trackResponseFn = (param, done) => {
4667
4725
  this.refreshLock = new util/* default */.A.Mutex();
4668
4726
  this.FileURL = FileURL;
4669
4727
  this.ApiURL = ApiURL;
4670
- this.bugReq = api_ajax.setBaseUrl('https://api5.subiz.com.vn/4.1').setContentType('text/plain');
4671
4728
  this.api41 = api_ajax.setBaseUrl('https://api.sbz.vn/4.1').withCredentials(true).setContentType('text/plain').beforeHook(jsonifyTextPlain).afterHook(trackResponseFn).beforeHook(trackRequestFn).setParser('json');
4672
4729
  this.apireq = api_ajax.setBaseUrl(ApiURL).withCredentials(true).addQuery('v', '6').setContentType('text/plain').beforeHook(jsonifyTextPlain).afterHook(trackResponseFn).setParser('json').beforeHook(trackRequestFn).beforeHook((param, done) => {
4673
4730
  if (this.token_generator) {
@@ -4908,7 +4965,7 @@ const LIMIT = 80;
4908
4965
  }) }.default;
4909
4966
  function lsdb_toString(obj) {
4910
4967
  if (obj === undefined) return 'null';
4911
- return JSON.stringify(obj);
4968
+ return util/* default */.A.stringify(obj);
4912
4969
  }
4913
4970
  ;// ./src/store/chain.js
4914
4971
  const ChainMaxSize = 50;
@@ -5011,6 +5068,20 @@ class Chain {
5011
5068
  this.cache[chain] = inmemItemM;
5012
5069
  return {};
5013
5070
  }
5071
+ merge(chain, items) {
5072
+ if (this.dead) return;
5073
+ const cached = this.cache[chain] || {};
5074
+ for (const item of items) {
5075
+ const node = {
5076
+ ...item,
5077
+ chain,
5078
+ full_id: chain + ':' + item.id
5079
+ };
5080
+ cached[item.id] = node;
5081
+ this.db.put('items', node.full_id, node);
5082
+ }
5083
+ this.cache[chain] = cached;
5084
+ }
5014
5085
  del(chain, id) {
5015
5086
  if (this.dead) return;
5016
5087
  let inmemItemM = this.cache[chain] || {};
@@ -5023,7 +5094,7 @@ class Chain {
5023
5094
  }
5024
5095
  async reload(chain, api) {
5025
5096
  if (this.dead) return;
5026
- let top = maxIndex(this.listM(chain)) || {};
5097
+ let top = maxIndex(this.cache[chain] || {}) || {};
5027
5098
  let topindex = top.index;
5028
5099
  if (!topindex) topindex = Date.now();
5029
5100
  var lastanchor = '';
@@ -5040,7 +5111,12 @@ class Chain {
5040
5111
  });
5041
5112
  });
5042
5113
  if (newItems.length === 0 || newanchor === lastanchor) break;
5043
- if (fetchedItems.length >= 200) {
5114
+ let minindexitem = minIndex(fetchedItems) || {};
5115
+ if (minindexitem.index <= topindex) {
5116
+ lastanchor = this.anchorCache[chain] || newanchor;
5117
+ break;
5118
+ }
5119
+ if (size(fetchedItems) >= 200) {
5044
5120
  let inmemItemM = this.cache[chain] || {};
5045
5121
  let removeids = [];
5046
5122
  map(inmemItemM, item => {
@@ -5049,17 +5125,12 @@ class Chain {
5049
5125
  });
5050
5126
  this.db.removes('items', removeids);
5051
5127
  this.cache[chain] = {};
5052
- break;
5053
- }
5054
- let minindexitem = minIndex(fetchedItems) || {};
5055
- if (minindexitem.index <= topindex) {
5056
- lastanchor = this.anchorCache[chain] || newanchor;
5128
+ lastanchor = newanchor;
5057
5129
  break;
5058
5130
  }
5059
5131
  lastanchor = newanchor;
5060
5132
  }
5061
- for (var i = 0; i < Object.keys(fetchedItems).length; i++) {
5062
- let item = fetchedItems[Object.keys(fetchedItems)[i]];
5133
+ for (const item of Object.values(fetchedItems)) {
5063
5134
  this.db.put('items', item.full_id, item);
5064
5135
  this.cache[item.chain] = this.cache[item.chain] || {};
5065
5136
  this.cache[item.chain][item.id] = item;
@@ -5095,7 +5166,7 @@ function maxIndex(obj) {
5095
5166
  maxKey = keys[i];
5096
5167
  }
5097
5168
  }
5098
- return obj[keys[maxKey]];
5169
+ return obj[maxKey];
5099
5170
  }
5100
5171
  function map(collection, predicate) {
5101
5172
  if (!collection) return [];
@@ -5161,21 +5232,16 @@ let KvMaxSize = 500;
5161
5232
  inmemItemM[item.key] = item.value;
5162
5233
  });
5163
5234
  this.cache = inmemItemM;
5164
- let allkeys = Object.keys(this.cache);
5165
- if (allkeys.length > KvMaxSize) {
5166
- let liveChance = KvMaxSize / 2 / allkeys.lenth;
5167
- let removekeys = [];
5168
- for (var i = 0; i < KvMaxSize; i++) {
5169
- let live = Math.random() <= liveChance;
5170
- if (live) continue;
5171
- let key = allkeys[i];
5172
- delete this.cache[key];
5173
- removekeys.push(key);
5174
- }
5175
- this.db.removes('items', [removekeys]);
5176
- }
5235
+ this.trimCache();
5177
5236
  this.initialized = true;
5178
5237
  }
5238
+ trimCache() {
5239
+ const keys = Object.keys(this.cache);
5240
+ if (keys.length <= KvMaxSize) return;
5241
+ const removed = keys.slice(0, keys.length - Math.floor(KvMaxSize / 2));
5242
+ for (const key of removed) delete this.cache[key];
5243
+ this.db.removes('items', removed);
5244
+ }
5179
5245
  all() {
5180
5246
  if (this.dead) return [];
5181
5247
  if (!this.initialized) return [];
@@ -5195,6 +5261,7 @@ let KvMaxSize = 500;
5195
5261
  key,
5196
5262
  value
5197
5263
  });
5264
+ this.trimCache();
5198
5265
  }
5199
5266
  del(key) {
5200
5267
  if (this.dead) return;
@@ -5448,6 +5515,7 @@ function makeFakeMessages(accid, convoid, userid, agentid) {
5448
5515
  }
5449
5516
  }, {
5450
5517
  id: 'evqyiyjmzatvtgpdmmpzwnwgn',
5518
+ source_event_id: 'wrueysyjbhqrkiwhsejpqrwqrdkkyaibajdw',
5451
5519
  account_id: accid,
5452
5520
  created: 1616213202685,
5453
5521
  type: 'message_sent',
@@ -5461,7 +5529,6 @@ function makeFakeMessages(accid, convoid, userid, agentid) {
5461
5529
  conversation_id: convoid,
5462
5530
  text: 'Xin chào',
5463
5531
  format: 'plaintext',
5464
- idempotency_key: 'wrueysyjbhqrkiwhsejpqrwqrdkkyaibajdw',
5465
5532
  integration_id: inteid,
5466
5533
  pongs: [{
5467
5534
  member_id: userid,
@@ -5598,6 +5665,29 @@ function makeFakeMessages(accid, convoid, userid, agentid) {
5598
5665
  }
5599
5666
  reconnect() {}
5600
5667
  }) }.default;
5668
+ ;// ./src/store/attachments.js
5669
+ async function uploadAttachments(attachments, upload) {
5670
+ let error, errorMessage;
5671
+ for (const attachment of attachments) {
5672
+ try {
5673
+ const result = await upload(attachment._file);
5674
+ if (result.body && result.body.code === 'invalid_field_size') {
5675
+ errorMessage = 'cannot_send_too_big_file';
5676
+ }
5677
+ if (result.error || !result.url) {
5678
+ error = error || result.error || 'upload_failed';
5679
+ continue;
5680
+ }
5681
+ attachment.url = result.url;
5682
+ } catch (err) {
5683
+ error = error || err;
5684
+ }
5685
+ }
5686
+ return {
5687
+ error,
5688
+ errorMessage
5689
+ };
5690
+ }
5601
5691
  ;// ./src/store/store.js
5602
5692
  function store_defineProperty(e, r, t) { return (r = store_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
5603
5693
  function store_toPropertyKey(t) { var i = store_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -5610,6 +5700,7 @@ var store_flow = (flow_namespaceFn());
5610
5700
 
5611
5701
 
5612
5702
 
5703
+
5613
5704
  var Realtime = (realtime_namespaceFn());
5614
5705
  var cookie = (cookie_umd_namespaceFn());
5615
5706
  cookie.defaults.path = '/';
@@ -5618,7 +5709,6 @@ cookie.defaults.expires = 3650;
5618
5709
  let store_memlocalStorage = (inmem_localstorage_namespaceFn());
5619
5710
  const MAX_CONVO = 20;
5620
5711
  const page_loaded = util/* default */.A.Date.now();
5621
- const DEBUG_ACCOUNT_IDS = ['acqsulrowbxiugvginhw', 'acryguzgwxmamhzmqlyx'];
5622
5712
  class Store {
5623
5713
  constructor(ApiURL, FileURL, RealtimeURL, inmem, fakeapi) {
5624
5714
  store_defineProperty(this, "inmem", false);
@@ -5689,14 +5779,23 @@ class Store {
5689
5779
  if (this._die) return dieErr;
5690
5780
  await this.readyGate.entry();
5691
5781
  await this.reconnectGate.entry(undefined, true);
5692
- if (this.isInsync(cid)) return this.reconnectGate.open();
5693
- this.markSync(cid);
5694
- let {
5695
- body: convo,
5696
- error
5697
- } = await this.api.getConversation(cid);
5698
- if (convo && !error) this._setConvo(convo);
5699
- return this.reconnectGate.open();
5782
+ try {
5783
+ if (this._die || this.isInsync(cid)) return;
5784
+ this.convoFetchAfter = this.convoFetchAfter || {};
5785
+ if (util/* default */.A.Date.now() < (this.convoFetchAfter[cid] || 0)) return;
5786
+ this.convoFetchAfter[cid] = util/* default */.A.Date.now() + 15_000;
5787
+ let {
5788
+ body: convo,
5789
+ error
5790
+ } = await this.api.getConversation(cid);
5791
+ if (convo && !error) this._setConvo(convo);
5792
+ } catch (error) {
5793
+ return {
5794
+ error
5795
+ };
5796
+ } finally {
5797
+ this.reconnectGate.open();
5798
+ }
5700
5799
  });
5701
5800
  store_defineProperty(this, "list_provinces", () => this.api.list_provinces());
5702
5801
  store_defineProperty(this, "list_districts", p => this.api.list_districts(p));
@@ -5707,25 +5806,48 @@ class Store {
5707
5806
  if (id.startsWith('cslight')) return util/* default */.A.get(this.lightConvos, [id, 'events'], []);
5708
5807
  return this.chain.listM(id);
5709
5808
  });
5710
- store_defineProperty(this, "fetchMoreEvents", async convoid => {
5711
- if (!convoid) return;
5712
- if (convoid.startsWith('cslight')) return [[], ''];
5713
- if (!this.isInsync('events' + convoid)) {
5714
- await this.readyGate.entry();
5715
- await this.reconnectGate.entry(undefined, true);
5716
- if (this.isInsync('events' + convoid)) {
5717
- this.reconnectGate.open();
5718
- return {};
5809
+ store_defineProperty(this, "fetchMoreEvents", (cid, limit = 150) => {
5810
+ this.historyRequests = this.historyRequests || new Map();
5811
+ if (this.historyRequests.has(cid)) return this.historyRequests.get(cid);
5812
+ this.historyFailures = this.historyFailures || {};
5813
+ const failure = this.historyFailures[cid];
5814
+ if (failure && util/* default */.A.Date.now() < failure.retryAt) return Promise.resolve({
5815
+ error: failure.error
5816
+ });
5817
+ const request = this._fetchMoreEvents(cid, limit).then(result => {
5818
+ if (result.error) this.historyFailures[cid] = {
5819
+ error: result.error,
5820
+ retryAt: util/* default */.A.Date.now() + 15_000
5821
+ };else delete this.historyFailures[cid];
5822
+ return result;
5823
+ }).finally(() => {
5824
+ if (this.historyRequests.get(cid) === request) this.historyRequests.delete(cid);
5825
+ });
5826
+ this.historyRequests.set(cid, request);
5827
+ return request;
5828
+ });
5829
+ store_defineProperty(this, "syncConvoEvents", cid => {
5830
+ if (this._die || !cid || cid.startsWith('cslight')) return Promise.resolve({});
5831
+ this.messageSyncRequests = this.messageSyncRequests || new Map();
5832
+ if (this.messageSyncRequests.has(cid)) return this.messageSyncRequests.get(cid);
5833
+ this.messageSyncNextAt = this.messageSyncNextAt || {};
5834
+ if (util/* default */.A.Date.now() < (this.messageSyncNextAt[cid] || 0)) return Promise.resolve({
5835
+ skipped: true
5836
+ });
5837
+ const chain = this.chain;
5838
+ const request = this._syncConvoEvents(cid, chain).then(result => {
5839
+ if (chain === this.chain && !this._die) {
5840
+ this.messageSyncFailures = this.messageSyncFailures || {};
5841
+ const failures = result.error ? Math.min((this.messageSyncFailures[cid] || 0) + 1, 4) : 0;
5842
+ this.messageSyncFailures[cid] = failures;
5843
+ this.messageSyncNextAt[cid] = util/* default */.A.Date.now() + (failures ? 15_000 * 2 ** (failures - 1) : 15_000);
5719
5844
  }
5720
- this.markSync('events' + convoid);
5721
- await this.chain.reload(convoid, () => {
5722
- return [[], ''];
5723
- });
5724
- let out = await this._doFetchMsg(convoid);
5725
- this.reconnectGate.open();
5726
- return out;
5727
- }
5728
- return this._doFetchMsg(convoid);
5845
+ return result;
5846
+ }).finally(() => {
5847
+ if (this.messageSyncRequests.get(cid) === request) this.messageSyncRequests.delete(cid);
5848
+ });
5849
+ this.messageSyncRequests.set(cid, request);
5850
+ return request;
5729
5851
  });
5730
5852
  store_defineProperty(this, "reloadConvoEvents", async convoid => {
5731
5853
  await this.chain.reload(convoid, () => {
@@ -5742,10 +5864,10 @@ class Store {
5742
5864
  error
5743
5865
  };
5744
5866
  });
5745
- store_defineProperty(this, "_doFetchMsg", async convoid => {
5867
+ store_defineProperty(this, "_doFetchMsg", async (convoid, limit = 150) => {
5746
5868
  let {
5747
5869
  error
5748
- } = await this.chain.fetchMore(convoid, 150, async (type, anchor, limit) => {
5870
+ } = await this.chain.fetchMore(convoid, limit, async (type, anchor, limit) => {
5749
5871
  if (this.outofmsgM[convoid]) return [[], ''];
5750
5872
  let [events, newanchor, error, outofmsg] = await this.listmessageapi(type, anchor, limit);
5751
5873
  if (outofmsg) this.outofmsgM[convoid] = true;
@@ -5784,17 +5906,6 @@ class Store {
5784
5906
  store_defineProperty(this, "now", () => util/* default */.A.Date.now() + this.timeDiff);
5785
5907
  store_defineProperty(this, "seenQueue", []);
5786
5908
  store_defineProperty(this, "matchTrafficSource", () => this.kv.match('traffic_source'));
5787
- store_defineProperty(this, "sendBugReport", str => this.api.sendBugReport(str));
5788
- store_defineProperty(this, "matchDebugAccountIds", () => DEBUG_ACCOUNT_IDS);
5789
- store_defineProperty(this, "sbzListConversations", () => {
5790
- return this.api.listConversations();
5791
- });
5792
- store_defineProperty(this, "sbzListMessages", cid => {
5793
- return this.api.listMessages(cid, 100, '');
5794
- });
5795
- store_defineProperty(this, "listAgentRealtimeMessageSent", () => {
5796
- return this.agent_rt_message_sent_dict;
5797
- });
5798
5909
  store_defineProperty(this, "_alreadyReceived", {});
5799
5910
  store_defineProperty(this, "_typing", util/* default */.A.throttle(convoid => this.api.sendTyping(convoid), 3000, {
5800
5911
  trailing: false
@@ -5830,7 +5941,6 @@ class Store {
5830
5941
  this.CONNECTION_CHECK_INTERVAL = 3000;
5831
5942
  this.reconnectTimestamp = 0;
5832
5943
  this.g_sync = {};
5833
- this.agent_rt_message_sent_dict = {};
5834
5944
  this._die = false;
5835
5945
  this.forceDevice = null;
5836
5946
  this.forcePlugins = {};
@@ -5862,15 +5972,22 @@ class Store {
5862
5972
  this.getLocaleContent = this.api.getLocaleContent;
5863
5973
  this.g_haveSentSeenM = {};
5864
5974
  this.last_focused = this.now();
5865
- window.addEventListener('blur', () => {
5975
+ this._onBlur = () => {
5976
+ if (this._die) return;
5866
5977
  this.last_focused = this.now();
5867
5978
  this.sendPresence();
5868
- });
5869
- window.addEventListener('focus', () => {
5979
+ };
5980
+ this._onFocus = () => {
5981
+ if (this._die) return;
5870
5982
  this.last_focused = 0;
5871
5983
  this.sendPresence();
5872
- });
5873
- window.addEventListener('beforeunload', () => this.api.sendLostFocus());
5984
+ };
5985
+ this._onBeforeUnload = () => {
5986
+ if (!this._die) this.api.sendLostFocus();
5987
+ };
5988
+ window.addEventListener('blur', this._onBlur);
5989
+ window.addEventListener('focus', this._onFocus);
5990
+ window.addEventListener('beforeunload', this._onBeforeUnload);
5874
5991
  this._lastPresenceURL = window.location.href;
5875
5992
  this._urlCheckInterval = util/* default */.A.setInterval(() => {
5876
5993
  if (this._die) return util/* default */.A.clearInterval(this._urlCheckInterval);
@@ -5897,19 +6014,20 @@ class Store {
5897
6014
  }
5898
6015
  this.sendPresence();
5899
6016
  }, 60000);
5900
- onVisibilityChange(val => {
6017
+ this._visibilityCleanup = onVisibilityChange(val => {
5901
6018
  if (this._die) return;
5902
6019
  this.browserVisibility = val;
5903
6020
  this.sendPresence();
5904
6021
  });
5905
6022
  this.loopTime();
5906
6023
  this.device = this.getDeviceInfo();
5907
- const _gaInterval = util/* default */.A.setInterval(() => {
6024
+ this._gaInterval = util/* default */.A.setInterval(() => {
6025
+ if (this._die) return;
5908
6026
  let user = this.cache.match('user') || {};
5909
6027
  if (!user.id) return;
5910
6028
  var dev = this.getDeviceInfo();
5911
6029
  if (!dev.ga_tracking_ids || !dev.ga_client_id) return;
5912
- util/* default */.A.clearInterval(_gaInterval);
6030
+ util/* default */.A.clearInterval(this._gaInterval);
5913
6031
  this.device = dev;
5914
6032
  let ga_client_id = dev.ga_client_id;
5915
6033
  if (ga_client_id !== util/* default */.A.getUserAttr(user, 'ga_client_id', 'text')) {
@@ -5937,8 +6055,28 @@ class Store {
5937
6055
  console.log('publish connectionStatus', this.connectionStatus);
5938
6056
  this.pubsub.publish('connection');
5939
6057
  }
6058
+ if (this.connectionStatus === 'active' && (this._needsMessageSync || currentStatus !== 'active')) {
6059
+ this._needsMessageSync = false;
6060
+ this.syncKnownConvoEvents();
6061
+ }
5940
6062
  }
5941
6063
  }
6064
+ syncKnownConvoEvents() {
6065
+ if (this._die) return Promise.resolve();
6066
+ if (this.knownConvoSyncRequest) return this.knownConvoSyncRequest;
6067
+ const chain = this.chain;
6068
+ const request = (async () => {
6069
+ const convos = util/* default */.A.filter(this.cache.all(), (value, key) => key.startsWith('convo_'));
6070
+ for (const convo of convos) {
6071
+ if (this._die || chain !== this.chain) break;
6072
+ await this.syncConvoEvents(convo.id);
6073
+ }
6074
+ })().finally(() => {
6075
+ if (this.knownConvoSyncRequest === request) this.knownConvoSyncRequest = null;
6076
+ });
6077
+ this.knownConvoSyncRequest = request;
6078
+ return request;
6079
+ }
5942
6080
  linkProduct(p) {
5943
6081
  if (!p) {
5944
6082
  this._currentViewingProduct = {};
@@ -6082,7 +6220,90 @@ class Store {
6082
6220
  async _touchAcc() {
6083
6221
  if (this.isInsync('account')) return;
6084
6222
  await this.readyGate.entry();
6085
- if (!this.isInsync('account')) this.reconnect();
6223
+ if (!this.isInsync('account')) this.refreshAccount();
6224
+ }
6225
+ refreshAccount() {
6226
+ if (this._die || util/* default */.A.Date.now() < (this.accountRefreshAfter || 0)) return;
6227
+ this.accountRefreshAfter = util/* default */.A.Date.now() + 30_000;
6228
+ return this.reconnect();
6229
+ }
6230
+ async _fetchMoreEvents(convoid, limit = 150) {
6231
+ if (!convoid || convoid.startsWith('cslight')) return {};
6232
+ await this.readyGate.entry();
6233
+ await this.reconnectGate.entry(undefined, true);
6234
+ try {
6235
+ if (this._die) return dieErr;
6236
+ const refresh = !this.isInsync('events' + convoid);
6237
+ if (refresh) {
6238
+ this.chain.anchorCache[convoid] = '';
6239
+ delete this.outofmsgM[convoid];
6240
+ }
6241
+ const out = await this._doFetchMsg(convoid, limit);
6242
+ if (!out.error) this.markSync('events' + convoid);
6243
+ return out;
6244
+ } catch (error) {
6245
+ return {
6246
+ error
6247
+ };
6248
+ } finally {
6249
+ this.reconnectGate.open();
6250
+ }
6251
+ }
6252
+ async _syncConvoEvents(cid, chain) {
6253
+ await this.readyGate.entry();
6254
+ await this.reconnectGate.entry(undefined, true);
6255
+ try {
6256
+ if (this._die || chain !== this.chain) return dieErr;
6257
+ this.messageSyncTimes = this.messageSyncTimes || {};
6258
+ this.messageSyncProgress = this.messageSyncProgress || {};
6259
+ let progress = this.messageSyncProgress[cid];
6260
+ if (!progress) {
6261
+ const cached = Object.values(chain.listM(cid));
6262
+ const boundary = this.messageSyncTimes[cid] || cached.reduce((min, ev) => Math.min(min, util/* default */.A.getMs(ev.created)), Infinity);
6263
+ progress = this.messageSyncProgress[cid] = {
6264
+ boundary,
6265
+ anchor: '',
6266
+ newest: 0,
6267
+ visited: new Set()
6268
+ };
6269
+ }
6270
+ for (let page = 0; page < 5; page++) {
6271
+ const wait = (this.nextMessageSyncRequestAt || 0) - util/* default */.A.Date.now();
6272
+ if (wait > 0) await util/* default */.A.sleep(wait);
6273
+ if (this._die || chain !== this.chain) return dieErr;
6274
+ this.nextMessageSyncRequestAt = util/* default */.A.Date.now() + 250;
6275
+ const [items, next, error, end] = await this.listmessageapi(cid, progress.anchor, 150);
6276
+ if (this._die || chain !== this.chain) return dieErr;
6277
+ if (error) return {
6278
+ error
6279
+ };
6280
+ chain.merge(cid, items);
6281
+ for (const item of items) progress.newest = Math.max(progress.newest, item.index);
6282
+ this.pubsub.publish('account');
6283
+ if (end || !items.length || items.some(item => item.index < progress.boundary)) {
6284
+ if (progress.newest) this.messageSyncTimes[cid] = progress.newest;
6285
+ delete this.messageSyncProgress[cid];
6286
+ return {};
6287
+ }
6288
+ progress.visited.add(progress.anchor);
6289
+ if (!next || progress.visited.has(next)) {
6290
+ delete this.messageSyncProgress[cid];
6291
+ return {
6292
+ error: 'message_cursor_stalled'
6293
+ };
6294
+ }
6295
+ progress.anchor = next;
6296
+ }
6297
+ return {
6298
+ pending: true
6299
+ };
6300
+ } catch (error) {
6301
+ return {
6302
+ error
6303
+ };
6304
+ } finally {
6305
+ this.reconnectGate.open();
6306
+ }
6086
6307
  }
6087
6308
  async init(accid, mask, userRef, options) {
6088
6309
  this.g_sync = {};
@@ -6163,7 +6384,6 @@ class Store {
6163
6384
  }
6164
6385
  async _initResource(accid, auth, realtimep) {
6165
6386
  this.g_sync = {};
6166
- this._current_acc_id = accid;
6167
6387
  let user = await this.api.setAuth(auth);
6168
6388
  if (typeof sbz_info != 'undefined') sbz_info.store_7 = true;
6169
6389
  if (user.error) {
@@ -6175,6 +6395,7 @@ class Store {
6175
6395
  let lightConvos = this.kv.match('light_convos') || {};
6176
6396
  this.lightConvos = {};
6177
6397
  util/* default */.A.map(lightConvos, convo => {
6398
+ if (convo.light_type === 'widget' && (convo.account_id !== accid || convo.initial_by !== user.id)) return;
6178
6399
  let in7Day = convo.created > util/* default */.A.Date.now() - 7 * 24 * 3_600_000;
6179
6400
  let events = util/* default */.A.filter(convo.events, ev => ev.type === 'message_sent');
6180
6401
  let messages = util/* default */.A.map(events, ev => util/* default */.A.get(ev, 'data.message') || {});
@@ -6188,8 +6409,10 @@ class Store {
6188
6409
  if (this.fake) this.realtime = new realtime_fake();else this.realtime = new Realtime(this.RealtimeURL, realtimep, xhrsend, accid);
6189
6410
  this.realtime.onEvent(this.onWs.bind(this));
6190
6411
  this.realtime.onInterrupted(async () => {
6412
+ if (this._die) return;
6413
+ this._needsMessageSync = true;
6191
6414
  await this.reconnectWs(accid, user.id);
6192
- this.reconnect();
6415
+ await this.refreshAccount();
6193
6416
  });
6194
6417
  if (typeof sbz_info != 'undefined') sbz_info.store_8 = true;
6195
6418
  this.seenLoop();
@@ -6237,7 +6460,7 @@ class Store {
6237
6460
  var lastmsgsent = events[util/* default */.A.size(events) - 1];
6238
6461
  if (!lastmsgsent) return;
6239
6462
  if (this.g_haveSentSeenM[lastmsgsent.id]) return;
6240
- if (lastmsgsent.id === lastmsgsent.data.message.idempotency_key) return;
6463
+ if (lastmsgsent.id === lastmsgsent.source_event_id) return;
6241
6464
  this.pubsub.publish('events', {
6242
6465
  created: this.now(),
6243
6466
  type: 'message_pong',
@@ -6279,34 +6502,52 @@ class Store {
6279
6502
  await this.realtime.subscribe([`conversation_state_updated.account.${accid}.user.${userid}`, `conversation_joined.account.${accid}.user.${userid}`, `conversation_typing.account.${accid}.user.${userid}`, `message_sent.account.${accid}.user.${userid}`, `message_pong.account.${accid}.user.${userid}`, `conversation_rating_requested.account.${accid}.user.${userid}`, `conversation_rated.account.${accid}.user.${userid}`, `conversation_events.account.${accid}.user.${userid}`]);
6280
6503
  await this.readyGate.entry();
6281
6504
  }
6282
- async reconnect(p) {
6505
+ reconnect(p) {
6506
+ if (this.reconnectRequest) return this.reconnectRequest;
6507
+ const request = this._reconnect(p).finally(() => {
6508
+ if (this.reconnectRequest === request) this.reconnectRequest = null;
6509
+ });
6510
+ this.reconnectRequest = request;
6511
+ return request;
6512
+ }
6513
+ async _reconnect(p) {
6283
6514
  if (this._die) return;
6284
6515
  await this.reconnectGate.entry(undefined, true);
6285
- this.markSync('account');
6286
- let fetchuser = p && p.user ? Promise.resolve({
6287
- body: p.user
6288
- }) : this.api.getUser();
6289
- let outs = await Promise.all([fetchuser, this.api.getAccountSetting({
6290
- bot_id: this.forceBotId
6291
- })]);
6292
- let error = util/* default */.A.find(outs, out => out.error);
6293
- if (error) return console.error(error);
6294
- let set = outs[1].body;
6295
- set.user = outs[0].body;
6296
- await this._setSetting(set);
6297
- let convob = await this.api.listConversations();
6298
- error = convob.error;
6299
- let body = convob.body;
6300
- if (!error) {
6301
- let convos = util/* default */.A.get(body, 'conversations', []);
6302
- util/* default */.A.map(this.cache.all(), (value, k) => {
6303
- if (k.startsWith('convo_')) {
6304
- if (this.now() - util/* default */.A.getMs(util/* default */.A.get(value, 'actived')) > 1209600000) this.cache.del(k);
6305
- }
6306
- });
6307
- util/* default */.A.map(convos, convo => this._setConvo(convo));
6516
+ try {
6517
+ let fetchuser = p && p.user ? Promise.resolve({
6518
+ body: p.user
6519
+ }) : this.api.getUser();
6520
+ let outs = await Promise.all([fetchuser, this.api.getAccountSetting({
6521
+ bot_id: this.forceBotId
6522
+ })]);
6523
+ let error = util/* default */.A.find(outs, out => out.error);
6524
+ if (error) return error;
6525
+ let set = outs[1].body;
6526
+ set.user = outs[0].body;
6527
+ await this._setSetting(set);
6528
+ let convob = await this.api.listConversations();
6529
+ error = convob.error;
6530
+ let body = convob.body;
6531
+ if (!error) {
6532
+ let convos = util/* default */.A.get(body, 'conversations', []);
6533
+ util/* default */.A.map(this.cache.all(), (value, k) => {
6534
+ if (k.startsWith('convo_')) {
6535
+ if (this.now() - util/* default */.A.getMs(util/* default */.A.get(value, 'actived')) > 1209600000) this.cache.del(k);
6536
+ }
6537
+ });
6538
+ util/* default */.A.map(convos, convo => this._setConvo(convo));
6539
+ }
6540
+ if (error) return {
6541
+ error
6542
+ };
6543
+ this.markSync('account');
6544
+ } catch (error) {
6545
+ return {
6546
+ error
6547
+ };
6548
+ } finally {
6549
+ this.reconnectGate.open();
6308
6550
  }
6309
- return this.reconnectGate.open();
6310
6551
  }
6311
6552
  async submitForm(formid, data, user) {
6312
6553
  await this.readyGate.entry();
@@ -6420,20 +6661,19 @@ class Store {
6420
6661
  return this.api.sendEvent(e);
6421
6662
  }
6422
6663
  async onWs(ev) {
6423
- await this.wsGate.entry();
6424
- this.wsGate.close();
6425
- await this._onWs(ev);
6426
- this.wsGate.open();
6427
- }
6428
- handleLogCompare(ev) {
6429
- if (!DEBUG_ACCOUNT_IDS.includes(this._current_acc_id)) return;
6430
- if (ev.type !== 'message_sent') return;
6431
- let byType = util/* default */.A.get(ev, 'by.type');
6432
- if (byType === 'user') return;
6433
- this.agent_rt_message_sent_dict[ev.id] = ev;
6664
+ await this.wsGate.entry(undefined, true);
6665
+ try {
6666
+ await this._onWs(ev);
6667
+ } catch (error) {
6668
+ console.error(error);
6669
+ return {
6670
+ error
6671
+ };
6672
+ } finally {
6673
+ this.wsGate.open();
6674
+ }
6434
6675
  }
6435
6676
  async _onWs(ev) {
6436
- this.handleLogCompare(ev);
6437
6677
  if (this._die) return;
6438
6678
  if (!ev || !ev.type) return;
6439
6679
  ev.created = util/* default */.A.getMs(ev.created);
@@ -6507,7 +6747,7 @@ class Store {
6507
6747
  }
6508
6748
  }
6509
6749
  if (util/* default */.A.startsWith(ev.type, 'message_') || util/* default */.A.startsWith(ev.type, 'conversation_')) {
6510
- this.restConvoEvent(ev);
6750
+ await this.restConvoEvent(ev);
6511
6751
  if (ev.type === 'message_sent' && util/* default */.A.get(ev, 'by.id') !== user.id) {
6512
6752
  sendEventToThirdParty('SUBIZ Chat', 'Received', 'User');
6513
6753
  }
@@ -6556,8 +6796,8 @@ class Store {
6556
6796
  }
6557
6797
  if (ev.type !== 'message_pong' && ev.type !== 'conversation_typing') {
6558
6798
  if (ev.type === 'message_sent') {
6559
- let idemkey = util/* default */.A.get(ev, 'data.message.idempotency_key');
6560
- let found = util/* default */.A.find(this.listEvents(cid), oldev => oldev.id === idemkey);
6799
+ let sourceEventId = util/* default */.A.get(ev, 'source_event_id');
6800
+ let found = util/* default */.A.find(this.listEvents(cid), oldev => oldev.id === sourceEventId);
6561
6801
  if (found) {
6562
6802
  this.chain.del(cid, found.id);
6563
6803
  ev.created = found.created;
@@ -6583,6 +6823,58 @@ class Store {
6583
6823
  delete this.lightConvos[id];
6584
6824
  this.kv.put('light_convos', this.lightConvos);
6585
6825
  }
6826
+ startWidgetConvo(greeting, locale) {
6827
+ const user = this.matchUser();
6828
+ const existing = util/* default */.A.find(this.lightConvos, convo => convo.light_type === 'widget' && convo.account_id === user.account_id && convo.initial_by === user.id);
6829
+ if (existing) return {
6830
+ convo: existing
6831
+ };
6832
+ const id = 'cslightwidget_' + util/* default */.A.randomString(24);
6833
+ const ev = util/* default */.A.cloneDeep(greeting);
6834
+ ev.data.message.conversation_id = id;
6835
+ const convo = {
6836
+ id,
6837
+ account_id: user.account_id,
6838
+ initial_by: user.id,
6839
+ locale,
6840
+ light_type: 'widget',
6841
+ state: 'pending',
6842
+ created: ev.created,
6843
+ members: [{
6844
+ id: user.id,
6845
+ type: 'user',
6846
+ seen_at: ev.created + 1
6847
+ }],
6848
+ events: [ev],
6849
+ last_message_sent: ev,
6850
+ touchpoint: {
6851
+ id,
6852
+ channel: 'subiz',
6853
+ source: 'web'
6854
+ }
6855
+ };
6856
+ this.lightConvos[id] = convo;
6857
+ this.kv.put('light_convos', this.lightConvos);
6858
+ this.pubsub.publish('account');
6859
+ return {
6860
+ convo
6861
+ };
6862
+ }
6863
+ promoteWidgetConvo(localId, cid) {
6864
+ this.widgetConvoOrigins = this.widgetConvoOrigins || {};
6865
+ this.widgetConvoOrigins[cid] = localId;
6866
+ const greeting = util/* default */.A.cloneDeep(util/* default */.A.get(this.lightConvos, [localId, 'events', 0]));
6867
+ if (greeting) {
6868
+ greeting.source_event_id = greeting.id;
6869
+ greeting.data.message.conversation_id = cid;
6870
+ this.chain.merge(cid, [{
6871
+ id: greeting.id,
6872
+ index: greeting.created,
6873
+ value: greeting
6874
+ }]);
6875
+ }
6876
+ this.deleteLightConvo(localId);
6877
+ }
6586
6878
  startLightConvo(botid, messages, locale, is_testing, botversion) {
6587
6879
  let convoid = 'cslight' + botid + '_' + this.now();
6588
6880
  let user = this.cache.match('user') || {};
@@ -6676,10 +6968,10 @@ class Store {
6676
6968
  }
6677
6969
  async sendConvoEvent(cid, type, data) {
6678
6970
  await this.readyGate.entry();
6679
- var idempotency = util/* default */.A.randomString(36);
6971
+ var sourceEventId = util/* default */.A.randomString(36);
6680
6972
  let user = this.cache.match('user') || {};
6681
6973
  var event = {
6682
- id: idempotency,
6974
+ id: sourceEventId,
6683
6975
  by: {
6684
6976
  id: user.id,
6685
6977
  type: 'user',
@@ -6692,7 +6984,7 @@ class Store {
6692
6984
  util/* default */.A.convoToEv(cid, event);
6693
6985
  let files = [];
6694
6986
  if (type === 'message_sent') {
6695
- event.data.message.idempotency_key = idempotency;
6987
+ event.source_event_id = sourceEventId;
6696
6988
  event.data.message.conversation_id = cid;
6697
6989
  await store_flow.map(event.data.message.attachments, 2, async (att, i) => {
6698
6990
  if (att.type !== 'file') return;
@@ -6712,18 +7004,9 @@ class Store {
6712
7004
  }
6713
7005
  this.onWs(event);
6714
7006
  await this.convoGate.entry();
6715
- await store_flow.map(files, 1, async att => {
6716
- const {
6717
- body,
6718
- url,
6719
- error
6720
- } = await this.api.uploadToS3(att._file);
6721
- if (util/* default */.A.get(body, 'code') == 'invalid_field_size') {
6722
- event._error_message = 'cannot_send_too_big_file';
6723
- }
6724
- event._error = error;
6725
- att.url = url;
6726
- });
7007
+ const uploaded = await uploadAttachments(files, file => this.api.uploadToS3(file));
7008
+ event._error = uploaded.error;
7009
+ if (uploaded.errorMessage) event._error_message = uploaded.errorMessage;
6727
7010
  if (event._error) return this.onWs(event);
6728
7011
  if (cid && cid.startsWith('cslight')) return;
6729
7012
  let {
@@ -6832,13 +7115,20 @@ class Store {
6832
7115
  }
6833
7116
  async listmessageapi(type, anchor, limit) {
6834
7117
  let convoid = type;
6835
- if (convoid && convoid.startsWith('cslight')) return [fakeevents, '', undefined, true];
7118
+ if (convoid && convoid.startsWith('cslight')) {
7119
+ let events = util/* default */.A.map(this.listEvents(convoid), ev => ({
7120
+ id: ev.id,
7121
+ index: ev.created,
7122
+ value: ev
7123
+ }));
7124
+ return [events, '', undefined, true];
7125
+ }
6836
7126
  let {
6837
7127
  body: events,
6838
7128
  code,
6839
7129
  error
6840
7130
  } = await this.api.listMessages(convoid, -limit, anchor);
6841
- if (error || code !== 200) return [[], anchor, error];
7131
+ if (error || code !== 200) return [[], anchor, error || 'message_fetch_failed'];
6842
7132
  anchor = util/* default */.A.get(util/* default */.A.last(events), 'id');
6843
7133
  events = util/* default */.A.map(events, event => {
6844
7134
  event.created = util/* default */.A.getMs(event.created);
@@ -6867,17 +7157,18 @@ class Store {
6867
7157
  async loopTime() {
6868
7158
  if (this._die) return;
6869
7159
  let startms = this.now();
6870
- if (!this.cache || !util/* default */.A.get(this.cache.match('user'), 'id')) return util/* default */.A.setTimeout(() => this.loopTime(), 240000);
7160
+ if (!this.cache || !util/* default */.A.get(this.cache.match('user'), 'id')) return this._timeTimeout = util/* default */.A.setTimeout(() => this.loopTime(), 240000);
6871
7161
  let {
6872
7162
  body: t,
6873
7163
  error
6874
7164
  } = await this.api.time();
6875
- if (error) return util/* default */.A.setTimeout(() => this.loopTime(), 30000);
7165
+ if (this._die) return;
7166
+ if (error) return this._timeTimeout = util/* default */.A.setTimeout(() => this.loopTime(), 30000);
6876
7167
  var latences = Math.abs(this.now() - startms) / 2;
6877
7168
  var serverMs = new util/* default */.A.Date(t).getTime() + latences;
6878
7169
  var localMs = this.now();
6879
7170
  this.timeDiff = Math.floor(serverMs - localMs);
6880
- util/* default */.A.setTimeout(() => this.loopTime(), 240000);
7171
+ this._timeTimeout = util/* default */.A.setTimeout(() => this.loopTime(), 240000);
6881
7172
  }
6882
7173
  replaceFileUrl(src) {
6883
7174
  if (!src) return '';
@@ -6910,6 +7201,14 @@ class Store {
6910
7201
  this.kv = new kv(new lsdb('sbz2023', this.inmem), 'kv');
6911
7202
  if (this.chain) this.chain.destroy();
6912
7203
  this.chain = new Chain(new lsdb('cbz2023', true), 'ch');
7204
+ this.outofmsgM = {};
7205
+ this.messageSyncTimes = {};
7206
+ this.messageSyncNextAt = {};
7207
+ this.messageSyncFailures = {};
7208
+ this.messageSyncProgress = {};
7209
+ this.accountRefreshAfter = 0;
7210
+ this.historyFailures = {};
7211
+ this.convoFetchAfter = {};
6913
7212
  if (this.realtime) this.realtime.stop();
6914
7213
  if (this.cache) this.cache.destroy();
6915
7214
  this.pubsub.publish('destroy');
@@ -6918,14 +7217,22 @@ class Store {
6918
7217
  return this._die;
6919
7218
  }
6920
7219
  destroy() {
7220
+ if (this._die) return;
6921
7221
  this._die = true;
6922
7222
  this.clearBrowserData();
6923
7223
  util/* default */.A.clearInterval(this._seenInterval);
6924
7224
  util/* default */.A.clearInterval(this._urlCheckInterval);
7225
+ util/* default */.A.clearInterval(this._presenceInterval1);
7226
+ util/* default */.A.clearInterval(this._presenceInterval2);
7227
+ util/* default */.A.clearInterval(this._gaInterval);
7228
+ util/* default */.A.clearTimeout(this._timeTimeout);
6925
7229
  if (this.realtime) this.realtime.stop();
6926
- this.readyGate.close();
6927
- window.removeEventListener('blur', this.sendPresence);
6928
- window.removeEventListener('focus', this.sendPresence);
7230
+ if (this.readyGate) this.readyGate.close();
7231
+ window.removeEventListener('blur', this._onBlur);
7232
+ window.removeEventListener('focus', this._onFocus);
7233
+ window.removeEventListener('beforeunload', this._onBeforeUnload);
7234
+ if (this._visibilityCleanup) this._visibilityCleanup();
7235
+ this.pubsub.clear();
6929
7236
  }
6930
7237
  }
6931
7238
  function loadImage(file) {
@@ -6949,7 +7256,23 @@ function loadImage(file) {
6949
7256
  const ImageTypes = ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml'];
6950
7257
  function onVisibilityChange(cb) {
6951
7258
  var hidden = 'hidden';
6952
- if (hidden in document) document.addEventListener('visibilitychange', onchange);else if ((hidden = 'mozHidden') in document) document.addEventListener('mozvisibilitychange', onchange);else if ((hidden = 'webkitHidden') in document) document.addEventListener('webkitvisibilitychange', onchange);else if ((hidden = 'msHidden') in document) document.addEventListener('msvisibilitychange', onchange);else if ('onfocusin' in document) document.onfocusin = document.onfocusout = onchange;else window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;
7259
+ let target = document,
7260
+ eventName;
7261
+ let previous = {};
7262
+ if (hidden in document) eventName = 'visibilitychange';else if ((hidden = 'mozHidden') in document) eventName = 'mozvisibilitychange';else if ((hidden = 'webkitHidden') in document) eventName = 'webkitvisibilitychange';else if ((hidden = 'msHidden') in document) eventName = 'msvisibilitychange';else if ('onfocusin' in document) {
7263
+ previous = {
7264
+ onfocusin: document.onfocusin,
7265
+ onfocusout: document.onfocusout
7266
+ };
7267
+ document.onfocusin = document.onfocusout = onchange;
7268
+ } else {
7269
+ target = window;
7270
+ for (const key of ['onpageshow', 'onpagehide', 'onfocus', 'onblur']) {
7271
+ previous[key] = window[key];
7272
+ window[key] = onchange;
7273
+ }
7274
+ }
7275
+ if (eventName) target.addEventListener(eventName, onchange);
6953
7276
  function onchange(evt) {
6954
7277
  var v = 'visible';
6955
7278
  var h = 'hidden';
@@ -6967,6 +7290,12 @@ function onVisibilityChange(cb) {
6967
7290
  if (document[hidden] !== undefined) onchange({
6968
7291
  type: document[hidden] ? 'blur' : 'focus'
6969
7292
  });
7293
+ return () => {
7294
+ if (eventName) target.removeEventListener(eventName, onchange);
7295
+ for (const key of Object.keys(previous)) {
7296
+ if (target[key] === onchange) target[key] = previous[key];
7297
+ }
7298
+ };
6970
7299
  }
6971
7300
  const inmemCookie = {
6972
7301
  data: {},
@@ -7451,22 +7780,7 @@ class ChatButton extends common/* Com */.Mw {
7451
7780
  }, reply.title);
7452
7781
  })));
7453
7782
  }
7454
- async prepareButtonImage() {
7455
- let accountSetting = this.props.plugin.chatbox;
7456
- accountSetting = this.fixMissingSetting(accountSetting);
7457
- let imgsrc = util/* default */.A.get(accountSetting, 'desktop_button.background_image_url') || util/* default */.A.get(accountSetting, 'desktop_button.background_mask_url') || defaultBubble;
7458
- if (this.props.store.isMobile()) {
7459
- imgsrc = util/* default */.A.get(accountSetting, 'mobile_button.background_image_url') || util/* default */.A.get(accountSetting, 'mobile_button.background_mask_url') || imgsrc;
7460
- }
7461
- imgsrc = this.props.store.replaceFileUrl(imgsrc);
7462
- await util/* default */.A.preloadImg(imgsrc);
7463
- this.setState({
7464
- ready: true
7465
- });
7466
- this.readyGate.open();
7467
- }
7468
- renderButton() {
7469
- if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_button = util/* default */.A.Date.now();
7783
+ getButtonAppearance() {
7470
7784
  let accountSetting = this.props.plugin.chatbox;
7471
7785
  accountSetting = this.fixMissingSetting(accountSetting);
7472
7786
  let imgsrc = util/* default */.A.get(accountSetting, 'desktop_button.background_image_url') || util/* default */.A.get(accountSetting, 'desktop_button.background_mask_url') || defaultBubble;
@@ -7488,22 +7802,89 @@ class ChatButton extends common/* Com */.Mw {
7488
7802
  maskurl = mobilemaskurl;
7489
7803
  }
7490
7804
  }
7805
+ const imageUrl = url => addVersionParam(this.props.store.replaceFileUrl(url));
7806
+ imgsrc = imageUrl(imgsrc);
7807
+ imgurl = imageUrl(imgurl);
7808
+ maskurl = imageUrl(maskurl);
7809
+ const defaultMask = !imgurl && !maskurl ? DEF_BG_URL : '';
7810
+ const urls = [...new Set([imgsrc, imgurl && encodeURI(imgurl), maskurl && encodeURI(maskurl), defaultMask].filter(Boolean))];
7811
+ return {
7812
+ imgsrc,
7813
+ imgurl,
7814
+ maskurl,
7815
+ background,
7816
+ position,
7817
+ imgwidth,
7818
+ imgheight,
7819
+ urls,
7820
+ maskAsset: maskurl ? encodeURI(maskurl) : defaultMask,
7821
+ key: JSON.stringify([urls, maskurl, defaultMask])
7822
+ };
7823
+ }
7824
+ componentDidUpdate() {
7825
+ if (this.getButtonAppearance().key !== this._buttonImageKey) this.prepareButtonImage();
7826
+ }
7827
+ async prepareButtonImage() {
7828
+ const appearance = this.getButtonAppearance();
7829
+ const version = this._buttonImageVersion = (this._buttonImageVersion || 0) + 1;
7830
+ this._buttonImageKey = appearance.key;
7831
+ this.readyGate.close();
7832
+ const [loaded, mask] = await Promise.all([Promise.all(appearance.urls.filter(url => url !== appearance.maskAsset).map(url => preloadButtonImage(url))), appearance.maskAsset ? prepareButtonMask(appearance.maskAsset) : Promise.resolve(null)]);
7833
+ const stale = () => !this._isMounted || this._buttonImageVersion !== version;
7834
+ if (stale()) {
7835
+ if (mask) URL.revokeObjectURL(mask);
7836
+ return;
7837
+ }
7838
+ const fallback = loaded.some(success => !success) || !!appearance.maskAsset && !mask;
7839
+ const ready = !fallback || (await preloadButtonImage(defaultBubble));
7840
+ if (stale()) {
7841
+ if (mask) URL.revokeObjectURL(mask);
7842
+ return;
7843
+ }
7844
+ if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl);
7845
+ this._buttonMaskUrl = mask;
7846
+ this.setState({
7847
+ ready,
7848
+ readyImageKey: appearance.key,
7849
+ fallbackButtonImage: fallback,
7850
+ buttonMaskUrl: mask
7851
+ });
7852
+ this.readyGate.open();
7853
+ }
7854
+ componentWillUnmount() {
7855
+ if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl);
7856
+ if (this._animateTimeout) clearTimeout(this._animateTimeout);
7857
+ }
7858
+ renderButton() {
7859
+ if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_button = util/* default */.A.Date.now();
7860
+ const appearance = this.getButtonAppearance();
7861
+ let {
7862
+ imgsrc,
7863
+ imgurl,
7864
+ maskurl,
7865
+ background,
7866
+ position,
7867
+ imgwidth,
7868
+ imgheight
7869
+ } = appearance;
7870
+ if (appearance.maskAsset) {
7871
+ maskurl = this.state.readyImageKey === appearance.key ? this.state.buttonMaskUrl : '';
7872
+ if (imgsrc === appearance.maskAsset) imgsrc = maskurl || '';
7873
+ }
7874
+ if (this.state.readyImageKey === appearance.key && this.state.fallbackButtonImage) {
7875
+ imgsrc = imgurl = defaultBubble;
7876
+ maskurl = '';
7877
+ }
7491
7878
  let whitebgcls = 'chat-button--white-bg';
7492
7879
  if (!imgurl && maskurl) whitebgcls += ' chat-button--white-bg--mask-only';
7493
7880
  let imgcontainerstyle = '';
7494
- imgurl = this.props.store.replaceFileUrl(imgurl);
7495
- imgsrc = this.props.store.replaceFileUrl(imgsrc);
7496
- maskurl = this.props.store.replaceFileUrl(maskurl);
7497
- imgurl = addVersionParam(imgurl);
7498
- imgsrc = addVersionParam(imgsrc);
7499
- maskurl = addVersionParam(maskurl);
7500
7881
  if (!imgurl && !maskurl) {
7501
7882
  whitebgcls += ' chat-button--white-bg--mask-only';
7502
7883
  imgcontainerstyle = `
7503
- -webkit-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
7504
- -o-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
7505
- -moz-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
7506
- mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
7884
+ -webkit-mask-image: none !important;
7885
+ -o-mask-image: none !important;
7886
+ -moz-mask-image: none !important;
7887
+ mask-image: none !important;
7507
7888
  height: ${imgheight}px !important;
7508
7889
  width: ${imgwidth}px !important;
7509
7890
  background: ${background} !important;
@@ -7556,9 +7937,12 @@ class ChatButton extends common/* Com */.Mw {
7556
7937
  height: ${imgheight - 4}px !important;
7557
7938
 
7558
7939
  `;
7559
- if (!this.state.ready) cls += ' hidden';
7560
- return (0,preact_module.h)("div", {
7940
+ if (!this.state.ready || this.state.readyImageKey !== appearance.key) cls += ' hidden';
7941
+ return (0,preact_module.h)("button", {
7942
+ type: "button",
7561
7943
  class: cls,
7944
+ "aria-label": this.props.t('chat'),
7945
+ "aria-expanded": !this.props.isShow,
7562
7946
  onClick: e => this.onClick(e)
7563
7947
  }, (0,preact_module.h)("div", {
7564
7948
  class: whitebgcls,
@@ -7598,7 +7982,9 @@ class ChatButton extends common/* Com */.Mw {
7598
7982
  return defmsg;
7599
7983
  }
7600
7984
  return (0,preact_module.h)(chatbox_block/* default */.A, {
7601
- block: block
7985
+ block: block,
7986
+ store: this.props.store,
7987
+ t: this.props.t
7602
7988
  });
7603
7989
  }
7604
7990
  let message = util/* default */.A.get(ev, 'data.message.text', defmsg);
@@ -7641,6 +8027,35 @@ function addVersionParam(url, version = 8) {
7641
8027
  return hash ? newUrl + '#' + hash : newUrl;
7642
8028
  }
7643
8029
  }
8030
+ function preloadButtonImage(src, {
8031
+ crossOrigin = false
8032
+ } = {}) {
8033
+ return new Promise(resolve => {
8034
+ const image = new Image();
8035
+ if (crossOrigin) image.crossOrigin = 'anonymous';
8036
+ image.onerror = () => resolve(false);
8037
+ image.onload = async () => {
8038
+ try {
8039
+ if (image.decode) await image.decode();
8040
+ resolve(true);
8041
+ } catch (_) {
8042
+ resolve(false);
8043
+ }
8044
+ };
8045
+ image.src = src;
8046
+ });
8047
+ }
8048
+ async function prepareButtonMask(src) {
8049
+ let url;
8050
+ try {
8051
+ const response = await fetch(src);
8052
+ if (!response.ok) return null;
8053
+ url = URL.createObjectURL(await response.blob());
8054
+ if (await preloadButtonImage(url)) return url;
8055
+ } catch (_) {}
8056
+ if (url) URL.revokeObjectURL(url);
8057
+ return null;
8058
+ }
7644
8059
  ;// ./src/chatbox/PoweredBy.js
7645
8060
  var logo = (subiz_mono_namespaceFn());
7646
8061
 
@@ -7996,7 +8411,9 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
7996
8411
  class: "widget-header--total-unread-convo"
7997
8412
  }, unreadcount);
7998
8413
  }
7999
- return (0,preact_module.h)("div", {
8414
+ return (0,preact_module.h)("button", {
8415
+ type: "button",
8416
+ "aria-label": this.props.t('menu_back'),
8000
8417
  class: `widget-header--wrap-button-back ${unreadcount ? 'widget-header--has-convo-unred' : ''}`,
8001
8418
  onClick: e => this.onBackClick(e)
8002
8419
  }, (0,preact_module.h)("div", {
@@ -8008,7 +8425,9 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
8008
8425
  let accSetting = this.props.plugin.chatbox || {};
8009
8426
  if (accSetting.hide_close_button) return null;
8010
8427
  if (this.props.store.isEmbededChatMode()) return;
8011
- return (0,preact_module.h)("div", {
8428
+ return (0,preact_module.h)("button", {
8429
+ type: "button",
8430
+ "aria-label": this.props.t('close'),
8012
8431
  class: "widget-header--button-close",
8013
8432
  "data-tooltip": this.props.t('close'),
8014
8433
  "data-tooltip-position": "bottom",
@@ -8081,10 +8500,14 @@ class MessageInput extends common/* Com */.Mw {
8081
8500
  $input.blur();
8082
8501
  }
8083
8502
  render() {
8503
+ const disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled || this.props.is_loading;
8084
8504
  var $buttons = (0,preact_module.h)("div", {
8085
8505
  class: "d-flex flex-row align-self-end"
8086
- }, this.renderEmoji(), (0,preact_module.h)("div", {
8087
- "data-tooltip-poasition": "top-left",
8506
+ }, this.renderEmoji(), (0,preact_module.h)("button", {
8507
+ type: "button",
8508
+ disabled: disabled,
8509
+ "aria-label": this.props.t('attachment'),
8510
+ "data-tooltip-position": "top-left",
8088
8511
  class: "message-input--button message-input--attachment-button",
8089
8512
  onClick: e => this.selectFile(e)
8090
8513
  }));
@@ -8092,7 +8515,10 @@ class MessageInput extends common/* Com */.Mw {
8092
8515
  if (msg.length > 0) {
8093
8516
  $buttons = (0,preact_module.h)("div", {
8094
8517
  class: "d-flex flex-row align-self-end"
8095
- }, this.renderEmoji(), (0,preact_module.h)("div", {
8518
+ }, this.renderEmoji(), (0,preact_module.h)("button", {
8519
+ type: "button",
8520
+ disabled: disabled,
8521
+ "aria-label": this.props.t('send'),
8096
8522
  "data-tooltip-position": "top-left",
8097
8523
  class: "message-input--button message-input--send-button",
8098
8524
  onClick: () => this.submitMessage()
@@ -8106,7 +8532,6 @@ class MessageInput extends common/* Com */.Mw {
8106
8532
  }));
8107
8533
  }
8108
8534
  var containercls = '';
8109
- var disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled;
8110
8535
  if (disabled || this.props.is_loading) containercls = 'message-input--disabled';
8111
8536
  return (0,preact_module.h)("div", {
8112
8537
  class: `message-input ${containercls}`,
@@ -8121,6 +8546,7 @@ class MessageInput extends common/* Com */.Mw {
8121
8546
  multiple: true
8122
8547
  }), (0,preact_module.h)("textarea", {
8123
8548
  disabled: disabled,
8549
+ "aria-label": this.props.t('message_input_help'),
8124
8550
  class: "message-input--input",
8125
8551
  maxlength: "1024",
8126
8552
  placeholder: this.props.t('message_input_help').substr(0, 25),
@@ -8283,7 +8709,11 @@ class MessageInput extends common/* Com */.Mw {
8283
8709
  }, 100);
8284
8710
  }
8285
8711
  renderEmoji() {
8286
- return (0,preact_module.h)("div", null, this.renderEmojiPopup(), (0,preact_module.h)("div", {
8712
+ return (0,preact_module.h)("div", null, this.renderEmojiPopup(), (0,preact_module.h)("button", {
8713
+ type: "button",
8714
+ "aria-label": "Emoji",
8715
+ "aria-expanded": !!this.state.openEmoji,
8716
+ disabled: this.props.disabled || this.props.is_loading,
8287
8717
  class: "message-input--button message-input--emoji-button",
8288
8718
  onClick: e => this.toggleEmoji(e)
8289
8719
  }));
@@ -8313,13 +8743,15 @@ class MessageInput extends common/* Com */.Mw {
8313
8743
  return e.preventDefault();
8314
8744
  }
8315
8745
  this._forceUpdate();
8316
- this.sendTyping();
8317
8746
  }
8318
8747
  onChange(e) {
8748
+ const value = e.target.value;
8749
+ const changed = value !== (this.state.msgValue || '');
8319
8750
  this.setState({
8320
- msgValue: e.target.value
8751
+ msgValue: value
8321
8752
  });
8322
8753
  this.resizeInput();
8754
+ if (changed && util/* default */.A.trim(value)) this.sendTyping();
8323
8755
  }
8324
8756
  selectFile() {
8325
8757
  if (this.props.disabled) return;
@@ -8351,10 +8783,10 @@ class MessageInput extends common/* Com */.Mw {
8351
8783
  if (!msg) return;
8352
8784
  if (this.props.disabled) return;
8353
8785
  if (this.props.onSend) {
8354
- await this.props.onSend({
8786
+ if ((await this.props.onSend({
8355
8787
  text: msg,
8356
8788
  format: 'plaintext'
8357
- });
8789
+ })) === false) return;
8358
8790
  }
8359
8791
  this.setState({
8360
8792
  openEmoji: false,
@@ -8363,7 +8795,9 @@ class MessageInput extends common/* Com */.Mw {
8363
8795
  this.resizeInput();
8364
8796
  }
8365
8797
  sendTyping() {
8798
+ if (this.props.disabled || this.props.is_loading) return;
8366
8799
  if (!this.props.cid) return;
8800
+ if (util/* default */.A.get(this.props.store.matchConvo(this.props.cid), 'state') === 'ended') return;
8367
8801
  return this.props.store.typing(this.props.cid);
8368
8802
  }
8369
8803
  pasteImage(event) {
@@ -8393,9 +8827,124 @@ function isSummited(form) {
8393
8827
  let fields = util/* default */.A.get(form, 'fields') || [];
8394
8828
  return util/* default */.A.find(fields, field => !!field.answered);
8395
8829
  }
8396
- ;// ./src/chatbox/ImageAttachments.js
8397
- function ImageAttachments_defineProperty(e, r, t) { return (r = ImageAttachments_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
8398
- function ImageAttachments_toPropertyKey(t) { var i = ImageAttachments_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
8830
+ ;// ./src/chatbox/event-layout.js
8831
+
8832
+ function processEvents(convo, events) {
8833
+ events = events.filter(event => visibleEvent(event.ev));
8834
+ if (events.length < 1) return;
8835
+ var lastAgentEvent;
8836
+ for (var i = 1; i < events.length; i++) {
8837
+ let curEvent = events[i];
8838
+ let lastEvent = events[i - 1];
8839
+ if (util/* default */.A.get(curEvent, 'ev.by.type') != 'user' && !curEvent.is_typing) {
8840
+ lastAgentEvent = curEvent;
8841
+ }
8842
+ if (visibleEvent(curEvent.ev)) {
8843
+ let elapsedSec = util/* default */.A.unixSec(curEvent.ev.created) - util/* default */.A.unixSec(lastEvent.ev.created);
8844
+ if (elapsedSec > 300) curEvent.show_time = true;
8845
+ }
8846
+ }
8847
+ if (lastAgentEvent) lastAgentEvent.show_time = true;
8848
+ for (var i = 0; i < events.length; i++) {
8849
+ let curEvent = events[i];
8850
+ if (util/* default */.A.get(curEvent, 'ev.type') === 'message_sent') {
8851
+ curEvent.show_time = true;
8852
+ break;
8853
+ }
8854
+ }
8855
+ let lastMsgSentIdx = -1;
8856
+ for (var i = 0; i < events.length; i++) {
8857
+ let curEvent = events[i];
8858
+ let prevEvent = events[i - 1];
8859
+ let nextEvent = events[i + 1];
8860
+ if (curEvent.ev.type === 'message_sent') {
8861
+ lastMsgSentIdx = i;
8862
+ curEvent.mode = 'lead';
8863
+ if (util/* default */.A.get(prevEvent, 'ev.type') === 'message_sent' && util/* default */.A.get(prevEvent, 'ev.by.id') === util/* default */.A.get(curEvent, 'ev.by.id')) {
8864
+ curEvent.mode = 'follow';
8865
+ }
8866
+ if (util/* default */.A.get(nextEvent, 'ev.type') !== 'message_sent' || util/* default */.A.get(nextEvent, 'ev.by.id') !== util/* default */.A.get(curEvent, 'ev.by.id')) {
8867
+ curEvent.is_end = true;
8868
+ }
8869
+ continue;
8870
+ }
8871
+ }
8872
+ if (lastMsgSentIdx > -1) {
8873
+ events[lastMsgSentIdx].is_last_message_send = true;
8874
+ }
8875
+ }
8876
+ function visibleEvent(ev) {
8877
+ let type = util/* default */.A.get(ev, 'type');
8878
+ if (type === 'message_sent') return true;
8879
+ if (type === 'conversation_state_updated') {
8880
+ return util/* default */.A.get(ev, 'data.conversation.state') == 'ended';
8881
+ }
8882
+ }
8883
+ ;// ./src/chatbox/conversation-history.js
8884
+
8885
+ function conversationHistory(store, cid) {
8886
+ if (!cid) return [];
8887
+ const current = store.matchConvo(cid);
8888
+ if (!current || !current.created) return [current || {
8889
+ id: cid
8890
+ }];
8891
+ const conversations = util/* default */.A.map(store.matchConvo('*'));
8892
+ const unique = new Map();
8893
+ for (const convo of conversations) {
8894
+ if (!convo || !convo.id || convo.id === cid || convo.id.startsWith('cslight')) continue;
8895
+ if (current.account_id && convo.account_id !== current.account_id) continue;
8896
+ if (convo.created && util/* default */.A.getMs(convo.created) < util/* default */.A.getMs(current.created)) unique.set(convo.id, convo);
8897
+ }
8898
+ return [...unique.values()].sort((a, b) => util/* default */.A.getMs(a.created) - util/* default */.A.getMs(b.created) || a.id.localeCompare(b.id)).concat(current);
8899
+ }
8900
+ function conversationEvents(store, convo) {
8901
+ const events = util/* default */.A.orderBy(util/* default */.A.map(store.listEvents(convo.id)), 'created', 'asc');
8902
+ const unique = new Map();
8903
+ for (const ev of events) {
8904
+ const key = conversationEventKey(ev);
8905
+ const previous = unique.get(key);
8906
+ if (!previous) unique.set(key, ev);else if (previous.id === previous.source_event_id && ev.id !== ev.source_event_id) unique.set(key, {
8907
+ ...ev,
8908
+ created: previous.created
8909
+ });
8910
+ }
8911
+ return [...unique.values()].map(ev => ({
8912
+ ev
8913
+ }));
8914
+ }
8915
+ function conversationEventKey(ev) {
8916
+ const id = ev.type === 'message_sent' ? ev.source_event_id || ev.id : ev.id;
8917
+ return ev.type + ':' + id;
8918
+ }
8919
+ ;// ./src/chatbox/greeting.js
8920
+
8921
+ function widgetGreeting(chatbox, t, created = util/* default */.A.Date.now()) {
8922
+ const greeting = util/* default */.A.get(chatbox, 'greeting', {});
8923
+ const localized = t.i18n ? t.i18n(greeting.greeting || {}) : '';
8924
+ const text = util/* default */.A.trim(localized) || util/* default */.A.trim(greeting.message) || util/* default */.A.trim(t('team_intro')) || t('empty_convo_text');
8925
+ return {
8926
+ id: 'widget-greeting-' + util/* default */.A.randomString(24),
8927
+ type: 'message_sent',
8928
+ created,
8929
+ by: {
8930
+ type: 'system',
8931
+ id: 'system',
8932
+ ...(greeting.agent_id ? {
8933
+ display_type: 'agent',
8934
+ display_id: greeting.agent_id
8935
+ } : {})
8936
+ },
8937
+ data: {
8938
+ message: {
8939
+ text,
8940
+ format: 'plaintext'
8941
+ }
8942
+ }
8943
+ };
8944
+ }
8945
+ ;// ./src/chatbox/ImageAttachments.js
8946
+ function ImageAttachments_defineProperty(e, r, t) { return (r = ImageAttachments_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
8947
+ function ImageAttachments_toPropertyKey(t) { var i = ImageAttachments_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
8399
8948
  function ImageAttachments_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8400
8949
  ;
8401
8950
 
@@ -8656,16 +9205,19 @@ class FileAttachments extends common/* Com */.Mw {
8656
9205
  }, 3000);
8657
9206
  }
8658
9207
  }
9208
+ // EXTERNAL MODULE: ./src/util/url.js
9209
+ var util_url = __webpack_require__(4339);
8659
9210
  ;// ./src/chatbox/Buttons.js
8660
9211
 
8661
9212
 
9213
+
8662
9214
  function Buttons(props) {
8663
9215
  if (util/* default */.A.size(props.buttons) === 0) return null;
8664
9216
  var $buttons = util/* default */.A.map(props.buttons, (button, index) => {
8665
9217
  if (button.type === 'call_button') {
8666
9218
  return (0,preact_module.h)("a", {
8667
9219
  class: "url-button-attachment",
8668
- href: 'tel:' + button.phone_number,
9220
+ href: (0,util_url/* safeUrl */.P)('tel:' + button.phone_number),
8669
9221
  key: index,
8670
9222
  title: button.title
8671
9223
  }, props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || `${props.t('call')} ${button.phone_number}`);
@@ -8673,16 +9225,18 @@ function Buttons(props) {
8673
9225
  if (button.type === 'url_button') {
8674
9226
  return (0,preact_module.h)("a", {
8675
9227
  class: "url-button-attachment",
8676
- href: button.url,
9228
+ href: (0,util_url/* safeUrl */.P)(button.url) || undefined,
8677
9229
  target: "_blank",
9230
+ rel: "noopener noreferrer",
8678
9231
  key: index,
8679
9232
  title: button.title
8680
9233
  }, props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || button.url);
8681
9234
  }
8682
9235
  if (button.type === 'postback_button') {
8683
- return (0,preact_module.h)("a", {
9236
+ return (0,preact_module.h)("button", {
9237
+ type: "button",
8684
9238
  class: "url-button-attachment",
8685
- href: "javascript:;",
9239
+ key: index,
8686
9240
  onClick: _ => props.onSelect(button)
8687
9241
  }, props.t.i18n(button.i18n_title) || button.title);
8688
9242
  }
@@ -9611,8 +10165,6 @@ class VideoAttachments extends common/* Com */.Mw {
9611
10165
  }, $videos);
9612
10166
  }
9613
10167
  }
9614
- // EXTERNAL MODULE: ./src/chatbox/time.js
9615
- var chatbox_time = __webpack_require__(1620);
9616
10168
  ;// ./src/chatbox/QuoteMessage.js
9617
10169
  function QuoteMessage_defineProperty(e, r, t) { return (r = QuoteMessage_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
9618
10170
  function QuoteMessage_toPropertyKey(t) { var i = QuoteMessage_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -9653,7 +10205,7 @@ class QuoteMessage extends common/* Com */.Mw {
9653
10205
  if (util/* default */.A.get(this.props, 'chatbox.hide_agent_profile')) sendername = acc.name;
9654
10206
  }
9655
10207
  let att = util/* default */.A.get(this.props.ev, 'data.message.attachments.0');
9656
- if (att) {
10208
+ if (att && !util/* default */.A.get(this.props.ev, 'data.message.deleted')) {
9657
10209
  let isImg = util/* default */.A.includes(att.mimetype, 'image');
9658
10210
  if (isImg) {
9659
10211
  let uri = att.url;
@@ -9687,7 +10239,8 @@ class QuoteMessage extends common/* Com */.Mw {
9687
10239
  let format = util/* default */.A.get(this.props.ev, 'data.message.format', 'plaintext');
9688
10240
  let block = util/* default */.A.get(this.props.ev, 'data.message.block');
9689
10241
  let text = util/* default */.A.get(this.props.ev, 'data.message.text');
9690
- if (block) text = util/* default */.A.blockToText(block);
10242
+ if (block) text = util/* default */.A.blockToText(block) || text;
10243
+ if (util/* default */.A.get(this.props.ev, 'data.message.deleted')) text = this.props.t('recalled_message');
9691
10244
  return (0,preact_module.h)("div", {
9692
10245
  class: "message-quote",
9693
10246
  onClick: () => this.scrollToSourceEvent(this.props.ev)
@@ -9722,10 +10275,9 @@ class TextMessage extends common/* Com */.Mw {
9722
10275
  }
9723
10276
  renderTime() {
9724
10277
  return null;
9725
- // removed by dead control flow
9726
-
9727
- // removed by dead control flow
9728
-
10278
+ }
10279
+ componentWillUnmount() {
10280
+ util/* default */.A.clearTimeout(this.focusTimeout);
9729
10281
  }
9730
10282
  focusSourceEventFromQuote(ev) {
9731
10283
  if (ev.id !== this.props.ev.id) return;
@@ -9733,7 +10285,7 @@ class TextMessage extends common/* Com */.Mw {
9733
10285
  let attachmentIndexField = util/* default */.A.find(fields, f => f.key === 'attachment_index');
9734
10286
  let attachmentIndex = util/* default */.A.get(attachmentIndexField, 'value');
9735
10287
  try {
9736
- attachmentIndex = JSON.parse(attachmentIndex);
10288
+ attachmentIndex = util/* default */.A.parseJSON(attachmentIndex);
9737
10289
  } catch (err) {
9738
10290
  attachmentIndex = undefined;
9739
10291
  }
@@ -9741,17 +10293,22 @@ class TextMessage extends common/* Com */.Mw {
9741
10293
  this.setState({
9742
10294
  focused: true
9743
10295
  });
9744
- if (this.focusTimeout) clearTimeout(this.focusTimeout);
9745
- this.focusTimeout = setTimeout(() => {
10296
+ if (this.focusTimeout) util/* default */.A.clearTimeout(this.focusTimeout);
10297
+ this.focusTimeout = util/* default */.A.setTimeout(() => {
9746
10298
  this.setState({
9747
10299
  focused: false
9748
10300
  });
9749
10301
  }, 3000);
9750
10302
  }
9751
10303
  render() {
9752
- var format = util/* default */.A.get(this.props.ev, 'data.message.format', 'plaintext');
10304
+ if (util/* default */.A.get(this.props.ev, 'data.message.deleted')) {
10305
+ let byType = util/* default */.A.get(this.props.ev, 'by.type') === 'user' ? 'user' : 'agent';
10306
+ return (0,preact_module.h)("div", {
10307
+ class: 'message-' + byType + ' message-text--' + byType + ' message-text--deleted'
10308
+ }, this.props.t('recalled_message'));
10309
+ }
9753
10310
  let block = util/* default */.A.get(this.props.ev, 'data.message.block');
9754
- if (block) return this.renderBlock(block);
10311
+ if (block && !util/* default */.A.isEmptyBlock(block)) return this.renderBlock(block);
9755
10312
  return this.renderPlainText();
9756
10313
  }
9757
10314
  renderPlainText() {
@@ -9771,11 +10328,14 @@ class TextMessage extends common/* Com */.Mw {
9771
10328
  if (!url.startsWith('//') && !url.startsWith('https://') && !url.startsWith('http://') && !url.startsWith('data:')) {
9772
10329
  url = '//' + url;
9773
10330
  }
10331
+ url = (0,util_url/* safeUrl */.P)(url);
10332
+ if (!url) return tag.text;
9774
10333
  return (0,preact_module.h)("a", {
9775
10334
  class: "text-message-link",
9776
10335
  href: url,
9777
10336
  target: "_blank",
9778
- onClick: e => this.props.onLink(e, url)
10337
+ rel: "noopener noreferrer",
10338
+ onClick: e => this.props.onLink && this.props.onLink(e, url)
9779
10339
  }, tag.text);
9780
10340
  }
9781
10341
  if (tag.type === 'phone') return (0,preact_module.h)("a", {
@@ -9789,15 +10349,10 @@ class TextMessage extends common/* Com */.Mw {
9789
10349
  return tag.text;
9790
10350
  });
9791
10351
  if (util/* default */.A.size(tags) === 0) return null;
9792
- let isDeleted = util/* default */.A.get(this.props.ev, 'data.message.deleted');
9793
10352
  let attachments = util/* default */.A.get(this.props.ev, 'data.message.attachments', []);
9794
10353
  let quote = util/* default */.A.find(attachments, att => att.type === 'quote');
9795
10354
  if (byType === 'agent') {
9796
10355
  let cls = 'message-agent message-text--agent';
9797
- if (isDeleted) {
9798
- tags = this.props.t('recalled_message');
9799
- cls += ' message-text--deleted';
9800
- }
9801
10356
  if (this.state.focused) cls += ' just-focused';
9802
10357
  return (0,preact_module.h)("div", {
9803
10358
  class: cls,
@@ -9829,6 +10384,8 @@ class TextMessage extends common/* Com */.Mw {
9829
10384
  }, (0,preact_module.h)(chatbox_block/* default */.A, {
9830
10385
  block: block,
9831
10386
  onLink: this.props.onLink,
10387
+ store: this.props.store,
10388
+ t: this.props.t,
9832
10389
  textMessage: true
9833
10390
  }), this.renderTime());
9834
10391
  }
@@ -9840,6 +10397,8 @@ class TextMessage extends common/* Com */.Mw {
9840
10397
  }, (0,preact_module.h)(chatbox_block/* default */.A, {
9841
10398
  block: block,
9842
10399
  onLink: this.props.onLink,
10400
+ store: this.props.store,
10401
+ t: this.props.t,
9843
10402
  textMessage: true
9844
10403
  }));
9845
10404
  }
@@ -9873,12 +10432,14 @@ class InfoMessage extends common/* Com */.Mw {
9873
10432
  return (0,preact_module.h)("div", {
9874
10433
  class: "convo-event"
9875
10434
  }, (0,preact_module.h)("div", {
9876
- class: "info-message"
10435
+ class: "info-message info-message--ended"
9877
10436
  }, this.props.t('conversation_ended')));
9878
10437
  }
9879
10438
  return null;
9880
10439
  }
9881
10440
  }
10441
+ // EXTERNAL MODULE: ./src/chatbox/time.js
10442
+ var chatbox_time = __webpack_require__(1620);
9882
10443
  ;// ./src/chatbox/Event.js
9883
10444
  function Event_defineProperty(e, r, t) { return (r = Event_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
9884
10445
  function Event_toPropertyKey(t) { var i = Event_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -9930,10 +10491,26 @@ class Event extends common/* Com */.Mw {
9930
10491
  this.state = {
9931
10492
  pongs: util/* default */.A.get(this.props.event, 'ev.data.message.pongs') || []
9932
10493
  };
10494
+ const _ev = this.props.event.ev;
10495
+ const age = (this.props.store.now ? this.props.store.now() : util/* default */.A.Date.now()) - _ev.created;
10496
+ this.animateSend = !props.isHistory && _ev.type === 'message_sent' && util/* default */.A.get(_ev, 'by.type') === 'user' && _ev.id === util/* default */.A.get(_ev, 'source_event_id') && age >= 0 && age < 2000;
9933
10497
  this.textMessageRef = (0,preact_module/* createRef */._3)();
9934
10498
  this.fileAttachmentRef = (0,preact_module/* createRef */._3)();
9935
10499
  this.imageAttachmentRef = (0,preact_module/* createRef */._3)();
9936
10500
  }
10501
+ componentDidMount() {
10502
+ if (!this.animateSend) return;
10503
+ this.sendAnimationFrame = window.requestAnimationFrame(() => {
10504
+ this.sendAnimationFrame = window.requestAnimationFrame(() => {
10505
+ if (this._isMounted) this.setState({
10506
+ sendEntered: true
10507
+ });
10508
+ });
10509
+ });
10510
+ }
10511
+ componentWillUnmount() {
10512
+ if (this.sendAnimationFrame) window.cancelAnimationFrame(this.sendAnimationFrame);
10513
+ }
9937
10514
  render() {
9938
10515
  var ev = util/* default */.A.get(this.props.event, 'ev', {});
9939
10516
  switch (ev.type) {
@@ -9978,6 +10555,7 @@ class Event extends common/* Com */.Mw {
9978
10555
  return !!util/* default */.A.find(pongs, pong => pong.type === 'dislike');
9979
10556
  }
9980
10557
  chooseQuickReply(reply) {
10558
+ if (this.props.isHistory) return;
9981
10559
  let ev = util/* default */.A.get(this.props.event, 'ev', {});
9982
10560
  let message = {
9983
10561
  text: reply.title,
@@ -9995,6 +10573,7 @@ class Event extends common/* Com */.Mw {
9995
10573
  this.props.onSend(message);
9996
10574
  }
9997
10575
  choosePostbackBtn(button) {
10576
+ if (this.props.isHistory) return;
9998
10577
  let ev = util/* default */.A.get(this.props.event, 'ev', {});
9999
10578
  let message = {
10000
10579
  text: button.title,
@@ -10135,6 +10714,17 @@ class Event extends common/* Com */.Mw {
10135
10714
  }
10136
10715
  renderMessageSent() {
10137
10716
  let ev = this.props.event.ev;
10717
+ if (util/* default */.A.get(ev, 'data.message.deleted')) {
10718
+ let byType = util/* default */.A.get(ev, 'by.type') === 'user' ? 'user' : 'agent';
10719
+ return (0,preact_module.h)("div", {
10720
+ class: 'convo-event ' + byType + '-message',
10721
+ "data-ev-id": ev.id
10722
+ }, (0,preact_module.h)(TextMessage, {
10723
+ ev: ev,
10724
+ t: this.props.t,
10725
+ store: this.props.store
10726
+ }));
10727
+ }
10138
10728
  let attachments = util/* default */.A.get(ev, 'data.message.attachments');
10139
10729
  let hasForm = util/* default */.A.find(attachments, att => att.type === 'form');
10140
10730
  if (util/* default */.A.isEmptyMessage(util/* default */.A.get(ev, 'data.message'))) return null;
@@ -10205,13 +10795,13 @@ class Event extends common/* Com */.Mw {
10205
10795
  t: this.props.t,
10206
10796
  store: this.props.store,
10207
10797
  ev: ev
10208
- }), (0,preact_module.h)(QuickReplies, {
10798
+ }), !this.props.isHistory && (0,preact_module.h)(QuickReplies, {
10209
10799
  store: this.props.store,
10210
10800
  ev: ev,
10211
10801
  onSelect: e => this.chooseQuickReply(e)
10212
10802
  }), this.renderReactions(), this.renderAIDevNote())));
10213
10803
  }
10214
- if (util/* default */.A.get(ev, 'data.message.idempotency_key') === ev.id && this.props.store.now() - ev.created < 900) {
10804
+ if (util/* default */.A.get(ev, 'source_event_id') === ev.id && this.props.store.now() - ev.created < 900) {
10215
10805
  util/* default */.A.setTimeout(() => this.setState({
10216
10806
  refresh: this.state.refresh
10217
10807
  }), 1000);
@@ -10219,7 +10809,7 @@ class Event extends common/* Com */.Mw {
10219
10809
  let $dot = (0,preact_module.h)("div", {
10220
10810
  class: "sending_dot"
10221
10811
  });
10222
- if (this.props.store.now() - ev.created < 900 || util/* default */.A.get(ev, 'data.message.idempotency_key') !== ev.id) {
10812
+ if (this.props.store.now() - ev.created < 900 || util/* default */.A.get(ev, 'source_event_id') !== ev.id) {
10223
10813
  $dot = (0,preact_module.h)("div", {
10224
10814
  class: "sending_dot sending_dot__hide"
10225
10815
  });
@@ -10247,10 +10837,11 @@ class Event extends common/* Com */.Mw {
10247
10837
  class: "convo-event user-message",
10248
10838
  "data-ev-id": ev.id
10249
10839
  }, $sender, (0,preact_module.h)("div", {
10250
- class: "message-user__container"
10840
+ class: 'message-user__container' + (this.animateSend && !this.props.isHistory ? ' message-user__container--send' + (this.state.sendEntered ? '' : ' message-user__container--enter') : '')
10251
10841
  }, $dot, (0,preact_module.h)(TextMessage, {
10252
10842
  ref: this.textMessageRef,
10253
10843
  store: this.props.store,
10844
+ t: this.props.t,
10254
10845
  ev: ev,
10255
10846
  refresh: this.state.refresh,
10256
10847
  onLink: this.props.onLink
@@ -10286,6 +10877,7 @@ class Event extends common/* Com */.Mw {
10286
10877
  })), $error);
10287
10878
  }
10288
10879
  async onSendReaction(action) {
10880
+ if (this.props.isHistory) return;
10289
10881
  if (this._reacting) return;
10290
10882
  let ev = this.props.event.ev;
10291
10883
  let cid = util/* default */.A.get(ev, 'data.message.conversation_id');
@@ -10337,6 +10929,7 @@ class Event extends common/* Com */.Mw {
10337
10929
  this._reacting = false;
10338
10930
  }
10339
10931
  renderReactions() {
10932
+ if (this.props.isHistory) return null;
10340
10933
  if (this.props.store.isAIDevMode()) return null;
10341
10934
  let cid = util/* default */.A.get(this.props.event.ev, 'data.message.conversation_id', '');
10342
10935
  if (cid.startsWith('cslight')) return null;
@@ -10424,7 +11017,7 @@ class Event extends common/* Com */.Mw {
10424
11017
  let byid = util/* default */.A.get(ev, 'by.display_id', util/* default */.A.get(ev, 'by.id')) || '';
10425
11018
  if (bytype === 'user') return util/* default */.A.getUserDisplayName(this.props.store.matchUser());
10426
11019
  let acc = this.props.store.matchAccount();
10427
- if (bytype === 'agent') return util/* default */.A.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
11020
+ if (bytype === 'agent' || util/* default */.A.get(ev, 'by.display_type') === 'agent') return util/* default */.A.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
10428
11021
  if (byid.startsWith('at')) return util/* default */.A.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
10429
11022
  if (bytype === 'bot') {
10430
11023
  let bot = this.props.store.matchBot()[byid];
@@ -10441,6 +11034,9 @@ function Events_toPropertyKey(t) { var i = Events_toPrimitive(t, "string"); retu
10441
11034
  function Events_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
10442
11035
  ;
10443
11036
 
11037
+
11038
+
11039
+
10444
11040
  const convoemptyimg = (convos_empty_namespaceFn());
10445
11041
 
10446
11042
 
@@ -10468,6 +11064,11 @@ class Events extends common/* Com */.Mw {
10468
11064
  this.checkAndSeen();
10469
11065
  }
10470
11066
  componentDidMount() {
11067
+ this.syncTimer = util/* default */.A.setInterval(() => this.syncMessages(), 120_000);
11068
+ this.resumeSync = () => this.syncMessages();
11069
+ window.addEventListener('focus', this.resumeSync);
11070
+ document.addEventListener('visibilitychange', this.resumeSync);
11071
+ this.syncMessages();
10471
11072
  this.setState({
10472
11073
  isShowTyping: false,
10473
11074
  typing_event: {}
@@ -10502,13 +11103,123 @@ class Events extends common/* Com */.Mw {
10502
11103
  }, 5000);
10503
11104
  });
10504
11105
  this.props.store.onMessageUpdated(this, async ev => {
10505
- if (util/* default */.A.convoOfEv(ev) !== this.props.cid) return;
10506
- await this.props.store.reloadConvoEvents(this.props.cid);
11106
+ const cid = util/* default */.A.convoOfEv(ev);
11107
+ if (!this.visibleCounts || !this.visibleCounts[cid]) return;
11108
+ await this.props.store.reloadConvoEvents(cid);
10507
11109
  this.forceUpdate();
10508
11110
  });
11111
+ this.restoreInitialBottom();
11112
+ this.observeHistoryStart();
10509
11113
  }
10510
11114
  componentDidUpdate(prevProps) {
10511
- if (prevProps.cid !== this.props.cid) this.loadConvo();
11115
+ if (prevProps.cid !== this.props.cid && !this.isDraftPromotion(prevProps, this.props)) this.loadConvo();
11116
+ if (prevProps.cid !== this.props.cid || !prevProps.isShow && this.props.isShow) this.syncMessages();
11117
+ this.restoreInitialBottom();
11118
+ this.observeHistoryStart();
11119
+ }
11120
+ componentWillReceiveProps(nextProps) {
11121
+ if (nextProps.cid === this.props.cid) return;
11122
+ if (this.isDraftPromotion(this.props, nextProps)) {
11123
+ this.visibleCounts[nextProps.cid] = this.visibleCounts[this.props.cid] || 30;
11124
+ delete this.visibleCounts[this.props.cid];
11125
+ return;
11126
+ }
11127
+ this.loadVersion = (this.loadVersion || 0) + 1;
11128
+ this.visibleCounts = this.initialVisibleCounts(nextProps);
11129
+ this.evRefs = {};
11130
+ this.historyBusy = true;
11131
+ this.setState({
11132
+ error: false,
11133
+ historyError: false,
11134
+ historyLoading: false,
11135
+ isShowTyping: false,
11136
+ loading: nextProps.cid ? util/* default */.A.Date.now() : false
11137
+ });
11138
+ }
11139
+ isDraftPromotion(previous, next) {
11140
+ return !!previous.cid && util/* default */.A.get(next.store.widgetConvoOrigins, next.cid) === previous.cid;
11141
+ }
11142
+ initialVisibleCounts(props) {
11143
+ const counts = props.cid ? {
11144
+ [props.cid]: 30
11145
+ } : {};
11146
+ if (!props.store.matchConvo || util/* default */.A.get(props.store.matchConvo(props.cid), 'light_type') !== 'widget') return counts;
11147
+ const history = conversationHistory(props.store, props.cid).slice(0, -1).reverse();
11148
+ let remaining = 30;
11149
+ for (const convo of history) {
11150
+ const cached = util/* default */.A.size(props.store.listEvents(convo.id));
11151
+ if (!cached || !remaining) break;
11152
+ counts[convo.id] = Math.min(cached, remaining);
11153
+ remaining -= counts[convo.id];
11154
+ if (!util/* default */.A.get(props.store.outofmsgM, convo.id)) break;
11155
+ }
11156
+ return counts;
11157
+ }
11158
+ syncMessages() {
11159
+ if (!this._isMounted || !this.props.isShow || document.visibilityState === 'hidden') return;
11160
+ const ids = Object.keys(this.visibleCounts || {}).filter(cid => this.visibleCounts[cid]);
11161
+ return Promise.all(ids.map(cid => this.props.store.syncConvoEvents(cid)));
11162
+ }
11163
+ componentWillUnmount() {
11164
+ util/* default */.A.clearInterval(this.syncTimer);
11165
+ window.removeEventListener('focus', this.resumeSync);
11166
+ document.removeEventListener('visibilitychange', this.resumeSync);
11167
+ this.loadVersion = (this.loadVersion || 0) + 1;
11168
+ if (this.timer) util/* default */.A.clearTimeout(this.timer);
11169
+ if (this.historyCheckTimer) util/* default */.A.clearTimeout(this.historyCheckTimer);
11170
+ if (this.historyObserver) this.historyObserver.disconnect();
11171
+ if (this.scrollTimer) util/* default */.A.clearTimeout(this.scrollTimer);
11172
+ if (this.initialSizeObserver) this.initialSizeObserver.disconnect();
11173
+ }
11174
+ stopInitialBottom() {
11175
+ this.initialBottom = false;
11176
+ }
11177
+ restoreInitialBottom() {
11178
+ if (!this.initialBottom || this.props.isShow === false || !this.refBody) return;
11179
+ if (window.ResizeObserver && (this.initialObservedBody !== this.refBody || this.initialObservedContent !== this.refContent)) {
11180
+ if (this.initialSizeObserver) this.initialSizeObserver.disconnect();
11181
+ this.initialObservedBody = this.refBody;
11182
+ this.initialObservedContent = this.refContent;
11183
+ this.initialSizeObserver = new window.ResizeObserver(() => {
11184
+ if (this._isMounted) this.restoreInitialBottom();
11185
+ });
11186
+ this.initialSizeObserver.observe(this.refBody);
11187
+ if (this.refContent) this.initialSizeObserver.observe(this.refContent);
11188
+ }
11189
+ this.refBody.scrollTop = this.refBody.scrollHeight;
11190
+ if (this.checkAndSeen) this.checkAndSeen();
11191
+ }
11192
+ observeHistoryStart() {
11193
+ if (this.observedHistoryStart !== this.historyStart || this.observedHistoryRoot !== this.refBody) {
11194
+ if (this.historyObserver) this.historyObserver.disconnect();
11195
+ this.observedHistoryStart = this.historyStart;
11196
+ this.observedHistoryRoot = this.refBody;
11197
+ if (this.historyStart && this.refBody && window.IntersectionObserver) {
11198
+ this.historyObserver = new window.IntersectionObserver(entries => {
11199
+ if (entries.some(entry => entry.isIntersecting)) this.queueHistoryCheck();
11200
+ }, {
11201
+ root: this.refBody
11202
+ });
11203
+ this.historyObserver.observe(this.historyStart);
11204
+ }
11205
+ }
11206
+ this.queueHistoryCheck();
11207
+ }
11208
+ queueHistoryCheck() {
11209
+ if (this.historyCheckTimer || !this._isMounted) return;
11210
+ this.historyCheckTimer = util/* default */.A.setTimeout(() => {
11211
+ this.historyCheckTimer = null;
11212
+ this.loadVisibleHistory();
11213
+ }, 0);
11214
+ }
11215
+ loadVisibleHistory() {
11216
+ if (!this._isMounted || this.props.isShow === false || this.historyBusy || this.state.historyError || !this.hasMore()) return;
11217
+ if (!this.refBody || !this.historyStart) return;
11218
+ const root = this.refBody.getBoundingClientRect();
11219
+ const marker = this.historyStart.getBoundingClientRect();
11220
+ if (root.width <= 0 || root.height <= 0 || marker.height <= 0) return;
11221
+ if (marker.right <= Math.max(root.left, 0) || marker.left >= Math.min(root.right, window.innerWidth)) return;
11222
+ if (marker.bottom > Math.max(root.top, 0) && marker.top < Math.min(root.bottom, window.innerHeight)) return this.loadMore();
10512
11223
  }
10513
11224
  setEventChildRef(ele, id) {
10514
11225
  this.evRefs[id] = ele;
@@ -10535,26 +11246,28 @@ class Events extends common/* Com */.Mw {
10535
11246
  }
10536
11247
  render() {
10537
11248
  if (this.state.error) return this.renderError();
10538
- let events = util/* default */.A.map(this.props.store.listEvents(this.props.cid));
10539
- if (!this.state.loading && util/* default */.A.size(events) === 0 && !this.props.cid) {
10540
- return (0,preact_module.h)("div", {
10541
- ref: ref => this.refBody = ref,
10542
- class: "widget-body--events-container"
10543
- }, (0,preact_module.h)("div", {
10544
- class: "widget-body--empty"
10545
- }, (0,preact_module.h)("div", {
10546
- class: "widget-body--empty-icon"
10547
- }), (0,preact_module.h)("div", {
10548
- class: "widget-body--empty-text"
10549
- }, this.props.t('empty_convo_text'))), (0,preact_module.h)(PoweredBy, {
10550
- store: this.props.store
11249
+ const conversations = conversationHistory(this.props.store, this.props.cid).filter(convo => this.visibleCounts && this.visibleCounts[convo.id]);
11250
+ let events = conversations.flatMap(convo => {
11251
+ const entries = conversationEvents(this.props.store, convo).slice(-this.visibleCounts[convo.id]).filter(entry => convo.id === this.props.cid || entry.ev.type !== 'conversation_state_updated');
11252
+ processEvents(convo, entries);
11253
+ return entries.map(entry => ({
11254
+ ...entry,
11255
+ convo
10551
11256
  }));
11257
+ });
11258
+ if (!this.state.loading && !this.props.creating && events.length === 0 && !this.props.cid) {
11259
+ if (!this.greetingCreated) this.greetingCreated = util/* default */.A.Date.now();
11260
+ events.push({
11261
+ mode: 'lead',
11262
+ is_last_message_send: true,
11263
+ ev: {
11264
+ ...widgetGreeting(this.props.chatbox, this.props.t, this.greetingCreated),
11265
+ id: 'widget-virtual-greeting'
11266
+ }
11267
+ });
10552
11268
  }
10553
- events = util/* default */.A.orderBy(events, 'created', 'asc');
11269
+ this.renderedIds = new Set(events.map(entry => entry.ev.id));
10554
11270
  let convo = this.props.store.matchConvo(this.props.cid);
10555
- events = util/* default */.A.map(events, ev => ({
10556
- ev: ev
10557
- }));
10558
11271
  let ev = this.state.typing_event || {
10559
11272
  id: 'evzz' + util/* default */.A.Date.now(),
10560
11273
  created: util/* default */.A.Date.now(),
@@ -10579,11 +11292,21 @@ class Events extends common/* Com */.Mw {
10579
11292
  }
10580
11293
  }
10581
11294
  };
10582
- processEvents(convo, events);
11295
+ const hasMessages = events.some(entry => entry.ev.type === 'message_sent');
10583
11296
  events.push(fakeev);
10584
11297
  let $events = util/* default */.A.map(events, ev => {
10585
- let isLast = ev.is_last_message_send && util/* default */.A.get(convo, 'state') !== 'ended';
10586
- return (0,preact_module.h)(Event, {
11298
+ const sourceConvo = ev.convo || convo;
11299
+ const isHistory = sourceConvo && sourceConvo.id !== this.props.cid;
11300
+ let isLast = !isHistory && ev.is_last_message_send && util/* default */.A.get(sourceConvo, 'state') !== 'ended';
11301
+ const sourceId = sourceConvo ? sourceConvo.id : '';
11302
+ const key = (util/* default */.A.get(this.props.store.widgetConvoOrigins, sourceId) || sourceId) + ':' + conversationEventKey(ev.ev);
11303
+ return (0,preact_module.h)("fieldset", {
11304
+ class: isHistory ? 'conversation-event conversation-event--history' : 'conversation-event',
11305
+ disabled: isHistory,
11306
+ "data-conversation-id": sourceConvo && sourceConvo.id,
11307
+ key: key
11308
+ }, (0,preact_module.h)(Event, {
11309
+ isHistory: isHistory,
10587
11310
  isLast: isLast,
10588
11311
  chatbox: this.props.chatbox,
10589
11312
  onLink: this.props.onLink,
@@ -10593,45 +11316,78 @@ class Events extends common/* Com */.Mw {
10593
11316
  onPostback: this.props.onPostback,
10594
11317
  onFocusSourceEventFromQuote: this.onFocusSourceEventFromQuote,
10595
11318
  ref: ele => this.setEventChildRef(ele, ev.ev.id),
10596
- isConvoEnded: util/* default */.A.get(convo, 'state') === 'ended',
11319
+ isConvoEnded: util/* default */.A.get(sourceConvo, 'state') === 'ended',
10597
11320
  event: ev,
10598
11321
  t: this.props.t,
10599
- key: ev.ev.id
10600
- });
11322
+ key: key
11323
+ }));
10601
11324
  });
10602
11325
  let $loading = null;
10603
- let style = 'opacity: 1 !important';
10604
- if (this.props.creating) {
11326
+ if (!hasMessages && (this.props.creating || this.state.loading)) {
10605
11327
  $loading = (0,preact_module.h)(spinner/* default */.A, {
10606
11328
  static: true,
10607
11329
  mode: util/* default */.A.get(this.props.chatbox, 'primary_color', 'dark'),
10608
11330
  size: "120",
10609
11331
  center: true
10610
11332
  });
10611
- style = 'opacity: 0 !important';
10612
- }
10613
- if (this.state.loading) {
10614
- if (util/* default */.A.Date.now() - this.state.loading > 500) {
10615
- $loading = (0,preact_module.h)(spinner/* default */.A, {
10616
- static: true,
10617
- mode: util/* default */.A.get(this.props.chatbox, 'primary_color', 'dark'),
10618
- size: "120",
10619
- center: true
10620
- });
10621
- style = 'opacity: 0 !important';
10622
- }
10623
11333
  }
10624
11334
  return (0,preact_module.h)(preact_module/* Fragment */.FK, null, $loading, (0,preact_module.h)("div", {
10625
- style: style,
10626
11335
  ref: ref => this.refBody = ref,
10627
11336
  class: "widget-body--events-container",
10628
- onMouseOver: this.checkAndSeen
10629
- }, (0,preact_module.h)("div", {
10630
- class: "widget-body--events"
11337
+ onMouseOver: this.checkAndSeen,
11338
+ onScroll: () => this.queueHistoryCheck(),
11339
+ onWheel: () => this.stopInitialBottom(),
11340
+ onTouchStart: () => this.stopInitialBottom(),
11341
+ onPointerDown: () => this.stopInitialBottom(),
11342
+ onKeyDown: () => this.stopInitialBottom()
11343
+ }, this.hasMore() && (0,preact_module.h)("div", {
11344
+ ref: ref => {
11345
+ this.historyStart = ref;
11346
+ },
11347
+ class: "conversation-history-start",
11348
+ "aria-hidden": "true"
11349
+ }), this.state.historyLoading && !this.state.historyError && (0,preact_module.h)(spinner/* default */.A, {
11350
+ size: "16",
11351
+ mode: "blue"
11352
+ }), this.state.historyError && this.renderHistoryError(), (0,preact_module.h)("div", {
11353
+ class: "widget-body--events",
11354
+ ref: ref => {
11355
+ this.refContent = ref;
11356
+ }
10631
11357
  }, $events), (0,preact_module.h)(PoweredBy, {
10632
11358
  store: this.props.store
10633
11359
  })));
10634
11360
  }
11361
+ renderHistoryError() {
11362
+ const t = this.props.t;
11363
+ const translated = t('load_history_error');
11364
+ const locale = t.locale ? t.locale().toLowerCase() : 'en';
11365
+ const fallback = locale.startsWith('vi') ? 'Chưa tải được tin nhắn cũ' : 'Couldn’t load earlier messages';
11366
+ const text = translated && translated !== 'load_history_error' ? translated : fallback;
11367
+ return (0,preact_module.h)("div", {
11368
+ class: "conversation-history-error",
11369
+ role: "status"
11370
+ }, (0,preact_module.h)("span", {
11371
+ class: "conversation-history-error__text"
11372
+ }, text), (0,preact_module.h)("button", {
11373
+ class: "conversation-history-error__retry",
11374
+ type: "button",
11375
+ disabled: this.state.historyLoading,
11376
+ "aria-label": t('try_again'),
11377
+ "aria-busy": !!this.state.historyLoading,
11378
+ onClick: () => this.loadMore()
11379
+ }, (0,preact_module.h)("span", {
11380
+ class: "conversation-history-error__retry-label",
11381
+ style: {
11382
+ visibility: this.state.historyLoading ? 'hidden' : 'visible'
11383
+ }
11384
+ }, t('try_again')), this.state.historyLoading && (0,preact_module.h)("span", {
11385
+ class: "conversation-history-error__spinner",
11386
+ "aria-hidden": "true"
11387
+ }, (0,preact_module.h)(spinner/* default */.A, {
11388
+ size: "14"
11389
+ }))));
11390
+ }
10635
11391
  renderError() {
10636
11392
  let $tryAgainBtn = (0,preact_module.h)("a", {
10637
11393
  href: "#",
@@ -10679,61 +11435,168 @@ class Events extends common/* Com */.Mw {
10679
11435
  });
10680
11436
  }
10681
11437
  onEvent(newev) {
10682
- if (util/* default */.A.convoOfEv(newev) !== this.props.cid) return;
11438
+ const cid = util/* default */.A.convoOfEv(newev);
11439
+ if (!this.visibleCounts || !this.visibleCounts[cid]) return;
11440
+ if (newev.type === 'message_sent') {
11441
+ const sourceEventId = util/* default */.A.get(newev, 'source_event_id');
11442
+ const key = cid + ':' + (sourceEventId || newev.id);
11443
+ this.receivedMessageKeys = this.receivedMessageKeys || new Set();
11444
+ const known = this.receivedMessageKeys.has(key) || this.renderedIds && (this.renderedIds.has(newev.id) || this.renderedIds.has(sourceEventId));
11445
+ this.receivedMessageKeys.add(key);
11446
+ if (known) return;
11447
+ if (this.renderedIds) this.visibleCounts[cid]++;
11448
+ }
11449
+ if (cid !== this.props.cid) {
11450
+ const container = this.refBody;
11451
+ const height = container ? container.scrollHeight : 0;
11452
+ const top = container ? container.scrollTop : 0;
11453
+ this.forceUpdate();
11454
+ util/* default */.A.setTimeout(() => {
11455
+ if (container && container === this.refBody) container.scrollTop = top + container.scrollHeight - height;
11456
+ });
11457
+ return;
11458
+ }
10683
11459
  let isBottom = this.isBottom();
11460
+ if (newev.type === 'message_sent') this.stopInitialBottom();
10684
11461
  var byme = false;
10685
- if (util/* default */.A.get(newev, 'type') === 'message_sent' && newev.id === util/* default */.A.get(newev, 'data.message.idempotency_key')) byme = true;
10686
- if (byme || isBottom) this.scrollToBottom();
11462
+ if (util/* default */.A.get(newev, 'type') === 'message_sent' && newev.id === util/* default */.A.get(newev, 'source_event_id')) byme = true;
11463
+ if (byme || isBottom) this.scrollToBottom('smooth');
11464
+ }
11465
+ historyTarget() {
11466
+ const conversations = conversationHistory(this.props.store, this.props.cid);
11467
+ const first = conversations.findIndex(convo => this.visibleCounts && this.visibleCounts[convo.id]);
11468
+ if (first < 0) return;
11469
+ const convo = conversations[first];
11470
+ const count = util/* default */.A.size(this.props.store.listEvents(convo.id));
11471
+ if (this.visibleCounts[convo.id] < count || !convo.id.startsWith('cslight') && !util/* default */.A.get(this.props.store.outofmsgM, convo.id)) return convo;
11472
+ return conversations[first - 1];
11473
+ }
11474
+ hasMore() {
11475
+ return !!this.historyTarget();
11476
+ }
11477
+ async fetchPage(cid) {
11478
+ if (cid.startsWith('cslight') || util/* default */.A.get(this.props.store.outofmsgM, cid)) return {};
11479
+ this.eventRequests = this.eventRequests || new Map();
11480
+ let request = this.eventRequests.get(cid);
11481
+ if (!request) {
11482
+ request = this.props.store.fetchMoreEvents(cid, 30);
11483
+ this.eventRequests.set(cid, request);
11484
+ }
11485
+ try {
11486
+ return await request;
11487
+ } finally {
11488
+ if (this.eventRequests.get(cid) === request) this.eventRequests.delete(cid);
11489
+ }
10687
11490
  }
10688
11491
  async loadConvo() {
10689
- if (!this.props.cid) return;
10690
- this.lastContentOffsetY = 0;
11492
+ const cid = this.props.cid;
11493
+ this.receivedMessageKeys = new Set();
11494
+ this.initialBottom = true;
11495
+ const version = this.loadVersion = (this.loadVersion || 0) + 1;
11496
+ this.visibleCounts = this.initialVisibleCounts(this.props);
11497
+ this.historyBusy = true;
11498
+ this.evRefs = {};
10691
11499
  this.setState({
10692
- loading: false
11500
+ error: false,
11501
+ historyError: false,
11502
+ historyLoading: false,
11503
+ isShowTyping: false,
11504
+ loading: cid && !util/* default */.A.size(this.props.store.listEvents(cid)) ? util/* default */.A.Date.now() : false
10693
11505
  });
10694
- let events = this.props.store.listEvents(this.props.cid);
10695
- if (util/* default */.A.size(events) === 0) {
10696
- this.setState({
10697
- loading: util/* default */.A.Date.now()
10698
- });
10699
- util/* default */.A.setTimeout(() => {
10700
- this.forceUpdate();
10701
- }, 800);
10702
- let cid = this.props.cid;
10703
- let {
10704
- error
10705
- } = await this.props.store.fetchMoreEvents(cid);
10706
- this.setState({
10707
- loading: false
11506
+ try {
11507
+ if (cid && !util/* default */.A.size(this.props.store.listEvents(cid))) {
11508
+ const result = await this.fetchPage(cid);
11509
+ if (version !== this.loadVersion || !this._isMounted) return;
11510
+ if (result && result.error) this.setState({
11511
+ error: !util/* default */.A.size(this.props.store.listEvents(cid)),
11512
+ historyError: true
11513
+ });
11514
+ }
11515
+ } catch (_) {
11516
+ if (version === this.loadVersion) this.setState({
11517
+ error: !util/* default */.A.size(this.props.store.listEvents(cid)),
11518
+ historyError: true
10708
11519
  });
10709
- if (cid !== this.props.cid) return;
10710
- if (error) {
11520
+ } finally {
11521
+ if (version === this.loadVersion && this._isMounted) {
11522
+ this.historyBusy = false;
10711
11523
  this.setState({
10712
- error: true
11524
+ loading: false
10713
11525
  });
10714
- return;
11526
+ if (!this.initialBottom && this.receivedMessageKeys.size && this.isBottom()) this.scrollToBottom('smooth');
11527
+ this.queueHistoryCheck();
11528
+ if (cid && cid.startsWith('cslightwidget_') && Object.keys(this.visibleCounts).length === 1 && this.hasMore()) this.loadMore();
10715
11529
  }
10716
11530
  }
10717
- this.props.store.fetchMoreEvents(this.props.cid);
11531
+ }
11532
+ async loadMore() {
11533
+ if (this.historyBusy || !this._isMounted) return;
11534
+ const target = this.historyTarget();
11535
+ if (!target) return;
11536
+ const version = this.loadVersion;
11537
+ this.historyBusy = true;
11538
+ const container = this.refBody;
11539
+ const visible = this.visibleCounts[target.id] || 0;
10718
11540
  this.setState({
10719
- error: false
11541
+ historyLoading: true
10720
11542
  });
10721
- this.scrollToBottom();
11543
+ try {
11544
+ if (visible >= util/* default */.A.size(this.props.store.listEvents(target.id))) {
11545
+ const result = await this.fetchPage(target.id);
11546
+ if (result && result.error) throw result.error;
11547
+ }
11548
+ if (version !== this.loadVersion || !this._isMounted) return;
11549
+ this.visibleCounts[target.id] = visible + 30;
11550
+ this.setState({
11551
+ historyError: false
11552
+ });
11553
+ } catch (_) {
11554
+ if (version === this.loadVersion) this.setState({
11555
+ historyError: true
11556
+ });
11557
+ } finally {
11558
+ if (version === this.loadVersion && this._isMounted) {
11559
+ const height = container ? container.scrollHeight : 0;
11560
+ const top = container ? container.scrollTop : 0;
11561
+ this.setState({
11562
+ historyLoading: false
11563
+ });
11564
+ this.forceUpdate();
11565
+ await new Promise(resolve => util/* default */.A.setTimeout(resolve, 0));
11566
+ if (version === this.loadVersion && this._isMounted) {
11567
+ if (this.initialBottom) this.restoreInitialBottom();else if (container && container === this.refBody) {
11568
+ container.scrollTop = top + container.scrollHeight - height;
11569
+ this.lastScrollTop = container.scrollTop;
11570
+ }
11571
+ this.historyBusy = false;
11572
+ this.queueHistoryCheck();
11573
+ }
11574
+ }
11575
+ }
10722
11576
  }
10723
11577
  isBottom() {
10724
11578
  let $container = this.refBody;
10725
11579
  if (!$container) return false;
10726
11580
  return $container.scrollHeight < $container.scrollTop + $container.offsetHeight + 50;
10727
11581
  }
10728
- scrollToBottom() {
10729
- util/* default */.A.setTimeout(() => {
11582
+ scrollToBottom(behavior = 'auto') {
11583
+ if (this.scrollTimer) util/* default */.A.clearTimeout(this.scrollTimer);
11584
+ const cid = this.props.cid;
11585
+ this.scrollTimer = util/* default */.A.setTimeout(() => {
11586
+ this.scrollTimer = null;
11587
+ if (!this._isMounted || this.props.cid !== cid) return;
10730
11588
  const $div = this.refBody;
10731
- if ($div) $div.scrollTop = $div.scrollHeight;
11589
+ if (!$div) return;
11590
+ const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
11591
+ if (behavior === 'smooth' && !reducedMotion && $div.scrollTo) {
11592
+ $div.scrollTo({
11593
+ top: $div.scrollHeight,
11594
+ behavior: 'smooth'
11595
+ });
11596
+ } else {
11597
+ $div.scrollTop = $div.scrollHeight;
11598
+ }
10732
11599
  });
10733
- util/* default */.A.setTimeout(() => {
10734
- const $div = this.refBody;
10735
- if ($div) $div.scrollTop = $div.scrollHeight;
10736
- }, 100);
10737
11600
  if (this.props.isShow) {
10738
11601
  if (this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
10739
11602
  this.props.store.seenConvo(this.props.cid);
@@ -10741,57 +11604,6 @@ class Events extends common/* Com */.Mw {
10741
11604
  }
10742
11605
  }
10743
11606
  }
10744
- function processEvents(convo, events) {
10745
- events = events.filter(event => visibleEvent(event.ev));
10746
- if (events.length < 1) return;
10747
- var lastAgentEvent;
10748
- for (var i = 1; i < events.length; i++) {
10749
- let curEvent = events[i];
10750
- let lastEvent = events[i - 1];
10751
- if (util/* default */.A.get(curEvent, 'ev.by.type') != 'user' && !curEvent.is_typing) {
10752
- lastAgentEvent = curEvent;
10753
- }
10754
- if (visibleEvent(curEvent.ev)) {
10755
- let elapsedSec = util/* default */.A.unixSec(curEvent.ev.created) - util/* default */.A.unixSec(lastEvent.ev.created);
10756
- if (elapsedSec > 300) curEvent.show_time = true;
10757
- }
10758
- }
10759
- if (lastAgentEvent) lastAgentEvent.show_time = true;
10760
- for (var i = 0; i < events.length; i++) {
10761
- let curEvent = events[i];
10762
- if (util/* default */.A.get(curEvent, 'ev.type') === 'message_sent') {
10763
- curEvent.show_time = true;
10764
- break;
10765
- }
10766
- }
10767
- let lastMsgSentIdx = -1;
10768
- for (var i = 0; i < events.length; i++) {
10769
- let curEvent = events[i];
10770
- let prevEvent = events[i - 1];
10771
- let nextEvent = events[i + 1];
10772
- if (curEvent.ev.type === 'message_sent') {
10773
- lastMsgSentIdx = i;
10774
- curEvent.mode = 'lead';
10775
- if (util/* default */.A.get(prevEvent, 'ev.type') === 'message_sent' && util/* default */.A.get(prevEvent, 'ev.by.id') === util/* default */.A.get(curEvent, 'ev.by.id')) {
10776
- curEvent.mode = 'follow';
10777
- }
10778
- if (util/* default */.A.get(nextEvent, 'ev.type') !== 'message_sent' || util/* default */.A.get(nextEvent, 'ev.by.id') !== util/* default */.A.get(curEvent, 'ev.by.id')) {
10779
- curEvent.is_end = true;
10780
- }
10781
- continue;
10782
- }
10783
- }
10784
- if (lastMsgSentIdx > -1) {
10785
- events[lastMsgSentIdx].is_last_message_send = true;
10786
- }
10787
- }
10788
- function visibleEvent(ev) {
10789
- let type = util/* default */.A.get(ev, 'type');
10790
- if (type === 'message_sent') return true;
10791
- if (type === 'conversation_state_updated') {
10792
- return util/* default */.A.get(ev, 'data.conversation.state') == 'ended';
10793
- }
10794
- }
10795
11607
  function Events_isSummited(form) {
10796
11608
  let fields = util/* default */.A.get(form, 'fields') || [];
10797
11609
  return util/* default */.A.find(fields, field => !!field.answered);
@@ -11245,6 +12057,7 @@ var Widget_empty = (empty_namespaceFn());
11245
12057
 
11246
12058
 
11247
12059
 
12060
+
11248
12061
  let Order = false;
11249
12062
  const LoadOrder = () => __webpack_require__.e(/* import() */ 185).then(() => (__webpack_require__(4185)));
11250
12063
 
@@ -11256,51 +12069,12 @@ class Widget extends common/* Com */.Mw {
11256
12069
  constructor(props) {
11257
12070
  super(props);
11258
12071
  Widget_defineProperty(this, "msgInput", (0,preact_module/* createRef */._3)());
11259
- Widget_defineProperty(this, "findMissingRTMessage", async started => {
11260
- let messageSentDict = this.props.store.listAgentRealtimeMessageSent();
11261
- let res1 = await this.props.store.sbzListConversations();
11262
- let conversions = util/* default */.A.get(res1, 'body.conversations') || [];
11263
- let cids = util/* default */.A.map(conversions, convo => convo.id);
11264
- let promises = util/* default */.A.map(cids, cid => this.props.store.sbzListMessages(cid));
11265
- let msgReses = await Promise.all(promises);
11266
- util/* default */.A.map(msgReses, msgRes => {
11267
- let messages = util/* default */.A.get(msgRes, 'body') || [];
11268
- util/* default */.A.map(messages, ev => {
11269
- if (ev.created < started) return;
11270
- if (ev.type !== 'message_sent') return;
11271
- if (util/* default */.A.get(ev, 'by.type') === 'user') return;
11272
- console.log('check ev pass condition', ev);
11273
- if (!messageSentDict[ev.id] && !this.debugAgentSentEvIds[ev.id]) {
11274
- let accid = util/* default */.A.get(this.props.store.matchAccount(), 'id');
11275
- this.props.store.sendBugReport(`[WIDGET ${accid}] Missing agent message sent evid ${ev.id}, cid ${util/* default */.A.convoOfEv(ev)}, ev_created ${ev.created}, FE timestamp ${Date.now()}, Init Debug timestamp ${started}`);
11276
- this.debugAgentSentEvIds[ev.id] = true;
11277
- }
11278
- });
11279
- });
11280
- });
11281
- Widget_defineProperty(this, "debugRTAgentMessageSent", async () => {
11282
- try {
11283
- let debugAccountIds = this.props.store.matchDebugAccountIds();
11284
- let accid = util/* default */.A.get(this.props.store.matchAccount(), 'id');
11285
- if (!debugAccountIds.includes(accid)) return;
11286
- console.log('START check RT agent message with BE source');
11287
- let started = Date.now();
11288
- this.findMissingRTMessage(started);
11289
- for (let i = 0; i < 100_000; i++) {
11290
- await util/* default */.A.sleep(120_000);
11291
- console.log('LOOP check RT agent message with BE source', i);
11292
- this.findMissingRTMessage(started);
11293
- }
11294
- } catch (err) {
11295
- this.props.store.sendBugReport(`debugRTAgentMessageSent ERROR ${err.stack}`);
11296
- }
11297
- });
11298
12072
  Widget_defineProperty(this, "formMounted", form => {
11299
12073
  let formData = this.fillForm(form);
11300
12074
  if (form.question_required || this.state.quickReplyMessage.text) {
11301
12075
  formData['question'] = {
11302
12076
  key: 'question',
11303
- is_required: true,
12077
+ is_required: false,
11304
12078
  label: this.props.t.i18n(util/* default */.A.get(form, `i18n_question_label`, {})) || form.question_label,
11305
12079
  type: 'text',
11306
12080
  value: this.state.quickReplyMessage.text
@@ -11311,14 +12085,118 @@ class Widget extends common/* Com */.Mw {
11311
12085
  });
11312
12086
  if (!this.props.store.isMobile() && !form._updated) this.focusInput();
11313
12087
  });
11314
- Widget_defineProperty(this, "sendMessage", async message => {
11315
- let hasPostback = util/* default */.A.find(message.attachments, att => att.type === 'postback');
11316
- if (this.isFormRequired() && hasPostback) {
11317
- this.onStartConvoClick();
11318
- this.fillQuickReplyToQuestion(message);
12088
+ Widget_defineProperty(this, "sendMessage", async (message, {
12089
+ formSubmitted = false,
12090
+ groupId
12091
+ } = {}) => {
12092
+ if (this._sendingNewConversation) return false;
12093
+ if (util/* default */.A.get(this.props.store.matchConvo(this.props.cid), 'state') === 'ended') {
12094
+ const form = this.startingConversationForm();
12095
+ if (form && (util/* default */.A.size(form.groups) || form.group_required || this.isFormRequired(''))) {
12096
+ this.setState({
12097
+ restartForm: true,
12098
+ quickReplyMessage: message
12099
+ });
12100
+ return;
12101
+ }
12102
+ this._sendingNewConversation = true;
12103
+ this.setState({
12104
+ creating: true,
12105
+ creatingError: null
12106
+ });
12107
+ try {
12108
+ const {
12109
+ convo,
12110
+ error
12111
+ } = await this.props.store.startConvo({
12112
+ locale: this.props.t.locale(),
12113
+ message: message.text,
12114
+ initial_by: this.props.store.matchUser().id
12115
+ });
12116
+ if (error) {
12117
+ this.setState({
12118
+ creatingError: error
12119
+ });
12120
+ return false;
12121
+ }
12122
+ await this.props.store.sendConvoEvent(convo.id, 'message_sent', {
12123
+ message
12124
+ });
12125
+ this.props.onGo({
12126
+ view: 'chat',
12127
+ cid: convo.id
12128
+ });
12129
+ } finally {
12130
+ this._sendingNewConversation = false;
12131
+ this.setState({
12132
+ creating: false
12133
+ });
12134
+ }
12135
+ return;
12136
+ }
12137
+ const form = this.startingConversationForm();
12138
+ const needsGroup = form && !this.hasSentMessage(this.props.cid) && (util/* default */.A.size(form.groups) || form.group_required);
12139
+ if (!formSubmitted && (this.isFormRequired() || needsGroup)) {
12140
+ this.setState({
12141
+ clickedJoin: true,
12142
+ quickReplyMessage: message
12143
+ });
11319
12144
  return;
11320
12145
  }
11321
12146
  let text = message.text;
12147
+ const localConvo = this.props.store.matchConvo(this.props.cid);
12148
+ if (localConvo && localConvo.light_type === 'widget') {
12149
+ this._sendingNewConversation = true;
12150
+ this.setState({
12151
+ creating: true,
12152
+ creatingError: null
12153
+ });
12154
+ try {
12155
+ const {
12156
+ convo,
12157
+ error
12158
+ } = await this.props.store.startConvo({
12159
+ locale: localConvo.locale,
12160
+ message: text,
12161
+ group_id: groupId,
12162
+ initial_by: this.props.store.matchUser().id,
12163
+ greeting_message: localConvo.events[0]
12164
+ });
12165
+ if (error || !convo) {
12166
+ this.setState({
12167
+ creatingError: error || 'start_failed'
12168
+ });
12169
+ return false;
12170
+ }
12171
+ this.props.store.promoteWidgetConvo(localConvo.id, convo.id);
12172
+ const sending = this.props.store.sendConvoEvent(convo.id, 'message_sent', {
12173
+ message
12174
+ });
12175
+ this.props.onGo({
12176
+ view: 'chat',
12177
+ cid: convo.id
12178
+ });
12179
+ await sending;
12180
+ this.userSent[convo.id] = true;
12181
+ if (formSubmitted && form && form.end_conversation_after_submit) await this.props.store.endConvo(convo.id);
12182
+ this.setState({
12183
+ clickedJoin: false,
12184
+ restartForm: false,
12185
+ quickReplyMessage: {}
12186
+ });
12187
+ } catch (error) {
12188
+ this.setState({
12189
+ creatingError: error
12190
+ });
12191
+ return false;
12192
+ } finally {
12193
+ this._sendingNewConversation = false;
12194
+ this.setState({
12195
+ creating: false
12196
+ });
12197
+ }
12198
+ return;
12199
+ }
11322
12200
  if (this.props.cid && this.props.cid.startsWith('cslight')) {
11323
12201
  let cid = this.props.cid;
11324
12202
  this._creating = (this._creating || 0) + 1;
@@ -11389,14 +12267,15 @@ class Widget extends common/* Com */.Mw {
11389
12267
  });
11390
12268
  return;
11391
12269
  }
11392
- await this.props.store.sendConvoEvent(convo.id, 'message_sent', {
12270
+ const sending = this.props.store.sendConvoEvent(convo.id, 'message_sent', {
11393
12271
  message
11394
12272
  });
11395
- if (_creating != this._creating) return;
11396
12273
  this.props.onGo({
11397
12274
  view: 'chat',
11398
12275
  cid: convo.id
11399
12276
  });
12277
+ await sending;
12278
+ if (_creating != this._creating) return;
11400
12279
  this.setState({
11401
12280
  creating: false
11402
12281
  });
@@ -11436,7 +12315,6 @@ class Widget extends common/* Com */.Mw {
11436
12315
  this.focusInput();
11437
12316
  });
11438
12317
  this.userSent = {};
11439
- this.debugAgentSentEvIds = {};
11440
12318
  this.wasFormInputed = false;
11441
12319
  this.setState({
11442
12320
  creating: false,
@@ -11452,7 +12330,6 @@ class Widget extends common/* Com */.Mw {
11452
12330
  componentDidMount() {
11453
12331
  if (!this.props.store.isMobile()) this.focusInput();
11454
12332
  this.updateFormDataFields();
11455
- this.debugRTAgentMessageSent();
11456
12333
  }
11457
12334
  applyMessage(text) {
11458
12335
  this.focusInput(text);
@@ -11467,6 +12344,7 @@ class Widget extends common/* Com */.Mw {
11467
12344
  this.closeOrder();
11468
12345
  this.setState({
11469
12346
  clickedJoin: false,
12347
+ restartForm: false,
11470
12348
  quickReplyMessage: {}
11471
12349
  });
11472
12350
  util/* default */.A.setTimeout(() => {
@@ -11476,19 +12354,14 @@ class Widget extends common/* Com */.Mw {
11476
12354
  this.updateFormDataFields();
11477
12355
  }
11478
12356
  }
12357
+ componentWillUnmount() {
12358
+ this.cancelContainerFocus();
12359
+ }
11479
12360
  ShowTyping() {
11480
12361
  this.$events && this.$events.ShowTyping();
11481
12362
  }
11482
12363
  shouldShowForm() {
11483
- let form;
11484
- let accountSetting = this.props.plugin.chatbox || {};
11485
- let acc = this.props.store.matchAccount() || {};
11486
- if (util/* default */.A.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
11487
- let offlineEnabled = util/* default */.A.get(accountSetting, 'offline_form.enabled');
11488
- if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form;
11489
- if (!this.hasSentMessage(this.props.cid) && form && (util/* default */.A.size(form.groups) || form.group_required)) return true;
11490
- let formRequired = this.isFormRequired();
11491
- return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
12364
+ return !!(this.state.restartForm || this.state.clickedJoin);
11492
12365
  }
11493
12366
  render() {
11494
12367
  let showform = this.shouldShowForm();
@@ -11552,42 +12425,22 @@ class Widget extends common/* Com */.Mw {
11552
12425
  util/* default */.A.map(formData, (field, key) => {
11553
12426
  field = Object.assign({}, field);
11554
12427
  field.is_empty_error = false;
11555
- if (field.is_required && (field.value === undefined || field.value === '' || util/* default */.A.size(field.value) === 0 && Array.isArray(field.value))) {
12428
+ if (field.is_required && (field.value == null || typeof field.value === 'string' && !field.value.trim() || util/* default */.A.size(field.value) === 0 && Array.isArray(field.value))) {
11556
12429
  field.is_empty_error = true;
11557
12430
  field.error = this.props.t('error_empty');
11558
12431
  } else field.error = '';
11559
- if (key.substr(5) === 'emails') {
11560
- if (field.is_required) {
11561
- if (!util/* default */.A.isEmail(field.value)) {
11562
- field.error = this.props.t('error_email_invalid');
11563
- }
11564
- } else {
11565
- let value = field.value || '';
11566
- if (typeof value !== 'string') value = value + '';
11567
- if (value.trim() && !util/* default */.A.isEmail(field.value)) {
11568
- field.error = this.props.t('error_email_invalid');
11569
- }
11570
- }
12432
+ if (key === 'attr:emails' && !field.error && String(field.value ?? '').trim() && !util/* default */.A.isEmail(field.value)) {
12433
+ field.error = this.props.t('error_email_invalid');
11571
12434
  }
11572
- if (key.substr(5) === 'phones') {
11573
- if (field.is_required) {
11574
- if (!util/* default */.A.isPhone(field.value)) {
11575
- field.error = this.props.t('error_phone_invalid');
11576
- }
11577
- } else {
11578
- let value = field.value || '';
11579
- if (typeof value !== 'string') value = value + '';
11580
- if (value.trim() && !util/* default */.A.isPhone(field.value)) {
11581
- field.error = this.props.t('error_phone_invalid');
11582
- }
11583
- }
12435
+ if (key === 'attr:phones' && !field.error && String(field.value ?? '').trim() && !util/* default */.A.isPhone(field.value)) {
12436
+ field.error = this.props.t('error_phone_invalid');
11584
12437
  }
11585
12438
  newformdata[key] = field;
11586
12439
  });
11587
12440
  return newformdata;
11588
12441
  }
11589
12442
  async submitPrechatForm(form, formName) {
11590
- if (this.state.submiting) return;
12443
+ if (this.state.submiting || this.state.creating) return;
11591
12444
  let newData = this.validateForm(this.state.formData);
11592
12445
  let hasError = util/* default */.A.find(newData, field => !!field.error);
11593
12446
  if (hasError) {
@@ -11602,6 +12455,8 @@ class Widget extends common/* Com */.Mw {
11602
12455
  let is_lead = false;
11603
12456
  util/* default */.A.map(data, (field, key) => {
11604
12457
  if (!key.startsWith('attr:')) return;
12458
+ if (key === 'attr:phones') field.value = String(field.value ?? '').trim().replace(/[(). \-]/g, '');
12459
+ if (key === 'attr:emails') field.value = String(field.value ?? '').trim();
11605
12460
  var attr = {
11606
12461
  key: key.substr(5)
11607
12462
  };
@@ -11616,7 +12471,8 @@ class Widget extends common/* Com */.Mw {
11616
12471
  key: 'lead_source',
11617
12472
  text: 'widget'
11618
12473
  });
11619
- let firstmsg = util/* default */.A.get(data, 'question.value', this.props.t('get_started'));
12474
+ const question = String(util/* default */.A.get(data, 'question.value', '') ?? '').trim();
12475
+ const firstmsg = question || (/^vi(?:[-_]|$)/i.test(navigator.language || '') ? 'Xin chào' : 'Hello');
11620
12476
  let groupid = util/* default */.A.get(data, 'group.value', '');
11621
12477
  this._creating = (this._creating || 0) + 1;
11622
12478
  let _creating = this._creating;
@@ -11634,7 +12490,7 @@ class Widget extends common/* Com */.Mw {
11634
12490
  await util/* default */.A.sleep(500);
11635
12491
  if (_creating != this._creating) return;
11636
12492
  if (this.props.cid && this.props.cid.startsWith('cslight')) {
11637
- this.sendMessage({
12493
+ await this.sendMessage({
11638
12494
  text: firstmsg,
11639
12495
  format: 'plaintext',
11640
12496
  fields: [{
@@ -11642,10 +12498,13 @@ class Widget extends common/* Com */.Mw {
11642
12498
  value: util/* default */.A.stringify(groupid)
11643
12499
  }],
11644
12500
  attachments: this.state.quickReplyMessage.attachments
12501
+ }, {
12502
+ formSubmitted: true,
12503
+ groupId: groupid
11645
12504
  });
11646
12505
  return;
11647
12506
  }
11648
- if (this.props.cid) {
12507
+ if (this.props.cid && util/* default */.A.get(this.props.store.matchConvo(this.props.cid), 'state') !== 'ended') {
11649
12508
  this.setState({
11650
12509
  clickedJoin: false
11651
12510
  });
@@ -11671,7 +12530,8 @@ class Widget extends common/* Com */.Mw {
11671
12530
  }
11672
12531
  let message = {
11673
12532
  text: firstmsg,
11674
- format: 'plaintext'
12533
+ format: 'plaintext',
12534
+ attachments: this.state.quickReplyMessage.attachments
11675
12535
  };
11676
12536
  let req = {
11677
12537
  group_id: groupid,
@@ -11700,9 +12560,12 @@ class Widget extends common/* Com */.Mw {
11700
12560
  message
11701
12561
  });
11702
12562
  if (_creating != this._creating) return;
12563
+ if (form.end_conversation_after_submit) await this.props.store.endConvo(newconvoid);
12564
+ if (_creating != this._creating) return;
11703
12565
  this.setState({
11704
12566
  creating: false,
11705
12567
  clickedJoin: false,
12568
+ restartForm: false,
11706
12569
  quickReplyMessage: {}
11707
12570
  });
11708
12571
  this.props.onGo({
@@ -11733,6 +12596,7 @@ class Widget extends common/* Com */.Mw {
11733
12596
  if (!field) return;
11734
12597
  field.value = val;
11735
12598
  field.error = undefined;
12599
+ field.is_empty_error = false;
11736
12600
  this.setState({
11737
12601
  formData
11738
12602
  });
@@ -11853,7 +12717,7 @@ class Widget extends common/* Com */.Mw {
11853
12717
  renderFields(form, formName) {
11854
12718
  if (util/* default */.A.size(this.state.formData) === 0) return null;
11855
12719
  let $fields = util/* default */.A.map(this.state.formData, (field, key) => {
11856
- if (this.state.quickReplyMessage.text && key === 'question') return null;
12720
+ if (key === 'question' && util/* default */.A.find(this.state.quickReplyMessage.attachments, att => att.type === 'postback')) return null;
11857
12721
  let $field = null;
11858
12722
  var errclass = field.error ? 'input--error' : '';
11859
12723
  if (field.type === 'text') {
@@ -11886,7 +12750,11 @@ class Widget extends common/* Com */.Mw {
11886
12750
  this['form_' + encode(key)] = ref;
11887
12751
  },
11888
12752
  class: `form-control ${errclass}`,
11889
- type: "text"
12753
+ type: key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : 'text',
12754
+ inputMode: key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : undefined,
12755
+ autoComplete: key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : undefined,
12756
+ "aria-invalid": field.error ? 'true' : undefined,
12757
+ "aria-describedby": field.error ? 'form-error_' + encode(key) : undefined
11890
12758
  });
11891
12759
  }
11892
12760
  } else if (field.type === 'number') {
@@ -11970,6 +12838,8 @@ class Widget extends common/* Com */.Mw {
11970
12838
  }, label, field.is_required ? (0,preact_module.h)("span", {
11971
12839
  class: "red"
11972
12840
  }, "*") : ''), $field, field.error ? (0,preact_module.h)("div", {
12841
+ id: 'form-error_' + encode(key),
12842
+ role: "alert",
11973
12843
  class: "form-control--valid-input--error"
11974
12844
  }, field.error) : '');
11975
12845
  });
@@ -11982,9 +12852,10 @@ class Widget extends common/* Com */.Mw {
11982
12852
  if (!title) title = util/* default */.A.get(form, 'title', this.props.t('capture_lead_title'));
11983
12853
  title = title.replace('↵', '');
11984
12854
  let btncls = 'btn--start-convo ';
11985
- let hasError = util/* default */.A.find(this.state.formData, field => !!field.error);
11986
12855
  let newData = this.validateForm(this.state.formData);
11987
12856
  let hasEmptyError = util/* default */.A.find(newData, field => !!field.is_empty_error);
12857
+ const phone = String(util/* default */.A.get(this.state.formData, 'attr:phones.value', '') ?? '').trim();
12858
+ const phoneTooShort = phone.length > 0 && phone.length < 5;
11988
12859
  let bodycls = 'widget-body';
11989
12860
  if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat';
11990
12861
  return (0,preact_module.h)("div", {
@@ -12004,12 +12875,28 @@ class Widget extends common/* Com */.Mw {
12004
12875
  }), (0,preact_module.h)("button", {
12005
12876
  class: btncls,
12006
12877
  onClick: _ => this.submitPrechatForm(form, formName),
12007
- disabled: !!hasEmptyError || !!hasError || this.state.creating
12878
+ disabled: !!hasEmptyError || phoneTooShort || this.state.creating
12008
12879
  }, submitLabel)));
12009
12880
  }
12010
12881
  goToConvo(cid) {
12882
+ let view = 'chat';
12883
+ if (!cid) {
12884
+ const greeting = widgetGreeting(this.props.plugin.chatbox, this.props.t);
12885
+ cid = this.props.store.startWidgetConvo(greeting, this.props.t.locale()).convo.id;
12886
+ const form = this.startingConversationForm();
12887
+ const setting = this.props.plugin.chatbox || {};
12888
+ const offline = util/* default */.A.get(setting, 'offline_form.enabled') && this.isOffline(this.props.store.matchAccount() || {}, setting);
12889
+ if (form && (offline || this.isFormRequired(cid) || util/* default */.A.size(form.groups) || form.group_required)) {
12890
+ view = offline ? 'offline_form' : 'prechat_form';
12891
+ this.setState({
12892
+ clickedJoin: false,
12893
+ restartForm: false,
12894
+ quickReplyMessage: {}
12895
+ });
12896
+ }
12897
+ }
12011
12898
  this.props.onGo({
12012
- view: 'chat',
12899
+ view,
12013
12900
  cid
12014
12901
  });
12015
12902
  }
@@ -12083,7 +12970,7 @@ class Widget extends common/* Com */.Mw {
12083
12970
  util/* default */.A.setTimeout(() => $input && $input.blur());
12084
12971
  util/* default */.A.setTimeout(() => $input && $input.blur(), 300);
12085
12972
  }
12086
- focusInput(text) {
12973
+ focusInput(text, repeat = true) {
12087
12974
  if (this.props.store.isPreview) return;
12088
12975
  if (this.shouldShowForm()) {
12089
12976
  let focusfieldkey = '';
@@ -12108,6 +12995,7 @@ class Widget extends common/* Com */.Mw {
12108
12995
  if (text != undefined && typeof text === 'string') {
12109
12996
  $input.applyMessage(text);
12110
12997
  }
12998
+ if (!repeat) return $input.focus();
12111
12999
  util/* default */.A.setTimeout(() => $input.focus());
12112
13000
  util/* default */.A.setTimeout(() => $input.focus(), 300);
12113
13001
  }
@@ -12144,21 +13032,13 @@ class Widget extends common/* Com */.Mw {
12144
13032
  onSend: this.sendMessage,
12145
13033
  t: this.props.t
12146
13034
  });
12147
- let convo = this.props.store.matchConvo(this.props.cid) || {};
12148
- if (this.isFormRequired() || convo.state === 'ended') {
12149
- $input = (0,preact_module.h)("div", {
12150
- class: "message-input message-input--preform"
12151
- }, (0,preact_module.h)("button", {
12152
- class: "btn--start-convo",
12153
- onClick: e => this.onStartConvoClick(e)
12154
- }, this.props.t('offline_preform_btn')));
12155
- }
12156
13035
  let bodycls = 'widget-body';
12157
13036
  if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat';
12158
13037
  return (0,preact_module.h)("div", {
12159
13038
  class: bodycls
12160
13039
  }, (0,preact_module.h)("div", {
12161
13040
  class: "widget-body--content",
13041
+ onPointerDown: () => this.cancelContainerFocus(),
12162
13042
  onClick: e => this.onContainerClick(e)
12163
13043
  }, (0,preact_module.h)(Events, {
12164
13044
  isShow: this.props.isShow,
@@ -12168,7 +13048,7 @@ class Widget extends common/* Com */.Mw {
12168
13048
  onFormSubmit: e => this.onEventFormSubmit(e),
12169
13049
  ref: ref => this.$events = ref,
12170
13050
  cid: this.props.cid,
12171
- creating: this.creating,
13051
+ creating: this.state.creating,
12172
13052
  onSend: e => this.sendMessage(e),
12173
13053
  onPostback: e => this.createPostback(e),
12174
13054
  t: this.props.t,
@@ -12195,42 +13075,45 @@ class Widget extends common/* Com */.Mw {
12195
13075
  t: this.props.t
12196
13076
  }), $input);
12197
13077
  }
12198
- async onStartConvoClick() {
12199
- var convo = this.props.store.matchConvo(this.props.cid) || {};
12200
- if (convo.state === 'ended') return this.props.onGo({
12201
- view: 'chat',
12202
- cid: ''
12203
- });
12204
- this.setState({
12205
- clickedJoin: true,
12206
- quickReplyMessage: {}
12207
- });
12208
- }
12209
13078
  onEventFormSubmit() {
12210
13079
  this.focusInput();
12211
13080
  }
12212
- onContainerClick() {
12213
- var selection = window.getSelection();
12214
- if (selection.toString().length > 0) return;
12215
- if (!this.props.store.isMobile()) this.focusInput();
12216
- }
12217
- isFormRequired() {
12218
- let form;
12219
- let accountSetting = this.props.plugin.chatbox || {};
12220
- let acc = this.props.store.matchAccount() || {};
12221
- if (util/* default */.A.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
12222
- let offlineEnabled = util/* default */.A.get(accountSetting, 'offline_form.enabled');
12223
- if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form;
13081
+ cancelContainerFocus() {
13082
+ if (this.containerFocusTimer) util/* default */.A.clearTimeout(this.containerFocusTimer);
13083
+ this.containerFocusTimer = null;
13084
+ }
13085
+ onContainerClick(event) {
13086
+ this.cancelContainerFocus();
13087
+ const target = event && event.target;
13088
+ const element = target && (target.nodeType === 1 ? target : target.parentElement);
13089
+ if (element && element.closest('a, button, input, textarea, select, [contenteditable]')) return;
13090
+ if (event && event.detail > 1) return;
13091
+ if (this.props.store.isMobile() || window.getSelection()?.toString()) return;
13092
+ const cid = this.props.cid;
13093
+ this.containerFocusTimer = util/* default */.A.setTimeout(() => {
13094
+ this.containerFocusTimer = null;
13095
+ if (!this._isMounted || this.props.cid !== cid || this.props.isShow === false || window.getSelection()?.toString()) return;
13096
+ this.focusInput(undefined, false);
13097
+ }, 300);
13098
+ }
13099
+ startingConversationForm() {
13100
+ const setting = this.props.plugin.chatbox || {};
13101
+ const account = this.props.store.matchAccount() || {};
13102
+ if (this.isOffline(account, setting) && util/* default */.A.get(setting, 'offline_form.enabled')) return setting.offline_form;
13103
+ if (util/* default */.A.get(setting, 'prechat_form.enabled')) return setting.prechat_form;
13104
+ }
13105
+ isFormRequired(cid = this.props.cid) {
13106
+ let form = this.startingConversationForm();
12224
13107
  if (!form) return false;
12225
13108
  let formData = this.fillForm(form);
12226
- let convo = this.props.store.matchConvo(this.props.cid) || {};
13109
+ let convo = this.props.store.matchConvo(cid) || {};
12227
13110
  if (convo.state === 'ended') return true;
12228
13111
  if (convo.state && convo.state !== 'pending') delete formData.group;
12229
13112
  let isAllFiledEmpty = true;
12230
13113
  util/* default */.A.each(formData, field => {
12231
13114
  if (field.value) isAllFiledEmpty = false;
12232
13115
  });
12233
- if (isAllFiledEmpty && !this.userHasSent(this.props.cid)) return true;
13116
+ if (isAllFiledEmpty && !this.userHasSent(cid)) return true;
12234
13117
  return !!util/* default */.A.find(formData, field => field.is_required && (field.value == null || field.value === ''));
12235
13118
  }
12236
13119
  renderConvoSummary(convo) {
@@ -12375,7 +13258,7 @@ class Widget extends common/* Com */.Mw {
12375
13258
  if (form.question_required) {
12376
13259
  data['question'] = {
12377
13260
  key: 'question',
12378
- is_required: true,
13261
+ is_required: false,
12379
13262
  label: this.props.t.i18n(util/* default */.A.get(form, `i18n_question_label`, {})) || form.question_label,
12380
13263
  type: 'text'
12381
13264
  };
@@ -12724,7 +13607,6 @@ function modifyViewport(lockPageScroll) {
12724
13607
 
12725
13608
 
12726
13609
 
12727
- const LoadContact = () => __webpack_require__.e(/* import() */ 74).then(() => (__webpack_require__(9074)));
12728
13610
  const LoadPopup = () => __webpack_require__.e(/* import() */ 132).then(() => (__webpack_require__(132)));
12729
13611
  const LoadNotif = () => __webpack_require__.e(/* import() */ 490).then(() => (__webpack_require__(1490)));
12730
13612
  function Plugin(plugin, store, $container, lib) {
@@ -12766,7 +13648,6 @@ function Plugin(plugin, store, $container, lib) {
12766
13648
  };
12767
13649
  var _ref = (0,preact_module/* createRef */._3)();
12768
13650
  let Popup = null;
12769
- let Contact = null;
12770
13651
  let Notif = null;
12771
13652
  var showCurrentChatbox = p => lib.showWidget(p);
12772
13653
  var nextPage = () => {
@@ -12813,16 +13694,6 @@ function Plugin(plugin, store, $container, lib) {
12813
13694
  ref: _ref
12814
13695
  }), $div);
12815
13696
  }
12816
- if (plugin.type === 'contact') {
12817
- if (!Contact) Contact = (await LoadContact()).default;
12818
- (0,preact_module/* render */.XX)((0,preact_module.h)(Contact, {
12819
- destroy: _destroy,
12820
- t: this.t,
12821
- plugin: plugin,
12822
- store: store,
12823
- ref: _ref
12824
- }), $div);
12825
- }
12826
13697
  domGate.open();
12827
13698
  };
12828
13699
  this.call = (method, param) => domGate.entry().then(() => {
@@ -12831,9 +13702,10 @@ function Plugin(plugin, store, $container, lib) {
12831
13702
  });
12832
13703
  var _destroy = false;
12833
13704
  this.destroy = () => {
13705
+ if (_destroy) return;
12834
13706
  _destroy = true;
12835
13707
  (0,preact_module/* render */.XX)(null, $div);
12836
- $div.parentNode.removeChild($div);
13708
+ if ($div.parentNode) $div.parentNode.removeChild($div);
12837
13709
  };
12838
13710
  this.highlight = comref => {
12839
13711
  highlight = comref;
@@ -12914,14 +13786,15 @@ class PluginMgr {
12914
13786
  this.$div = $div;
12915
13787
  this.pluginM = {};
12916
13788
  this._destroy = false;
12917
- lib.store.onHighlight({
13789
+ this._subscriptions = [];
13790
+ this._subscriptions.push(lib.store.onHighlight({
12918
13791
  _isMounted: true
12919
13792
  }, (id, comref) => {
12920
13793
  let plugin = this.pluginM[id];
12921
13794
  if (!plugin) return;
12922
13795
  plugin.highlight(comref);
12923
- });
12924
- lib.store.onUpdate({
13796
+ }));
13797
+ this._subscriptions.push(lib.store.onUpdate({
12925
13798
  _isMounted: true
12926
13799
  }, () => {
12927
13800
  if (this._destroy) return;
@@ -12943,7 +13816,7 @@ class PluginMgr {
12943
13816
  this.pluginM[id].destroy();
12944
13817
  delete this.pluginM[id];
12945
13818
  });
12946
- });
13819
+ }));
12947
13820
  let pluginM = this.lib.store.matchPlugin();
12948
13821
  if (typeof sbz_info != 'undefined') sbz_info['plugins'] = pluginM;
12949
13822
  let foundchatbox = false;
@@ -13017,13 +13890,26 @@ class PluginMgr {
13017
13890
  if (chatbox) return chatbox.setLocale(locale);
13018
13891
  }
13019
13892
  destroy() {
13893
+ if (this._destroy) return;
13894
+ this._destroy = true;
13895
+ for (const unsubscribe of this._subscriptions) unsubscribe();
13896
+ this._subscriptions = [];
13020
13897
  util/* default */.A.map(this.pluginM, (conf, id) => {
13021
13898
  conf.destroy();
13022
13899
  delete this.pluginM[id];
13023
13900
  });
13024
- this._destroy = true;
13025
13901
  }
13026
13902
  }
13903
+ ;// ./src/util/event.js
13904
+ function normalizeCdpEvent(type, payload, options) {
13905
+ if (type && typeof type === 'object') return type;
13906
+ let data = {
13907
+ type
13908
+ };
13909
+ if (payload !== undefined) data.payload = payload;
13910
+ if (options && typeof options === 'object') data = Object.assign({}, options, data);
13911
+ return data;
13912
+ }
13027
13913
  ;// ./src/lib.js
13028
13914
  function lib_defineProperty(e, r, t) { return (r = lib_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
13029
13915
  function lib_toPropertyKey(t) { var i = lib_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -13031,6 +13917,7 @@ function lib_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e
13031
13917
  ;
13032
13918
 
13033
13919
 
13920
+
13034
13921
  class lib_Widget {
13035
13922
  constructor(ApiURL, FileURL, RealtimeURL, inmem, fake) {
13036
13923
  lib_defineProperty(this, "version", () => '4.5');
@@ -13047,6 +13934,7 @@ class lib_Widget {
13047
13934
  });
13048
13935
  lib_defineProperty(this, "pageview", v => this.store.sendPageview(v));
13049
13936
  this.impressionTokens = {};
13937
+ this._containerTimers = new Set();
13050
13938
  this.domGate = new util/* default */.A.Gate();
13051
13939
  this.store = new Store(ApiURL, FileURL, RealtimeURL, inmem, fake);
13052
13940
  window.sbz_store = this.store;
@@ -13066,6 +13954,16 @@ class lib_Widget {
13066
13954
  await this.store.readyGate.entry();
13067
13955
  cb();
13068
13956
  }
13957
+ watchContainer(container) {
13958
+ const manager = this.pluginMgr;
13959
+ const timer = util/* default */.A.setInterval(() => {
13960
+ if (!this.store.isDead() && container && container.isConnected) return;
13961
+ manager.destroy();
13962
+ util/* default */.A.clearInterval(timer);
13963
+ this._containerTimers.delete(timer);
13964
+ }, 1000);
13965
+ this._containerTimers.add(timer);
13966
+ }
13069
13967
  setAIDevMode(mode) {
13070
13968
  this.store.setAIDevMode(mode);
13071
13969
  }
@@ -13083,11 +13981,7 @@ class lib_Widget {
13083
13981
  let user = await this.store.login(accid, user_id, tokenGenerator);
13084
13982
  if (!$container) $container = document.body;
13085
13983
  this.pluginMgr = new PluginMgr(this, $container);
13086
- let clean = util/* default */.A.setInterval(() => {
13087
- if ($container && $container.isConnected) return;
13088
- this.pluginMgr.destroy();
13089
- util/* default */.A.clearInterval(clean);
13090
- }, 1000);
13984
+ this.watchContainer($container);
13091
13985
  this.domGate.open();
13092
13986
  return user;
13093
13987
  }
@@ -13109,11 +14003,7 @@ class lib_Widget {
13109
14003
  }, '*'), 0);
13110
14004
  if (!$container) $container = document.body || document;
13111
14005
  this.pluginMgr = new PluginMgr(this, $container);
13112
- let clean = util/* default */.A.setInterval(() => {
13113
- if ($container && $container.isConnected) return;
13114
- this.pluginMgr.destroy();
13115
- util/* default */.A.clearInterval(clean);
13116
- }, 1000);
14006
+ this.watchContainer($container);
13117
14007
  this.domGate.open();
13118
14008
  return user;
13119
14009
  }
@@ -13127,11 +14017,7 @@ class lib_Widget {
13127
14017
  }, '*'), 0);
13128
14018
  if (!$container) $container = document.body || document;
13129
14019
  this.pluginMgr = new PluginMgr(this, $container);
13130
- let clean = util/* default */.A.setInterval(() => {
13131
- if ($container && $container.isConnected) return;
13132
- this.pluginMgr.destroy();
13133
- util/* default */.A.clearInterval(clean);
13134
- }, 1000);
14020
+ this.watchContainer($container);
13135
14021
  this.domGate.open();
13136
14022
  cb && cb(outmask);
13137
14023
  return outmask;
@@ -13155,11 +14041,7 @@ class lib_Widget {
13155
14041
  }, '*'), 0);
13156
14042
  if (!$container) $container = document.body || document;
13157
14043
  this.pluginMgr = new PluginMgr(this, $container);
13158
- let clean = util/* default */.A.setInterval(() => {
13159
- if ($container && $container.isConnected) return;
13160
- this.pluginMgr.destroy();
13161
- util/* default */.A.clearInterval(clean);
13162
- }, 1000);
14044
+ this.watchContainer($container);
13163
14045
  this.domGate.open();
13164
14046
  if (typeof sbz_info != 'undefined') sbz_info.set_account_done = util/* default */.A.Date.now();
13165
14047
  cb && cb(outmask);
@@ -13186,7 +14068,7 @@ class lib_Widget {
13186
14068
  }
13187
14069
  async createTicket(ticket) {
13188
14070
  await this.domGate.entry();
13189
- return this.createTicket(ticket);
14071
+ return this.store.createTicket(ticket);
13190
14072
  }
13191
14073
  expandWidget(view, convo) {
13192
14074
  return this.showWidget(view, convo);
@@ -13292,7 +14174,7 @@ class lib_Widget {
13292
14174
  if (req.bot_id) {
13293
14175
  let botid = req.bot_id;
13294
14176
  delete req.bot_id;
13295
- if (!util/* default */.A.find(members, m => b.id == botid)) {
14177
+ if (!util/* default */.A.find(members, m => m.id == botid)) {
13296
14178
  members.push({
13297
14179
  type: 'bot',
13298
14180
  id: botid,
@@ -13343,6 +14225,9 @@ class lib_Widget {
13343
14225
  this.store.overrideDeviceType(type);
13344
14226
  }
13345
14227
  unload() {
14228
+ for (const timer of this._containerTimers) util/* default */.A.clearInterval(timer);
14229
+ this._containerTimers.clear();
14230
+ this.subs = [];
13346
14231
  if (this.pluginMgr) this.pluginMgr.destroy();
13347
14232
  this.store.destroy();
13348
14233
  }
@@ -13389,15 +14274,6 @@ class lib_Widget {
13389
14274
  this.store.doNotStartBot();
13390
14275
  }
13391
14276
  }
13392
- function normalizeCdpEvent(type, payload, options) {
13393
- if (type && typeof type === 'object') return type;
13394
- let data = {
13395
- type: type
13396
- };
13397
- if (payload !== undefined) data.payload = payload;
13398
- if (options && typeof options === 'object') data = Object.assign({}, options, data);
13399
- return data;
13400
- }
13401
14277
  window.__sbz_WIDGET = lib_Widget;
13402
14278
  /* harmony default export */ const lib = (lib_Widget);
13403
14279
  ;// ./screenshoot.js