@xapp/chat-widget 1.48.0 → 1.49.0

package/dist/components/ChatMarkdownMessage/ChatMarkdownMessage.d.ts

@@ -3,6 +3,7 @@ import { ChatMsgDetail } from "../../store/ChatAction";
 export interface ChatMarkdownMessageProps {
     readonly message: ChatMsgDetail;
     readonly sibling: boolean;
+    readonly time?: string;
     onOpenUrl(url: string): void;
 }
 export declare const ChatMarkdownMessage: FC<ChatMarkdownMessageProps>;

package/dist/components/ChatMessage/ChatMessage.d.ts

@@ -7,6 +7,7 @@ export interface ChatMessageProps {
     message: ChatMsgDetail;
     sibling?: boolean;
     agent: ChatUserInfo;
+    readonly time?: string;
     readonly messageMiddleware?: MessageMiddleware;
     readonly middlewareContext?: MessageMiddlewareContext;
 }

package/dist/components/ChatPermissionMessage/ChatPermissionMessage.d.ts

@@ -5,5 +5,6 @@ export interface ChatPermissionMessageProps {
     readonly message: ChatMsgDetail;
     readonly sibling: boolean;
     readonly ctx: MessageMiddlewareContext;
+    readonly time?: string;
 }
 export declare const ChatPermissionMessage: FC<ChatPermissionMessageProps>;

package/dist/components/ChatRating/ChatRatingContainer.d.ts

@@ -4,6 +4,7 @@ export interface ChatRatingContainerProps {
     readonly agent: ChatUserInfo;
     readonly hasRating: boolean;
     readonly shouldDisplay: boolean;
+    readonly time?: string;
 }
 declare const ChatRatingContainer: FC<ChatRatingContainerProps>;
 export default ChatRatingContainer;

package/dist/components/ChatTextMessage/ChatTextMessage.d.ts

@@ -3,5 +3,6 @@ import { ChatMsgDetail } from "../../store/ChatAction";
 export interface ChatTextMessageProps {
     readonly message: ChatMsgDetail;
     readonly sibling: boolean;
+    readonly time?: string;
 }
 export declare const ChatTextMessage: FC<ChatTextMessageProps>;

package/dist/components/ChatWidget/ChatWidget.stories.d.ts

@@ -15,6 +15,7 @@ export declare const DirectWithItemsOnConfigurableMessages: VFC;
 export declare const DirectWithEmptyItemsOnConfigurableMessages: VFC;
 export declare const Static: VFC;
 export declare const Docked: VFC;
+export declare const MixedMenu: VFC;
 export declare const EmptyMenu: VFC;
 export declare const Styled: VFC;
 export declare const StyledTheme1: VFC;

package/dist/components/CtaBubble/CtaBubbleContainer.d.ts

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 export interface Props {
     readonly visible: boolean;
     readonly timeout: number;
-    onClick: () => void;
+    onClick?: () => void;
 }
 declare const CtaBubbleContainer: FC<React.PropsWithChildren<Props>>;
 export default CtaBubbleContainer;

package/dist/components/FailureMessage/FailureMessage.d.ts

@@ -4,5 +4,6 @@ export interface FailureMessageProps {
     readonly agents: ChatAgents;
     readonly text?: string;
     readonly delay?: number;
+    readonly time?: string;
 }
 export declare const FailureMessage: FC<FailureMessageProps>;

package/dist/components/OfflineForm/OfflineFormContainer.d.ts

@@ -1,5 +1,6 @@
 import { FC } from "react";
 export interface OfflineFormContainerProps {
+    readonly time?: string;
 }
 declare const OfflineFormContainer: FC<OfflineFormContainerProps>;
 export default OfflineFormContainer;

package/dist/components/PrechatForm/PrechatFormContainer.d.ts

@@ -1,5 +1,6 @@
 import { FC } from "react";
 export interface PrechatFormContainerProps {
+    readonly time?: string;
 }
 declare const PrechatFormContainer: FC<PrechatFormContainerProps>;
 export default PrechatFormContainer;

package/dist/components/StatusContainer/StatusContainer.stories.d.ts

@@ -5,3 +5,4 @@ export default _default;
 export declare const Online: VFC;
 export declare const Offline: VFC;
 export declare const Away: VFC;
+export declare const WithLongStatus: VFC;

package/dist/components/SystemMessage/SystemMessage.d.ts

@@ -2,6 +2,7 @@ import { FC } from "react";
 import { ChatDetail } from "../../store/ChatAction";
 export interface Props {
     readonly message: ChatDetail;
+    readonly time?: string;
 }
 declare const SystemMessage: FC<Props>;
 export default SystemMessage;

package/dist/index.css

