WhatsApp me - Version 4.4.3

Version Description

  • Minor CSS fixes and optimizations.
Download this release

Release Info

Developer creapuntome
Plugin Icon 128x128 WhatsApp me
Version 4.4.3
Comparing to
See all releases

Code changes from version 4.4.2 to 4.4.3

Files changed (6) hide show
  1. README.txt +4 -1
  2. joinchat.php +2 -2
  3. public/css/joinchat-btn.css +29 -12
  4. public/css/joinchat-btn.min.css +1 -1
  5. public/css/joinchat.css +34 -17
  6. public/css/joinchat.min.css +1 -1
README.txt CHANGED
@@ -5,7 +5,7 @@ Tags: Chat, Click to Chat, Facebook Messenger, WhatsApp, Telegram, Whatsapp Busi
5
  Requires at least: 3.5.0
6
  Tested up to: 5.9
7
  Requires PHP: 5.3
8
- Stable tag: 4.4.2
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
@@ -331,6 +331,9 @@ Join.chat save two localStorage variables for proper operation:
331
 
332
  == Changelog ==
333
 
 
 
 
334
  = 4.4.2 =
335
  * **NEW Optimized CSS** for only button without Call to Action (only 2.5kB).
336
  * **NEW** Compatible with **Perfect Brands for WooCommerce** for brand custom settings.
5
  Requires at least: 3.5.0
6
  Tested up to: 5.9
7
  Requires PHP: 5.3
8
+ Stable tag: 4.4.3
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
331
 
332
  == Changelog ==
333
 
334
+ = 4.4.3 =
335
+ * Minor CSS fixes and optimizations.
336
+
337
  = 4.4.2 =
338
  * **NEW Optimized CSS** for only button without Call to Action (only 2.5kB).
339
  * **NEW** Compatible with **Perfect Brands for WooCommerce** for brand custom settings.
joinchat.php CHANGED
@@ -9,7 +9,7 @@
9
  * Plugin Name: Join.chat
10
  * Plugin URI: https://join.chat
11
  * Description: Connects a WordPress chat with WhatsApp. The best solution for marketing and support. Stop losing customers and increase your sales.
12
- * Version: 4.4.2
13
  * Author: Creame
14
  * Author URI: https://crea.me
15
  * License: GPL-2.0+
