@aslaluroba/help-center 1.2.0 → 1.2.1

package/fesm2022/aslaluroba-help-center.mjs

@@ -1358,7 +1358,7 @@ class HelpCenterWidgetComponent {
         window.open(url, '_blank');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: SignalRService }, { token: TokenService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", user: "user", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[9999]\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div\n    *ngIf=\"showArrowAnimation && !isPopupOpen\"\n    class=\"babylai-fixed babylai-bottom-20 babylai-right-4 babylai-z-[1300] babylai-flex babylai-flex-col babylai-items-end babylai-animate-float\"\n  >\n    <div\n      class=\"babylai-bg-primary babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative\"\n    >\n      <p class=\"babylai-text-xs babylai-font-bold babylai-m-0\">\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button\n        class=\"babylai-absolute babylai-top-[-8px] babylai-right-[-8px] babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] hover:babylai-bg-primary-700 hover:babylai-text-white\"\n        (click)=\"handleCloseArrowAnimation()\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div\n        class=\"babylai-absolute babylai-bottom-[-10px] babylai-right-5 babylai-w-0 babylai-h-0 babylai-border-l-[10px] babylai-border-r-[10px] babylai-border-t-[10px] babylai-border-l-transparent babylai-border-r-transparent babylai-border-t-primary\"\n      ></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button\n    class=\"babylai-w-14 babylai-h-14 babylai-rounded-full babylai-bg-primary babylai-text-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-shadow-md babylai-transition-transform babylai-duration-200 babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[1000] hover:babylai-bg-primary-700 hover:babylai-scale-105 active:babylai-scale-95\"\n    (click)=\"handleTogglePopup()\"\n  >\n    <span class=\"babylai-flex babylai-items-center babylai-justify-center\">\n      <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"babylai-w-6 babylai-h-6\" />\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    [ngClass]=\"{\n      'babylai-fixed babylai-bottom-20 babylai-right-5 babylai-w-[360px]  babylai-h-[684px] babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col babylai-z-[1000] babylai-bg-black-white-100': true,\n      'babylai-w-[360px]': isPopupOpen,\n      'babylai-w-[60px]': !isPopupOpen,\n      'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\">\n      <!-- Using existing header -->\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header [showLogo]=\"false\" (onClose)=\"handleHideHelpScreenData()\"> </app-header>\n      </ng-container>\n\n      <!-- Animated Logo -->\n      <app-loading></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div\n      *ngIf=\"status === 'failed'\"\n      class=\"babylai-fixed babylai-bottom-[90px] babylai-right-5 babylai-p-4 babylai-bg-white babylai-rounded-xl babylai-shadow-lg\"\n    >\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Header -->\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleHideHelpScreenData()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            className=\"babylai-absolute babylai-bottom-5 babylai-right-5 !babylai-p-3\"\n          >\n            <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"babylai-w-full\" />\n          </app-button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-chat-header>\n\n        <app-chat\n          class=\"babylai-h-full babylai-mt-2 babylai-p-2 babylai-max-h-[85%]\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        >\n        </app-chat>\n      </ng-container>\n\n      <!-- Content -->\n      <div class=\"babylai-flex-1 babylai-flex babylai-flex-col babylai-gap-4 babylai-overflow-y-auto babylai-p-4\" *ngIf=\"!showChat\">\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n            <h1 class=\"babylai-text-6xl babylai-font-bold babylai-text-black-white-50\">{{ 'ChatIntroMessage' | translate }}</h1>\n          </div>\n\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4 babylai-mt-8\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n                  <div class=\"babylai-flex babylai-items-center babylai-justify-start babylai-gap-3\">\n                    <div\n                      class=\"babylai-flex babylai-items-center babylai-justify-center babylai-max-w-12 babylai-min-w-12 babylai-w-12 babylai-h-12 babylai-rounded-full babylai-bg-primary\"\n                    >\n                      <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"babylai-w-5 babylai-h-5\" />\n                    </div>\n                    <div class=\"babylai-flex babylai-flex-col babylai-items-start babylai-justify-start babylai-gap-0\">\n                      <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">\n                        {{ 'BabylaiTitle' | translate }}\n                      </h4>\n                      <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'BabylaiDescription' | translate }}</p>\n                    </div>\n                  </div>\n                  <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                    {{ 'ChatNow' | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'TryBableAI' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'ContactUs' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"babylai-flex babylai-justify-between babylai-items-center babylai-px-5 babylai-py-2.5\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"babylai-text-xs babylai-text-black-white-300 babylai-w-full babylai-text-center\"\n          [ngClass]=\"!showHelpScreenData && !showChat ? 'babylai-text-black-white-50' : ''\"\n        >\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".babylai-help-center-container{position:fixed;bottom:20px;right:20px;z-index:9999}.babylai-help-center-loadingContainer,.babylai-help-center-errorContainer{position:fixed;bottom:90px;right:20px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026}.babylai-help-center-popup{position:fixed;bottom:80px;right:20px;width:360px;max-height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;z-index:1000}.babylai-help-center-header{padding:16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.babylai-help-center-title{margin:0;font-size:18px;font-weight:500}.babylai-help-center-backButton{background:none;border:none;cursor:pointer;padding:4px;color:#666}.babylai-help-center-content{flex:1;overflow-y:auto;padding:16px}.babylai-help-center-optionsList{display:flex;flex-direction:column;gap:8px}.babylai-help-center-optionButton{padding:12px;background:#f5f5f5;border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}.babylai-help-center-optionButton:hover{background:#eee}.babylai-help-center-detailsContent{display:flex;flex-direction:column;gap:12px}.babylai-help-center-paragraph{margin:0;line-height:1.5}.babylai-help-center-chatButton{background-color:#f44;color:#fff;font-size:14px;margin-top:16px;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;font-weight:500;transition:background-color .2s;align-self:center}.babylai-help-center-chatButton:hover{background-color:#c00}.babylai-help-center-chatContainer{display:flex;flex-direction:column;height:400px;overflow:hidden}.babylai-help-center-chatMessages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.babylai-help-center-message{max-width:80%;padding:8px 12px;border-radius:12px;position:relative}.babylai-help-center-userMessage{align-self:flex-start;background-color:#7a8ce9;color:#fff;direction:rtl}.babylai-help-center-assistantMessage{align-self:flex-end;background-color:#f1f1f1;color:#000;direction:rtl}.babylai-help-center-seenIndicator{position:absolute;bottom:-4px;right:4px;font-size:10px;color:#666}.babylai-help-center-chatInput{display:flex;gap:8px;padding:16px;border-top:1px solid #eee;background:#fff;position:relative}.babylai-help-center-chatInput input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:20px;outline:none}.babylai-help-center-chatInput input:focus{border-color:#7a8ce9}.babylai-help-center-sendButton{width:40px;height:40px;border-radius:50%;background:#7a8ce9;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.babylai-help-center-sendButton:hover{background:#6675c3}.babylai-help-center-sendButton:disabled{background:#ccc;cursor:not-allowed}.babylai-help-center-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.babylai-help-center-footerText{margin:0;font-size:12px;color:#999}.babylai-help-center-endChatButton{background-color:#f44;color:#fff;border:none;padding:5px 15px;border-radius:4px;cursor:pointer;font-size:14px}.babylai-help-center-endChatButton:hover{background-color:#c00}.babylai-help-center-typingIndicator{display:flex;gap:4px}.babylai-help-center-typingIndicator span{animation:bounce 1s infinite}.babylai-help-center-typingIndicator span:nth-child(2){animation-delay:.2s}.babylai-help-center-typingIndicator span:nth-child(3){animation-delay:.4s}.babylai-help-center-dialogOverlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1100}.babylai-help-center-dialog{background:#fff;border-radius:8px;padding:20px;width:90%;max-width:400px;box-shadow:0 4px 20px #00000026}.babylai-help-center-helpButton{width:56px;height:56px;border-radius:50%;background-color:#7a8ce9;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .2s,background-color .2s;position:fixed;bottom:20px;right:20px;z-index:1000}.babylai-help-center-helpButton:hover{background-color:#6270ba;transform:scale(1.05)}.babylai-help-center-helpButton:active{transform:scale(.95)}.babylai-help-center-helpIcon{display:flex;align-items:center;justify-content:center}.babylai-help-center-arrowBox{position:fixed;bottom:80px;right:15px;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.babylai-help-center-messageBox{background-color:#7a8ce9;color:#fff;padding:12px 16px;border-radius:20px;box-shadow:0 4px 20px #00000026;margin-bottom:16px;max-width:200px;position:relative}.babylai-help-center-messageBox:after{content:\"\";position:absolute;bottom:-10px;right:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgb(122,140,233)}.babylai-help-center-text{font-size:12px;font-weight:700;margin:0}.babylai-help-center-closeButton{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.babylai-help-center-closeButton:hover{background-color:#6675c3;color:#fff}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.babylai-help-center-spinner{width:24px;height:24px;border:3px solid #f3f3f3;border-top:3px solid rgba(122,140,233,.7);border-radius:50%;animation:spin 1s linear infinite}\n", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["headerType", "showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "isSignalRConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading" }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", user: "user", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[9999]\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div\n    *ngIf=\"showArrowAnimation && !isPopupOpen\"\n    class=\"babylai-fixed babylai-bottom-20 babylai-right-4 babylai-z-[1300] babylai-flex babylai-flex-col babylai-items-end babylai-animate-float\"\n  >\n    <div\n      class=\"babylai-bg-primary babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative\"\n    >\n      <p class=\"babylai-text-xs babylai-font-bold babylai-m-0\">\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button\n        class=\"babylai-absolute babylai-top-[-8px] babylai-right-[-8px] babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] hover:babylai-bg-primary-700 hover:babylai-text-white\"\n        (click)=\"handleCloseArrowAnimation()\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div\n        class=\"babylai-absolute babylai-bottom-[-10px] babylai-right-5 babylai-w-0 babylai-h-0 babylai-border-l-[10px] babylai-border-r-[10px] babylai-border-t-[10px] babylai-border-l-transparent babylai-border-r-transparent babylai-border-t-primary\"\n      ></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button\n    class=\"babylai-w-14 babylai-h-14 babylai-rounded-full babylai-bg-primary babylai-text-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-shadow-md babylai-transition-transform babylai-duration-200 babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[1000] hover:babylai-bg-primary-700 hover:babylai-scale-105 active:babylai-scale-95\"\n    (click)=\"handleTogglePopup()\"\n  >\n    <span class=\"babylai-flex babylai-items-center babylai-justify-center\">\n      <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"babylai-w-6 babylai-h-6\" />\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    [ngClass]=\"{\n      'babylai-fixed babylai-bottom-20 babylai-right-5 babylai-w-[360px]  babylai-h-[684px] babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col babylai-z-[1000] babylai-bg-black-white-100': true,\n      'babylai-w-[360px]': isPopupOpen,\n      'babylai-w-[60px]': !isPopupOpen,\n      'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\">\n      <!-- Using existing header -->\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header [showLogo]=\"false\" (onClose)=\"handleHideHelpScreenData()\"> </app-header>\n      </ng-container>\n\n      <!-- Animated Logo -->\n      <app-loading></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div\n      *ngIf=\"status === 'failed'\"\n      class=\"babylai-fixed babylai-bottom-[90px] babylai-right-5 babylai-p-4 babylai-bg-white babylai-rounded-xl babylai-shadow-lg\"\n    >\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Header -->\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleHideHelpScreenData()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            className=\"babylai-absolute babylai-bottom-5 babylai-right-5 !babylai-p-3\"\n          >\n            <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"babylai-w-full\" />\n          </app-button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-chat-header>\n\n        <app-chat\n          class=\"babylai-h-full babylai-mt-2 babylai-p-2 babylai-max-h-[85%]\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        >\n        </app-chat>\n      </ng-container>\n\n      <!-- Content -->\n      <div class=\"babylai-flex-1 babylai-flex babylai-flex-col babylai-gap-4 babylai-overflow-y-auto babylai-p-4\" *ngIf=\"!showChat\">\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n            <h1 class=\"babylai-text-6xl babylai-font-bold babylai-text-black-white-50\">{{ 'ChatIntroMessage' | translate }}</h1>\n          </div>\n\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4 babylai-mt-8\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n                  <div class=\"babylai-flex babylai-items-center babylai-justify-start babylai-gap-3\">\n                    <div\n                      class=\"babylai-flex babylai-items-center babylai-justify-center babylai-max-w-12 babylai-min-w-12 babylai-w-12 babylai-h-12 babylai-rounded-full babylai-bg-primary\"\n                    >\n                      <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"babylai-w-5 babylai-h-5\" />\n                    </div>\n                    <div class=\"babylai-flex babylai-flex-col babylai-items-start babylai-justify-start babylai-gap-0\">\n                      <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">\n                        {{ 'BabylaiTitle' | translate }}\n                      </h4>\n                      <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'BabylaiDescription' | translate }}</p>\n                    </div>\n                  </div>\n                  <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                    {{ 'ChatNow' | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'TryBableAI' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'ContactUs' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"babylai-flex babylai-justify-between babylai-items-center babylai-px-5 babylai-py-2.5\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"babylai-text-xs babylai-text-black-white-300 babylai-w-full babylai-text-center\"\n          [ngClass]=\"!showHelpScreenData && !showChat ? 'babylai-text-black-white-50' : ''\"\n        >\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".babylai-help-center-container{position:fixed;bottom:20px;right:20px;z-index:9999}.babylai-help-center-loadingContainer,.babylai-help-center-errorContainer{position:fixed;bottom:90px;right:20px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026}.babylai-help-center-popup{position:fixed;bottom:80px;right:20px;width:360px;max-height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;z-index:1000}.babylai-help-center-header{padding:16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.babylai-help-center-title{margin:0;font-size:18px;font-weight:500}.babylai-help-center-backButton{background:none;border:none;cursor:pointer;padding:4px;color:#666}.babylai-help-center-content{flex:1;overflow-y:auto;padding:16px}.babylai-help-center-optionsList{display:flex;flex-direction:column;gap:8px}.babylai-help-center-optionButton{padding:12px;background:#f5f5f5;border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}.babylai-help-center-optionButton:hover{background:#eee}.babylai-help-center-detailsContent{display:flex;flex-direction:column;gap:12px}.babylai-help-center-paragraph{margin:0;line-height:1.5}.babylai-help-center-chatButton{background-color:#f44;color:#fff;font-size:14px;margin-top:16px;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;font-weight:500;transition:background-color .2s;align-self:center}.babylai-help-center-chatButton:hover{background-color:#c00}.babylai-help-center-chatContainer{display:flex;flex-direction:column;height:400px;overflow:hidden}.babylai-help-center-chatMessages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.babylai-help-center-message{max-width:80%;padding:8px 12px;border-radius:12px;position:relative}.babylai-help-center-userMessage{align-self:flex-start;background-color:#7a8ce9;color:#fff;direction:rtl}.babylai-help-center-assistantMessage{align-self:flex-end;background-color:#f1f1f1;color:#000;direction:rtl}.babylai-help-center-seenIndicator{position:absolute;bottom:-4px;right:4px;font-size:10px;color:#666}.babylai-help-center-chatInput{display:flex;gap:8px;padding:16px;border-top:1px solid #eee;background:#fff;position:relative}.babylai-help-center-chatInput input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:20px;outline:none}.babylai-help-center-chatInput input:focus{border-color:#7a8ce9}.babylai-help-center-sendButton{width:40px;height:40px;border-radius:50%;background:#7a8ce9;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.babylai-help-center-sendButton:hover{background:#6675c3}.babylai-help-center-sendButton:disabled{background:#ccc;cursor:not-allowed}.babylai-help-center-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.babylai-help-center-footerText{margin:0;font-size:12px;color:#999}.babylai-help-center-endChatButton{background-color:#f44;color:#fff;border:none;padding:5px 15px;border-radius:4px;cursor:pointer;font-size:14px}.babylai-help-center-endChatButton:hover{background-color:#c00}.babylai-help-center-typingIndicator{display:flex;gap:4px}.babylai-help-center-typingIndicator span{animation:bounce 1s infinite}.babylai-help-center-typingIndicator span:nth-child(2){animation-delay:.2s}.babylai-help-center-typingIndicator span:nth-child(3){animation-delay:.4s}.babylai-help-center-dialogOverlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1100}.babylai-help-center-dialog{background:#fff;border-radius:8px;padding:20px;width:90%;max-width:400px;box-shadow:0 4px 20px #00000026}.babylai-help-center-helpButton{width:56px;height:56px;border-radius:50%;background-color:#7a8ce9;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .2s,background-color .2s;position:fixed;bottom:20px;right:20px;z-index:1000}.babylai-help-center-helpButton:hover{background-color:#6270ba;transform:scale(1.05)}.babylai-help-center-helpButton:active{transform:scale(.95)}.babylai-help-center-helpIcon{display:flex;align-items:center;justify-content:center}.babylai-help-center-arrowBox{position:fixed;bottom:80px;right:15px;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.babylai-help-center-messageBox{background-color:#7a8ce9;color:#fff;padding:12px 16px;border-radius:20px;box-shadow:0 4px 20px #00000026;margin-bottom:16px;max-width:200px;position:relative}.babylai-help-center-messageBox:after{content:\"\";position:absolute;bottom:-10px;right:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgb(122,140,233)}.babylai-help-center-text{font-size:12px;font-weight:700;margin:0}.babylai-help-center-closeButton{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.babylai-help-center-closeButton:hover{background-color:#6675c3;color:#fff}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.babylai-help-center-spinner{width:24px;height:24px;border:3px solid #f3f3f3;border-top:3px solid rgba(122,140,233,.7);border-radius:50%;animation:spin 1s linear infinite}\n", "*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Cairo,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html,body{font-family:Cairo,sans-serif}.babylai-invisible{visibility:hidden}.babylai-fixed{position:fixed}.babylai-absolute{position:absolute}.babylai-relative{position:relative}.babylai-inset-0{inset:0}.babylai-bottom-20{bottom:5rem}.babylai-bottom-5{bottom:1.25rem}.babylai-bottom-\\[-10px\\]{bottom:-10px}.babylai-bottom-\\[90px\\]{bottom:90px}.babylai-end-0{inset-inline-end:0px}.babylai-end-1{inset-inline-end:.25rem}.babylai-left-0{left:0}.babylai-left-1\\/2{left:50%}.babylai-right-0{right:0}.babylai-right-4{right:1rem}.babylai-right-5{right:1.25rem}.babylai-right-\\[-8px\\]{right:-8px}.babylai-top-0{top:0}.babylai-top-1\\/2{top:50%}.babylai-top-\\[-8px\\]{top:-8px}.babylai-z-50{z-index:50}.babylai-z-\\[-1\\]{z-index:-1}.babylai-z-\\[1000\\]{z-index:1000}.babylai-z-\\[10\\]{z-index:10}.babylai-z-\\[1300\\]{z-index:1300}.babylai-z-\\[9999\\]{z-index:9999}.babylai-m-0{margin:0}.babylai-mx-4{margin-left:1rem;margin-right:1rem}.babylai-mb-2{margin-bottom:.5rem}.babylai-mb-3{margin-bottom:.75rem}.babylai-mb-4{margin-bottom:1rem}.babylai-mb-6{margin-bottom:1.5rem}.babylai-mt-2{margin-top:.5rem}.babylai-mt-4{margin-top:1rem}.babylai-mt-8{margin-top:2rem}.babylai-block{display:block}.babylai-flex{display:flex}.babylai-inline-flex{display:inline-flex}.babylai-h-0{height:0px}.babylai-h-10{height:2.5rem}.babylai-h-12{height:3rem}.babylai-h-14{height:3.5rem}.babylai-h-20{height:5rem}.babylai-h-4{height:1rem}.babylai-h-5{height:1.25rem}.babylai-h-6{height:1.5rem}.babylai-h-8{height:2rem}.babylai-h-\\[13\\.49rem\\]{height:13.49rem}.babylai-h-\\[684px\\]{height:684px}.babylai-h-full{height:100%}.babylai-max-h-\\[85\\%\\]{max-height:85%}.babylai-min-h-16{min-height:4rem}.babylai-w-0{width:0px}.babylai-w-10{width:2.5rem}.babylai-w-12{width:3rem}.babylai-w-14{width:3.5rem}.babylai-w-20{width:5rem}.babylai-w-4{width:1rem}.babylai-w-48{width:12rem}.babylai-w-5{width:1.25rem}.babylai-w-6{width:1.5rem}.babylai-w-8{width:2rem}.babylai-w-\\[15\\.42rem\\]{width:15.42rem}.babylai-w-\\[360px\\]{width:360px}.babylai-w-\\[60px\\]{width:60px}.babylai-w-full{width:100%}.babylai-min-w-12{min-width:3rem}.babylai-max-w-12{max-width:3rem}.babylai-max-w-56{max-width:14rem}.babylai-max-w-\\[200px\\]{max-width:200px}.babylai-max-w-\\[80\\%\\]{max-width:80%}.babylai-max-w-none{max-width:none}.babylai-max-w-sm{max-width:24rem}.babylai-flex-1{flex:1 1 0%}.-babylai-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai--translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-\\[270deg\\]{--tw-rotate: 270deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes babylai-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.babylai-animate-float{animation:babylai-float 3s infinite ease-in-out}.babylai-cursor-not-allowed{cursor:not-allowed}.babylai-cursor-pointer{cursor:pointer}.babylai-flex-row-reverse{flex-direction:row-reverse}.babylai-flex-col{flex-direction:column}.babylai-items-start{align-items:flex-start}.babylai-items-end{align-items:flex-end}.babylai-items-center{align-items:center}.babylai-justify-start{justify-content:flex-start}.babylai-justify-end{justify-content:flex-end}.babylai-justify-center{justify-content:center}.babylai-justify-between{justify-content:space-between}.babylai-gap-0{gap:0px}.babylai-gap-1{gap:.25rem}.babylai-gap-2{gap:.5rem}.babylai-gap-3{gap:.75rem}.babylai-gap-4{gap:1rem}.babylai-space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * (1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.babylai-self-start{align-self:flex-start}.babylai-self-end{align-self:flex-end}.babylai-overflow-hidden{overflow:hidden}.babylai-overflow-y-auto{overflow-y:auto}.babylai-whitespace-pre-wrap{white-space:pre-wrap}.babylai-break-words{overflow-wrap:break-word}.babylai-rounded-2xl{border-radius:1rem}.babylai-rounded-3xl{border-radius:1.5rem}.babylai-rounded-full{border-radius:9999px}.babylai-rounded-md{border-radius:calc(var(--radius) - 2px)}.babylai-rounded-xl{border-radius:.75rem}.babylai-rounded-t-3xl{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}.\\!babylai-border{border-width:1px!important}.babylai-border{border-width:1px}.babylai-border-l-\\[10px\\]{border-left-width:10px}.babylai-border-r-\\[10px\\]{border-right-width:10px}.babylai-border-t-\\[10px\\]{border-top-width:10px}.babylai-border-none{border-style:none}.\\!babylai-border-primary{--tw-border-opacity: 1 !important;border-color:rgb(173,73,225,var(--tw-border-opacity, 1))!important}.babylai-border-l-transparent{border-left-color:transparent}.babylai-border-r-transparent{border-right-color:transparent}.babylai-border-t-primary{--tw-border-opacity: 1;border-top-color:rgb(173,73,225,var(--tw-border-opacity, 1))}.\\!babylai-bg-black-white-50{--tw-bg-opacity: 1 !important;background-color:rgb(255,255,255,var(--tw-bg-opacity, 1))!important}.\\!babylai-bg-primary-500\\/10{background-color:#ad49e11a!important}.\\!babylai-bg-transparent{background-color:transparent!important}.babylai-bg-black-white-100{--tw-bg-opacity: 1;background-color:rgb(243,243,243,var(--tw-bg-opacity, 1))}.babylai-bg-black-white-50{--tw-bg-opacity: 1;background-color:rgb(255,255,255,var(--tw-bg-opacity, 1))}.babylai-bg-black\\/50{background-color:#17171780}.babylai-bg-card{background-color:hsl(var(--card))}.babylai-bg-primary{--tw-bg-opacity: 1;background-color:rgb(173,73,225,var(--tw-bg-opacity, 1))}.babylai-bg-transparent{background-color:transparent}.babylai-bg-white{--tw-bg-opacity: 1;background-color:rgb(255,255,255,var(--tw-bg-opacity, 1))}.babylai-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.babylai-from-primary-500{--tw-gradient-from: #AD49E1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(173 73 225 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.babylai-to-primary-500\\/60{--tw-gradient-to: rgb(173 73 225 / .6) var(--tw-gradient-to-position)}.\\!babylai-p-2{padding:.5rem!important}.\\!babylai-p-3{padding:.75rem!important}.babylai-p-0{padding:0}.babylai-p-1{padding:.25rem}.babylai-p-2{padding:.5rem}.babylai-p-4{padding:1rem}.babylai-p-6{padding:1.5rem}.babylai-p-\\[10px\\]{padding:10px}.babylai-p-\\[3px\\]{padding:3px}.\\!babylai-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.\\!babylai-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.babylai-px-0{padding-left:0;padding-right:0}.babylai-px-4{padding-left:1rem;padding-right:1rem}.babylai-px-5{padding-left:1.25rem;padding-right:1.25rem}.babylai-px-\\[24px\\]{padding-left:24px;padding-right:24px}.babylai-py-0{padding-top:0;padding-bottom:0}.babylai-py-1{padding-top:.25rem;padding-bottom:.25rem}.babylai-py-16{padding-top:4rem;padding-bottom:4rem}.babylai-py-2{padding-top:.5rem;padding-bottom:.5rem}.babylai-py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.babylai-py-3{padding-top:.75rem;padding-bottom:.75rem}.babylai-py-4{padding-top:1rem;padding-bottom:1rem}.babylai-pb-4{padding-bottom:1rem}.babylai-pt-0{padding-top:0}.babylai-text-left{text-align:left}.babylai-text-center{text-align:center}.babylai-text-right{text-align:right}.babylai-text-4xl{font-size:2.25rem;line-height:2.5rem}.babylai-text-6xl{font-size:3.75rem;line-height:1}.babylai-text-base{font-size:1rem;line-height:1.5rem}.babylai-text-sm{font-size:.875rem;line-height:1.25rem}.babylai-text-xl{font-size:1.25rem;line-height:1.75rem}.babylai-text-xs{font-size:.75rem;line-height:1rem}.babylai-font-bold{font-weight:700}.babylai-font-semibold{font-weight:600}.babylai-leading-none{line-height:1}.babylai-tracking-tight{letter-spacing:-.025em}.\\!babylai-text-primary{--tw-text-opacity: 1 !important;color:rgb(173,73,225,var(--tw-text-opacity, 1))!important}.babylai-text-black{--tw-text-opacity: 1;color:rgb(23,23,23,var(--tw-text-opacity, 1))}.babylai-text-black-white-300{--tw-text-opacity: 1;color:rgb(145,145,145,var(--tw-text-opacity, 1))}.babylai-text-black-white-400{--tw-text-opacity: 1;color:rgb(96,96,96,var(--tw-text-opacity, 1))}.babylai-text-black-white-50{--tw-text-opacity: 1;color:rgb(255,255,255,var(--tw-text-opacity, 1))}.babylai-text-black-white-600{--tw-text-opacity: 1;color:rgb(31,31,31,var(--tw-text-opacity, 1))}.babylai-text-black-white-800{--tw-text-opacity: 1;color:rgb(10,10,10,var(--tw-text-opacity, 1))}.babylai-text-card-foreground{color:hsl(var(--card-foreground))}.babylai-text-gray-600{--tw-text-opacity: 1;color:rgb(75,85,99,var(--tw-text-opacity, 1))}.babylai-text-gray-700{--tw-text-opacity: 1;color:rgb(55,65,81,var(--tw-text-opacity, 1))}.babylai-text-muted-foreground{color:hsl(var(--muted-foreground))}.babylai-text-primary{--tw-text-opacity: 1;color:rgb(173,73,225,var(--tw-text-opacity, 1))}.babylai-text-white{--tw-text-opacity: 1;color:rgb(255,255,255,var(--tw-text-opacity, 1))}.babylai-opacity-100{opacity:1}.babylai-opacity-50{opacity:.5}.babylai-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.babylai-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.babylai-shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.babylai-ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.babylai-ring-black{--tw-ring-opacity: 1;--tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity, 1))}.babylai-ring-opacity-5{--tw-ring-opacity: .05}.babylai-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-duration-200{transition-duration:.2s}.babylai-duration-300{transition-duration:.3s}.babylai-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.babylai-duration-200{animation-duration:.2s}.babylai-duration-300{animation-duration:.3s}.babylai-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.babylai-ps-3{padding-inline-start:.75rem}.babylai-pe-12{padding-inline-end:3rem}[dir=rtl] .babylai-end-0{left:0}[dir=ltr] .babylai-end-0{right:0}[dir=rtl] .babylai-end-1{left:.25rem}[dir=ltr] .babylai-end-1{right:.25rem}.hover\\:babylai-scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:\\!babylai-bg-primary-700\\/10:hover{background-color:#451d5a1a!important}.hover\\:\\!babylai-bg-primary\\/10:hover{background-color:#ad49e11a!important}.hover\\:babylai-bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243,244,246,var(--tw-bg-opacity, 1))}.hover\\:babylai-bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(69,29,90,var(--tw-bg-opacity, 1))}.hover\\:babylai-text-white:hover{--tw-text-opacity: 1;color:rgb(255,255,255,var(--tw-text-opacity, 1))}.focus\\:babylai-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\\:babylai-scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\\:babylai-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:babylai-bg-black-white-200:disabled{--tw-bg-opacity: 1;background-color:rgb(226,226,226,var(--tw-bg-opacity, 1))}.disabled\\:babylai-opacity-50:disabled{opacity:.5}@media (min-width: 768px){.md\\:babylai-py-28{padding-top:7rem;padding-bottom:7rem}}.\\[\\&\\>\\*\\:first-child\\]\\:babylai-mt-0>*:first-child{margin-top:0}.\\[\\&\\>\\*\\:last-child\\]\\:babylai-mb-0>*:last-child{margin-bottom:0}.\\[\\&\\>blockquote\\]\\:babylai-my-2>blockquote{margin-top:.5rem;margin-bottom:.5rem}.\\[\\&\\>ol\\]\\:babylai-my-2>ol{margin-top:.5rem;margin-bottom:.5rem}.\\[\\&\\>p\\]\\:babylai-my-2>p{margin-top:.5rem;margin-bottom:.5rem}.\\[\\&\\>ul\\]\\:babylai-my-2>ul{margin-top:.5rem;margin-bottom:.5rem}\n", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["headerType", "showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "isSignalRConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading" }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
             type: Component,
@@ -1375,7 +1375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         ChatComponent,
                         LoadingComponent,
                         ConfirmationDialogComponent
-                    ], template: "<div class=\"babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[9999]\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div\n    *ngIf=\"showArrowAnimation && !isPopupOpen\"\n    class=\"babylai-fixed babylai-bottom-20 babylai-right-4 babylai-z-[1300] babylai-flex babylai-flex-col babylai-items-end babylai-animate-float\"\n  >\n    <div\n      class=\"babylai-bg-primary babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative\"\n    >\n      <p class=\"babylai-text-xs babylai-font-bold babylai-m-0\">\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button\n        class=\"babylai-absolute babylai-top-[-8px] babylai-right-[-8px] babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] hover:babylai-bg-primary-700 hover:babylai-text-white\"\n        (click)=\"handleCloseArrowAnimation()\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div\n        class=\"babylai-absolute babylai-bottom-[-10px] babylai-right-5 babylai-w-0 babylai-h-0 babylai-border-l-[10px] babylai-border-r-[10px] babylai-border-t-[10px] babylai-border-l-transparent babylai-border-r-transparent babylai-border-t-primary\"\n      ></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button\n    class=\"babylai-w-14 babylai-h-14 babylai-rounded-full babylai-bg-primary babylai-text-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-shadow-md babylai-transition-transform babylai-duration-200 babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[1000] hover:babylai-bg-primary-700 hover:babylai-scale-105 active:babylai-scale-95\"\n    (click)=\"handleTogglePopup()\"\n  >\n    <span class=\"babylai-flex babylai-items-center babylai-justify-center\">\n      <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"babylai-w-6 babylai-h-6\" />\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    [ngClass]=\"{\n      'babylai-fixed babylai-bottom-20 babylai-right-5 babylai-w-[360px]  babylai-h-[684px] babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col babylai-z-[1000] babylai-bg-black-white-100': true,\n      'babylai-w-[360px]': isPopupOpen,\n      'babylai-w-[60px]': !isPopupOpen,\n      'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\">\n      <!-- Using existing header -->\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header [showLogo]=\"false\" (onClose)=\"handleHideHelpScreenData()\"> </app-header>\n      </ng-container>\n\n      <!-- Animated Logo -->\n      <app-loading></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div\n      *ngIf=\"status === 'failed'\"\n      class=\"babylai-fixed babylai-bottom-[90px] babylai-right-5 babylai-p-4 babylai-bg-white babylai-rounded-xl babylai-shadow-lg\"\n    >\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Header -->\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleHideHelpScreenData()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            className=\"babylai-absolute babylai-bottom-5 babylai-right-5 !babylai-p-3\"\n          >\n            <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"babylai-w-full\" />\n          </app-button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-chat-header>\n\n        <app-chat\n          class=\"babylai-h-full babylai-mt-2 babylai-p-2 babylai-max-h-[85%]\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        >\n        </app-chat>\n      </ng-container>\n\n      <!-- Content -->\n      <div class=\"babylai-flex-1 babylai-flex babylai-flex-col babylai-gap-4 babylai-overflow-y-auto babylai-p-4\" *ngIf=\"!showChat\">\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n            <h1 class=\"babylai-text-6xl babylai-font-bold babylai-text-black-white-50\">{{ 'ChatIntroMessage' | translate }}</h1>\n          </div>\n\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4 babylai-mt-8\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n                  <div class=\"babylai-flex babylai-items-center babylai-justify-start babylai-gap-3\">\n                    <div\n                      class=\"babylai-flex babylai-items-center babylai-justify-center babylai-max-w-12 babylai-min-w-12 babylai-w-12 babylai-h-12 babylai-rounded-full babylai-bg-primary\"\n                    >\n                      <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"babylai-w-5 babylai-h-5\" />\n                    </div>\n                    <div class=\"babylai-flex babylai-flex-col babylai-items-start babylai-justify-start babylai-gap-0\">\n                      <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">\n                        {{ 'BabylaiTitle' | translate }}\n                      </h4>\n                      <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'BabylaiDescription' | translate }}</p>\n                    </div>\n                  </div>\n                  <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                    {{ 'ChatNow' | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'TryBableAI' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'ContactUs' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"babylai-flex babylai-justify-between babylai-items-center babylai-px-5 babylai-py-2.5\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"babylai-text-xs babylai-text-black-white-300 babylai-w-full babylai-text-center\"\n          [ngClass]=\"!showHelpScreenData && !showChat ? 'babylai-text-black-white-50' : ''\"\n        >\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".babylai-help-center-container{position:fixed;bottom:20px;right:20px;z-index:9999}.babylai-help-center-loadingContainer,.babylai-help-center-errorContainer{position:fixed;bottom:90px;right:20px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026}.babylai-help-center-popup{position:fixed;bottom:80px;right:20px;width:360px;max-height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;z-index:1000}.babylai-help-center-header{padding:16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.babylai-help-center-title{margin:0;font-size:18px;font-weight:500}.babylai-help-center-backButton{background:none;border:none;cursor:pointer;padding:4px;color:#666}.babylai-help-center-content{flex:1;overflow-y:auto;padding:16px}.babylai-help-center-optionsList{display:flex;flex-direction:column;gap:8px}.babylai-help-center-optionButton{padding:12px;background:#f5f5f5;border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}.babylai-help-center-optionButton:hover{background:#eee}.babylai-help-center-detailsContent{display:flex;flex-direction:column;gap:12px}.babylai-help-center-paragraph{margin:0;line-height:1.5}.babylai-help-center-chatButton{background-color:#f44;color:#fff;font-size:14px;margin-top:16px;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;font-weight:500;transition:background-color .2s;align-self:center}.babylai-help-center-chatButton:hover{background-color:#c00}.babylai-help-center-chatContainer{display:flex;flex-direction:column;height:400px;overflow:hidden}.babylai-help-center-chatMessages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.babylai-help-center-message{max-width:80%;padding:8px 12px;border-radius:12px;position:relative}.babylai-help-center-userMessage{align-self:flex-start;background-color:#7a8ce9;color:#fff;direction:rtl}.babylai-help-center-assistantMessage{align-self:flex-end;background-color:#f1f1f1;color:#000;direction:rtl}.babylai-help-center-seenIndicator{position:absolute;bottom:-4px;right:4px;font-size:10px;color:#666}.babylai-help-center-chatInput{display:flex;gap:8px;padding:16px;border-top:1px solid #eee;background:#fff;position:relative}.babylai-help-center-chatInput input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:20px;outline:none}.babylai-help-center-chatInput input:focus{border-color:#7a8ce9}.babylai-help-center-sendButton{width:40px;height:40px;border-radius:50%;background:#7a8ce9;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.babylai-help-center-sendButton:hover{background:#6675c3}.babylai-help-center-sendButton:disabled{background:#ccc;cursor:not-allowed}.babylai-help-center-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.babylai-help-center-footerText{margin:0;font-size:12px;color:#999}.babylai-help-center-endChatButton{background-color:#f44;color:#fff;border:none;padding:5px 15px;border-radius:4px;cursor:pointer;font-size:14px}.babylai-help-center-endChatButton:hover{background-color:#c00}.babylai-help-center-typingIndicator{display:flex;gap:4px}.babylai-help-center-typingIndicator span{animation:bounce 1s infinite}.babylai-help-center-typingIndicator span:nth-child(2){animation-delay:.2s}.babylai-help-center-typingIndicator span:nth-child(3){animation-delay:.4s}.babylai-help-center-dialogOverlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1100}.babylai-help-center-dialog{background:#fff;border-radius:8px;padding:20px;width:90%;max-width:400px;box-shadow:0 4px 20px #00000026}.babylai-help-center-helpButton{width:56px;height:56px;border-radius:50%;background-color:#7a8ce9;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .2s,background-color .2s;position:fixed;bottom:20px;right:20px;z-index:1000}.babylai-help-center-helpButton:hover{background-color:#6270ba;transform:scale(1.05)}.babylai-help-center-helpButton:active{transform:scale(.95)}.babylai-help-center-helpIcon{display:flex;align-items:center;justify-content:center}.babylai-help-center-arrowBox{position:fixed;bottom:80px;right:15px;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.babylai-help-center-messageBox{background-color:#7a8ce9;color:#fff;padding:12px 16px;border-radius:20px;box-shadow:0 4px 20px #00000026;margin-bottom:16px;max-width:200px;position:relative}.babylai-help-center-messageBox:after{content:\"\";position:absolute;bottom:-10px;right:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgb(122,140,233)}.babylai-help-center-text{font-size:12px;font-weight:700;margin:0}.babylai-help-center-closeButton{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.babylai-help-center-closeButton:hover{background-color:#6675c3;color:#fff}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.babylai-help-center-spinner{width:24px;height:24px;border:3px solid #f3f3f3;border-top:3px solid rgba(122,140,233,.7);border-radius:50%;animation:spin 1s linear infinite}\n", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[9999]\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div\n    *ngIf=\"showArrowAnimation && !isPopupOpen\"\n    class=\"babylai-fixed babylai-bottom-20 babylai-right-4 babylai-z-[1300] babylai-flex babylai-flex-col babylai-items-end babylai-animate-float\"\n  >\n    <div\n      class=\"babylai-bg-primary babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative\"\n    >\n      <p class=\"babylai-text-xs babylai-font-bold babylai-m-0\">\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button\n        class=\"babylai-absolute babylai-top-[-8px] babylai-right-[-8px] babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] hover:babylai-bg-primary-700 hover:babylai-text-white\"\n        (click)=\"handleCloseArrowAnimation()\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div\n        class=\"babylai-absolute babylai-bottom-[-10px] babylai-right-5 babylai-w-0 babylai-h-0 babylai-border-l-[10px] babylai-border-r-[10px] babylai-border-t-[10px] babylai-border-l-transparent babylai-border-r-transparent babylai-border-t-primary\"\n      ></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button\n    class=\"babylai-w-14 babylai-h-14 babylai-rounded-full babylai-bg-primary babylai-text-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-shadow-md babylai-transition-transform babylai-duration-200 babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[1000] hover:babylai-bg-primary-700 hover:babylai-scale-105 active:babylai-scale-95\"\n    (click)=\"handleTogglePopup()\"\n  >\n    <span class=\"babylai-flex babylai-items-center babylai-justify-center\">\n      <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"babylai-w-6 babylai-h-6\" />\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    [ngClass]=\"{\n      'babylai-fixed babylai-bottom-20 babylai-right-5 babylai-w-[360px]  babylai-h-[684px] babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col babylai-z-[1000] babylai-bg-black-white-100': true,\n      'babylai-w-[360px]': isPopupOpen,\n      'babylai-w-[60px]': !isPopupOpen,\n      'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\">\n      <!-- Using existing header -->\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header [showLogo]=\"false\" (onClose)=\"handleHideHelpScreenData()\"> </app-header>\n      </ng-container>\n\n      <!-- Animated Logo -->\n      <app-loading></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div\n      *ngIf=\"status === 'failed'\"\n      class=\"babylai-fixed babylai-bottom-[90px] babylai-right-5 babylai-p-4 babylai-bg-white babylai-rounded-xl babylai-shadow-lg\"\n    >\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Header -->\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleHideHelpScreenData()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            className=\"babylai-absolute babylai-bottom-5 babylai-right-5 !babylai-p-3\"\n          >\n            <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"babylai-w-full\" />\n          </app-button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-chat-header>\n\n        <app-chat\n          class=\"babylai-h-full babylai-mt-2 babylai-p-2 babylai-max-h-[85%]\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        >\n        </app-chat>\n      </ng-container>\n\n      <!-- Content -->\n      <div class=\"babylai-flex-1 babylai-flex babylai-flex-col babylai-gap-4 babylai-overflow-y-auto babylai-p-4\" *ngIf=\"!showChat\">\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n            <h1 class=\"babylai-text-6xl babylai-font-bold babylai-text-black-white-50\">{{ 'ChatIntroMessage' | translate }}</h1>\n          </div>\n\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4 babylai-mt-8\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n                  <div class=\"babylai-flex babylai-items-center babylai-justify-start babylai-gap-3\">\n                    <div\n                      class=\"babylai-flex babylai-items-center babylai-justify-center babylai-max-w-12 babylai-min-w-12 babylai-w-12 babylai-h-12 babylai-rounded-full babylai-bg-primary\"\n                    >\n                      <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"babylai-w-5 babylai-h-5\" />\n                    </div>\n                    <div class=\"babylai-flex babylai-flex-col babylai-items-start babylai-justify-start babylai-gap-0\">\n                      <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">\n                        {{ 'BabylaiTitle' | translate }}\n                      </h4>\n                      <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'BabylaiDescription' | translate }}</p>\n                    </div>\n                  </div>\n                  <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                    {{ 'ChatNow' | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'TryBableAI' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'ContactUs' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"babylai-flex babylai-justify-between babylai-items-center babylai-px-5 babylai-py-2.5\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"babylai-text-xs babylai-text-black-white-300 babylai-w-full babylai-text-center\"\n          [ngClass]=\"!showHelpScreenData && !showChat ? 'babylai-text-black-white-50' : ''\"\n        >\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".babylai-help-center-container{position:fixed;bottom:20px;right:20px;z-index:9999}.babylai-help-center-loadingContainer,.babylai-help-center-errorContainer{position:fixed;bottom:90px;right:20px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026}.babylai-help-center-popup{position:fixed;bottom:80px;right:20px;width:360px;max-height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;z-index:1000}.babylai-help-center-header{padding:16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.babylai-help-center-title{margin:0;font-size:18px;font-weight:500}.babylai-help-center-backButton{background:none;border:none;cursor:pointer;padding:4px;color:#666}.babylai-help-center-content{flex:1;overflow-y:auto;padding:16px}.babylai-help-center-optionsList{display:flex;flex-direction:column;gap:8px}.babylai-help-center-optionButton{padding:12px;background:#f5f5f5;border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}.babylai-help-center-optionButton:hover{background:#eee}.babylai-help-center-detailsContent{display:flex;flex-direction:column;gap:12px}.babylai-help-center-paragraph{margin:0;line-height:1.5}.babylai-help-center-chatButton{background-color:#f44;color:#fff;font-size:14px;margin-top:16px;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;font-weight:500;transition:background-color .2s;align-self:center}.babylai-help-center-chatButton:hover{background-color:#c00}.babylai-help-center-chatContainer{display:flex;flex-direction:column;height:400px;overflow:hidden}.babylai-help-center-chatMessages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.babylai-help-center-message{max-width:80%;padding:8px 12px;border-radius:12px;position:relative}.babylai-help-center-userMessage{align-self:flex-start;background-color:#7a8ce9;color:#fff;direction:rtl}.babylai-help-center-assistantMessage{align-self:flex-end;background-color:#f1f1f1;color:#000;direction:rtl}.babylai-help-center-seenIndicator{position:absolute;bottom:-4px;right:4px;font-size:10px;color:#666}.babylai-help-center-chatInput{display:flex;gap:8px;padding:16px;border-top:1px solid #eee;background:#fff;position:relative}.babylai-help-center-chatInput input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:20px;outline:none}.babylai-help-center-chatInput input:focus{border-color:#7a8ce9}.babylai-help-center-sendButton{width:40px;height:40px;border-radius:50%;background:#7a8ce9;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.babylai-help-center-sendButton:hover{background:#6675c3}.babylai-help-center-sendButton:disabled{background:#ccc;cursor:not-allowed}.babylai-help-center-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.babylai-help-center-footerText{margin:0;font-size:12px;color:#999}.babylai-help-center-endChatButton{background-color:#f44;color:#fff;border:none;padding:5px 15px;border-radius:4px;cursor:pointer;font-size:14px}.babylai-help-center-endChatButton:hover{background-color:#c00}.babylai-help-center-typingIndicator{display:flex;gap:4px}.babylai-help-center-typingIndicator span{animation:bounce 1s infinite}.babylai-help-center-typingIndicator span:nth-child(2){animation-delay:.2s}.babylai-help-center-typingIndicator span:nth-child(3){animation-delay:.4s}.babylai-help-center-dialogOverlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1100}.babylai-help-center-dialog{background:#fff;border-radius:8px;padding:20px;width:90%;max-width:400px;box-shadow:0 4px 20px #00000026}.babylai-help-center-helpButton{width:56px;height:56px;border-radius:50%;background-color:#7a8ce9;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .2s,background-color .2s;position:fixed;bottom:20px;right:20px;z-index:1000}.babylai-help-center-helpButton:hover{background-color:#6270ba;transform:scale(1.05)}.babylai-help-center-helpButton:active{transform:scale(.95)}.babylai-help-center-helpIcon{display:flex;align-items:center;justify-content:center}.babylai-help-center-arrowBox{position:fixed;bottom:80px;right:15px;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.babylai-help-center-messageBox{background-color:#7a8ce9;color:#fff;padding:12px 16px;border-radius:20px;box-shadow:0 4px 20px #00000026;margin-bottom:16px;max-width:200px;position:relative}.babylai-help-center-messageBox:after{content:\"\";position:absolute;bottom:-10px;right:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgb(122,140,233)}.babylai-help-center-text{font-size:12px;font-weight:700;margin:0}.babylai-help-center-closeButton{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.babylai-help-center-closeButton:hover{background-color:#6675c3;color:#fff}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.babylai-help-center-spinner{width:24px;height:24px;border:3px solid #f3f3f3;border-top:3px solid rgba(122,140,233,.7);border-radius:50%;animation:spin 1s linear infinite}\n", "*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Cairo,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html,body{font-family:Cairo,sans-serif}.babylai-invisible{visibility:hidden}.babylai-fixed{position:fixed}.babylai-absolute{position:absolute}.babylai-relative{position:relative}.babylai-inset-0{inset:0}.babylai-bottom-20{bottom:5rem}.babylai-bottom-5{bottom:1.25rem}.babylai-bottom-\\[-10px\\]{bottom:-10px}.babylai-bottom-\\[90px\\]{bottom:90px}.babylai-end-0{inset-inline-end:0px}.babylai-end-1{inset-inline-end:.25rem}.babylai-left-0{left:0}.babylai-left-1\\/2{left:50%}.babylai-right-0{right:0}.babylai-right-4{right:1rem}.babylai-right-5{right:1.25rem}.babylai-right-\\[-8px\\]{right:-8px}.babylai-top-0{top:0}.babylai-top-1\\/2{top:50%}.babylai-top-\\[-8px\\]{top:-8px}.babylai-z-50{z-index:50}.babylai-z-\\[-1\\]{z-index:-1}.babylai-z-\\[1000\\]{z-index:1000}.babylai-z-\\[10\\]{z-index:10}.babylai-z-\\[1300\\]{z-index:1300}.babylai-z-\\[9999\\]{z-index:9999}.babylai-m-0{margin:0}.babylai-mx-4{margin-left:1rem;margin-right:1rem}.babylai-mb-2{margin-bottom:.5rem}.babylai-mb-3{margin-bottom:.75rem}.babylai-mb-4{margin-bottom:1rem}.babylai-mb-6{margin-bottom:1.5rem}.babylai-mt-2{margin-top:.5rem}.babylai-mt-4{margin-top:1rem}.babylai-mt-8{margin-top:2rem}.babylai-block{display:block}.babylai-flex{display:flex}.babylai-inline-flex{display:inline-flex}.babylai-h-0{height:0px}.babylai-h-10{height:2.5rem}.babylai-h-12{height:3rem}.babylai-h-14{height:3.5rem}.babylai-h-20{height:5rem}.babylai-h-4{height:1rem}.babylai-h-5{height:1.25rem}.babylai-h-6{height:1.5rem}.babylai-h-8{height:2rem}.babylai-h-\\[13\\.49rem\\]{height:13.49rem}.babylai-h-\\[684px\\]{height:684px}.babylai-h-full{height:100%}.babylai-max-h-\\[85\\%\\]{max-height:85%}.babylai-min-h-16{min-height:4rem}.babylai-w-0{width:0px}.babylai-w-10{width:2.5rem}.babylai-w-12{width:3rem}.babylai-w-14{width:3.5rem}.babylai-w-20{width:5rem}.babylai-w-4{width:1rem}.babylai-w-48{width:12rem}.babylai-w-5{width:1.25rem}.babylai-w-6{width:1.5rem}.babylai-w-8{width:2rem}.babylai-w-\\[15\\.42rem\\]{width:15.42rem}.babylai-w-\\[360px\\]{width:360px}.babylai-w-\\[60px\\]{width:60px}.babylai-w-full{width:100%}.babylai-min-w-12{min-width:3rem}.babylai-max-w-12{max-width:3rem}.babylai-max-w-56{max-width:14rem}.babylai-max-w-\\[200px\\]{max-width:200px}.babylai-max-w-\\[80\\%\\]{max-width:80%}.babylai-max-w-none{max-width:none}.babylai-max-w-sm{max-width:24rem}.babylai-flex-1{flex:1 1 0%}.-babylai-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai--translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-\\[270deg\\]{--tw-rotate: 270deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes babylai-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.babylai-animate-float{animation:babylai-float 3s infinite ease-in-out}.babylai-cursor-not-allowed{cursor:not-allowed}.babylai-cursor-pointer{cursor:pointer}.babylai-flex-row-reverse{flex-direction:row-reverse}.babylai-flex-col{flex-direction:column}.babylai-items-start{align-items:flex-start}.babylai-items-end{align-items:flex-end}.babylai-items-center{align-items:center}.babylai-justify-start{justify-content:flex-start}.babylai-justify-end{justify-content:flex-end}.babylai-justify-center{justify-content:center}.babylai-justify-between{justify-content:space-between}.babylai-gap-0{gap:0px}.babylai-gap-1{gap:.25rem}.babylai-gap-2{gap:.5rem}.babylai-gap-3{gap:.75rem}.babylai-gap-4{gap:1rem}.babylai-space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * (1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.babylai-self-start{align-self:flex-start}.babylai-self-end{align-self:flex-end}.babylai-overflow-hidden{overflow:hidden}.babylai-overflow-y-auto{overflow-y:auto}.babylai-whitespace-pre-wrap{white-space:pre-wrap}.babylai-break-words{overflow-wrap:break-word}.babylai-rounded-2xl{border-radius:1rem}.babylai-rounded-3xl{border-radius:1.5rem}.babylai-rounded-full{border-radius:9999px}.babylai-rounded-md{border-radius:calc(var(--radius) - 2px)}.babylai-rounded-xl{border-radius:.75rem}.babylai-rounded-t-3xl{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}.\\!babylai-border{border-width:1px!important}.babylai-border{border-width:1px}.babylai-border-l-\\[10px\\]{border-left-width:10px}.babylai-border-r-\\[10px\\]{border-right-width:10px}.babylai-border-t-\\[10px\\]{border-top-width:10px}.babylai-border-none{border-style:none}.\\!babylai-border-primary{--tw-border-opacity: 1 !important;border-color:rgb(173,73,225,var(--tw-border-opacity, 1))!important}.babylai-border-l-transparent{border-left-color:transparent}.babylai-border-r-transparent{border-right-color:transparent}.babylai-border-t-primary{--tw-border-opacity: 1;border-top-color:rgb(173,73,225,var(--tw-border-opacity, 1))}.\\!babylai-bg-black-white-50{--tw-bg-opacity: 1 !important;background-color:rgb(255,255,255,var(--tw-bg-opacity, 1))!important}.\\!babylai-bg-primary-500\\/10{background-color:#ad49e11a!important}.\\!babylai-bg-transparent{background-color:transparent!important}.babylai-bg-black-white-100{--tw-bg-opacity: 1;background-color:rgb(243,243,243,var(--tw-bg-opacity, 1))}.babylai-bg-black-white-50{--tw-bg-opacity: 1;background-color:rgb(255,255,255,var(--tw-bg-opacity, 1))}.babylai-bg-black\\/50{background-color:#17171780}.babylai-bg-card{background-color:hsl(var(--card))}.babylai-bg-primary{--tw-bg-opacity: 1;background-color:rgb(173,73,225,var(--tw-bg-opacity, 1))}.babylai-bg-transparent{background-color:transparent}.babylai-bg-white{--tw-bg-opacity: 1;background-color:rgb(255,255,255,var(--tw-bg-opacity, 1))}.babylai-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.babylai-from-primary-500{--tw-gradient-from: #AD49E1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(173 73 225 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.babylai-to-primary-500\\/60{--tw-gradient-to: rgb(173 73 225 / .6) var(--tw-gradient-to-position)}.\\!babylai-p-2{padding:.5rem!important}.\\!babylai-p-3{padding:.75rem!important}.babylai-p-0{padding:0}.babylai-p-1{padding:.25rem}.babylai-p-2{padding:.5rem}.babylai-p-4{padding:1rem}.babylai-p-6{padding:1.5rem}.babylai-p-\\[10px\\]{padding:10px}.babylai-p-\\[3px\\]{padding:3px}.\\!babylai-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.\\!babylai-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.babylai-px-0{padding-left:0;padding-right:0}.babylai-px-4{padding-left:1rem;padding-right:1rem}.babylai-px-5{padding-left:1.25rem;padding-right:1.25rem}.babylai-px-\\[24px\\]{padding-left:24px;padding-right:24px}.babylai-py-0{padding-top:0;padding-bottom:0}.babylai-py-1{padding-top:.25rem;padding-bottom:.25rem}.babylai-py-16{padding-top:4rem;padding-bottom:4rem}.babylai-py-2{padding-top:.5rem;padding-bottom:.5rem}.babylai-py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.babylai-py-3{padding-top:.75rem;padding-bottom:.75rem}.babylai-py-4{padding-top:1rem;padding-bottom:1rem}.babylai-pb-4{padding-bottom:1rem}.babylai-pt-0{padding-top:0}.babylai-text-left{text-align:left}.babylai-text-center{text-align:center}.babylai-text-right{text-align:right}.babylai-text-4xl{font-size:2.25rem;line-height:2.5rem}.babylai-text-6xl{font-size:3.75rem;line-height:1}.babylai-text-base{font-size:1rem;line-height:1.5rem}.babylai-text-sm{font-size:.875rem;line-height:1.25rem}.babylai-text-xl{font-size:1.25rem;line-height:1.75rem}.babylai-text-xs{font-size:.75rem;line-height:1rem}.babylai-font-bold{font-weight:700}.babylai-font-semibold{font-weight:600}.babylai-leading-none{line-height:1}.babylai-tracking-tight{letter-spacing:-.025em}.\\!babylai-text-primary{--tw-text-opacity: 1 !important;color:rgb(173,73,225,var(--tw-text-opacity, 1))!important}.babylai-text-black{--tw-text-opacity: 1;color:rgb(23,23,23,var(--tw-text-opacity, 1))}.babylai-text-black-white-300{--tw-text-opacity: 1;color:rgb(145,145,145,var(--tw-text-opacity, 1))}.babylai-text-black-white-400{--tw-text-opacity: 1;color:rgb(96,96,96,var(--tw-text-opacity, 1))}.babylai-text-black-white-50{--tw-text-opacity: 1;color:rgb(255,255,255,var(--tw-text-opacity, 1))}.babylai-text-black-white-600{--tw-text-opacity: 1;color:rgb(31,31,31,var(--tw-text-opacity, 1))}.babylai-text-black-white-800{--tw-text-opacity: 1;color:rgb(10,10,10,var(--tw-text-opacity, 1))}.babylai-text-card-foreground{color:hsl(var(--card-foreground))}.babylai-text-gray-600{--tw-text-opacity: 1;color:rgb(75,85,99,var(--tw-text-opacity, 1))}.babylai-text-gray-700{--tw-text-opacity: 1;color:rgb(55,65,81,var(--tw-text-opacity, 1))}.babylai-text-muted-foreground{color:hsl(var(--muted-foreground))}.babylai-text-primary{--tw-text-opacity: 1;color:rgb(173,73,225,var(--tw-text-opacity, 1))}.babylai-text-white{--tw-text-opacity: 1;color:rgb(255,255,255,var(--tw-text-opacity, 1))}.babylai-opacity-100{opacity:1}.babylai-opacity-50{opacity:.5}.babylai-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.babylai-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.babylai-shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.babylai-ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.babylai-ring-black{--tw-ring-opacity: 1;--tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity, 1))}.babylai-ring-opacity-5{--tw-ring-opacity: .05}.babylai-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-duration-200{transition-duration:.2s}.babylai-duration-300{transition-duration:.3s}.babylai-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.babylai-duration-200{animation-duration:.2s}.babylai-duration-300{animation-duration:.3s}.babylai-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.babylai-ps-3{padding-inline-start:.75rem}.babylai-pe-12{padding-inline-end:3rem}[dir=rtl] .babylai-end-0{left:0}[dir=ltr] .babylai-end-0{right:0}[dir=rtl] .babylai-end-1{left:.25rem}[dir=ltr] .babylai-end-1{right:.25rem}.hover\\:babylai-scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:\\!babylai-bg-primary-700\\/10:hover{background-color:#451d5a1a!important}.hover\\:\\!babylai-bg-primary\\/10:hover{background-color:#ad49e11a!important}.hover\\:babylai-bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243,244,246,var(--tw-bg-opacity, 1))}.hover\\:babylai-bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(69,29,90,var(--tw-bg-opacity, 1))}.hover\\:babylai-text-white:hover{--tw-text-opacity: 1;color:rgb(255,255,255,var(--tw-text-opacity, 1))}.focus\\:babylai-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\\:babylai-scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\\:babylai-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:babylai-bg-black-white-200:disabled{--tw-bg-opacity: 1;background-color:rgb(226,226,226,var(--tw-bg-opacity, 1))}.disabled\\:babylai-opacity-50:disabled{opacity:.5}@media (min-width: 768px){.md\\:babylai-py-28{padding-top:7rem;padding-bottom:7rem}}.\\[\\&\\>\\*\\:first-child\\]\\:babylai-mt-0>*:first-child{margin-top:0}.\\[\\&\\>\\*\\:last-child\\]\\:babylai-mb-0>*:last-child{margin-bottom:0}.\\[\\&\\>blockquote\\]\\:babylai-my-2>blockquote{margin-top:.5rem;margin-bottom:.5rem}.\\[\\&\\>ol\\]\\:babylai-my-2>ol{margin-top:.5rem;margin-bottom:.5rem}.\\[\\&\\>p\\]\\:babylai-my-2>p{margin-top:.5rem;margin-bottom:.5rem}.\\[\\&\\>ul\\]\\:babylai-my-2>ul{margin-top:.5rem;margin-bottom:.5rem}\n", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: ApiService }, { type: SignalRService }, { type: TokenService }, { type: TranslationService }], propDecorators: { getToken: [{
                 type: Input
             }], helpScreenId: [{