@@ -1 +1 @@
-@font-face{font-family:OpenSansSemibold;font-style:normal;font-weight:600;font-display:swap;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2")}@font-face{font-family:RobotoRegular;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2")}@font-face{font-family:RobotoMedium;font-style:oblique;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2")}.widget-container{background:#fff;display:flex;flex-flow:column nowrap;width:100%;height:100%;visibility:hidden;font-family:RobotoRegular,serif;box-shadow:0 5px 40px rgba(0,0,0,.16);overflow:hidden;border-radius:var(--xapp-widget-border-radius, 10px);border:var(--xapp-widget-border-width, 0px) solid var(--xapp-widget-border-color, var(--xapp-primary-color, #616161));box-sizing:border-box}.widget-container *,.widget-container *:before,.widget-container *:after{box-sizing:border-box}.widget-container--normal,.widget-container--static{position:fixed;z-index:var(--xapp-widget-z-index, 1000);right:var(--xapp-widget-margin-right, 10px);bottom:var(--xapp-widget-margin-bottom, 10px)}.widget-container--normal.visible,.widget-container--static.visible{width:min(var(--xapp-widget-width, 400px), 100vw - var(--xapp-widget-margin-left, 10px) - var(--xapp-widget-margin-right, 10px));height:min(var(--xapp-widget-height, 500px), 100vh - var(--xapp-widget-margin-top, 10px) - var(--xapp-widget-margin-bottom, 10px))}.widget-container--docked{width:100%;height:100%}.widget-container:not(.visible){animation:widget-hide .5s backwards;width:64px;height:64px}.widget-container.visible{animation:widget-show .5s forwards}.message-svg path{fill:var(--xapp-primary-color, #616161)}.chat-msg{line-height:20px;font-size:14px;margin-left:48px;max-width:var(--xapp-messages-max-width, 240px)}.chat-msg--expand{max-width:calc(100% - 48px);width:calc(100% - 48px)}.chat-msg__fullwidth{max-width:100%;width:100%}.chat-msg--no-ava{margin-left:0}.chat-typing-progress .chat-msg{color:#30375b}.visitor .chat-text-container{padding-right:20px}.chat-media-container{border-radius:8px;border:1px solid #ddd;overflow:hidden}.chat-img{min-width:180px;min-height:120px;background-position:center;background-size:cover}.system-msg-container{text-align:center;margin-bottom:16px}.system-msg{font-size:14px;color:#bfbfbf}.chat-rating-card{padding-bottom:16px;text-align:center}.buttons-container{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;width:100%}.buttons-container .button{flex-grow:1}.buttons-container .button:not(:last-child){margin-right:8px}.buttons-container .button-card{flex-grow:0}.buttons-container .button-card:not(:last-child){margin-right:8px}@keyframes widget-show{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:translateY(50%)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes widget-hide{0%{transform:translateY(0)}99%{opacity:0;transform:translateY(50%)}100%{visibility:hidden;opacity:0}}@keyframes widget-show-grow{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:visible;opacity:1;transform:scale(1)}}@keyframes widget-hide-shrink{0%{visibility:visible;opacity:1;transform:scale(1)}99%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:hidden;opacity:0}}.spinner-container{z-index:var(--xapp-widget-z-index, 1000);position:absolute;width:100%;height:100%;display:flex;align-items:center;background:#fff;transition:visibility 500ms,opacity 500ms;visibility:hidden;opacity:0;top:0;left:0}.spinner-container.visible{visibility:visible;opacity:1}.spinner{width:40px;height:40px;margin:100px auto;background-color:var(--xapp-primary-color, #616161);border-radius:100%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}.chevron{width:100%;height:100%}@-webkit-keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.action-button{border:1px solid #ddd;border-radius:4px;text-align:center;opacity:1;outline:none;font-size:14px;padding:8px;text-align:center}.action-button:hover{opacity:.8;cursor:pointer}.avatar{border-radius:16px;color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;width:100%;height:100%}.avatar--agent{background-color:#fff}.avatar--visitor{background-color:var(--xapp-primary-color, #616161)}.avatar--empty{background-color:rgba(0,0,0,0)}.xappw-carousel{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.xappw-carousel__prev,.xappw-carousel__next{flex:0 0 48px;height:30px;cursor:pointer}.xappw-carousel__prev svg,.xappw-carousel__next svg{display:block;margin:auto;height:100%}.xappw-carousel-items{display:flex;position:relative;height:auto;align-items:stretch;white-space:nowrap;overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}@media(hover: none)and (pointer: coarse){.xappw-carousel-items{overflow-x:auto}}.xappw-carousel-items__item{display:inline-flex;flex-direction:column;padding-right:10px;flex-shrink:0}.xappw-carousel-items__item:last-child{padding-right:0}@media(max-width: 640px){.xappw-carousel-items__item{min-width:100%}}.xappw-carousel-items--one-item{margin-left:48px}.chat-card-container{border-radius:10px;position:relative;overflow:hidden;color:#fff;background:#f6f6f6}.chat-card-container .chat-card-img{border-radius:0}.chat-card-container__img{min-width:220px;height:120px}.chat-card-container .chat-card-title{padding:2px 10px;color:#2e375a;font-family:RobotoMedium,serif;font-size:12px;line-height:14px;font-weight:bold}.chat-card-container .chat-card-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .chat-card-sub-title{padding:2px 10px;color:#2e375a;font-family:RobotoRegular,serif;font-size:10px;line-height:14px}.chat-card-container .chat-card-sub-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-primary-color, #616161);color:#d5d9e7;cursor:pointer}.chat-list-item{display:flex;flex-direction:column;align-items:flex-start;min-width:220px;min-height:120px;flex:1 1 auto;border:solid 1px #ccc;border-radius:12px}.chat-list-item-container{display:flex;flex-direction:column;flex:1 1 auto}.chat-list-item__img{border-radius:12px 12px 0 0;width:100%;height:120px;overflow:hidden}.chat-list-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3;padding:2px}.chat-list-item__title span{display:inline-block;white-space:pre-wrap}.chat-list-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, italic);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3;max-width:200px;padding:2px}.chat-list-item__subtitle span{display:inline-block;white-space:pre-wrap}.chat-list-item__actions{margin-top:auto}.chat-list-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.chat-chips{width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;box-sizing:border-box;margin:0 auto;padding:10px;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}.chat-chips::-webkit-scrollbar{background-color:#fff;height:10px}.chat-chips::-webkit-scrollbar-track{background-color:#fff}.chat-chips::-webkit-scrollbar-button{display:none}.chat-chips::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:10px;border:2.5px solid #fff}.chat-menu{display:flex;flex-flow:column;flex-shrink:0;z-index:999;overflow-y:hidden;-webkit-transition:max-height .8s ease-in-out;-moz-transition:max-height .8s ease-in-out;-o-transition:max-height .8s ease-in-out;transition:max-height .8s ease-in-out}.chat-menu--closed{max-height:0}.chat-menu--opened{max-height:calc(5 * var(--xapp-menu-item-height, 24px))}.chat-msg-container-wrapper{display:flex;margin-bottom:16px}.chat-msg-container-wrapper.visitor{justify-content:flex-end}.chat-msg-container-wrapper.agent{justify-content:flex-start}.chat-msg-container-wrapper.sibling{margin-bottom:8px}.chat-msg-container-wrapper.sibling .avatar{display:none}.chat-msg-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative}.chat-msg-container.visitor{align-items:flex-end}.chat-msg-container.visitor .xappw-chat-msg-part__avatar{right:0;display:none}.chat-msg-container.agent{align-items:stretch}.chat-msg-container.agent .xappw-chat-msg-part__avatar{width:40px;height:40px;left:0}.chat-text-container p{margin:0 0 8px 0;padding:0}.chat-msg-agent-typing{margin-top:auto;padding-bottom:16px;font-family:var(--xapp-text-typing-status-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-text-typing-status-font-weight, normal);font-size:var(--xapp-text-typing-status-font-size, 14px);font-style:var(--xapp-text-typing-status-font-style, normal);color:var(--xapp-text-typing-status-text-color, #bfbfbf)}.chat-msg-agent-typing::after{display:inline-block;animation:dots steps(1, end) 1.5s infinite;content:""}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}.chat-chip{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;color:#2f385a;line-height:25px;border-radius:25px;border:thin solid #aeb3be;cursor:pointer;user-select:none}.chat-chip-link{text-decoration:underline}.chat-text-bubble{border-radius:10px;padding:10px;position:relative;overflow:visible}.chat-text-bubble--mine{font-family:var(--xapp-messages-mine-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-mine-font-weight, normal);font-size:var(--xapp-messages-mine-font-size, 14px);font-style:var(--xapp-messages-mine-font-style, normal);color:var(--xapp-messages-mine-text-color, #ffffff);background:var(--xapp-messages-mine-bubble-color, hsl(120deg, 75%, 50%));border-bottom-right-radius:0}.chat-text-bubble--mine .chat-text-bubble__tail{right:-8px;color:var(--xapp-messages-mine-bubble-color, hsl(120deg, 75%, 50%))}.chat-text-bubble--others{font-family:var(--xapp-messages-others-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-others-font-weight, normal);font-size:var(--xapp-messages-others-font-size, 14px);font-style:var(--xapp-messages-others-font-style, normal);color:var(--xapp-messages-others-text-color, #262726);background:var(--xapp-messages-others-bubble-color, #e1e2e1);border-bottom-left-radius:0}.chat-text-bubble--others .chat-text-bubble__tail{left:-8px;color:var(--xapp-messages-others-bubble-color, #e1e2e1)}.chat-text-bubble span{white-space:pre-wrap}.chat-typing-progress .chat-text-bubble{padding:8px 10px;margin-top:4px}.chat-text-bubble__tail{position:absolute;width:8px;height:24px;bottom:0}.chat-button{position:fixed;bottom:0;right:0;cursor:pointer;margin-top:var(--xapp-chat-button-margin-top, var(--xapp-widget-margin-top, 16px));margin-right:var(--xapp-chat-button-margin-right, var(--xapp-widget-margin-right, 16px));margin-bottom:var(--xapp-chat-button-margin-bottom, var(--xapp-widget-margin-bottom, 16px));margin-left:var(--xapp-chat-button-margin-left, var(--xapp-widget-margin-left, 16px));display:block;opacity:1;animation:widget-show-grow .5s backwards;width:80px;height:80px;z-index:var(--xapp-widget-z-index, 1000)}.chat-button.visible{animation:widget-hide-shrink .5s forwards}.chat-button__btn{position:absolute;width:48px;height:48px;border-radius:24px;background-color:var(--xapp-chat-button-background, var(--xapp-primary-color, #616161));box-shadow:0 0 8px 0 rgba(0,0,0,.3);bottom:0;right:0}.chat-button__btn svg{display:block;margin:auto;height:100%}.chat-button__cta{position:absolute;bottom:56px;right:24px;white-space:nowrap;font-size:16px;font-family:RobotoRegular,serif}.xappw-chat-msg-part{display:inline-block;position:relative;word-wrap:break-word}.xappw-chat-msg-part+.xappw-chat-msg-part{margin-top:4px}.xappw-chat-msg-part+.xappw-chat-msg-part .chat-card-img{border-radius:12px 12px 12px 0}.xappw-chat-msg-part__avatar{position:absolute;bottom:0;z-index:10}.xappw-chat-msg-part ul{list-style-position:inside;padding:0;margin:0 0 8px 0}.xappw-chat-msg-part li{padding:0;margin:0}.cta-bubble{position:relative;border-radius:50%;background:var(--xapp-cta-background, #e1e2e1);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;text-align:center;max-width:192px}.cta-bubble__tail{position:absolute;left:-16px;right:-16px;top:-16px;bottom:-16px;z-index:1;color:var(--xapp-cta-background, #e1e2e1)}.cta-bubble__tail svg{width:100%;height:100%;margin:0;padding:0}.cta-bubble__content{font-family:var(--xapp-cta-font-family, 14px);font-size:var(--xapp-cta-font-size, 14px);color:var(--xapp-cta-text-color, var(--xapp-primary-color, #616161));z-index:2}.xappw-vlist{display:flex;flex-flow:column nowrap}.xappw-vlist__header{padding:16px 8px;font-family:"RobotoRegular","serif";font-weight:bold;font-size:16px}.xappw-vlist-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative;white-space:nowrap;border:solid 1px #ccc;border-radius:12px;overflow:hidden}.xappw-vlist-container .xappw-vlist-container__item{display:inline-block;border-top:solid 1px #ccc}.xappw-vlist-container .xappw-vlist-container__item:first-child{border-top:none}.xappw-vlist-item{display:flex;flex-direction:row;flex:0 0 auto;min-width:100%;min-height:56px;padding:8px;box-sizing:border-box;cursor:pointer}.xappw-vlist-item--normal{align-items:flex-start}.xappw-vlist-item--titles{align-items:center}.xappw-vlist-item:hover{background-color:#eee}.xappw-vlist-item__description{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}.xappw-vlist-item__side{flex:0 0 auto;display:flex;flex-direction:column}.xappw-vlist-item__img{border-radius:12px;width:40px;height:40px;overflow:hidden}.xappw-vlist-item__external-link{width:20px;margin:0 4px 4px auto;display:inline-block}.xappw-vlist-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3}.xappw-vlist-item__title span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item__link{font-family:var(--xapp-carousel-link-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-link-font-weight, normal);font-size:var(--xapp-carousel-link-font-size, 12px);font-style:var(--xapp-carousel-link-font-style, normal);color:var(--xapp-carousel-link-text-color, #666);line-height:1.3;overflow:hidden;text-overflow:ellipsis;max-width:100%}.xappw-vlist-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, italic);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3}.xappw-vlist-item__subtitle span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.message-list-container{position:relative;flex-grow:1;flex-shrink:1;overflow-y:scroll;display:flex;flex-direction:column;background:var(--xapp-content-background, #fff)}.message-list-container__msgs{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;padding-top:var(--xapp-messages-padding-top, 16px);padding-right:var(--xapp-messages-padding-right, 16px);padding-bottom:var(--xapp-messages-padding-bottom, 0);padding-left:var(--xapp-messages-padding-left, 20px)}.message-list-container__chips{flex:0 0 auto;border-top:solid 1px #ccc;margin-top:auto}.message-list-container__chips--empty{flex-basis:0;border:none;overflow:hidden}.chat-menu-item{border:var(--xapp-chat-menu-item-border-width, #fff) solid var(--xapp-chat-menu-item-border-color, #fff);border-radius:var(--xapp-chat-menu-item-border-radius, 20px);opacity:1;outline:none;background:var(--xapp-menu-item-background, #efefef);font-family:var(--xapp-menu-item-font-family, 14px);font-weight:var(--xapp-menu-item-font-weight, normal);font-size:var(--xapp-menu-item-font-size, 14px);font-style:var(--xapp-menu-item-font-style, normal);color:var(--xapp-menu-item-text-color, var(--xapp-primary-color, #616161));height:var(--xapp-menu-item-height, 24px);box-sizing:border-box;padding:4px 4px 4px 30px;text-align:left}.chat-menu-item:hover{opacity:.8;cursor:pointer}.chat-menu-item--subtitle{font-family:var(--xapp-menu-item-subtitle-font-family, 14px);font-weight:var(--xapp-menu-item-subtitle-font-weight, normal);font-size:var(--xapp-menu-item-subtitle-font-size, 14px);font-style:var(--xapp-menu-item-subtitle-font-style, normal);color:var(--xapp-menu-item-text-subtitle-color, var(--xapp-primary-color, #616161))}.chat-menu-item-static{border:var(--xapp-chat-menu-item-border-width, #fff) solid var(--xapp-chat-menu-item-border-color, #fff);border-radius:var(--xapp-chat-menu-item-border-radius, 20px);background:var(--xapp-menu-item-background, #efefef);font-family:var(--xapp-menu-item-font-family, 14px);font-weight:var(--xapp-menu-item-font-weight, normal);font-size:var(--xapp-menu-item-font-size, 14px);font-style:var(--xapp-menu-item-font-style, normal);color:var(--xapp-menu-item-text-color, var(--xapp-primary-color, #616161));height:var(--xapp-menu-item-height, 24px);display:flex;justify-content:center;text-align:center;padding:4px 4px 4px 30px}.chat-menu-item-static--body{font-family:var(--xapp-menu-item-subtitle-font-family, 14px);font-weight:var(--xapp-menu-item-subtitle-font-weight, normal);font-size:var(--xapp-menu-item-subtitle-font-size, 14px);font-style:var(--xapp-menu-item-subtitle-font-style, normal);color:var(--xapp-menu-item-text-subtitle-color, var(--xapp-primary-color, #616161))}.xappw-chat-action-item{text-decoration:none}.xappw-chat-action-item--action{cursor:pointer}.chat-footer{position:relative;background-color:var(--xapp-footer-background, var(--xapp-primary-color, #616161))}.chat-footer__menu-icon{border-top:solid var(--xapp-footer-border-width, 0px) var(--xapp-footer-border-color, var(--xapp-primary-color, #616161));z-index:999;padding:6px 0;flex-shrink:0}.chat-footer__menu-icon+.chat-footer__input{margin-top:-6px}.chat-footer__input{margin-top:6px;margin-bottom:6px}.xappw-chat-footer__suggestions{position:absolute;bottom:100%;left:0;right:0;overflow:hidden;z-index:100}.server-offline{position:absolute;top:0;right:0;left:0;bottom:0;z-index:5000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-container{display:flex;flex-flow:row nowrap;justify-content:space-between;padding-left:10px;z-index:999;line-height:40px;height:40px;flex-shrink:0;color:#fff;position:relative;width:100%;background-color:var(--xapp-header-background, var(--xapp-primary-color, #616161));border-bottom:solid var(--xapp-header-border-width, 0px) var(--xapp-header-border-color, var(--xapp-primary-color, #616161));align-items:center}.status-container__avatar{width:30px;height:30px}.status-container__avatar .avatar:not(.avatar--empty){background-color:#a4a7b6}.status-text{display:inline-flex;flex-direction:column;position:absolute;line-height:100%}.status-text-positionLeft{left:48px}.status-text-positionCenter{left:50%;transform:translateX(-50%);align-items:center}.status-text-title{font-family:var(--xapp-header-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-header-font-weight, normal);font-size:var(--xapp-header-font-size, 16px);font-style:var(--xapp-header-font-style, normal);color:var(--xapp-header-text-color, rgba(255, 255, 255, 0.87))}.status-text-subtitle{margin-top:2px;font-family:var(--xapp-header-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-header-subtitle-font-weight, normal);font-size:var(--xapp-header-subtitle-font-size, 10px);font-style:var(--xapp-header-subtitle-font-style, normal);color:var(--xapp-header-subtitle-text-color, rgba(255, 255, 255, 0.5))}.chat-card-img{display:block;width:100%;height:100%}.chat-card-img__content{background-position:center;background-size:cover;width:100%;height:100%}.chat-footer__branding{text-align:end;padding-right:20px;padding-bottom:12px;font-family:var(--xapp-footer-branding-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-footer-branding-font-weight, normal);font-size:var(--xapp-footer-branding-font-size, 14px);font-style:var(--xapp-footer-branding-font-style, normal);color:var(--xapp-footer-branding-text-color, rgba(255, 255, 255, 0.87))}.xappw-suggestions{display:flex;flex-direction:column;font-family:RobotoRegular,serif}.xappw-suggestions__answer{background-color:#d9d9d9;padding:8px 11px;border-radius:12px}.xappw-suggestions__groups{background-color:#f3f3f3;padding:8px 0}.xappw-suggestions__use{width:28px;padding:4px;color:inherit}.xappw-suggestions__use svg{display:block;margin:auto;height:100%}.xappw-multiselect{list-style:none;padding:0;margin:0}.xappw-multiselect li{padding:0;margin:0}.xapp-search-rich-text{display:inline-block;max-width:100%;overflow:hidden;white-space:pre-wrap}.xapp-search-icon-button{border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center}.xapp-search-icon-button svg{display:block;margin:auto;height:100%}.xapp-search-icon-button__content{display:flex;width:100%}.xappw-rich-input__input{display:block;width:calc(100% - 50px);border:none;outline:none;box-sizing:border-box;margin:0;font-size:inherit;line-height:inherit;color:inherit}.xappw-suggestions-group__items{display:flex;flex-direction:column;padding:2px 0}.xappw-suggestions-group__heading{margin:0 16px}.xappw-suggestions-group-heading{display:flex;align-items:center;font-size:12px;padding:2px 0;color:#061739}.xappw-suggestions-group-heading:after{content:"";border-top:solid 1px #d4d4d4;flex:1 1 auto;margin-left:8px}.xappw-suggestions-item{padding:0 0 0 24px;box-sizing:border-box;width:100%;white-space:nowrap;display:flex;align-items:center;overflow:hidden;font-size:15px;cursor:pointer;border-bottom:solid 1px rgba(0,0,0,0);color:#061739}.xappw-suggestions-item--current,.xappw-suggestions-item:hover{background-color:#3395d2;color:#fff;text-decoration:underline}@media(hover: hover){.xappw-suggestions-item--current .xappw-suggestions-item__actions,.xappw-suggestions-item:hover .xappw-suggestions-item__actions{visibility:visible;color:#fff}}.xappw-suggestions-item__texts{padding:3px 0;flex:1 1 auto;overflow:hidden}.xappw-suggestions-item__actions{flex:0 0 auto;display:flex;margin-left:8px}@media(hover: hover){.xappw-suggestions-item__actions{visibility:hidden}}.xappw-suggestions-list{display:flex;flex-direction:column}.xappw-message-bubble{border-radius:10px;padding:10px;background:var(--xapp-bubble-background, green)}.xapp-search-rich-text-span{flex:0 1 auto;display:inline-block;max-width:100%}.xapp-search-rich-text-span:last-child{overflow:hidden;white-space:pre;text-overflow:ellipsis}.xapp-search-rich-text-input-span{text-decoration:none;font-size:inherit;height:calc(1.5em - 2px);line-height:1em;width:8em;color:inherit}.xapp-search-rich-text-input-span--readonly{border:dashed 1px green;color:green;height:calc(1em - 2px)}.xapp-search-rich-text-bold-span{font-weight:bold}.xapp-search-rich-text-normal-span{font-weight:normal}.message-form .section{margin-bottom:16px}.message-form .label{display:block;margin-bottom:4px;color:var(--xapp-primary-color, #616161)}.message-form input,.message-form textarea{border:1px solid #ddd;border-radius:4px;outline-width:0;width:100%;font-size:14px;box-sizing:border-box}.message-form input{height:32px;padding:0 10px}.message-form textarea{padding:8px 10px;min-height:100px;resize:none;overflow-y:auto}.message-form__submit{width:100%;background-color:var(--xapp-primary-color, #616161);color:#fff}.message-form--shrink-enter{opacity:.01;position:relative;top:100px}.message-form--shrink-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms;transition-delay:500ms}.message-form--shrink-exit{opacity:.5;position:relative;top:0}.message-form--shrink-exit-active{top:-200px;opacity:.01;transition:top 500ms,opacity 500ms}.message-form--grow-enter{opacity:.5;position:relative;top:-200px}.message-form--grow-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms}.message-form--grow-exit{opacity:.5;position:relative;top:0;height:50px}.message-form--grow-exit-active{top:-100px;height:0;opacity:.01;transition:top 500ms,opacity 500ms,height 500ms}.message-form--sent .button-resend{width:100%;margin-top:16px;background-color:var(--xapp-primary-color, #616161);color:#fff}.drawer-bars{display:flex;flex-direction:column;align-items:center;padding:6px 0;cursor:pointer}.drawer-bar{flex:0 0 5px;border-radius:5px;background:var(--xapp-menu-button-color, #fff);width:25px;margin:2.5px}.drawer-bar:first-child{margin-top:0}.drawer-bar:last-child{margin-bottom:0}.xappw-input-container{flex-shrink:0;z-index:999;padding:6px 20px}.xappw-input-container:not(.visible){display:none}.xappw-input-container.drag-drop-zone{outline:3px dashed gray;outline-offset:-3px}.xappw-input-form{display:flex;align-items:center;overflow:hidden;line-height:48px;position:relative;border-radius:var(--xapp-input-border-radius, 20px);background:var(--xapp-input-background, #fff)}.xappw-input-form__buttons{display:flex;align-items:center;position:absolute;right:10px;z-index:2}.xappw-input-form__btn{width:20px;height:16px}.xappw-input{min-height:32px;padding:7px 10px;line-height:normal;display:inline-block;box-sizing:border-box;font-family:var(--xapp-input-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-font-weight, normal);font-size:var(--xapp-input-font-size, 14px);font-style:var(--xapp-input-font-style, normal);color:var(--xapp-input-text-color, #000);outline-width:0;flex-grow:1;border:var(--xapp-input-border-width, #fff) solid var(--xapp-input-border-color, #fff);background:rgba(0,0,0,0)}.xappw-input input:focus::placeholder{color:rgba(0,0,0,0)}.xappw-input input::-webkit-input-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input:-moz-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input::-moz-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input:-ms-input-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input::placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input{z-index:1}.cancel-button{position:absolute;width:48px;top:0;right:0;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-cancel-button-color, #a3a6b4)}.cancel-button:after{content:"⨉"}.minimize-button{position:absolute;width:48px;top:0;right:48px;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-minimize-button-color, #a3a6b4)}.minimize-button:after{content:"─"}.minimize-button.positionRight{right:0}.refresh-button{position:absolute;width:48px;top:0;right:48px;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-refresh-button-color, #a3a6b4)}.refresh-button:after{content:"⟳"}.refresh-button.positionLeft{right:96px}.refresh-button.positionRight{right:0}.card-container{padding-top:16px;position:relative}.card-container__content{color:#555;border-radius:8px;border:1px solid #ddd;padding:24px 16px 16px 16px;font-size:14px}.card-container__title{text-align:center;color:var(--xapp-primary-color, #616161);margin-bottom:8px}.card-container__icon{width:32px;height:32px;position:relative;background-color:#fff;border:1px solid #e0e0e0;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);margin:-16px auto;z-index:999}.card-container__icon svg{display:block;margin:auto;height:100%}@keyframes typing-animation{0%{transform:translateY(0px)}28%{transform:translateY(-5px)}44%{transform:translateY(0px)}}.typing-indicator{height:20px;display:inline-flex;align-items:center}.typing-indicator-part:nth-child(1){animation-delay:200ms}.typing-indicator-part:nth-child(2){animation-delay:300ms}.typing-indicator-part:nth-child(3){animation-delay:400ms}.typing-indicator-part{display:inline-block;animation:typing-animation 1.5s infinite ease-in-out;border-radius:50%;width:7px;height:7px;margin:0 3px;background-color:#7a7a7a}.xappw-send-button{color:var(--xapp-send-button-color, #505050)}.xappw-send-button svg{display:block;margin:auto;height:100%}.xappw-custom-send-button{display:inline-flex;cursor:pointer;user-select:none;width:var(--xapp-send-button-width, 16px)}.xappw-custom-send-button>img{width:100%;height:auto}
+@font-face{font-family:OpenSansSemibold;font-style:normal;font-weight:600;font-display:swap;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2")}@font-face{font-family:RobotoRegular;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2")}@font-face{font-family:RobotoMedium;font-style:oblique;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2")}.widget-container{background:#fff;display:flex;flex-flow:column nowrap;width:100%;height:100%;visibility:hidden;font-family:RobotoRegular,serif;box-shadow:0 5px 40px rgba(0,0,0,.16);overflow:hidden;border-radius:var(--xapp-widget-border-radius, 10px);border:var(--xapp-widget-border-width, 0px) solid var(--xapp-widget-border-color, var(--xapp-primary-color, #616161));box-sizing:border-box}.widget-container *,.widget-container *:before,.widget-container *:after{box-sizing:border-box}.widget-container--normal,.widget-container--static{position:fixed;z-index:var(--xapp-widget-z-index, 1000);right:var(--xapp-widget-margin-right, 10px);bottom:var(--xapp-widget-margin-bottom, 10px)}.widget-container--normal.visible,.widget-container--static.visible{width:min(var(--xapp-widget-width, 400px), 100vw - var(--xapp-widget-margin-left, 10px) - var(--xapp-widget-margin-right, 10px));height:min(var(--xapp-widget-height, 500px), 100vh - var(--xapp-widget-margin-top, 10px) - var(--xapp-widget-margin-bottom, 10px))}.widget-container--docked{width:100%;height:100%}.widget-container:not(.visible){animation:widget-hide .5s backwards;width:64px;height:64px}.widget-container.visible{animation:widget-show .5s forwards}.message-svg path{fill:var(--xapp-primary-color, #616161)}.chat-msg{line-height:20px;font-size:14px;margin-left:48px;max-width:var(--xapp-messages-max-width, 240px)}.chat-msg--expand{max-width:calc(100% - 48px);width:calc(100% - 48px)}.chat-msg__fullwidth{max-width:100%;width:100%}.chat-msg--no-ava{margin-left:0}.chat-typing-progress .chat-msg{color:#30375b}.visitor .chat-text-container{padding-right:20px}.chat-media-container{border-radius:8px;border:1px solid #ddd;overflow:hidden}.chat-img{min-width:180px;min-height:120px;background-position:center;background-size:cover}.system-msg-container{text-align:center;margin-bottom:16px}.system-msg{font-size:14px;color:#bfbfbf}.chat-rating-card{padding-bottom:16px;text-align:center}.buttons-container{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;width:100%}.buttons-container .button{flex-grow:1}.buttons-container .button:not(:last-child){margin-right:8px}.buttons-container .button-card{flex-grow:0}.buttons-container .button-card:not(:last-child){margin-right:8px}@keyframes widget-show{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:translateY(50%)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes widget-hide{0%{transform:translateY(0)}99%{opacity:0;transform:translateY(50%)}100%{visibility:hidden;opacity:0}}@keyframes widget-show-grow{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:visible;opacity:1;transform:scale(1)}}@keyframes widget-hide-shrink{0%{visibility:visible;opacity:1;transform:scale(1)}99%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:hidden;opacity:0}}.spinner-container{z-index:var(--xapp-widget-z-index, 1000);position:absolute;width:100%;height:100%;display:flex;align-items:center;background:#fff;transition:visibility 500ms,opacity 500ms;visibility:hidden;opacity:0;top:0;left:0}.spinner-container.visible{visibility:visible;opacity:1}.spinner{width:40px;height:40px;margin:100px auto;background-color:var(--xapp-primary-color, #616161);border-radius:100%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}.chevron{width:100%;height:100%}@-webkit-keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.chat-button{position:fixed;bottom:0;right:0;cursor:pointer;margin-top:var(--xapp-chat-button-margin-top, var(--xapp-widget-margin-top, 16px));margin-right:var(--xapp-chat-button-margin-right, var(--xapp-widget-margin-right, 16px));margin-bottom:var(--xapp-chat-button-margin-bottom, var(--xapp-widget-margin-bottom, 16px));margin-left:var(--xapp-chat-button-margin-left, var(--xapp-widget-margin-left, 16px));display:block;opacity:1;animation:widget-show-grow .5s backwards;width:48px;height:48px;border-radius:24px;z-index:var(--xapp-widget-z-index, 1000)}.chat-button.visible{animation:widget-hide-shrink .5s forwards}.chat-button:focus-visible{outline:none;box-shadow:0 0 4px 4px rgba(0,0,0,.3)}.chat-button__btn{position:absolute;width:48px;height:48px;border-radius:24px;background-color:var(--xapp-chat-button-background, var(--xapp-primary-color, #616161));box-shadow:0 0 8px 0 rgba(0,0,0,.3);bottom:-2px;right:-2px}.chat-button__btn svg{display:block;margin:auto;height:100%}.chat-button__cta{position:absolute;bottom:56px;right:24px;white-space:nowrap;font-size:16px;font-family:RobotoRegular,serif}.action-button{border:1px solid #ddd;border-radius:4px;text-align:center;opacity:1;outline:none;font-size:14px;padding:8px;text-align:center}.action-button:hover{opacity:.8;cursor:pointer}.xappw-carousel{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.xappw-carousel__prev,.xappw-carousel__next{flex:0 0 48px;height:30px;cursor:pointer}.xappw-carousel__prev svg,.xappw-carousel__next svg{display:block;margin:auto;height:100%}.xappw-carousel-items{display:flex;position:relative;height:auto;align-items:stretch;white-space:nowrap;overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}@media(hover: none)and (pointer: coarse){.xappw-carousel-items{overflow-x:auto}}.xappw-carousel-items__item{display:inline-flex;flex-direction:column;padding-right:10px;flex-shrink:0}.xappw-carousel-items__item:last-child{padding-right:0}@media(max-width: 640px){.xappw-carousel-items__item{min-width:100%}}.xappw-carousel-items--one-item{margin-left:48px}.chat-list-item{display:flex;flex-direction:column;align-items:flex-start;min-width:220px;min-height:120px;flex:1 1 auto;border:solid 1px #ccc;border-radius:12px}.chat-list-item-container{display:flex;flex-direction:column;flex:1 1 auto}.chat-list-item__img{border-radius:12px 12px 0 0;width:100%;height:120px;overflow:hidden}.chat-list-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3;padding:2px}.chat-list-item__title span{display:inline-block;white-space:pre-wrap}.chat-list-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, italic);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3;max-width:200px;padding:2px}.chat-list-item__subtitle span{display:inline-block;white-space:pre-wrap}.chat-list-item__actions{margin-top:auto}.chat-list-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.chat-msg-container-wrapper{display:flex;margin-bottom:16px}.chat-msg-container-wrapper.visitor{justify-content:flex-end}.chat-msg-container-wrapper.agent{justify-content:flex-start}.chat-msg-container-wrapper.sibling{margin-bottom:8px}.chat-msg-container-wrapper.sibling .avatar{display:none}.chat-msg-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative}.chat-msg-container.visitor{align-items:flex-end}.chat-msg-container.visitor .xappw-chat-msg-part__avatar{right:0;display:none}.chat-msg-container.agent{align-items:stretch}.chat-msg-container.agent .xappw-chat-msg-part__avatar{width:40px;height:40px;left:0}.message-sr-only{display:none}.chat-text-container p{margin:0 0 8px 0;padding:0}.chat-msg-agent-typing{margin-top:auto;padding-bottom:16px;font-family:var(--xapp-text-typing-status-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-text-typing-status-font-weight, normal);font-size:var(--xapp-text-typing-status-font-size, 14px);font-style:var(--xapp-text-typing-status-font-style, normal);color:var(--xapp-text-typing-status-text-color, #bfbfbf)}.chat-msg-agent-typing::after{display:inline-block;animation:dots steps(1, end) 1.5s infinite;content:""}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}.chat-chip{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;color:#2f385a;line-height:25px;border-radius:25px;border:thin solid #aeb3be;cursor:pointer;user-select:none}.chat-chip-link{text-decoration:underline}.chat-menu{display:flex;flex-flow:column;flex-shrink:0;z-index:999;overflow-y:hidden;-webkit-transition:max-height .8s ease-in-out;-moz-transition:max-height .8s ease-in-out;-o-transition:max-height .8s ease-in-out;transition:max-height .8s ease-in-out}.chat-menu--closed{max-height:0}.chat-menu--opened{max-height:calc(var(--xapp-widget-height, 500px) - 40)}.chat-chips{width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;box-sizing:border-box;margin:0 auto;padding:10px;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}.chat-chips::-webkit-scrollbar{background-color:#fff;height:10px}.chat-chips::-webkit-scrollbar-track{background-color:#fff}.chat-chips::-webkit-scrollbar-button{display:none}.chat-chips::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:10px;border:2.5px solid #fff}.chat-card-container{border-radius:10px;position:relative;overflow:hidden;color:#fff;background:#f6f6f6}.chat-card-container .chat-card-img{border-radius:0}.chat-card-container__img{min-width:220px;height:120px}.chat-card-container .chat-card-title{padding:2px 10px;color:#2e375a;font-family:RobotoMedium,serif;font-size:12px;line-height:14px;font-weight:bold}.chat-card-container .chat-card-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .chat-card-sub-title{padding:2px 10px;color:#2e375a;font-family:RobotoRegular,serif;font-size:10px;line-height:14px}.chat-card-container .chat-card-sub-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-primary-color, #616161);color:#d5d9e7;cursor:pointer}.chat-text-bubble{border-radius:10px;padding:10px;position:relative;overflow:visible}.chat-text-bubble--mine{font-family:var(--xapp-messages-mine-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-mine-font-weight, normal);font-size:var(--xapp-messages-mine-font-size, 14px);font-style:var(--xapp-messages-mine-font-style, normal);color:var(--xapp-messages-mine-text-color, #ffffff);background:var(--xapp-messages-mine-bubble-color, hsl(120deg, 75%, 50%));border-bottom-right-radius:0}.chat-text-bubble--mine .chat-text-bubble__tail{right:-8px;color:var(--xapp-messages-mine-bubble-color, hsl(120deg, 75%, 50%))}.chat-text-bubble--others{font-family:var(--xapp-messages-others-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-others-font-weight, normal);font-size:var(--xapp-messages-others-font-size, 14px);font-style:var(--xapp-messages-others-font-style, normal);color:var(--xapp-messages-others-text-color, #262726);background:var(--xapp-messages-others-bubble-color, #e1e2e1);border-bottom-left-radius:0}.chat-text-bubble--others .chat-text-bubble__tail{left:-8px;color:var(--xapp-messages-others-bubble-color, #e1e2e1)}.chat-text-bubble span{white-space:pre-wrap}.chat-typing-progress .chat-text-bubble{padding:8px 10px;margin-top:4px}.chat-text-bubble__tail{position:absolute;width:8px;height:24px;bottom:0}.avatar{border-radius:16px;color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;width:100%;height:100%}.avatar--agent{background-color:#fff}.avatar--visitor{background-color:var(--xapp-primary-color, #616161)}.avatar--empty{background-color:rgba(0,0,0,0)}.xappw-chat-msg-part{display:inline-block;position:relative;word-wrap:break-word}.xappw-chat-msg-part+.xappw-chat-msg-part{margin-top:4px}.xappw-chat-msg-part+.xappw-chat-msg-part .chat-card-img{border-radius:12px 12px 12px 0}.xappw-chat-msg-part__avatar{position:absolute;bottom:0;z-index:10}.xappw-chat-msg-part ul{list-style-position:inside;padding:0;margin:0 0 8px 0}.xappw-chat-msg-part li{padding:0;margin:0}.cta-bubble{position:relative;border-radius:50%;background:var(--xapp-cta-background, #e1e2e1);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;text-align:center;max-width:192px}.cta-bubble__tail{position:absolute;left:-16px;right:-16px;top:-16px;bottom:-16px;z-index:1;color:var(--xapp-cta-background, #e1e2e1)}.cta-bubble__tail svg{width:100%;height:100%;margin:0;padding:0}.cta-bubble__content{font-family:var(--xapp-cta-font-family, 14px);font-size:var(--xapp-cta-font-size, 14px);color:var(--xapp-cta-text-color, var(--xapp-primary-color, #616161));z-index:2}.xappw-vlist-item{display:flex;flex-direction:row;flex:0 0 auto;min-width:100%;min-height:56px;padding:8px;box-sizing:border-box;cursor:pointer}.xappw-vlist-item--normal{align-items:flex-start}.xappw-vlist-item--titles{align-items:center}.xappw-vlist-item:hover{background-color:#eee}.xappw-vlist-item__description{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}.xappw-vlist-item__side{flex:0 0 auto;display:flex;flex-direction:column}.xappw-vlist-item__img{border-radius:12px;width:40px;height:40px;overflow:hidden}.xappw-vlist-item__external-link{width:20px;margin:0 4px 4px auto;display:inline-block}.xappw-vlist-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3}.xappw-vlist-item__title span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item__link{font-family:var(--xapp-carousel-link-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-link-font-weight, normal);font-size:var(--xapp-carousel-link-font-size, 12px);font-style:var(--xapp-carousel-link-font-style, normal);color:var(--xapp-carousel-link-text-color, #666);line-height:1.3;overflow:hidden;text-overflow:ellipsis;max-width:100%}.xappw-vlist-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, italic);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3}.xappw-vlist-item__subtitle span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.xappw-vlist{display:flex;flex-flow:column nowrap}.xappw-vlist__header{padding:16px 8px;font-family:"RobotoRegular","serif";font-weight:bold;font-size:16px}.xappw-vlist-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative;white-space:nowrap;border:solid 1px #ccc;border-radius:12px;overflow:hidden}.xappw-vlist-container .xappw-vlist-container__item{display:inline-block;border-top:solid 1px #ccc}.xappw-vlist-container .xappw-vlist-container__item:first-child{border-top:none}.message-list-container{position:relative;flex-grow:1;flex-shrink:1;overflow-y:scroll;display:flex;flex-direction:column;background:var(--xapp-content-background, #fff)}.message-list-container__msgs{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;padding-top:var(--xapp-messages-padding-top, 16px);padding-right:var(--xapp-messages-padding-right, 16px);padding-bottom:var(--xapp-messages-padding-bottom, 0);padding-left:var(--xapp-messages-padding-left, 20px)}.message-list-container__chips{flex:0 0 auto;border-top:solid 1px #ccc;margin-top:auto}.message-list-container__chips--empty{flex-basis:0;border:none;overflow:hidden}.chat-menu-item{border:var(--xapp-chat-menu-item-border-width, #fff) solid var(--xapp-chat-menu-item-border-color, #fff);border-radius:var(--xapp-chat-menu-item-border-radius, 0px);opacity:1;outline:none;background:var(--xapp-menu-item-background, #efefef);font-family:var(--xapp-menu-item-font-family, 14px);font-weight:var(--xapp-menu-item-font-weight, normal);font-size:var(--xapp-menu-item-font-size, 14px);font-style:var(--xapp-menu-item-font-style, normal);color:var(--xapp-menu-item-text-color, var(--xapp-primary-color, #616161));height:var(--xapp-menu-item-height, 24px);box-sizing:border-box;padding:4px 4px 4px 30px;text-align:left}.chat-menu-item:hover{opacity:.8;cursor:pointer}.chat-menu-item--subtitle{font-family:var(--xapp-menu-item-subtitle-font-family, 14px);font-weight:var(--xapp-menu-item-subtitle-font-weight, normal);font-size:var(--xapp-menu-item-subtitle-font-size, 14px);font-style:var(--xapp-menu-item-subtitle-font-style, normal);color:var(--xapp-menu-item-text-subtitle-color, var(--xapp-primary-color, #616161))}.chat-menu-item-static{border:var(--xapp-chat-menu-item-border-width, #fff) solid var(--xapp-chat-menu-item-border-color, #fff);border-radius:var(--xapp-chat-menu-item-border-radius, 0px);background:var(--xapp-menu-item-background, #efefef);font-family:var(--xapp-menu-item-font-family, 14px);font-weight:var(--xapp-menu-item-font-weight, normal);font-size:var(--xapp-menu-item-font-size, 14px);font-style:var(--xapp-menu-item-font-style, normal);color:var(--xapp-menu-item-text-color, var(--xapp-primary-color, #616161));height:var(--xapp-menu-item-height, 24px);display:flex;justify-content:center;text-align:center;padding:4px 4px 4px 30px}.chat-menu-item-static--body{font-family:var(--xapp-menu-item-subtitle-font-family, 14px);font-weight:var(--xapp-menu-item-subtitle-font-weight, normal);font-size:var(--xapp-menu-item-subtitle-font-size, 14px);font-style:var(--xapp-menu-item-subtitle-font-style, normal);color:var(--xapp-menu-item-text-subtitle-color, var(--xapp-primary-color, #616161))}.xappw-chat-action-item{text-decoration:none}.xappw-chat-action-item--action{cursor:pointer}.chat-footer{position:relative;background-color:var(--xapp-footer-background, var(--xapp-primary-color, #616161))}.chat-footer__menu-icon{border-top:solid var(--xapp-footer-border-width, 0px) var(--xapp-footer-border-color, var(--xapp-primary-color, #616161));z-index:999;padding:6px 0;flex-shrink:0}.chat-footer__menu-icon+.chat-footer__input{margin-top:-6px}.chat-footer__input{margin-top:6px;margin-bottom:6px}.xappw-chat-footer__suggestions{position:absolute;bottom:100%;left:0;right:0;overflow:hidden;z-index:100}.server-offline{position:absolute;top:0;right:0;left:0;bottom:0;z-index:5000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-container{display:flex;flex-flow:row nowrap;justify-content:space-between;padding-left:10px;z-index:999;line-height:40px;height:40px;flex-shrink:0;color:#fff;position:relative;width:100%;background-color:var(--xapp-header-background, var(--xapp-primary-color, #616161));border-bottom:solid var(--xapp-header-border-width, 0px) var(--xapp-header-border-color, var(--xapp-primary-color, #616161));align-items:center}.status-container__avatar{width:30px;height:30px}.status-container__avatar .avatar:not(.avatar--empty){background-color:#a4a7b6}.status-text{display:inline-flex;flex-direction:column;position:absolute;line-height:100%}.status-text-positionLeft{left:48px}.status-text-positionCenter{left:50%;transform:translateX(-50%);align-items:center}.status-text-title{font-family:var(--xapp-header-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-header-font-weight, normal);font-size:var(--xapp-header-font-size, 16px);font-style:var(--xapp-header-font-style, normal);color:var(--xapp-header-text-color, rgba(255, 255, 255, 0.87))}.status-text-subtitle{margin-top:2px;font-family:var(--xapp-header-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-header-subtitle-font-weight, normal);font-size:var(--xapp-header-subtitle-font-size, 10px);font-style:var(--xapp-header-subtitle-font-style, normal);color:var(--xapp-header-subtitle-text-color, rgba(255, 255, 255, 0.5))}.chat-card-img{display:block;width:100%;height:100%}.chat-card-img__content{background-position:center;background-size:cover;width:100%;height:100%}.chat-footer__branding{text-align:end;padding-right:20px;padding-bottom:12px;font-family:var(--xapp-footer-branding-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-footer-branding-font-weight, normal);font-size:var(--xapp-footer-branding-font-size, 14px);font-style:var(--xapp-footer-branding-font-style, normal);color:var(--xapp-footer-branding-text-color, rgba(255, 255, 255, 0.87))}.xappw-suggestions{display:flex;flex-direction:column;font-family:RobotoRegular,serif}.xappw-suggestions__answer{background-color:#d9d9d9;padding:8px 11px;border-radius:12px}.xappw-suggestions__groups{background-color:#f3f3f3;padding:8px 0}.xappw-suggestions__use{width:28px;padding:4px;color:inherit}.xappw-suggestions__use svg{display:block;margin:auto;height:100%}.xappw-multiselect{list-style:none;padding:0;margin:0}.xappw-multiselect li{padding:0;margin:0}.xappw-rich-input__input{display:block;width:calc(100% - 50px);border:none;outline:none;box-sizing:border-box;margin:0;font-size:inherit;line-height:inherit;color:inherit}.xapp-search-rich-text{display:inline-block;max-width:100%;overflow:hidden;white-space:pre-wrap}.xapp-search-icon-button{border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center}.xapp-search-icon-button svg{display:block;margin:auto;height:100%}.xapp-search-icon-button__content{display:flex;width:100%}.xappw-message-bubble{border-radius:10px;padding:10px;background:var(--xapp-bubble-background, green)}.xappw-suggestions-group__items{display:flex;flex-direction:column;padding:2px 0}.xappw-suggestions-group__heading{margin:0 16px}.xappw-suggestions-item{padding:0 0 0 24px;box-sizing:border-box;width:100%;white-space:nowrap;display:flex;align-items:center;overflow:hidden;font-size:15px;cursor:pointer;border-bottom:solid 1px rgba(0,0,0,0);color:#061739}.xappw-suggestions-item--current,.xappw-suggestions-item:hover{background-color:#3395d2;color:#fff;text-decoration:underline}@media(hover: hover){.xappw-suggestions-item--current .xappw-suggestions-item__actions,.xappw-suggestions-item:hover .xappw-suggestions-item__actions{visibility:visible;color:#fff}}.xappw-suggestions-item__texts{padding:3px 0;flex:1 1 auto;overflow:hidden}.xappw-suggestions-item__actions{flex:0 0 auto;display:flex;margin-left:8px}@media(hover: hover){.xappw-suggestions-item__actions{visibility:hidden}}.xappw-suggestions-list{display:flex;flex-direction:column}.xappw-suggestions-group-heading{display:flex;align-items:center;font-size:12px;padding:2px 0;color:#061739}.xappw-suggestions-group-heading:after{content:"";border-top:solid 1px #d4d4d4;flex:1 1 auto;margin-left:8px}.xapp-search-rich-text-span{flex:0 1 auto;display:inline-block;max-width:100%}.xapp-search-rich-text-span:last-child{overflow:hidden;white-space:pre;text-overflow:ellipsis}.xapp-search-rich-text-bold-span{font-weight:bold}.xapp-search-rich-text-normal-span{font-weight:normal}.xapp-search-rich-text-input-span{text-decoration:none;font-size:inherit;height:calc(1.5em - 2px);line-height:1em;width:8em;color:inherit}.xapp-search-rich-text-input-span--readonly{border:dashed 1px green;color:green;height:calc(1em - 2px)}.message-form .section{margin-bottom:16px}.message-form .label{display:block;margin-bottom:4px;color:var(--xapp-primary-color, #616161)}.message-form input,.message-form textarea{border:1px solid #ddd;border-radius:4px;outline-width:0;width:100%;font-size:14px;box-sizing:border-box}.message-form input{height:32px;padding:0 10px}.message-form textarea{padding:8px 10px;min-height:100px;resize:none;overflow-y:auto}.message-form__submit{width:100%;background-color:var(--xapp-primary-color, #616161);color:#fff}.message-form--shrink-enter{opacity:.01;position:relative;top:100px}.message-form--shrink-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms;transition-delay:500ms}.message-form--shrink-exit{opacity:.5;position:relative;top:0}.message-form--shrink-exit-active{top:-200px;opacity:.01;transition:top 500ms,opacity 500ms}.message-form--grow-enter{opacity:.5;position:relative;top:-200px}.message-form--grow-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms}.message-form--grow-exit{opacity:.5;position:relative;top:0;height:50px}.message-form--grow-exit-active{top:-100px;height:0;opacity:.01;transition:top 500ms,opacity 500ms,height 500ms}.message-form--sent .button-resend{width:100%;margin-top:16px;background-color:var(--xapp-primary-color, #616161);color:#fff}.drawer-bars{display:flex;flex-direction:column;align-items:center;padding:6px 0;cursor:pointer}.drawer-bar{flex:0 0 5px;border-radius:5px;background:var(--xapp-menu-button-color, #fff);width:25px;margin:2.5px}.drawer-bar:first-child{margin-top:0}.drawer-bar:last-child{margin-bottom:0}.xappw-input-container{flex-shrink:0;z-index:999;padding:6px 20px}.xappw-input-container:not(.visible){display:none}.xappw-input-container.drag-drop-zone{outline:3px dashed gray;outline-offset:-3px}.xappw-input-form{display:flex;align-items:center;overflow:hidden;line-height:48px;position:relative;border-radius:var(--xapp-input-border-radius, 20px);background:var(--xapp-input-background, #fff)}.xappw-input-form__buttons{display:flex;align-items:center;position:absolute;right:10px;z-index:2}.xappw-input-form__btn{width:20px;height:16px}.xappw-input{min-height:32px;padding:7px 10px;line-height:normal;display:inline-block;box-sizing:border-box;font-family:var(--xapp-input-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-font-weight, normal);font-size:var(--xapp-input-font-size, 14px);font-style:var(--xapp-input-font-style, normal);color:var(--xapp-input-text-color, #000);outline-width:0;flex-grow:1;border:var(--xapp-input-border-width, #fff) solid var(--xapp-input-border-color, #fff);background:rgba(0,0,0,0)}.xappw-input input:focus::placeholder{color:rgba(0,0,0,0)}.xappw-input input::-webkit-input-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input:-moz-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input::-moz-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input:-ms-input-placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input input::placeholder{font-family:var(--xapp-input-placeholder-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-placeholder-font-weight, normal);font-size:var(--xapp-input-placeholder-font-size, 14px);font-style:var(--xapp-input-placeholder-font-style, normal);color:var(--xapp-input-placeholder-text-color, #e1e2e1)}.xappw-input{z-index:1}.minimize-button{position:absolute;width:48px;top:0;right:48px;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-minimize-button-color, #a3a6b4);background-color:var(--xapp-header-background, var(--xapp-primary-color, #616161))}.minimize-button:after{content:"─"}.minimize-button.positionRight{right:0}.refresh-button{position:absolute;width:48px;top:0;right:48px;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-refresh-button-color, #a3a6b4);background-color:var(--xapp-header-background, var(--xapp-primary-color, #616161))}.refresh-button:after{content:"⟳"}.refresh-button.positionLeft{right:96px}.refresh-button.positionRight{right:0}.cancel-button{position:absolute;width:48px;top:0;right:0;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-cancel-button-color, #a3a6b4);background-color:var(--xapp-header-background, var(--xapp-primary-color, #616161))}.cancel-button:after{content:"⨉"}.card-container{padding-top:16px;position:relative}.card-container__content{color:#555;border-radius:8px;border:1px solid #ddd;padding:24px 16px 16px 16px;font-size:14px}.card-container__title{text-align:center;color:var(--xapp-primary-color, #616161);margin-bottom:8px}.card-container__icon{width:32px;height:32px;position:relative;background-color:#fff;border:1px solid #e0e0e0;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);margin:-16px auto;z-index:999}.card-container__icon svg{display:block;margin:auto;height:100%}@keyframes typing-animation{0%{transform:translateY(0px)}28%{transform:translateY(-5px)}44%{transform:translateY(0px)}}.typing-indicator{height:20px;display:inline-flex;align-items:center}.typing-indicator-part:nth-child(1){animation-delay:200ms}.typing-indicator-part:nth-child(2){animation-delay:300ms}.typing-indicator-part:nth-child(3){animation-delay:400ms}.typing-indicator-part{display:inline-block;animation:typing-animation 1.5s infinite ease-in-out;border-radius:50%;width:7px;height:7px;margin:0 3px;background-color:#7a7a7a}.xappw-send-button{color:var(--xapp-send-button-color, #505050)}.xappw-send-button svg{display:block;margin:auto;height:100%}.xappw-custom-send-button{display:inline-flex;cursor:pointer;user-select:none;width:var(--xapp-send-button-width, 16px)}.xappw-custom-send-button>img{width:100%;height:auto}

package/dist/index.es.js

@@ -1886,12 +1886,12 @@ var CtaBubbleContainer = function (props) {
 };
 
 var ChatButton = function (props) {
-    return (React$1.createElement("div", { className: "chat-button ".concat(props.addClass) },
-        React$1.createElement("div", { id: "xapp-widget-button", className: "chat-button__btn", onClick: props.onClick },
+    return (React$1.createElement("button", { className: "chat-button ".concat(props.addClass), onClick: props.onClick },
+        React$1.createElement("div", { id: "xapp-widget-button", className: "chat-button__btn" },
             React$1.createElement("svg", { width: "22", height: "22", viewBox: "0 0 22 22" },
                 React$1.createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" }))),
         props.config && props.config.message && (React$1.createElement("div", { className: "chat-button__cta" },
-            React$1.createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible, onClick: props.onClick }, props.config.message)))));
+            React$1.createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible }, props.config.message)))));
 };
 
 var ChatCard = function (props) {
@@ -7194,14 +7194,14 @@ var ChatMenu = function (props) {
             return React$1.createElement(ChatMenuItem, { key: i, onClick: props.onItemClick, label: item.label, subtitle: item.subtitle });
         }
         else if (lib.isStaticImageMenuItem(item)) {
-            return (React$1.createElement("div", { className: "chat-menu-item-static" },
+            return (React$1.createElement("div", { key: i, className: "chat-menu-item-static" },
                 React$1.createElement("img", { style: {
                         maxHeight: "100%",
                         maxWidth: "auto"
                     }, src: item.imageUrl, alt: "Menu Item" })));
         }
         else if (lib.isStaticTextMenuItem(item)) {
-            return (React$1.createElement("div", { className: "chat-menu-item-static" },
+            return (React$1.createElement("div", { key: i, className: "chat-menu-item-static" },
                 React$1.createElement("div", null,
                     React$1.createElement("div", null, item.title),
                     React$1.createElement("div", { className: "chat-menu-item-static--body" }, item.body))));
@@ -7658,6 +7658,7 @@ var ChatMarkdownMessage = function (props) {
     return (React$1.createElement("div", { className: "chat-msg" },
         React$1.createElement("div", { className: "chat-text-container" },
             React$1.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
+                React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + (agentMessage ? " the bot said" : " the user said")),
                 React$1.createElement("div", { ref: ref })))));
 };
 
@@ -7665,6 +7666,7 @@ var ChatPermissionMessage = function (props) {
     var message = props.message, ctx = props.ctx;
     var user = ctx.user;
     var permissionRequest = message.msg.permissionRequest;
+    var agentMessage = isAgent(props.message.user.nick);
     var author = message.user;
     var allowLabel = "Allow";
     var denyLabel = "Deny";
@@ -7731,6 +7733,7 @@ var ChatPermissionMessage = function (props) {
         return React$1.createElement(React$1.Fragment, null);
     }
     return (React$1.createElement("div", { className: "chat-msg" },
+        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + (agentMessage ? " the bot said" : " the user said")),
         React$1.createElement("div", { className: "buttons-container" },
             React$1.createElement(ActionButton, { label: allowLabel, addClass: "button", onClick: handleAllow }),
             React$1.createElement(ActionButton, { label: denyLabel, addClass: "button", onClick: handleDeny }))));
@@ -7741,6 +7744,7 @@ var ChatTextMessage = function (props) {
     return (React$1.createElement("div", { className: "chat-msg" },
         React$1.createElement("div", { className: "chat-text-container" },
             React$1.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
+                React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + (agentMessage ? " the bot said" : " the user said")),
                 React$1.createElement("span", null, props.message.msg.text)))));
 };
 
@@ -7768,17 +7772,19 @@ var ChatMessage = function (props) {
                 return (React$1.createElement(React$1.Fragment, null,
                     msg.text &&
                         React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "text", user: user },
-                            React$1.createElement(ChatTextMessage, { message: props.message, sibling: props.sibling })),
+                            React$1.createElement(ChatTextMessage, { message: props.message, sibling: props.sibling, time: props.time })),
                     msg.html &&
                         React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "html", user: user },
-                            React$1.createElement(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
+                            React$1.createElement(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, time: props.time, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
                     msg.displays && middleware && msg.displays.map(function (display, index) {
                         var Middleware = middleware;
-                        return React$1.createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext });
+                        return (React$1.createElement(React$1.Fragment, null,
+                            React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " the bot said"),
+                            React$1.createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext })));
                     }),
                     msg.permissionRequest &&
                         React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user },