@@ -26,7 +26,7 @@ if ( ! defined( 'WPINC' ) ) {
26
  /**
27
  * Define constants.
28
  */
29
- define( 'JOINCHAT_VERSION', '4.4.2' );
30
  define( 'JOINCHAT_FILE', __FILE__ );
31
  define( 'JOINCHAT_DIR', plugin_dir_path( JOINCHAT_FILE ) );
32
  define( 'JOINCHAT_BASENAME', plugin_basename( JOINCHAT_FILE ) );
9
  * Plugin Name: Join.chat
10
  * Plugin URI: https://join.chat
11
  * Description: Connects a WordPress chat with WhatsApp. The best solution for marketing and support. Stop losing customers and increase your sales.
12
+ * Version: 4.4.3
13
  * Author: Creame
14
  * Author URI: https://crea.me
15
  * License: GPL-2.0+
26
  /**
27
  * Define constants.
28
  */
29
+ define( 'JOINCHAT_VERSION', '4.4.3' );
30
  define( 'JOINCHAT_FILE', __FILE__ );
31
  define( 'JOINCHAT_DIR', plugin_dir_path( JOINCHAT_FILE ) );
32
  define( 'JOINCHAT_BASENAME', plugin_basename( JOINCHAT_FILE ) );
public/css/joinchat-btn.css CHANGED
@@ -17,6 +17,8 @@
17
  letter-spacing: 0;
18
  -webkit-animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
19
  animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
 
 
20
  -webkit-user-select: none;
21
  -moz-user-select: none;
22
  user-select: none;
@@ -33,6 +35,7 @@
33
 
34
  .joinchat--show {
35
  display: block;
 
36
  }
37
 
38
  .joinchat--left {
@@ -45,6 +48,12 @@
45
  animation: none;
46
  }
47
 
 
 
 
 
 
 
48
  .joinchat__button {
49
  position: absolute;
50
  z-index: 2;
@@ -227,37 +236,45 @@
227
 
228
  @-webkit-keyframes joinchat_show {
229
  from {
230
- transform: scale(0);
 
 
 
 
231
  }
232
  }
233
 
234
  @keyframes joinchat_show {
235
  from {
236
- transform: scale(0);
 
 
 
 
237
  }
238
  }
239
 
240
  @-webkit-keyframes joinchat_badge_in {
241
  from {
242
  opacity: 0;
243
- transform: translateY(50px);
244
  }
245
 
246
  to {
247
  opacity: 1;
248
- transform: translateY(0);
249
  }
250
  }
251
 
252
  @keyframes joinchat_badge_in {
253
  from {
254
  opacity: 0;
255
- transform: translateY(50px);
256
  }
257
 
258
  to {
259
  opacity: 1;
260
- transform: translateY(0);
261
  }
262
  }
263
 
@@ -296,38 +313,38 @@
296
  @-webkit-keyframes joinchat_tootlip {
297
  0% {
298
  opacity: 0;
299
- transform: scaleY(0);
300
  }
301
 
302
  1%,
303
  20% {
304
  opacity: 1;
305
- transform: scaleY(1);
306
  }
307
 
308
  25%,
309
  100% {
310
  opacity: 0;
311
- transform: scaleY(1);
312
  }
313
  }
314
 
315
  @keyframes joinchat_tootlip {
316
  0% {
317
  opacity: 0;
318
- transform: scaleY(0);
319
  }
320
 
321
  1%,
322
  20% {
323
  opacity: 1;
324
- transform: scaleY(1);
325
  }
326
 
327
  25%,
328
  100% {
329
  opacity: 0;
330
- transform: scaleY(1);
331
  }
332
  }
333
 
17
  letter-spacing: 0;
18
  -webkit-animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
19
  animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
20
+ transform: scale3d(0, 0, 0);
21
+ transform-origin: calc(var(--s)/-2) calc(var(--s)/-4);
22
  -webkit-user-select: none;
23
  -moz-user-select: none;
24
  user-select: none;
35
 
36
  .joinchat--show {
37
  display: block;
38
+ transform: scale3d(1, 1, 1);
39
  }
40
 
41
  .joinchat--left {
48
  animation: none;
49
  }
50
 
51
+ .joinchat--chatbox:not(.joinchat--noanim) {
52
+ transform-origin: 0 0;
53
+ -webkit-animation-timing-function: ease-in-out;
54
+ animation-timing-function: ease-in-out;
55
+ }
56
+
57
  .joinchat__button {
58
  position: absolute;
59
  z-index: 2;
236
 
237
  @-webkit-keyframes joinchat_show {
238
  from {
239
+ transform: scale3d(0, 0, 0);
240
+ }
241
+
242
+ to {
243
+ transform: scale3d(1, 1, 1);
244
  }
245
  }
246
 
247
  @keyframes joinchat_show {
248
  from {
249
+ transform: scale3d(0, 0, 0);
250
+ }
251
+
252
+ to {
253
+ transform: scale3d(1, 1, 1);
254
  }
255
  }
256
 
257
  @-webkit-keyframes joinchat_badge_in {
258
  from {
259
  opacity: 0;
260
+ transform: translate3d(0, 50px, 0);
261
  }
262
 
263
  to {
264
  opacity: 1;
265
+ transform: translate3d(0, 0, 0);
266
  }
267
  }
268
 
269
  @keyframes joinchat_badge_in {
270
  from {
271
  opacity: 0;
272
+ transform: translate3d(0, 50px, 0);
273
  }
274
 
275
  to {
276
  opacity: 1;
277
+ transform: translate3d(0, 0, 0);
278
  }
279
  }
280
 
313
  @-webkit-keyframes joinchat_tootlip {
314
  0% {
315
  opacity: 0;
316
+ transform: scale3d(1, 0, 1);
317
  }
318
 
319
  1%,
320
  20% {
321
  opacity: 1;
322
+ transform: scale3d(1, 1, 1);
323
  }
324
 
325
  25%,
326
  100% {
327
  opacity: 0;
328
+ transform: scale3d(1, 1, 1);
329
  }
330
  }
331
 
332
  @keyframes joinchat_tootlip {
333
  0% {
334
  opacity: 0;
335
+ transform: scale3d(1, 0, 1);
336
  }
337
 
338
  1%,
339
  20% {
340
  opacity: 1;
341
+ transform: scale3d(1, 1, 1);
342
  }
343
 
344
  25%,
345
  100% {
346
  opacity: 0;
347
+ transform: scale3d(1, 1, 1);
348
  }
349
  }
350
 
public/css/joinchat-btn.min.css CHANGED
@@ -1 +1 @@
1
- :root{--joinchat-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E");--joinchat-font:-apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif}.joinchat{--bottom:20px;--sep:20px;--s:60px;display:none;position:fixed;z-index:9999;right:var(--sep);bottom:var(--bottom);font:normal normal normal 16px/1.625em var(--joinchat-font);letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block}.joinchat--left{right:auto;left:var(--sep)}.joinchat--noanim{animation:none}.joinchat__button{position:absolute;z-index:2;bottom:8px;right:8px;height:var(--s);min-width:var(--s);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--s)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background-color .2s linear}.joinchat__button:hover{background:#128c7e}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px}.joinchat__button__open{width:var(--s);height:var(--s);border-radius:50%;background:rgb(0 0 0/0) var(--joinchat-ico) 50% no-repeat;background-size:60%;overflow:hidden}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--s) - 2px);height:calc(var(--s) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat__tooltip{position:absolute;top:calc(var(--s)/2 - 16px);right:calc(var(--s) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--left .joinchat__tooltip{right:auto;left:calc(var(--s) + 16px)}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--s) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--s)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat--left .joinchat__qr{left:0;right:auto}.joinchat--left .joinchat__qr:after{left:calc(var(--s)/2 - 6px);right:auto}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}@keyframes joinchat_show{0%{transform:scale(0)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}}.joinchat__woo-btn__wrapper{clear:both}.joinchat__woo-btn{--s:40px;display:inline-block;box-sizing:border-box;height:var(--s);max-width:100%;padding:0 calc(var(--s)/2) 0 var(--s);background:#25d366 var(--joinchat-ico) calc(var(--s)*0.2) 50% no-repeat;background-size:calc(var(--s)*0.6);color:#fff;border-radius:calc(var(--s)/2);font:700 normal calc(var(--s)*0.35)/var(--s) var(--joinchat-font);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;transition:background-color .2s}.joinchat__woo-btn:hover{background-color:#128c7e}@media (orientation:landscape) and (min-height:481px),(orientation:portrait) and (min-width:481px){.joinchat--mobile{display:none!important}}@media (max-width:767px){.joinchat--footer-bar{--bottom:76px!important}}@media (max-width:480px),(orientation:landscape) and (max-height:480px){.joinchat{--bottom:6px;--sep:6px}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover .joinchat__qr{display:flex}}@media (prefers-reduced-motion){.joinchat{animation:none}}
1
+ :root{--joinchat-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E");--joinchat-font:-apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif}.joinchat{--bottom:20px;--sep:20px;--s:60px;display:none;position:fixed;z-index:9999;right:var(--sep);bottom:var(--bottom);font:normal normal normal 16px/1.625em var(--joinchat-font);letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;transform:scale3d(0,0,0);transform-origin:calc(var(--s)/-2) calc(var(--s)/-4);-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block;transform:scaleX(1)}.joinchat--left{right:auto;left:var(--sep)}.joinchat--noanim{animation:none}.joinchat--chatbox:not(.joinchat--noanim){transform-origin:0 0;animation-timing-function:ease-in-out}.joinchat__button{position:absolute;z-index:2;bottom:8px;right:8px;height:var(--s);min-width:var(--s);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--s)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background-color .2s linear}.joinchat__button:hover{background:#128c7e}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px}.joinchat__button__open{width:var(--s);height:var(--s);border-radius:50%;background:rgb(0 0 0/0) var(--joinchat-ico) 50% no-repeat;background-size:60%;overflow:hidden}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--s) - 2px);height:calc(var(--s) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat__tooltip{position:absolute;top:calc(var(--s)/2 - 16px);right:calc(var(--s) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--left .joinchat__tooltip{right:auto;left:calc(var(--s) + 16px)}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--s) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--s)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat--left .joinchat__qr{left:0;right:auto}.joinchat--left .joinchat__qr:after{left:calc(var(--s)/2 - 6px);right:auto}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}@keyframes joinchat_show{0%{transform:scale3d(0,0,0)}to{transform:scaleX(1)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translate3d(0,50px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleX(1)}25%,to{opacity:0;transform:scaleX(1)}}.joinchat__woo-btn__wrapper{clear:both}.joinchat__woo-btn{--s:40px;display:inline-block;box-sizing:border-box;height:var(--s);max-width:100%;padding:0 calc(var(--s)/2) 0 var(--s);background:#25d366 var(--joinchat-ico) calc(var(--s)*0.2) 50% no-repeat;background-size:calc(var(--s)*0.6);color:#fff;border-radius:calc(var(--s)/2);font:700 normal calc(var(--s)*0.35)/var(--s) var(--joinchat-font);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;transition:background-color .2s}.joinchat__woo-btn:hover{background-color:#128c7e}@media (orientation:landscape) and (min-height:481px),(orientation:portrait) and (min-width:481px){.joinchat--mobile{display:none!important}}@media (max-width:767px){.joinchat--footer-bar{--bottom:76px!important}}@media (max-width:480px),(orientation:landscape) and (max-height:480px){.joinchat{--bottom:6px;--sep:6px}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover .joinchat__qr{display:flex}}@media (prefers-reduced-motion){.joinchat{animation:none}}
public/css/joinchat.css CHANGED
@@ -32,6 +32,8 @@
32
  letter-spacing: 0;
33
  -webkit-animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
34
  animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
 
 
35
  -webkit-user-select: none;
36
  -moz-user-select: none;
37
  user-select: none;
@@ -48,6 +50,7 @@
48
 
49
  .joinchat--show {
50
  display: block;
 
51
  }
52
 
53
  .joinchat--left {
@@ -64,6 +67,12 @@
64
  animation: none;
65
  }
66
 
 
 
 
 
 
 
67
  .joinchat--hidden {
68
  display: none !important;
69
  }
@@ -616,7 +625,7 @@
616
  height: 14px;
617
  border: solid var(--text);
618
  border-width: 0 3px 3px 0;
619
- transform: rotate(45deg);
620
  }
621
 
622
  [dir="rtl"] .joinchat__optin label {
@@ -678,61 +687,69 @@
678
 
679
  @-webkit-keyframes joinchat_show {
680
  from {
681
- transform: scale(0);
 
 
 
 
682
  }
683
  }
684
 
685
  @keyframes joinchat_show {
686
  from {
687
- transform: scale(0);
 
 
 
 
688
  }
689
  }
690
 
691
  @-webkit-keyframes joinchat_badge_in {
692
  from {
693
  opacity: 0;
694
- transform: translateY(50px);
695
  }
696
 
697
  to {
698
  opacity: 1;
699
- transform: translateY(0);
700
  }
701
  }
702
 
703
  @keyframes joinchat_badge_in {
704
  from {
705
  opacity: 0;
706
- transform: translateY(50px);
707
  }
708
 
709
  to {
710
  opacity: 1;
711
- transform: translateY(0);
712
  }
713
  }
714
 
715
  @-webkit-keyframes joinchat_badge_out {
716
  from {
717
  opacity: 1;
718
- transform: translateY(0);
719
  }
720
 
721
  to {
722
  opacity: 0;
723
- transform: translateY(-20px);
724
  }
725
  }
726
 
727
  @keyframes joinchat_badge_out {
728
  from {
729
  opacity: 1;
730
- transform: translateY(0);
731
  }
732
 
733
  to {
734
  opacity: 0;
735
- transform: translateY(-20px);
736
  }
737
  }
738
 
@@ -823,38 +840,38 @@
823
  @-webkit-keyframes joinchat_tootlip {
824
  0% {
825
  opacity: 0;
826
- transform: scaleY(0);
827
  }
828
 
829
  1%,
830
  20% {
831
  opacity: 1;
832
- transform: scaleY(1);
833
  }
834
 
835
  25%,
836
  100% {
837
  opacity: 0;
838
- transform: scaleY(1);
839
  }
840
  }
841
 
842
  @keyframes joinchat_tootlip {
843
  0% {
844
  opacity: 0;
845
- transform: scaleY(0);
846
  }
847
 
848
  1%,
849
  20% {
850
  opacity: 1;
851
- transform: scaleY(1);
852
  }
853
 
854
  25%,
855
  100% {
856
  opacity: 0;
857
- transform: scaleY(1);
858
  }
859
  }
860
 
32
  letter-spacing: 0;
33
  -webkit-animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
34
  animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
35
+ transform: scale3d(0, 0, 0);
36
+ transform-origin: calc(var(--s)/-2) calc(var(--s)/-4);
37
  -webkit-user-select: none;
38
  -moz-user-select: none;
39
  user-select: none;
50
 
51
  .joinchat--show {
52
  display: block;
53
+ transform: scale3d(1, 1, 1);
54
  }
55
 
56
  .joinchat--left {
67
  animation: none;
68
  }
69
 
70
+ .joinchat--chatbox:not(.joinchat--noanim) {
71
+ transform-origin: 0 0;
72
+ -webkit-animation-timing-function: ease-in-out;
73
+ animation-timing-function: ease-in-out;
74
+ }
75
+
76
  .joinchat--hidden {
77
  display: none !important;
78
  }
625
  height: 14px;
626
  border: solid var(--text);
627
  border-width: 0 3px 3px 0;
628
+ transform: rotate3d(0, 0, 1, 45deg);
629
  }
630
 
631
  [dir="rtl"] .joinchat__optin label {
687
 
688
  @-webkit-keyframes joinchat_show {
689
  from {
690
+ transform: scale3d(0, 0, 0);
691
+ }
692
+
693
+ to {
694
+ transform: scale3d(1, 1, 1);
695
  }
696
  }
697
 
698
  @keyframes joinchat_show {
699
  from {
700
+ transform: scale3d(0, 0, 0);
701
+ }
702
+
703
+ to {
704
+ transform: scale3d(1, 1, 1);
705
  }
706
  }
707
 
708
  @-webkit-keyframes joinchat_badge_in {
709
  from {
710
  opacity: 0;
711
+ transform: translate3d(0, 50px, 0);
712
  }
713
 
714
  to {
715
  opacity: 1;
716
+ transform: translate3d(0, 0, 0);
717
  }
718
  }
719
 
720
  @keyframes joinchat_badge_in {
721
  from {
722
  opacity: 0;
723
+ transform: translate3d(0, 50px, 0);
724
  }
725
 
726
  to {
727
  opacity: 1;
728
+ transform: translate3d(0, 0, 0);
729
  }
730
  }
731
 
732
  @-webkit-keyframes joinchat_badge_out {
733
  from {
734
  opacity: 1;
735
+ transform: translate3d(0, 0, 0);
736
  }
737
 
738
  to {
739
  opacity: 0;
740
+ transform: translate3d(0, -20px, 0);
741
  }
742
  }
743
 
744
  @keyframes joinchat_badge_out {
745
  from {
746
  opacity: 1;
747
+ transform: translate3d(0, 0, 0);
748
  }
749
 
750
  to {
751
  opacity: 0;
752
+ transform: translate3d(0, -20px, 0);
753
  }
754
  }
755
 
840
  @-webkit-keyframes joinchat_tootlip {
841
  0% {
842
  opacity: 0;
843
+ transform: scale3d(1, 0, 1);
844
  }
845
 
846
  1%,
847
  20% {
848
  opacity: 1;
849
+ transform: scale3d(1, 1, 1);
850
  }
851
 
852
  25%,
853
  100% {
854
  opacity: 0;
855
+ transform: scale3d(1, 1, 1);
856
  }
857
  }
858
 
859
  @keyframes joinchat_tootlip {
860
  0% {
861
  opacity: 0;
862
+ transform: scale3d(1, 0, 1);
863
  }
864
 
865
  1%,
866
  20% {
867
  opacity: 1;
868
+ transform: scale3d(1, 1, 1);
869
  }
870
 
871
  25%,
872
  100% {
873
  opacity: 0;
874
+ transform: scale3d(1, 1, 1);
875
  }
876
  }
877
 
public/css/joinchat.min.css CHANGED
@@ -1 +1 @@
1
- :root{--joinchat-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E");--joinchat-font:-apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif}.joinchat{--bottom:20px;--sep:20px;--s:60px;--header:calc(var(--s)*1.16667);--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);color:var(--text);display:none;position:fixed;z-index:9999;right:var(--sep);bottom:var(--bottom);font:normal normal normal 16px/1.625em var(--joinchat-font);letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block}.joinchat--left{right:auto;left:var(--sep)}.joinchat--dark{--msg:var(--dark)}.joinchat--noanim{animation:none}.joinchat--hidden{display:none!important}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw)*1%)/90%)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--s);min-width:var(--s);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--s)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background-color .2s linear}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition-duration:1.5s}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition-duration:.2s;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat--optout.joinchat--chatbox .joinchat__button{background-color:#999;opacity:.5;pointer-events:none}.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__chat{animation:none}.joinchat__button__open{width:var(--s);height:var(--s);border-radius:50%;background:rgb(0 0 0/0) var(--joinchat-ico) 50% no-repeat;background-size:60%;overflow:hidden}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--s) - 2px);height:calc(var(--s) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;flex-shrink:0;width:var(--s);height:var(--s);max-width:var(--s);padding:calc(var(--s)*0.18);margin:0;overflow:hidden}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}.joinchat__button__sendtext{padding:0;max-width:0;border-radius:var(--s);font-weight:600;line-height:var(--s);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--s)/2 - 16px);right:calc(var(--s) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:calc(var(--s) + 16px)}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--s) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--s)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat--left .joinchat__qr{left:0;right:auto}.joinchat--left .joinchat__qr:after{left:calc(var(--s)/2 - 6px);right:auto}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--s)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);min-height:50px;padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{--size:34px;position:absolute;top:calc(50% - var(--size)/2);right:24px;width:var(--size);height:var(--size);border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--s) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}.joinchat__optin{padding:0 16px;margin-bottom:16px;color:#4a4a4a;font-size:13px;line-height:1.33}.joinchat__optin a{display:inline;padding:0;color:inherit!important;text-decoration:underline}.joinchat__optin a:hover{text-decoration-thickness:2px}.joinchat__optin input{position:absolute;visibility:hidden}.joinchat__optin label{position:relative;display:block;margin:0;padding:0 0 0 30px;color:inherit;font:inherit;cursor:pointer}.joinchat__optin label:before{content:"";display:block;position:absolute;top:calc(50% - 11px);left:0;width:22px;height:22px;border:3px solid var(--color);border-radius:4px;box-shadow:0 0 0 1px var(--text);transition:box-shadow .3s ease-in-out}.joinchat__optin label:after{content:"";display:none;position:absolute;top:calc(50% - 8px);left:8px;width:6px;height:14px;border:solid var(--text);border-width:0 3px 3px 0;transform:rotate(45deg)}[dir=rtl] .joinchat__optin label{padding:0 30px 0 0}[dir=rtl] .joinchat__optin label:before{left:auto;right:0}[dir=rtl] .joinchat__optin label:after{left:auto;right:8px}.joinchat__optin input:checked+label:before{box-shadow:0 0 0 1px var(--text),inset 0 0 0 10px var(--color)}.joinchat__optin input:checked+label:after{display:block}.joinchat--dark .joinchat__optin{color:#d8d8d8}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@keyframes joinchat_show{0%{transform:scale(0)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}}.joinchat__woo-btn__wrapper{clear:both}.joinchat__woo-btn{--s:40px;display:inline-block;box-sizing:border-box;height:var(--s);max-width:100%;padding:0 calc(var(--s)/2) 0 var(--s);background:#25d366 var(--joinchat-ico) calc(var(--s)*0.2) 50% no-repeat;background-size:calc(var(--s)*0.6);color:#fff;border-radius:calc(var(--s)/2);font:700 normal calc(var(--s)*0.35)/var(--s) var(--joinchat-font);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;transition:background-color .2s}.joinchat__woo-btn:hover{background-color:#128c7e}@media (orientation:landscape) and (min-height:481px),(orientation:portrait) and (min-width:481px){.joinchat--mobile{display:none!important}}@media (max-width:767px){.joinchat--footer-bar{--bottom:76px!important}}@media (max-width:480px),(orientation:landscape) and (max-height:480px){.joinchat{--bottom:6px;--sep:6px;--header:calc(var(--s)*0.91667)}.joinchat__header__text{font-size:17px}.joinchat__close{--size:28px}.joinchat__box__scroll{padding-top:15px}.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover .joinchat__qr,.joinchat--chatbox .joinchat__button:hover .joinchat__qr{display:flex}}@media (prefers-color-scheme:dark){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__optin{color:#d8d8d8}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-reduced-motion){.joinchat{animation:none}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}.joinchat__button__sendtext{transition:none!important}}
1
+ :root{--joinchat-ico:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E");--joinchat-font:-apple-system,blinkmacsystemfont,"Segoe UI",roboto,oxygen-sans,ubuntu,cantarell,"Helvetica Neue",sans-serif}.joinchat{--bottom:20px;--sep:20px;--s:60px;--header:calc(var(--s)*1.16667);--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);color:var(--text);display:none;position:fixed;z-index:9999;right:var(--sep);bottom:var(--bottom);font:normal normal normal 16px/1.625em var(--joinchat-font);letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;transform:scale3d(0,0,0);transform-origin:calc(var(--s)/-2) calc(var(--s)/-4);-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block;transform:scaleX(1)}.joinchat--left{right:auto;left:var(--sep)}.joinchat--dark{--msg:var(--dark)}.joinchat--noanim{animation:none}.joinchat--chatbox:not(.joinchat--noanim){transform-origin:0 0;animation-timing-function:ease-in-out}.joinchat--hidden{display:none!important}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw)*1%)/90%)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--s);min-width:var(--s);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--s)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background-color .2s linear}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition-duration:1.5s}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition-duration:.2s;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat--optout.joinchat--chatbox .joinchat__button{background-color:#999;opacity:.5;pointer-events:none}.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__chat{animation:none}.joinchat__button__open{width:var(--s);height:var(--s);border-radius:50%;background:rgb(0 0 0/0) var(--joinchat-ico) 50% no-repeat;background-size:60%;overflow:hidden}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--s) - 2px);height:calc(var(--s) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;flex-shrink:0;width:var(--s);height:var(--s);max-width:var(--s);padding:calc(var(--s)*0.18);margin:0;overflow:hidden}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}.joinchat__button__sendtext{padding:0;max-width:0;border-radius:var(--s);font-weight:600;line-height:var(--s);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--s)/2 - 16px);right:calc(var(--s) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:calc(var(--s) + 16px)}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--s) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--s)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat--left .joinchat__qr{left:0;right:auto}.joinchat--left .joinchat__qr:after{left:calc(var(--s)/2 - 6px);right:auto}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--s)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);min-height:50px;padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{--size:34px;position:absolute;top:calc(50% - var(--size)/2);right:24px;width:var(--size);height:var(--size);border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--s) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}.joinchat__optin{padding:0 16px;margin-bottom:16px;color:#4a4a4a;font-size:13px;line-height:1.33}.joinchat__optin a{display:inline;padding:0;color:inherit!important;text-decoration:underline}.joinchat__optin a:hover{text-decoration-thickness:2px}.joinchat__optin input{position:absolute;visibility:hidden}.joinchat__optin label{position:relative;display:block;margin:0;padding:0 0 0 30px;color:inherit;font:inherit;cursor:pointer}.joinchat__optin label:before{content:"";display:block;position:absolute;top:calc(50% - 11px);left:0;width:22px;height:22px;border:3px solid var(--color);border-radius:4px;box-shadow:0 0 0 1px var(--text);transition:box-shadow .3s ease-in-out}.joinchat__optin label:after{content:"";display:none;position:absolute;top:calc(50% - 8px);left:8px;width:6px;height:14px;border:solid var(--text);border-width:0 3px 3px 0;transform:rotate(45deg)}[dir=rtl] .joinchat__optin label{padding:0 30px 0 0}[dir=rtl] .joinchat__optin label:before{left:auto;right:0}[dir=rtl] .joinchat__optin label:after{left:auto;right:8px}.joinchat__optin input:checked+label:before{box-shadow:0 0 0 1px var(--text),inset 0 0 0 10px var(--color)}.joinchat__optin input:checked+label:after{display:block}.joinchat--dark .joinchat__optin{color:#d8d8d8}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@keyframes joinchat_show{0%{transform:scale3d(0,0,0)}to{transform:scaleX(1)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translate3d(0,50px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20px,0)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleX(1)}25%,to{opacity:0;transform:scaleX(1)}}.joinchat__woo-btn__wrapper{clear:both}.joinchat__woo-btn{--s:40px;display:inline-block;box-sizing:border-box;height:var(--s);max-width:100%;padding:0 calc(var(--s)/2) 0 var(--s);background:#25d366 var(--joinchat-ico) calc(var(--s)*0.2) 50% no-repeat;background-size:calc(var(--s)*0.6);color:#fff;border-radius:calc(var(--s)/2);font:700 normal calc(var(--s)*0.35)/var(--s) var(--joinchat-font);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;transition:background-color .2s}.joinchat__woo-btn:hover{background-color:#128c7e}@media (orientation:landscape) and (min-height:481px),(orientation:portrait) and (min-width:481px){.joinchat--mobile{display:none!important}}@media (max-width:767px){.joinchat--footer-bar{--bottom:76px!important}}@media (max-width:480px),(orientation:landscape) and (max-height:480px){.joinchat{--bottom:6px;--sep:6px;--header:calc(var(--s)*0.91667)}.joinchat__header__text{font-size:17px}.joinchat__close{--size:28px}.joinchat__box__scroll{padding-top:15px}.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover .joinchat__qr,.joinchat--chatbox .joinchat__button:hover .joinchat__qr{display:flex}}@media (prefers-color-scheme:dark){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__optin{color:#d8d8d8}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-reduced-motion){.joinchat{animation:none}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}.joinchat__button__sendtext{transition:none!important}}