-                            React$1.createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: props.middlewareContext }))));
+                            React$1.createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: props.middlewareContext, time: props.time }))));
         }
         return (React$1.createElement(React$1.Fragment, null));
     }
@@ -8055,7 +8061,7 @@ var Input = function (props) {
     }, [suggestion, onChange, onSuggestionCommand]);
     return (React$1.createElement("div", { className: "xappw-input-container ".concat(props.addClass, " ").concat(dragover ? "drag-drop-zone" : ""), onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
         React$1.createElement("form", { className: "xappw-input-form", onSubmit: handleOnSubmit },
-            React$1.createElement(RichInput_1, { key: "input", className: "xappw-input", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Type your question here...", onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
+            React$1.createElement(RichInput_1, { key: "input", id: "chatWidgetInput", className: "xappw-input", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Type your question here...", onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
                 // onFocus={onFocus}
                 value: value, spellCheck: true }),
             React$1.createElement("div", { className: "xappw-input-form__buttons" },
@@ -8242,7 +8248,9 @@ var ChatRatingContainer = function (props) {
     var handleRate = useCallback(function (rating) {
         dispatch(sendChatRating(rating));
     }, [dispatch]);
-    return React$1.createElement(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate });
+    return (React$1.createElement(React$1.Fragment, null,
+        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
+        React$1.createElement(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate })));
 };
 
 var dateFns = {};
@@ -30361,7 +30369,7 @@ function compileSlotValues(responseOutput, slots, replaceWhenUndefined) {
 }
 
 var FailureMessage = function (props) {
-    var agents = props.agents, text = props.text, delay = props.delay;
+    var agents = props.agents, text = props.text, delay = props.delay, time = props.time;
     var _a = useState(delay), countdown = _a[0], setCountdown = _a[1];
     var agent_names = Object.values(agents).filter(function (agent) { return agent.requestFailed; });
     useEffect(function () {
@@ -30399,6 +30407,7 @@ var FailureMessage = function (props) {
                 React$1.createElement(ChatMessagePart, { user: agent.user, showAvatar: true },
                     React$1.createElement("div", { className: "chat-msg" },
                         React$1.createElement(ChatMessageBubble, { owner: "others", hasTail: true },
+                            React$1.createElement("span", { className: "message-sr-only" }, "at " + time + " the bot said"),
                             React$1.createElement("span", null, failureMessage)))))));
     })));
 };
@@ -30467,12 +30476,14 @@ var OfflineForm = function (props) {
     return React$1.createElement(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
 };
 
-var OfflineFormContainer = function (_) {
+var OfflineFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
     var handleSubmit = useCallback(function (data) {
         dispatch(sendOfflineMsg(data));
     }, [dispatch]);
-    return React$1.createElement(OfflineForm, { onSubmit: handleSubmit });
+    return (React$1.createElement(React$1.Fragment, null,
+        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
+        React$1.createElement(OfflineForm, { onSubmit: handleSubmit })));
 };
 
 var PrechatForm = function (props) {
@@ -30485,7 +30496,7 @@ var PrechatForm = function (props) {
     return (React$1.createElement(React$1.Fragment, null, !sent && React$1.createElement(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit })));
 };
 
-var PrechatFormContainer = function (_) {
+var PrechatFormContainer = function (props) {
     var dispatch = useChatServerDispatch();
     var handleSubmit = useCallback(function (data) {
         // Don't send empty messages
@@ -30497,7 +30508,9 @@ var PrechatFormContainer = function (_) {
         }));
         dispatch(executeAction(data.message));
     }, [dispatch]);
-    return React$1.createElement(PrechatForm, { onSubmit: handleSubmit });
+    return (React$1.createElement(React$1.Fragment, null,
+        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
+        React$1.createElement(PrechatForm, { onSubmit: handleSubmit })));
 };
 
 var defaultProps$1 = {
@@ -30533,6 +30546,7 @@ function getMessageByType(msg) {
 }
 var SystemMessage = function (props) {
     return (React$1.createElement("div", { className: "system-msg-container" },
+        React$1.createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
         React$1.createElement("span", { className: "system-msg" }, getMessageByType(props.message))));
 };
 function convertToSentenceCase(s) {
@@ -30597,6 +30611,8 @@ var MessageList = function (props) {
         write: handleWrite,
         openUrl: onOpenUrl
     }); }, [handleSend, handleWrite, onOpenUrl]);
+    var date = new Date();
+    var time = date.getHours() + ':' + date.getMinutes();
     /**
      * Render the message based on widget state or message type. offline and pre chat are pseudo messages.
      *
@@ -30609,24 +30625,26 @@ var MessageList = function (props) {
         switch (msg.type) {
             case "chat.file":
             case "chat.msg":
-                return (React$1.createElement(ChatMessage, { key: msg.type + msg.timestamp, message: msg, sibling: sibling, agent: user, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
+                return (React$1.createElement(ChatMessage, { key: msg.type + msg.timestamp, message: msg, sibling: sibling, agent: user, time: time, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
             case "chat.failureMsg":
-                return (React$1.createElement(FailureMessage, __assign({ key: msg.type + msg.timestamp, agents: props.agents }, msg.failureMsg)));
+                return (React$1.createElement(FailureMessage, __assign({ key: msg.type + msg.timestamp, agents: props.agents, time: time }, msg.failureMsg)));
             case "chat.memberjoin":
             case "chat.memberleave":
             case "chat.rating":
             case "chat.typing":
-                return (React$1.createElement(SystemMessage, { key: msg.type + msg.timestamp, message: msg }));
+                return (React$1.createElement(SystemMessage, { key: msg.type + msg.timestamp, time: time, message: msg }));
             case "chat.request.rating":
-                return (React$1.createElement(ChatRatingContainer, { key: msg.type + msg.timestamp, agent: user, hasRating: props.hasRating, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
+                return (React$1.createElement(ChatRatingContainer, { key: msg.type + msg.timestamp, agent: user, hasRating: props.hasRating, time: time, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
             case "chat.offline":
-                return React$1.createElement(OfflineFormContainer, { key: "offline-".concat(msg.timestamp) });
+                return React$1.createElement(OfflineFormContainer, { key: "offline-".concat(msg.timestamp), time: time });
             case "chat.prechat":
-                return React$1.createElement(PrechatFormContainer, { key: "prechat" });
+                return React$1.createElement(PrechatFormContainer, { key: "prechat", time: time });
             default:
-                return React$1.createElement("div", { key: +new Date() },
-                    "Unhandled message: ",
-                    JSON.stringify(msg));
+                return (React$1.createElement(React$1.Fragment, null,
+                    React$1.createElement("span", { className: "message-sr-only" }, "at " + time + " system message"),
+                    React$1.createElement("div", { key: +new Date() },
+                        "Unhandled message: ",
+                        JSON.stringify(msg))));
         }
     }
     /**
@@ -30923,7 +30941,7 @@ function getButtonStyle(style) {
     });
 }
 function getMenuItemStyle(style) {
-    return union(getTextStyle(style === null || style === void 0 ? void 0 : style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border), getBackgroundStyle(style === null || style === void 0 ? void 0 : style.background), single("height", style === null || style === void 0 ? void 0 : style.height));
+    return union(getTextStyle(style === null || style === void 0 ? void 0 : style.text), withPrefix("subtitle-", getTextStyle(style === null || style === void 0 ? void 0 : style.subtitle)), getBorderStyle(style === null || style === void 0 ? void 0 : style.border), getBackgroundStyle(style === null || style === void 0 ? void 0 : style.background), single("height", style === null || style === void 0 ? void 0 : style.height));
 }
 function getMenuStyle(style) {
     return union(withPrefix("item-", getMenuItemStyle(style === null || style === void 0 ? void 0 : style.item)));
@@ -31104,6 +31122,9 @@ var ChatWidget = function (props) {
     function chatButtonOnClick() {
         set$1("opened", true);
         setVisible(true);
+        setTimeout(function () {
+            document.getElementById("chatWidgetInput").focus();
+        }, 100);
     }
     var isOffline = chatState.accountStatus === "offline" && !chatState.isChatting;
     var messages = chatState && chatState.chats;