@acorex/components 22.1.0-next.26 → 22.1.0-next.27

package/fesm2022/acorex-components-conversation.mjs

@@ -91,6 +91,7 @@ const AX_DEFAULT_CONVERSATION_CONFIG = {
     minSidebarWidth: 250,
     maxSidebarWidth: 500,
     defaultSidebarWidth: 320,
+    sidebarTabsOrientation: 'vertical',
     // Message Validation
     maxMessageLength: 10000,
     minMessageLength: 1,
@@ -3863,7 +3864,7 @@ class AXConversationService {
         // Show confirmation dialog
         const result = await this.dialogService.confirm(this.translation.translateSync('@acorex:chat.dialog.delete-message.title'), forEveryone
             ? this.translation.translateSync('@acorex:chat.dialog.delete-message.for-everyone')
-            : this.translation.translateSync('@acorex:chat.dialog.delete-message.default'), 'danger', 'vertical', false);
+            : this.translation.translateSync('@acorex:chat.dialog.delete-message.default'), 'danger');
         // User cancelled
         if (!result.result) {
             return;
@@ -4525,7 +4526,7 @@ class AXConversationService {
         // Show confirmation dialog
         const result = await this.dialogService.confirm(this.translation.translateSync('@acorex:chat.dialog.delete-conversation.title'), this.translation.translateSync('@acorex:chat.dialog.delete-conversation.message', {
             params: { conversationTitle },
-        }), 'danger', 'vertical', false);
+        }), 'danger');
         // User cancelled
         if (!result.result) {
             return false;
@@ -5117,10 +5118,10 @@ function resolveComposerMaxFiles(action, config) {
     return Math.max(1, action?.maxFiles ?? config.maxFilesPerMessage);
 }
 
-/** Library default when no per-conversation or global background is set. */
+/** Library default when no per-conversation or global background is set (Telegram-inspired). */
 const AX_CONVERSATION_DEFAULT_MESSAGE_LIST_THEME_BACKGROUND = {
-    light: 'rgb(var(--ax-sys-color-primary-lightest-surface))',
-    dark: 'linear-gradient(165deg, rgba(var(--ax-sys-color-primary-900), 0.14) 0%, rgb(var(--ax-sys-color-darker-surface)) 72%)',
+    light: 'linear-gradient(180deg, #dfeaf1 0%, #cddceb 100%)',
+    dark: 'linear-gradient(180deg, #1b2733 0%, #0e1621 100%)',
 };
 /** Predefined chat-area backgrounds for the info panel (light + dark variants). */
 const AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS = [
@@ -5166,7 +5167,7 @@ const AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS = [
 ];
 const AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID = 'solid-default';
 
-/** Subtle chat-area wash when `messageListBackground` is not set (theme-aware). */
+/** Subtle Telegram-style chat-area wash when `messageListBackground` is not set (theme-aware). */
 const AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND = AX_CONVERSATION_DEFAULT_MESSAGE_LIST_THEME_BACKGROUND.light;
 function isMessageListThemeBackground(value) {
     return (typeof value === 'object' &&
@@ -5182,6 +5183,9 @@ function resolveMessageListBackgroundRaw(value, isDark) {
         return undefined;
     }
     if (typeof value === 'string') {
+        if (value.trim() === '') {
+            return undefined;
+        }
         return value;
     }
     return isDark ? value.dark : value.light;
@@ -6259,7 +6263,7 @@ class AXConversationComposerService {
         this.inputRows = computed(() => {
             const text = this.draftText();
             const lines = text.split('\n').length;
-            return Math.min(Math.max(lines, 1), 4);
+            return Math.min(Math.max(lines, 1), 12);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputRows" }] : /* istanbul ignore next */ []));
         /** Can send message (draft has content; does not include generation state). */
@@ -6532,6 +6536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Composer Component
  * Input area for composing and sending messages
  */
+const ATTACH_MENU_CLOSE_DELAY_MS = 500;
 class AXConversationComposerComponent {
     /** Access registry through conversation service */
     get composerActionRegistry() {
@@ -6576,8 +6581,10 @@ class AXConversationComposerComponent {
         /** Attachment menu popover state */
         this.attachPopoverRef = viewChild('attachPopover', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "attachPopoverRef" }] : /* istanbul ignore next */ []));
-        this.attachPopoverTarget = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "attachPopoverTarget" }] : /* istanbul ignore next */ []));
+        this.attachMenuButtonRef = viewChild('attachMenuButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachMenuButtonRef" }] : /* istanbul ignore next */ []));
+        this.attachMenuTarget = computed(() => this.attachMenuButtonRef()?.nativeElement ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachMenuTarget" }] : /* istanbul ignore next */ []));
         this.composerPopupLoader = () => Promise.resolve().then(function () { return composerPopup_component; }).then((m) => m.AXConversationComposerPopupComponent);
         /** Input placeholder - use service */
         this.placeholder = this.composerService.placeholder;
@@ -6635,7 +6642,7 @@ class AXConversationComposerComponent {
                     this.conversationService.notifyComposerStoppedTyping(previousConversationId);
                 }
                 this.emojiPopoverTarget.set(null);
-                this.attachPopoverTarget.set(null);
+                this.attachPopoverRef()?.close();
                 this.editingMessage.set(null);
                 this.replyingToMessage.set(null);
             }
@@ -6696,6 +6703,7 @@ class AXConversationComposerComponent {
         if (this.draftSaveTimeout) {
             clearTimeout(this.draftSaveTimeout);
         }
+        this.clearAttachMenuCloseTimer();
     }
     /** Handle send click */
     async onSendClick() {
@@ -6805,29 +6813,51 @@ class AXConversationComposerComponent {
             onItemSelected: (item) => this.onEmojiItemSelected(item),
         };
     }
+    /** Handle attach menu hover */
+    onAttachMenuMouseEnter() {
+        this.clearAttachMenuCloseTimer();
+        this.attachPopoverRef()?.open();
+    }
+    onAttachMenuMouseLeave() {
+        this.scheduleAttachMenuClose();
+    }
+    onAttachMenuPanelMouseEnter() {
+        this.clearAttachMenuCloseTimer();
+    }
+    onAttachMenuPanelMouseLeave() {
+        this.scheduleAttachMenuClose();
+    }
+    scheduleAttachMenuClose() {
+        this.clearAttachMenuCloseTimer();
+        this.attachMenuCloseTimer = setTimeout(() => {
+            this.attachPopoverRef()?.close();
+            this.attachMenuCloseTimer = undefined;
+        }, ATTACH_MENU_CLOSE_DELAY_MS);
+    }
+    clearAttachMenuCloseTimer() {
+        if (this.attachMenuCloseTimer) {
+            clearTimeout(this.attachMenuCloseTimer);
+            this.attachMenuCloseTimer = undefined;
+        }
+    }
     /** Handle attach menu click */
     onAttachMenuClick(event) {
         this.attachClick.emit();
-        const target = event.htmlElement;
-        if (!target)
-            return;
+        event?.nativeEvent?.preventDefault();
+        event?.nativeEvent?.stopPropagation();
         const popover = this.attachPopoverRef();
         if (popover?.isOpen) {
+            this.clearAttachMenuCloseTimer();
             popover.close();
         }
         else {
-            this.attachPopoverTarget.set(target);
-            setTimeout(() => {
-                this.attachPopoverRef()?.open();
-            }, 0);
+            this.clearAttachMenuCloseTimer();
+            popover?.open();
         }
     }
-    /** Handle attachment popover closed */
-    onAttachPopoverClosed() {
-        this.attachPopoverTarget.set(null);
-    }
     /** Handle attachment menu action selection */
     async onAttachMenuAction(actionId) {
+        this.clearAttachMenuCloseTimer();
         this.attachPopoverRef()?.close();
         await this.onActionClick(actionId);
     }
@@ -6865,11 +6895,11 @@ class AXConversationComposerComponent {
             case 'cancel':
                 return 'fa-light fa-stop';
             case 'send':
-                return this.editingMessage() ? 'fa-light fa-check' : 'fa-light fa-paper-plane';
+                return this.editingMessage() ? 'fa-light fa-check' : 'fa-solid fa-paper-plane';
             case 'default-action':
-                return this.defaultAction()?.icon ?? 'fa-light fa-paper-plane';
+                return this.defaultAction()?.icon ?? 'fa-solid fa-paper-plane';
             case 'locked':
-                return 'fa-light fa-paper-plane';
+                return 'fa-solid fa-paper-plane';
         }
     }
     getPrimaryButtonLabel() {
@@ -7055,7 +7085,7 @@ class AXConversationComposerComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerComponent, isStandalone: true, selector: "ax-conversation-composer", outputs: { messageSent: "messageSent", generationCancelled: "generationCancelled", emojiClick: "emojiClick", attachClick: "attachClick", voiceClick: "voiceClick" }, viewQueries: [{ propertyName: "textAreaRef", first: true, predicate: ["inputElement"], descendants: true, read: AXTextAreaComponent, isSignal: true }, { propertyName: "emojiPopoverRef", first: true, predicate: ["emojiPopover"], descendants: true, isSignal: true }, { propertyName: "attachPopoverRef", first: true, predicate: ["attachPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <ax-button\n            class=\"rounded-full text-xl\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n            (onClick)=\"onAttachMenuClick($event)\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-paperclip\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onDraftChanged()\"\n          [placeholder]=\"placeholder()\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        <ax-button\n          class=\"rounded-full text-xl\"\n          [class.ax-conversation-composer-primary--stopping]=\"primaryButtonMode() === 'stopping'\"\n          color=\"primary\"\n          look=\"solid\"\n          [iconOnly]=\"true\"\n          [text]=\"getPrimaryButtonLabel()\"\n          [disabled]=\"isPrimaryButtonDisabled()\"\n          (onClick)=\"onPrimaryButtonClick()\"\n        >\n          <ax-prefix>\n            <i [class]=\"getPrimaryButtonIcon()\"></i>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachPopoverTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    (onClosed)=\"onAttachPopoverClosed()\"\n  >\n    <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerComponent, isStandalone: true, selector: "ax-conversation-composer", outputs: { messageSent: "messageSent", generationCancelled: "generationCancelled", emojiClick: "emojiClick", attachClick: "attachClick", voiceClick: "voiceClick" }, viewQueries: [{ propertyName: "textAreaRef", first: true, predicate: ["inputElement"], descendants: true, read: AXTextAreaComponent, isSignal: true }, { propertyName: "emojiPopoverRef", first: true, predicate: ["emojiPopover"], descendants: true, isSignal: true }, { propertyName: "attachPopoverRef", first: true, predicate: ["attachPopover"], descendants: true, isSignal: true }, { propertyName: "attachMenuButtonRef", first: true, predicate: ["attachMenuButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <span\n            #attachMenuButton\n            class=\"composer-attach-menu-trigger\"\n            (mouseenter)=\"onAttachMenuMouseEnter()\"\n            (mouseleave)=\"onAttachMenuMouseLeave()\"\n          >\n            <ax-button\n              class=\"rounded-full text-xl\"\n              look=\"blank\"\n              [iconOnly]=\"true\"\n              [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n              (onClick)=\"onAttachMenuClick($event)\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-paperclip\"></i>\n              </ax-prefix>\n            </ax-button>\n          </span>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-icon>\n              <i [class]=\"action.icon\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onDraftChanged()\"\n          [placeholder]=\"placeholder()\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-icon>\n              <i [class]=\"action.icon\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n\n        <div class=\"composer-primary-button-slot\">\n          @switch (primaryButtonMode()) {\n            @case ('cancel') {\n              <ax-button\n                class=\"composer-primary-button rounded-full text-xl\"\n                [iconOnly]=\"true\"\n                look=\"blank\"\n                [text]=\"getPrimaryButtonLabel()\"\n                (onClick)=\"onPrimaryButtonClick()\"\n              >\n                <ax-prefix>\n                  <i [class]=\"getPrimaryButtonIcon()\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @case ('stopping') {\n              <ax-button\n                class=\"composer-primary-button composer-primary-button--stopping rounded-full text-xl\"\n                [iconOnly]=\"true\"\n                look=\"blank\"\n                [text]=\"getPrimaryButtonLabel()\"\n                [disabled]=\"true\"\n              >\n                <ax-prefix>\n                  <i [class]=\"getPrimaryButtonIcon()\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @default {\n              <ax-button\n                class=\"composer-primary-button rounded-full text-xl\"\n                [iconOnly]=\"true\"\n                look=\"blank\"\n                [text]=\"getPrimaryButtonLabel()\"\n                [disabled]=\"isPrimaryButtonDisabled()\"\n                (onClick)=\"onPrimaryButtonClick()\"\n              >\n                <ax-prefix>\n                  <i [class]=\"getPrimaryButtonIcon()\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachMenuTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachMenuTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n  >\n    <div\n      class=\"composer-attach-menu-panel\"\n      (mouseenter)=\"onAttachMenuPanelMouseEnter()\"\n      (mouseleave)=\"onAttachMenuPanelMouseLeave()\"\n    >\n      <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n    </div>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:is(ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right) ax-icon i,:is(ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right) ax-prefix i{font-size:1.375rem;--tw-leading: 1;line-height:1}ax-conversation-composer .composer-attach-menu-trigger{display:inline-flex}ax-conversation-composer .composer-primary-button-slot{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center}ax-conversation-composer .composer-primary-button-slot .composer-primary-button ax-prefix i{transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .composer-actions-left ax-button>button:hover:not(:disabled),ax-conversation-composer .composer-actions-right ax-button>button:hover:not(:disabled){color:rgba(var(--ax-sys-color-on-surface),.68);background:rgba(var(--ax-sys-color-on-surface),.05)}}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;--tw-border-style: none;border-style:none;--tw-outline-style: none;outline-style:none}ax-conversation-composer .composer-input-wrapper .ax-editor-container{--tw-border-style: none;border-style:none;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;background-image:none}ax-conversation-composer .composer-input-wrapper .ax-editor-container:after{display:none}ax-conversation-composer .composer-input-wrapper .ax-editor-container:hover:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error),ax-conversation-composer .composer-input-wrapper .ax-editor-container:focus-within:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error){--tw-border-style: none;border-style:none;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;background-image:none}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerComponent, decorators: [{
             type: Component,
@@ -7071,8 +7101,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTranslationModule,
                         AXButtonItemComponent,
                         AXButtonItemListComponent,
-                    ], template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <ax-button\n            class=\"rounded-full text-xl\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n            (onClick)=\"onAttachMenuClick($event)\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-paperclip\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onDraftChanged()\"\n          [placeholder]=\"placeholder()\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        <ax-button\n          class=\"rounded-full text-xl\"\n          [class.ax-conversation-composer-primary--stopping]=\"primaryButtonMode() === 'stopping'\"\n          color=\"primary\"\n          look=\"solid\"\n          [iconOnly]=\"true\"\n          [text]=\"getPrimaryButtonLabel()\"\n          [disabled]=\"isPrimaryButtonDisabled()\"\n          (onClick)=\"onPrimaryButtonClick()\"\n        >\n          <ax-prefix>\n            <i [class]=\"getPrimaryButtonIcon()\"></i>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachPopoverTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    (onClosed)=\"onAttachPopoverClosed()\"\n  >\n    <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { textAreaRef: [{ type: i0.ViewChild, args: ['inputElement', { ...{ read: AXTextAreaComponent }, isSignal: true }] }], messageSent: [{ type: i0.Output, args: ["messageSent"] }], generationCancelled: [{ type: i0.Output, args: ["generationCancelled"] }], emojiClick: [{ type: i0.Output, args: ["emojiClick"] }], attachClick: [{ type: i0.Output, args: ["attachClick"] }], voiceClick: [{ type: i0.Output, args: ["voiceClick"] }], emojiPopoverRef: [{ type: i0.ViewChild, args: ['emojiPopover', { isSignal: true }] }], attachPopoverRef: [{ type: i0.ViewChild, args: ['attachPopover', { isSignal: true }] }] } });
+                        AXDecoratorModule,
+                    ], template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <span\n            #attachMenuButton\n            class=\"composer-attach-menu-trigger\"\n            (mouseenter)=\"onAttachMenuMouseEnter()\"\n            (mouseleave)=\"onAttachMenuMouseLeave()\"\n          >\n            <ax-button\n              class=\"rounded-full text-xl\"\n              look=\"blank\"\n              [iconOnly]=\"true\"\n              [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n              (onClick)=\"onAttachMenuClick($event)\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-paperclip\"></i>\n              </ax-prefix>\n            </ax-button>\n          </span>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-icon>\n              <i [class]=\"action.icon\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onDraftChanged()\"\n          [placeholder]=\"placeholder()\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-icon>\n              <i [class]=\"action.icon\"></i>\n            </ax-icon>\n          </ax-button>\n        }\n\n        <div class=\"composer-primary-button-slot\">\n          @switch (primaryButtonMode()) {\n            @case ('cancel') {\n              <ax-button\n                class=\"composer-primary-button rounded-full text-xl\"\n                [iconOnly]=\"true\"\n                look=\"blank\"\n                [text]=\"getPrimaryButtonLabel()\"\n                (onClick)=\"onPrimaryButtonClick()\"\n              >\n                <ax-prefix>\n                  <i [class]=\"getPrimaryButtonIcon()\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @case ('stopping') {\n              <ax-button\n                class=\"composer-primary-button composer-primary-button--stopping rounded-full text-xl\"\n                [iconOnly]=\"true\"\n                look=\"blank\"\n                [text]=\"getPrimaryButtonLabel()\"\n                [disabled]=\"true\"\n              >\n                <ax-prefix>\n                  <i [class]=\"getPrimaryButtonIcon()\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @default {\n              <ax-button\n                class=\"composer-primary-button rounded-full text-xl\"\n                [iconOnly]=\"true\"\n                look=\"blank\"\n                [text]=\"getPrimaryButtonLabel()\"\n                [disabled]=\"isPrimaryButtonDisabled()\"\n                (onClick)=\"onPrimaryButtonClick()\"\n              >\n                <ax-prefix>\n                  <i [class]=\"getPrimaryButtonIcon()\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachMenuTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachMenuTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n  >\n    <div\n      class=\"composer-attach-menu-panel\"\n      (mouseenter)=\"onAttachMenuPanelMouseEnter()\"\n      (mouseleave)=\"onAttachMenuPanelMouseLeave()\"\n    >\n      <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n    </div>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}:is(ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right) ax-icon i,:is(ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right) ax-prefix i{font-size:1.375rem;--tw-leading: 1;line-height:1}ax-conversation-composer .composer-attach-menu-trigger{display:inline-flex}ax-conversation-composer .composer-primary-button-slot{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center}ax-conversation-composer .composer-primary-button-slot .composer-primary-button ax-prefix i{transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .composer-actions-left ax-button>button:hover:not(:disabled),ax-conversation-composer .composer-actions-right ax-button>button:hover:not(:disabled){color:rgba(var(--ax-sys-color-on-surface),.68);background:rgba(var(--ax-sys-color-on-surface),.05)}}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;--tw-border-style: none;border-style:none;--tw-outline-style: none;outline-style:none}ax-conversation-composer .composer-input-wrapper .ax-editor-container{--tw-border-style: none;border-style:none;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;background-image:none}ax-conversation-composer .composer-input-wrapper .ax-editor-container:after{display:none}ax-conversation-composer .composer-input-wrapper .ax-editor-container:hover:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error),ax-conversation-composer .composer-input-wrapper .ax-editor-container:focus-within:not(.ax-state-disabled,.ax-state-readonly,.ax-state-error){--tw-border-style: none;border-style:none;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style: none;outline-style:none;background-image:none}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { textAreaRef: [{ type: i0.ViewChild, args: ['inputElement', { ...{ read: AXTextAreaComponent }, isSignal: true }] }], messageSent: [{ type: i0.Output, args: ["messageSent"] }], generationCancelled: [{ type: i0.Output, args: ["generationCancelled"] }], emojiClick: [{ type: i0.Output, args: ["emojiClick"] }], attachClick: [{ type: i0.Output, args: ["attachClick"] }], voiceClick: [{ type: i0.Output, args: ["voiceClick"] }], emojiPopoverRef: [{ type: i0.ViewChild, args: ['emojiPopover', { isSignal: true }] }], attachPopoverRef: [{ type: i0.ViewChild, args: ['attachPopover', { isSignal: true }] }], attachMenuButtonRef: [{ type: i0.ViewChild, args: ['attachMenuButton', { isSignal: true }] }] } });
 
 /**
  * ConversationContainer Component
@@ -7833,7 +7864,7 @@ class AXConversationInfoBarComponent {
         this.menuItemAction.emit(item.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationInfoBarComponent, isStandalone: true, selector: "ax-conversation-info-bar", outputs: { infoClick: "infoClick", searchClick: "searchClick", searchQuery: "searchQuery", menuItemAction: "menuItemAction" }, ngImport: i0, template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"48\"\n          [showStatus]=\"conversation.type === 'private' && !hasCustomUserAvatar()\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{margin-inline:calc(var(--spacing, .25rem) * -1.5);margin-block:calc(var(--spacing, .25rem) * -1);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{margin-top:calc(var(--spacing, .25rem) * .5);margin-bottom:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationInfoBarComponent, isStandalone: true, selector: "ax-conversation-info-bar", outputs: { infoClick: "infoClick", searchClick: "searchClick", searchQuery: "searchQuery", menuItemAction: "menuItemAction" }, ngImport: i0, template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"44\"\n          [showStatus]=\"conversation.type === 'private' && !hasCustomUserAvatar()\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;container-type:inline-size;container-name:info-bar;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}@container info-bar (min-width: 48rem){ax-conversation-info-bar .avatar-wrapper{display:none}}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-actions ax-button-item.ax-danger{color:var(--ax-comp-bg)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoBarComponent, decorators: [{
             type: Component,
@@ -7847,7 +7878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXLabelComponent,
                         AXConversationAvatarComponent,
                         AXConversationRegistryComponentOutletComponent,
-                    ], template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"48\"\n          [showStatus]=\"conversation.type === 'private' && !hasCustomUserAvatar()\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{margin-inline:calc(var(--spacing, .25rem) * -1.5);margin-block:calc(var(--spacing, .25rem) * -1);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{margin-top:calc(var(--spacing, .25rem) * .5);margin-bottom:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"44\"\n          [showStatus]=\"conversation.type === 'private' && !hasCustomUserAvatar()\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;container-type:inline-size;container-name:info-bar;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}@container info-bar (min-width: 48rem){ax-conversation-info-bar .avatar-wrapper{display:none}}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-actions ax-button-item.ax-danger{color:var(--ax-comp-bg)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { infoClick: [{ type: i0.Output, args: ["infoClick"] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], searchQuery: [{ type: i0.Output, args: ["searchQuery"] }], menuItemAction: [{ type: i0.Output, args: ["menuItemAction"] }] } });
 
 class AXConversationForwardMessageDialogComponent {
@@ -8197,12 +8228,15 @@ function isRtlDocument(document) {
     }
     return getComputedStyle(document.documentElement).direction === 'rtl';
 }
+/** Matches `--ax-comp-message-list-adaptive-breakpoint` in message-list styles (52rem). */
+const MESSAGE_LIST_ADAPTIVE_BREAKPOINT_PX = 52 * 16;
 /**
- * Reaction button sits outside the bubble on inline-end (received) or inline-start (own).
- * Open the picker toward the bubble: left of a right-side button (LTR received), etc.
+ * Reaction button sits outside the bubble on inline-end (received) or inline-start (own ping-pong).
+ * In adaptive wide layout all buttons sit on inline-end — use received placement rules.
  */
-function resolveReactionPickerPlacement(isOwnMessage, isRtl) {
-    const openTowardPhysicalStart = (!isOwnMessage && !isRtl) || (isOwnMessage && isRtl);
+function resolveReactionPickerPlacement(isOwnMessage, isRtl, isAdaptiveWideLayout = false) {
+    const ownsInPingPong = isOwnMessage && !isAdaptiveWideLayout;
+    const openTowardPhysicalStart = (!ownsInPingPong && !isRtl) || (ownsInPingPong && isRtl);
     return openTowardPhysicalStart ? 'end-top' : 'start-top';
 }
 
@@ -8262,6 +8296,9 @@ class AXConversationMessageListComponent {
         /** True while files are dragged over the message list drop zone. */
         this.messageListDragging = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "messageListDragging" }] : /* istanbul ignore next */ []));
+        /** True when the message list uses single-column adaptive layout (matches CSS container query). */
+        this.isAdaptiveWideLayout = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAdaptiveWideLayout" }] : /* istanbul ignore next */ []));
         /** While true, older history is being prepended — do not auto-scroll to the latest message. */
         this.restoringScrollAfterPrepend = false;
         // Available reaction emojis from API (loaded lazily when picker opens)
@@ -8299,6 +8336,8 @@ class AXConversationMessageListComponent {
         this.currentUser = this.conversationService.currentUser;
         /** Message grouped by date - use service */
         this.messageGroups = this.messageListService.messageGroups;
+        this.readIntersectionObserver = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readIntersectionObserver" }] : /* istanbul ignore next */ []));
         this.observedReadMessageIds = new Set();
         /** Get first unread message ID */
         this.firstUnreadMessageId = computed(() => {
@@ -8312,6 +8351,24 @@ class AXConversationMessageListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstUnreadMessageId" }] : /* istanbul ignore next */ []));
         void this.conversationService.ensureInitialized();
+        effect((onCleanup) => {
+            const el = this.messageListRef()?.nativeElement;
+            if (!el || typeof ResizeObserver === 'undefined') {
+                this.isAdaptiveWideLayout.set(false);
+                return;
+            }
+            const updateAdaptiveLayout = () => {
+                this.isAdaptiveWideLayout.set(el.clientWidth >= MESSAGE_LIST_ADAPTIVE_BREAKPOINT_PX);
+            };
+            updateAdaptiveLayout();
+            const observer = new ResizeObserver(() => updateAdaptiveLayout());
+            observer.observe(el);
+            this.adaptiveLayoutResizeObserver = observer;
+            onCleanup(() => {
+                observer.disconnect();
+                this.adaptiveLayoutResizeObserver = undefined;
+            });
+        });
         // Close reaction picker when clicking outside
         if (typeof document !== 'undefined') {
             document.addEventListener('click', (e) => {
@@ -8426,42 +8483,56 @@ class AXConversationMessageListComponent {
      * Setup intersection observer to mark messages as read when visible
      */
     setupIntersectionObserver() {
-        // Create observer with configurable threshold (default 30%)
-        this.intersectionObserver = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    const messageId = entry.target.getAttribute('data-message-id');
-                    if (messageId) {
-                        this.markMessageAsRead(messageId);
+        effect((onCleanup) => {
+            const container = this.messagesContainerRef()?.nativeElement;
+            if (!container) {
+                this.readIntersectionObserver.set(null);
+                return;
+            }
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const messageId = entry.target.getAttribute('data-message-id');
+                        if (messageId) {
+                            this.markMessageAsRead(messageId);
+                        }
                     }
-                }
+                });
+            }, {
+                root: container,
+                threshold: this.config.messageReadThreshold,
+            });
+            this.intersectionObserver = observer;
+            this.readIntersectionObserver.set(observer);
+            onCleanup(() => {
+                observer.disconnect();
+                this.intersectionObserver = undefined;
+                this.readIntersectionObserver.set(null);
+                this.observedReadMessageIds.clear();
             });
-        }, {
-            root: this.messagesContainerRef()?.nativeElement,
-            threshold: this.config.messageReadThreshold,
         });
-        // Observe unread messages
-        effect(() => {
+        effect((onCleanup) => {
+            const observer = this.readIntersectionObserver();
             const messages = this.messages();
             const currentUser = this.currentUser();
-            if (!this.intersectionObserver || !currentUser)
-                return;
             const container = this.messagesContainerRef()?.nativeElement;
-            if (!container)
+            if (!observer || !container || !currentUser) {
                 return;
+            }
             const unreadMessages = messages.filter((m) => m.status !== 'read' && m.senderId !== currentUser.id);
-            setTimeout(() => {
+            const timeoutId = window.setTimeout(() => {
                 for (const msg of unreadMessages) {
                     if (this.observedReadMessageIds.has(msg.id)) {
                         continue;
                     }
                     const element = container.querySelector(`[data-message-id="${msg.id}"]`);
-                    if (element && this.intersectionObserver) {
-                        this.intersectionObserver.observe(element);
+                    if (element) {
+                        observer.observe(element);
                         this.observedReadMessageIds.add(msg.id);
                     }
                 }
             }, 100);
+            onCleanup(() => clearTimeout(timeoutId));
         });
     }
     /**
@@ -8513,10 +8584,9 @@ class AXConversationMessageListComponent {
             return false;
         return AXConversationMessageUtilsService.isOwnMessage(message, user.id);
     }
-    /** Should show avatar */
-    shouldShowAvatar(message) {
-        const conversation = this.activeConversation();
-        return conversation?.type === 'group' && !this.isOwnMessage(message);
+    /** Whether the avatar slot is rendered (visibility is CSS-controlled per layout mode). */
+    shouldRenderAvatar(message) {
+        return message.type !== 'system';
     }
     /** Should show sender name */
     shouldShowSenderName(message) {
@@ -8672,7 +8742,7 @@ class AXConversationMessageListComponent {
         }
         void this.ensureAvailableReactions();
         const isRtl = isRtlDocument(this.document);
-        this.reactionPickerPlacement.set(resolveReactionPickerPlacement(this.isOwnMessage(message), isRtl));
+        this.reactionPickerPlacement.set(resolveReactionPickerPlacement(this.isOwnMessage(message), isRtl, this.isAdaptiveWideLayout()));
         this.reactionPickerElement.set(button);
         this.reactionPickerTarget.set(message.id);
         setTimeout(() => {
@@ -8876,6 +8946,8 @@ class AXConversationMessageListComponent {
             this.intersectionObserver.disconnect();
             this.intersectionObserver = undefined;
         }
+        this.adaptiveLayoutResizeObserver?.disconnect();
+        this.adaptiveLayoutResizeObserver = undefined;
         // Clear timeouts
         this.timeouts.forEach((t) => clearTimeout(t));
         this.timeouts.clear();
@@ -8964,7 +9036,7 @@ class AXConversationMessageListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationMessageListComponent, isStandalone: true, selector: "ax-conversation-message-list", outputs: { messageAction: "messageAction" }, viewQueries: [{ propertyName: "reactionPopover", first: true, predicate: ["reactionPopover"], descendants: true, isSignal: true }, { propertyName: "messageListRef", first: true, predicate: ["messageList"], descendants: true, isSignal: true }, { propertyName: "messagesContainerRef", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation(); as conv) {\n  @if (conv.id) {\n    <div\n      class=\"message-list message-list--conversation-surface\"\n      [class.message-list--drag]=\"messageListDragging()\"\n      #messageList\n      role=\"log\"\n      [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n      aria-live=\"polite\"\n      [style.background]=\"messageListBackgroundStyle()\"\n      [style.--ax-comp-message-list-surface-bg]=\"messageListBackgroundStyle()\"\n      axUploaderZone\n      [disableBrowse]=\"true\"\n      (dragEnter)=\"onMessageListDragEnter()\"\n      (dragLeave)=\"onMessageListDragLeave()\"\n      (fileChange)=\"onMessageListFilesDropped($event)\"\n    >\n      @if (loading()) {\n        <div\n          class=\"list-loading\"\n          role=\"status\"\n          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                @if ($even && isGroupConversation()) {\n                  <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                }\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        </div>\n      } @else if (messages().length === 0) {\n        <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n          <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n            <ng-container\n              *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n            ></ng-container>\n          </ng-content>\n        </div>\n      } @else {\n        <div\n          class=\"messages-container\"\n          (scroll)=\"onScroll($event)\"\n          axInfiniteScroll\n          [threshold]=\"config.infiniteScrollThreshold\"\n          [edge]=\"'top'\"\n          [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n          (scrollThreshold)=\"onScrollThreshold($event)\"\n          #messagesContainer\n          role=\"feed\"\n          [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n        >\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--prepend\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{\n                '@acorex:chat.status.loading-older-messages' | translate | async\n              }}</ax-label>\n            </div>\n          }\n          @for (group of messageGroups(); track group.date) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track message.id) {\n              <div\n                [class]=\"getMessageClasses(message)\"\n                role=\"article\"\n                [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                [id]=\"'message-' + message.id\"\n              >\n                <!-- Avatar (only for group conversations and received messages) -->\n                @if (shouldShowAvatar(message)) {\n                  <div class=\"message-avatar\">\n                    <ax-conversation-avatar\n                      kind=\"user\"\n                      [userId]=\"message.senderId\"\n                      [conversation]=\"activeConversation()\"\n                      [message]=\"message\"\n                      [size]=\"32\"\n                    />\n                  </div>\n                }\n\n                <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                  @if (messageSupportsReactions(message)) {\n                    <button\n                      type=\"button\"\n                      class=\"add-reaction-button add-reaction-outside\"\n                      [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                      (click)=\"toggleReactionPicker(message, $event)\"\n                      [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                      #reactionButton\n                    >\n                      <i class=\"fa-light fa-face-smile\"></i>\n                    </button>\n                  }\n\n                  <div\n                    class=\"message-bubble-container\"\n                    [id]=\"'message-bubble-' + message.id\"\n                    [attr.data-message-id]=\"message.id\"\n                  >\n                    <div\n                      [class]=\"getBubbleClasses(message)\"\n                      [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                      [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                    >\n                      <!-- Sender name (only for group conversations and received messages) -->\n                      @if (shouldShowSenderName(message)) {\n                        <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                      }\n\n                      <!-- Reply Preview -->\n                      @if (message.replyTo) {\n                        <div\n                          class=\"reply-preview\"\n                          (click)=\"scrollToMessage(message.replyTo.id)\"\n                          role=\"button\"\n                          [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                          (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                          (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                        >\n                          <div class=\"reply-preview-content\">\n                            <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                            <div class=\"reply-preview-text\">\n                              @if (getMessagePreviewText(message.replyTo); as preview) {\n                                <span class=\"last-message\">\n                                  @if (preview.type !== 'text') {\n                                    <i [class]=\"preview.icon\"></i\n                                    >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                  } @else {\n                                    {{ preview.value }}\n                                  }\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Forwarded Indicator -->\n                      @if (message.forwarded) {\n                        <div class=\"forwarded-preview\">\n                          <i class=\"fa-solid fa-share\"></i>\n                          <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                        </div>\n                      }\n\n                      <ax-conversation-registry-component-outlet\n                        [component]=\"getRendererComponent(message)\"\n                        [componentLoader]=\"getRendererComponentLoader(message)\"\n                        [inputs]=\"getRendererInputs(message)\"\n                      />\n\n                      @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n                        <div class=\"message-reactions-container\">\n                          <div class=\"message-reactions-bubbles\">\n                            @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                              <button\n                                type=\"button\"\n                                class=\"reaction-bubble\"\n                                [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                (click)=\"onReactionClick(message, reaction.emoji)\"\n                                [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                              >\n                                <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                @if (reaction.count > 1) {\n                                  <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                }\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Message Footer -->\n                      <div class=\"message-footer\">\n                        @let replyCount = getReplyCount(message);\n                        @let forwardCount = getForwardCount(message);\n                        @if (replyCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n                            <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n                          </span>\n                        }\n                        @if (forwardCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n                            <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n                          </span>\n                        }\n                        @if (replyCount > 0 || forwardCount > 0) {\n                          <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                        }\n                        <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                        @if (message.editedAt) {\n                          <span class=\"edited-indicator\">\n                            <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                          </span>\n                        }\n                        @if (isOwnMessage(message)) {\n                          <span [class]=\"getStatusIconClasses(message)\">\n                            <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Context Menu for Message Actions -->\n                <ax-context-menu\n                  [target]=\"'#message-bubble-' + message.id\"\n                  [openOn]=\"'click'\"\n                  [closeOn]=\"'click'\"\n                  (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                  (onClose)=\"contextMenuMessageId.set(null)\"\n                  (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                >\n                </ax-context-menu>\n              </div>\n            }\n          }\n        </div>\n\n        <!-- Scroll to Bottom Button -->\n        @if (showScrollButton()) {\n          <div\n            class=\"scroll-to-bottom-wrapper\"\n            animate.enter=\"scroll-to-bottom-enter\"\n            animate.leave=\"scroll-to-bottom-leave\"\n          >\n            <ax-fab\n              class=\"scroll-to-bottom\"\n              (onClick)=\"scrollToBottom()\"\n              [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n            >\n              <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n            </ax-fab>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Reaction Picker Popover -->\n  @if (reactionsEnabled() && reactionPickerTarget()) {\n    <ax-popover\n      #reactionPopover\n      [target]=\"reactionPickerElement()\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"reactionPickerPlacement()\"\n      (onClose)=\"closeReactionPicker()\"\n    >\n      <div class=\"reaction-picker-popup\">\n        <div class=\"reaction-picker-header\">\n          <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n          <button\n            type=\"button\"\n            class=\"picker-close\"\n            (click)=\"closeReactionPicker()\"\n            [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n          >\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        </div>\n        <div\n          class=\"reaction-picker-emojis\"\n          role=\"listbox\"\n          [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n        >\n          @for (emoji of availableReactions(); track emoji) {\n            <button\n              type=\"button\"\n              class=\"reaction-picker-emoji\"\n              [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n              (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n              [attr.aria-label]=\"emoji\"\n            >\n              {{ emoji }}\n            </button>\n          }\n        </div>\n      </div>\n    </ax-popover>\n  }\n} @else {\n  <div\n    class=\"message-list message-list--no-active\"\n    role=\"region\"\n    [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n  >\n    <div class=\"list-no-active\">\n      <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n        <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n      </ng-content>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;--ax-comp-message-bubble-tail-height: 1.5625rem;--ax-comp-message-bubble-tail-fill-width: 1.25rem;--ax-comp-message-bubble-tail-fill-offset: -.4375rem;--ax-comp-message-bubble-tail-cutout-width: 1.625rem;--ax-comp-message-bubble-tail-cutout-offset: -1.625rem;--ax-comp-message-bubble-tail-curve: 1rem 0rem;--ax-comp-message-bubble-tail-cutout-curve: .625rem;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-start;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .messages-skeleton{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton{background-color:rgba(var(--ax-sys-color-on-surface),.16)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.22) 50%,transparent)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-on-surface),.08)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.14) 50%,transparent)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-primary-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-primary-900),.12)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-primary-surface),.2) 50%,transparent)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{z-index:5;flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}ax-conversation-message-list .message-content-row:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:.375rem}ax-conversation-message-list .message-content-row-own:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:0;margin-inline-start:.375rem}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .message-bubble>*{position:relative;z-index:1}ax-conversation-message-list .reply-preview{margin-bottom:calc(var(--spacing, .25rem) * 2);cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-lightest-surface));background-color:var(--ax-comp-message-bubble-bg);border-bottom-left-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-primary-surface));background-color:var(--ax-comp-message-bubble-bg);color:rgb(var(--ax-sys-color-on-primary-surface));border-bottom-right-radius:.25rem}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{content:\"\";position:absolute;bottom:0;height:var(--ax-comp-message-bubble-tail-height);pointer-events:none;z-index:0}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):before{width:var(--ax-comp-message-bubble-tail-fill-width);background-color:var(--ax-comp-message-bubble-bg)}ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{width:var(--ax-comp-message-bubble-tail-cutout-width);background:var(--ax-comp-message-list-surface-bg, rgb(var(--ax-sys-color-primary-lightest-surface)))}ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system){border-bottom-left-radius:1rem;border-bottom-right-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system){border-bottom-right-radius:1rem;border-bottom-left-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:auto;right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:auto;right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:auto;left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:auto;left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-own .message-bubble{color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.35rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.35rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}.picker-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}.picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXFabComponent, selector: "ax-fab", inputs: ["label", "popupStyle", "popupPlacement", "size"], outputs: ["popupPlacementChange", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "fileType", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationMessageListComponent, isStandalone: true, selector: "ax-conversation-message-list", outputs: { messageAction: "messageAction" }, viewQueries: [{ propertyName: "reactionPopover", first: true, predicate: ["reactionPopover"], descendants: true, isSignal: true }, { propertyName: "messageListRef", first: true, predicate: ["messageList"], descendants: true, isSignal: true }, { propertyName: "messagesContainerRef", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation(); as conv) {\n  @if (conv.id) {\n    <div\n      class=\"message-list message-list--conversation-surface\"\n      [class.message-list--group]=\"isGroupConversation()\"\n      [class.message-list--drag]=\"messageListDragging()\"\n      #messageList\n      role=\"log\"\n      [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n      aria-live=\"polite\"\n      [style.background]=\"messageListBackgroundStyle()\"\n      [style.--ax-comp-message-list-surface-bg]=\"messageListBackgroundStyle()\"\n      axUploaderZone\n      [disableBrowse]=\"true\"\n      (dragEnter)=\"onMessageListDragEnter()\"\n      (dragLeave)=\"onMessageListDragLeave()\"\n      (fileChange)=\"onMessageListFilesDropped($event)\"\n    >\n      @if (loading()) {\n        <div\n          class=\"list-loading\"\n          role=\"status\"\n          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        </div>\n      } @else if (messages().length === 0) {\n        <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n          <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n            <ng-container\n              *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n            ></ng-container>\n          </ng-content>\n        </div>\n      } @else {\n        <div\n          class=\"messages-container\"\n          (scroll)=\"onScroll($event)\"\n          axInfiniteScroll\n          [threshold]=\"config.infiniteScrollThreshold\"\n          [edge]=\"'top'\"\n          [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n          (scrollThreshold)=\"onScrollThreshold($event)\"\n          #messagesContainer\n          role=\"feed\"\n          [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n        >\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--prepend\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{\n                '@acorex:chat.status.loading-older-messages' | translate | async\n              }}</ax-label>\n            </div>\n          }\n          @for (group of messageGroups(); track group.date) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track message.id) {\n              <div\n                [class]=\"getMessageClasses(message)\"\n                role=\"article\"\n                [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                [id]=\"'message-' + message.id\"\n              >\n                <!-- Avatar: group received in ping-pong; all senders in adaptive wide layout (CSS-controlled). -->\n                @if (shouldRenderAvatar(message)) {\n                  <div class=\"message-avatar\">\n                    <ax-conversation-avatar\n                      kind=\"user\"\n                      [userId]=\"message.senderId\"\n                      [conversation]=\"activeConversation()\"\n                      [message]=\"message\"\n                      [size]=\"32\"\n                    />\n                  </div>\n                }\n\n                <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                  @if (messageSupportsReactions(message)) {\n                    <button\n                      type=\"button\"\n                      class=\"add-reaction-button add-reaction-outside\"\n                      [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                      (click)=\"toggleReactionPicker(message, $event)\"\n                      [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                      #reactionButton\n                    >\n                      <i class=\"fa-light fa-face-smile\"></i>\n                    </button>\n                  }\n\n                  <div\n                    class=\"message-bubble-container\"\n                    [id]=\"'message-bubble-' + message.id\"\n                    [attr.data-message-id]=\"message.id\"\n                  >\n                    <div\n                      [class]=\"getBubbleClasses(message)\"\n                      [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                      [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                    >\n                      <!-- Sender name (only for group conversations and received messages) -->\n                      @if (shouldShowSenderName(message)) {\n                        <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                      }\n\n                      <!-- Reply Preview -->\n                      @if (message.replyTo) {\n                        <div\n                          class=\"reply-preview\"\n                          (click)=\"scrollToMessage(message.replyTo.id)\"\n                          role=\"button\"\n                          [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                          (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                          (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                        >\n                          <div class=\"reply-preview-content\">\n                            <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                            <div class=\"reply-preview-text\">\n                              @if (getMessagePreviewText(message.replyTo); as preview) {\n                                <span class=\"last-message\">\n                                  @if (preview.type !== 'text') {\n                                    <i [class]=\"preview.icon\"></i\n                                    >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                  } @else {\n                                    {{ preview.value }}\n                                  }\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Forwarded Indicator -->\n                      @if (message.forwarded) {\n                        <div class=\"forwarded-preview\">\n                          <i class=\"fa-solid fa-share\"></i>\n                          <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                        </div>\n                      }\n\n                      <ax-conversation-registry-component-outlet\n                        [component]=\"getRendererComponent(message)\"\n                        [componentLoader]=\"getRendererComponentLoader(message)\"\n                        [inputs]=\"getRendererInputs(message)\"\n                      />\n\n                      @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n                        <div class=\"message-reactions-container\">\n                          <div class=\"message-reactions-bubbles\">\n                            @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                              <button\n                                type=\"button\"\n                                class=\"reaction-bubble\"\n                                [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                (click)=\"onReactionClick(message, reaction.emoji)\"\n                                [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                              >\n                                <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                @if (reaction.count > 1) {\n                                  <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                }\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Message Footer -->\n                      <div class=\"message-footer\">\n                        @let replyCount = getReplyCount(message);\n                        @let forwardCount = getForwardCount(message);\n                        @if (replyCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n                            <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n                          </span>\n                        }\n                        @if (forwardCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n                            <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n                          </span>\n                        }\n                        @if (replyCount > 0 || forwardCount > 0) {\n                          <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                        }\n                        <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                        @if (message.editedAt) {\n                          <span class=\"edited-indicator\">\n                            <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                          </span>\n                        }\n                        @if (isOwnMessage(message)) {\n                          <span [class]=\"getStatusIconClasses(message)\">\n                            <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Context Menu for Message Actions -->\n                <ax-context-menu\n                  [target]=\"'#message-bubble-' + message.id\"\n                  [openOn]=\"'click'\"\n                  [closeOn]=\"'click'\"\n                  (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                  (onClose)=\"contextMenuMessageId.set(null)\"\n                  (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                >\n                </ax-context-menu>\n              </div>\n            }\n          }\n        </div>\n\n        <!-- Scroll to Bottom Button -->\n        @if (showScrollButton()) {\n          <div\n            class=\"scroll-to-bottom-wrapper\"\n            animate.enter=\"scroll-to-bottom-enter\"\n            animate.leave=\"scroll-to-bottom-leave\"\n          >\n            <ax-fab\n              class=\"scroll-to-bottom\"\n              (onClick)=\"scrollToBottom()\"\n              [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n            >\n              <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n            </ax-fab>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Reaction Picker Popover -->\n  @if (reactionsEnabled() && reactionPickerTarget()) {\n    <ax-popover\n      #reactionPopover\n      [target]=\"reactionPickerElement()\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"reactionPickerPlacement()\"\n      (onClose)=\"closeReactionPicker()\"\n    >\n      <div class=\"reaction-picker-popup\">\n        <div\n          class=\"reaction-picker-emojis\"\n          role=\"listbox\"\n          [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n        >\n          @for (emoji of availableReactions(); track emoji) {\n            <button\n              type=\"button\"\n              class=\"reaction-picker-emoji\"\n              [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n              (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n              [attr.aria-label]=\"emoji\"\n            >\n              {{ emoji }}\n            </button>\n          }\n        </div>\n      </div>\n    </ax-popover>\n  }\n} @else {\n  <div\n    class=\"message-list message-list--no-active\"\n    role=\"region\"\n    [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n  >\n    <div class=\"list-no-active\">\n      <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n        <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n      </ng-content>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;--ax-comp-message-bubble-tail-height: 1.5625rem;--ax-comp-message-bubble-tail-fill-width: 1.25rem;--ax-comp-message-bubble-tail-fill-offset: -.4375rem;--ax-comp-message-bubble-tail-cutout-width: 1.625rem;--ax-comp-message-bubble-tail-cutout-offset: -1.625rem;--ax-comp-message-bubble-tail-curve: 1rem 0rem;--ax-comp-message-bubble-tail-cutout-curve: .625rem;--ax-comp-message-list-adaptive-breakpoint: 52rem;--ax-comp-message-list-adaptive-column-max: 42rem;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-start;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .messages-skeleton{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{display:none;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-list--group .message-skeleton:not(.message-skeleton--own) .message-skeleton-avatar{display:block}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton{background-color:rgba(var(--ax-sys-color-on-surface),.16)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.22) 50%,transparent)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-on-surface),.08)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.14) 50%,transparent)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-primary-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-primary-900),.12)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-primary-surface),.2) 50%,transparent)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{z-index:5;display:none;flex-shrink:0}ax-conversation-message-list .message-list--group .message-item:not(.message-own) .message-avatar{display:block}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}ax-conversation-message-list .message-content-row:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:.375rem}ax-conversation-message-list .message-content-row-own:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:0;margin-inline-start:.375rem}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}@container (min-width: 52rem){ax-conversation-message-list .date-separator{justify-content:center;width:min(100%,var(--ax-comp-message-list-adaptive-column-max));max-width:var(--ax-comp-message-list-adaptive-column-max);padding-inline:1rem}ax-conversation-message-list .date-separator__label{width:auto;justify-content:center;text-align:center}ax-conversation-message-list .messages-skeleton{max-width:100%;align-items:flex-start;width:min(100%,var(--ax-comp-message-list-adaptive-column-max))}ax-conversation-message-list .message-skeleton--own{flex-direction:row}ax-conversation-message-list .message-skeleton-avatar,ax-conversation-message-list .message-avatar{display:block}ax-conversation-message-list .message-item{flex-direction:row;justify-content:flex-start;width:min(100%,var(--ax-comp-message-list-adaptive-column-max));max-width:var(--ax-comp-message-list-adaptive-column-max)}ax-conversation-message-list .message-item.message-own{flex-direction:row}ax-conversation-message-list .message-content-row,ax-conversation-message-list .message-content-row-own{max-width:100%;justify-content:flex-start}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-start}ax-conversation-message-list .message-bubble-sent:not(.message-system){border-end-end-radius:1rem;border-end-start-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{inset-inline-start:var(--ax-comp-message-bubble-tail-fill-offset);inset-inline-end:auto;border-end-end-radius:var(--ax-comp-message-bubble-tail-curve);border-end-start-radius:0}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{inset-inline-start:var(--ax-comp-message-bubble-tail-cutout-offset);inset-inline-end:auto;border-end-end-radius:var(--ax-comp-message-bubble-tail-cutout-curve);border-end-start-radius:0}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .message-bubble>*{position:relative;z-index:1}ax-conversation-message-list .reply-preview{margin-bottom:calc(var(--spacing, .25rem) * 2);cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-lightest-surface));background-color:var(--ax-comp-message-bubble-bg);border-end-start-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-primary-surface));background-color:var(--ax-comp-message-bubble-bg);color:rgb(var(--ax-sys-color-on-primary-surface));border-end-end-radius:.25rem}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{content:\"\";position:absolute;inset-block-end:0;height:var(--ax-comp-message-bubble-tail-height);pointer-events:none;z-index:0}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):before{width:var(--ax-comp-message-bubble-tail-fill-width);background-color:var(--ax-comp-message-bubble-bg)}ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{width:var(--ax-comp-message-bubble-tail-cutout-width);background:var(--ax-comp-message-list-surface-bg, rgb(var(--ax-sys-color-primary-lightest-surface)))}ax-conversation-message-list .message-bubble-received:not(.message-system):before{inset-inline-start:var(--ax-comp-message-bubble-tail-fill-offset);border-end-end-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-received:not(.message-system):after{inset-inline-start:var(--ax-comp-message-bubble-tail-cutout-offset);border-end-end-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{inset-inline-end:var(--ax-comp-message-bubble-tail-fill-offset);border-end-start-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{inset-inline-end:var(--ax-comp-message-bubble-tail-cutout-offset);border-end-start-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-own .message-bubble{color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}@container (min-width: 52rem){ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-start}}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.35rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.35rem;inset-inline-end:auto}@container (min-width: 52rem){ax-conversation-message-list .message-content-row-own:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-start:0;margin-inline-end:.375rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:auto;inset-inline-end:-2.35rem}}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(280px,92vw)}.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 1);padding:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.375rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXFabComponent, selector: "ax-fab", inputs: ["label", "popupStyle", "popupPlacement", "size"], outputs: ["popupPlacementChange", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "fileType", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListComponent, decorators: [{
             type: Component,
@@ -8983,7 +9055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXUploaderZoneDirective,
                         AXConversationAvatarComponent,
                         AXConversationRegistryComponentOutletComponent,
-                    ], template: "@if (activeConversation(); as conv) {\n  @if (conv.id) {\n    <div\n      class=\"message-list message-list--conversation-surface\"\n      [class.message-list--drag]=\"messageListDragging()\"\n      #messageList\n      role=\"log\"\n      [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n      aria-live=\"polite\"\n      [style.background]=\"messageListBackgroundStyle()\"\n      [style.--ax-comp-message-list-surface-bg]=\"messageListBackgroundStyle()\"\n      axUploaderZone\n      [disableBrowse]=\"true\"\n      (dragEnter)=\"onMessageListDragEnter()\"\n      (dragLeave)=\"onMessageListDragLeave()\"\n      (fileChange)=\"onMessageListFilesDropped($event)\"\n    >\n      @if (loading()) {\n        <div\n          class=\"list-loading\"\n          role=\"status\"\n          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                @if ($even && isGroupConversation()) {\n                  <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                }\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        </div>\n      } @else if (messages().length === 0) {\n        <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n          <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n            <ng-container\n              *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n            ></ng-container>\n          </ng-content>\n        </div>\n      } @else {\n        <div\n          class=\"messages-container\"\n          (scroll)=\"onScroll($event)\"\n          axInfiniteScroll\n          [threshold]=\"config.infiniteScrollThreshold\"\n          [edge]=\"'top'\"\n          [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n          (scrollThreshold)=\"onScrollThreshold($event)\"\n          #messagesContainer\n          role=\"feed\"\n          [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n        >\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--prepend\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{\n                '@acorex:chat.status.loading-older-messages' | translate | async\n              }}</ax-label>\n            </div>\n          }\n          @for (group of messageGroups(); track group.date) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track message.id) {\n              <div\n                [class]=\"getMessageClasses(message)\"\n                role=\"article\"\n                [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                [id]=\"'message-' + message.id\"\n              >\n                <!-- Avatar (only for group conversations and received messages) -->\n                @if (shouldShowAvatar(message)) {\n                  <div class=\"message-avatar\">\n                    <ax-conversation-avatar\n                      kind=\"user\"\n                      [userId]=\"message.senderId\"\n                      [conversation]=\"activeConversation()\"\n                      [message]=\"message\"\n                      [size]=\"32\"\n                    />\n                  </div>\n                }\n\n                <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                  @if (messageSupportsReactions(message)) {\n                    <button\n                      type=\"button\"\n                      class=\"add-reaction-button add-reaction-outside\"\n                      [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                      (click)=\"toggleReactionPicker(message, $event)\"\n                      [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                      #reactionButton\n                    >\n                      <i class=\"fa-light fa-face-smile\"></i>\n                    </button>\n                  }\n\n                  <div\n                    class=\"message-bubble-container\"\n                    [id]=\"'message-bubble-' + message.id\"\n                    [attr.data-message-id]=\"message.id\"\n                  >\n                    <div\n                      [class]=\"getBubbleClasses(message)\"\n                      [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                      [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                    >\n                      <!-- Sender name (only for group conversations and received messages) -->\n                      @if (shouldShowSenderName(message)) {\n                        <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                      }\n\n                      <!-- Reply Preview -->\n                      @if (message.replyTo) {\n                        <div\n                          class=\"reply-preview\"\n                          (click)=\"scrollToMessage(message.replyTo.id)\"\n                          role=\"button\"\n                          [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                          (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                          (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                        >\n                          <div class=\"reply-preview-content\">\n                            <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                            <div class=\"reply-preview-text\">\n                              @if (getMessagePreviewText(message.replyTo); as preview) {\n                                <span class=\"last-message\">\n                                  @if (preview.type !== 'text') {\n                                    <i [class]=\"preview.icon\"></i\n                                    >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                  } @else {\n                                    {{ preview.value }}\n                                  }\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Forwarded Indicator -->\n                      @if (message.forwarded) {\n                        <div class=\"forwarded-preview\">\n                          <i class=\"fa-solid fa-share\"></i>\n                          <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                        </div>\n                      }\n\n                      <ax-conversation-registry-component-outlet\n                        [component]=\"getRendererComponent(message)\"\n                        [componentLoader]=\"getRendererComponentLoader(message)\"\n                        [inputs]=\"getRendererInputs(message)\"\n                      />\n\n                      @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n                        <div class=\"message-reactions-container\">\n                          <div class=\"message-reactions-bubbles\">\n                            @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                              <button\n                                type=\"button\"\n                                class=\"reaction-bubble\"\n                                [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                (click)=\"onReactionClick(message, reaction.emoji)\"\n                                [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                              >\n                                <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                @if (reaction.count > 1) {\n                                  <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                }\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Message Footer -->\n                      <div class=\"message-footer\">\n                        @let replyCount = getReplyCount(message);\n                        @let forwardCount = getForwardCount(message);\n                        @if (replyCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n                            <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n                          </span>\n                        }\n                        @if (forwardCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n                            <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n                          </span>\n                        }\n                        @if (replyCount > 0 || forwardCount > 0) {\n                          <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                        }\n                        <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                        @if (message.editedAt) {\n                          <span class=\"edited-indicator\">\n                            <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                          </span>\n                        }\n                        @if (isOwnMessage(message)) {\n                          <span [class]=\"getStatusIconClasses(message)\">\n                            <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Context Menu for Message Actions -->\n                <ax-context-menu\n                  [target]=\"'#message-bubble-' + message.id\"\n                  [openOn]=\"'click'\"\n                  [closeOn]=\"'click'\"\n                  (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                  (onClose)=\"contextMenuMessageId.set(null)\"\n                  (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                >\n                </ax-context-menu>\n              </div>\n            }\n          }\n        </div>\n\n        <!-- Scroll to Bottom Button -->\n        @if (showScrollButton()) {\n          <div\n            class=\"scroll-to-bottom-wrapper\"\n            animate.enter=\"scroll-to-bottom-enter\"\n            animate.leave=\"scroll-to-bottom-leave\"\n          >\n            <ax-fab\n              class=\"scroll-to-bottom\"\n              (onClick)=\"scrollToBottom()\"\n              [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n            >\n              <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n            </ax-fab>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Reaction Picker Popover -->\n  @if (reactionsEnabled() && reactionPickerTarget()) {\n    <ax-popover\n      #reactionPopover\n      [target]=\"reactionPickerElement()\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"reactionPickerPlacement()\"\n      (onClose)=\"closeReactionPicker()\"\n    >\n      <div class=\"reaction-picker-popup\">\n        <div class=\"reaction-picker-header\">\n          <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n          <button\n            type=\"button\"\n            class=\"picker-close\"\n            (click)=\"closeReactionPicker()\"\n            [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n          >\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        </div>\n        <div\n          class=\"reaction-picker-emojis\"\n          role=\"listbox\"\n          [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n        >\n          @for (emoji of availableReactions(); track emoji) {\n            <button\n              type=\"button\"\n              class=\"reaction-picker-emoji\"\n              [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n              (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n              [attr.aria-label]=\"emoji\"\n            >\n              {{ emoji }}\n            </button>\n          }\n        </div>\n      </div>\n    </ax-popover>\n  }\n} @else {\n  <div\n    class=\"message-list message-list--no-active\"\n    role=\"region\"\n    [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n  >\n    <div class=\"list-no-active\">\n      <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n        <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n      </ng-content>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;--ax-comp-message-bubble-tail-height: 1.5625rem;--ax-comp-message-bubble-tail-fill-width: 1.25rem;--ax-comp-message-bubble-tail-fill-offset: -.4375rem;--ax-comp-message-bubble-tail-cutout-width: 1.625rem;--ax-comp-message-bubble-tail-cutout-offset: -1.625rem;--ax-comp-message-bubble-tail-curve: 1rem 0rem;--ax-comp-message-bubble-tail-cutout-curve: .625rem;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-start;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .messages-skeleton{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton{background-color:rgba(var(--ax-sys-color-on-surface),.16)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.22) 50%,transparent)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-on-surface),.08)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.14) 50%,transparent)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-primary-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-primary-900),.12)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-primary-surface),.2) 50%,transparent)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{z-index:5;flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}ax-conversation-message-list .message-content-row:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:.375rem}ax-conversation-message-list .message-content-row-own:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:0;margin-inline-start:.375rem}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .message-bubble>*{position:relative;z-index:1}ax-conversation-message-list .reply-preview{margin-bottom:calc(var(--spacing, .25rem) * 2);cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-lightest-surface));background-color:var(--ax-comp-message-bubble-bg);border-bottom-left-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-primary-surface));background-color:var(--ax-comp-message-bubble-bg);color:rgb(var(--ax-sys-color-on-primary-surface));border-bottom-right-radius:.25rem}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{content:\"\";position:absolute;bottom:0;height:var(--ax-comp-message-bubble-tail-height);pointer-events:none;z-index:0}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):before{width:var(--ax-comp-message-bubble-tail-fill-width);background-color:var(--ax-comp-message-bubble-bg)}ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{width:var(--ax-comp-message-bubble-tail-cutout-width);background:var(--ax-comp-message-list-surface-bg, rgb(var(--ax-sys-color-primary-lightest-surface)))}ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system){border-bottom-left-radius:1rem;border-bottom-right-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system){border-bottom-right-radius:1rem;border-bottom-left-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:auto;right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:auto;right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:auto;left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:auto;left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-own .message-bubble{color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.35rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.35rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}.picker-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}.picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (activeConversation(); as conv) {\n  @if (conv.id) {\n    <div\n      class=\"message-list message-list--conversation-surface\"\n      [class.message-list--group]=\"isGroupConversation()\"\n      [class.message-list--drag]=\"messageListDragging()\"\n      #messageList\n      role=\"log\"\n      [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n      aria-live=\"polite\"\n      [style.background]=\"messageListBackgroundStyle()\"\n      [style.--ax-comp-message-list-surface-bg]=\"messageListBackgroundStyle()\"\n      axUploaderZone\n      [disableBrowse]=\"true\"\n      (dragEnter)=\"onMessageListDragEnter()\"\n      (dragLeave)=\"onMessageListDragLeave()\"\n      (fileChange)=\"onMessageListFilesDropped($event)\"\n    >\n      @if (loading()) {\n        <div\n          class=\"list-loading\"\n          role=\"status\"\n          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        </div>\n      } @else if (messages().length === 0) {\n        <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n          <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n            <ng-container\n              *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n            ></ng-container>\n          </ng-content>\n        </div>\n      } @else {\n        <div\n          class=\"messages-container\"\n          (scroll)=\"onScroll($event)\"\n          axInfiniteScroll\n          [threshold]=\"config.infiniteScrollThreshold\"\n          [edge]=\"'top'\"\n          [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n          (scrollThreshold)=\"onScrollThreshold($event)\"\n          #messagesContainer\n          role=\"feed\"\n          [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n        >\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--prepend\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{\n                '@acorex:chat.status.loading-older-messages' | translate | async\n              }}</ax-label>\n            </div>\n          }\n          @for (group of messageGroups(); track group.date) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track message.id) {\n              <div\n                [class]=\"getMessageClasses(message)\"\n                role=\"article\"\n                [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                [id]=\"'message-' + message.id\"\n              >\n                <!-- Avatar: group received in ping-pong; all senders in adaptive wide layout (CSS-controlled). -->\n                @if (shouldRenderAvatar(message)) {\n                  <div class=\"message-avatar\">\n                    <ax-conversation-avatar\n                      kind=\"user\"\n                      [userId]=\"message.senderId\"\n                      [conversation]=\"activeConversation()\"\n                      [message]=\"message\"\n                      [size]=\"32\"\n                    />\n                  </div>\n                }\n\n                <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                  @if (messageSupportsReactions(message)) {\n                    <button\n                      type=\"button\"\n                      class=\"add-reaction-button add-reaction-outside\"\n                      [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                      (click)=\"toggleReactionPicker(message, $event)\"\n                      [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                      #reactionButton\n                    >\n                      <i class=\"fa-light fa-face-smile\"></i>\n                    </button>\n                  }\n\n                  <div\n                    class=\"message-bubble-container\"\n                    [id]=\"'message-bubble-' + message.id\"\n                    [attr.data-message-id]=\"message.id\"\n                  >\n                    <div\n                      [class]=\"getBubbleClasses(message)\"\n                      [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                      [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                    >\n                      <!-- Sender name (only for group conversations and received messages) -->\n                      @if (shouldShowSenderName(message)) {\n                        <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                      }\n\n                      <!-- Reply Preview -->\n                      @if (message.replyTo) {\n                        <div\n                          class=\"reply-preview\"\n                          (click)=\"scrollToMessage(message.replyTo.id)\"\n                          role=\"button\"\n                          [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                          (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                          (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                        >\n                          <div class=\"reply-preview-content\">\n                            <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                            <div class=\"reply-preview-text\">\n                              @if (getMessagePreviewText(message.replyTo); as preview) {\n                                <span class=\"last-message\">\n                                  @if (preview.type !== 'text') {\n                                    <i [class]=\"preview.icon\"></i\n                                    >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                  } @else {\n                                    {{ preview.value }}\n                                  }\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Forwarded Indicator -->\n                      @if (message.forwarded) {\n                        <div class=\"forwarded-preview\">\n                          <i class=\"fa-solid fa-share\"></i>\n                          <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                        </div>\n                      }\n\n                      <ax-conversation-registry-component-outlet\n                        [component]=\"getRendererComponent(message)\"\n                        [componentLoader]=\"getRendererComponentLoader(message)\"\n                        [inputs]=\"getRendererInputs(message)\"\n                      />\n\n                      @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n                        <div class=\"message-reactions-container\">\n                          <div class=\"message-reactions-bubbles\">\n                            @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                              <button\n                                type=\"button\"\n                                class=\"reaction-bubble\"\n                                [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                (click)=\"onReactionClick(message, reaction.emoji)\"\n                                [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                              >\n                                <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                @if (reaction.count > 1) {\n                                  <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                }\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Message Footer -->\n                      <div class=\"message-footer\">\n                        @let replyCount = getReplyCount(message);\n                        @let forwardCount = getForwardCount(message);\n                        @if (replyCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n                            <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n                          </span>\n                        }\n                        @if (forwardCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n                            <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n                          </span>\n                        }\n                        @if (replyCount > 0 || forwardCount > 0) {\n                          <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                        }\n                        <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                        @if (message.editedAt) {\n                          <span class=\"edited-indicator\">\n                            <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                          </span>\n                        }\n                        @if (isOwnMessage(message)) {\n                          <span [class]=\"getStatusIconClasses(message)\">\n                            <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Context Menu for Message Actions -->\n                <ax-context-menu\n                  [target]=\"'#message-bubble-' + message.id\"\n                  [openOn]=\"'click'\"\n                  [closeOn]=\"'click'\"\n                  (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                  (onClose)=\"contextMenuMessageId.set(null)\"\n                  (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                >\n                </ax-context-menu>\n              </div>\n            }\n          }\n        </div>\n\n        <!-- Scroll to Bottom Button -->\n        @if (showScrollButton()) {\n          <div\n            class=\"scroll-to-bottom-wrapper\"\n            animate.enter=\"scroll-to-bottom-enter\"\n            animate.leave=\"scroll-to-bottom-leave\"\n          >\n            <ax-fab\n              class=\"scroll-to-bottom\"\n              (onClick)=\"scrollToBottom()\"\n              [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n            >\n              <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n            </ax-fab>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Reaction Picker Popover -->\n  @if (reactionsEnabled() && reactionPickerTarget()) {\n    <ax-popover\n      #reactionPopover\n      [target]=\"reactionPickerElement()\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"reactionPickerPlacement()\"\n      (onClose)=\"closeReactionPicker()\"\n    >\n      <div class=\"reaction-picker-popup\">\n        <div\n          class=\"reaction-picker-emojis\"\n          role=\"listbox\"\n          [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n        >\n          @for (emoji of availableReactions(); track emoji) {\n            <button\n              type=\"button\"\n              class=\"reaction-picker-emoji\"\n              [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n              (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n              [attr.aria-label]=\"emoji\"\n            >\n              {{ emoji }}\n            </button>\n          }\n        </div>\n      </div>\n    </ax-popover>\n  }\n} @else {\n  <div\n    class=\"message-list message-list--no-active\"\n    role=\"region\"\n    [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n  >\n    <div class=\"list-no-active\">\n      <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n        <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n      </ng-content>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;--ax-comp-message-bubble-tail-height: 1.5625rem;--ax-comp-message-bubble-tail-fill-width: 1.25rem;--ax-comp-message-bubble-tail-fill-offset: -.4375rem;--ax-comp-message-bubble-tail-cutout-width: 1.625rem;--ax-comp-message-bubble-tail-cutout-offset: -1.625rem;--ax-comp-message-bubble-tail-curve: 1rem 0rem;--ax-comp-message-bubble-tail-cutout-curve: .625rem;--ax-comp-message-list-adaptive-breakpoint: 52rem;--ax-comp-message-list-adaptive-column-max: 42rem;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-start;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .messages-skeleton{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{display:none;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-list--group .message-skeleton:not(.message-skeleton--own) .message-skeleton-avatar{display:block}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton{background-color:rgba(var(--ax-sys-color-on-surface),.16)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-avatar.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.22) 50%,transparent)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-on-surface),.08)}ax-conversation-message-list .messages-skeleton ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-surface),.14) 50%,transparent)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton{background-color:rgb(var(--ax-sys-color-primary-surface));box-shadow:0 1px 2px rgba(var(--ax-sys-color-primary-900),.12)}ax-conversation-message-list .message-skeleton--own ax-skeleton.message-skeleton-bubble.ax-skeleton-animate:before{background-image:linear-gradient(to right,transparent,rgba(var(--ax-sys-color-on-primary-surface),.2) 50%,transparent)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{z-index:5;display:none;flex-shrink:0}ax-conversation-message-list .message-list--group .message-item:not(.message-own) .message-avatar{display:block}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}ax-conversation-message-list .message-content-row:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:.375rem}ax-conversation-message-list .message-content-row-own:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-end:0;margin-inline-start:.375rem}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}@container (min-width: 52rem){ax-conversation-message-list .date-separator{justify-content:center;width:min(100%,var(--ax-comp-message-list-adaptive-column-max));max-width:var(--ax-comp-message-list-adaptive-column-max);padding-inline:1rem}ax-conversation-message-list .date-separator__label{width:auto;justify-content:center;text-align:center}ax-conversation-message-list .messages-skeleton{max-width:100%;align-items:flex-start;width:min(100%,var(--ax-comp-message-list-adaptive-column-max))}ax-conversation-message-list .message-skeleton--own{flex-direction:row}ax-conversation-message-list .message-skeleton-avatar,ax-conversation-message-list .message-avatar{display:block}ax-conversation-message-list .message-item{flex-direction:row;justify-content:flex-start;width:min(100%,var(--ax-comp-message-list-adaptive-column-max));max-width:var(--ax-comp-message-list-adaptive-column-max)}ax-conversation-message-list .message-item.message-own{flex-direction:row}ax-conversation-message-list .message-content-row,ax-conversation-message-list .message-content-row-own{max-width:100%;justify-content:flex-start}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-start}ax-conversation-message-list .message-bubble-sent:not(.message-system){border-end-end-radius:1rem;border-end-start-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{inset-inline-start:var(--ax-comp-message-bubble-tail-fill-offset);inset-inline-end:auto;border-end-end-radius:var(--ax-comp-message-bubble-tail-curve);border-end-start-radius:0}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{inset-inline-start:var(--ax-comp-message-bubble-tail-cutout-offset);inset-inline-end:auto;border-end-end-radius:var(--ax-comp-message-bubble-tail-cutout-curve);border-end-start-radius:0}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .message-bubble>*{position:relative;z-index:1}ax-conversation-message-list .reply-preview{margin-bottom:calc(var(--spacing, .25rem) * 2);cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-lightest-surface));background-color:var(--ax-comp-message-bubble-bg);border-end-start-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-primary-surface));background-color:var(--ax-comp-message-bubble-bg);color:rgb(var(--ax-sys-color-on-primary-surface));border-end-end-radius:.25rem}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{content:\"\";position:absolute;inset-block-end:0;height:var(--ax-comp-message-bubble-tail-height);pointer-events:none;z-index:0}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):before{width:var(--ax-comp-message-bubble-tail-fill-width);background-color:var(--ax-comp-message-bubble-bg)}ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{width:var(--ax-comp-message-bubble-tail-cutout-width);background:var(--ax-comp-message-list-surface-bg, rgb(var(--ax-sys-color-primary-lightest-surface)))}ax-conversation-message-list .message-bubble-received:not(.message-system):before{inset-inline-start:var(--ax-comp-message-bubble-tail-fill-offset);border-end-end-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-received:not(.message-system):after{inset-inline-start:var(--ax-comp-message-bubble-tail-cutout-offset);border-end-end-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{inset-inline-end:var(--ax-comp-message-bubble-tail-fill-offset);border-end-start-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{inset-inline-end:var(--ax-comp-message-bubble-tail-cutout-offset);border-end-start-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-own .message-bubble{color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}@container (min-width: 52rem){ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-start}}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.35rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.35rem;inset-inline-end:auto}@container (min-width: 52rem){ax-conversation-message-list .message-content-row-own:has(.add-reaction-button.add-reaction-outside) .message-bubble-container{margin-inline-start:0;margin-inline-end:.375rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:auto;inset-inline-end:-2.35rem}}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(280px,92vw)}.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 1);padding:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.375rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { reactionPopover: [{ type: i0.ViewChild, args: ['reactionPopover', { isSignal: true }] }], messageListRef: [{ type: i0.ViewChild, args: ['messageList', { isSignal: true }] }], messagesContainerRef: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }], messageAction: [{ type: i0.Output, args: ["messageAction"] }] } });
 
 /**
@@ -9337,10 +9409,12 @@ class AXConversationSidebarComponent {
         this.loading = this.sidebar.loading;
         this.loadingMore = this.sidebar.loadingMore;
         this.hasMoreConversations = this.sidebar.hasMoreConversations;
+        this.isSidebarTabsHorizontal = computed(() => this.config.sidebarTabsOrientation === 'horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSidebarTabsHorizontal" }] : /* istanbul ignore next */ []));
+        this.sidebarTabLocation = computed(() => (this.isSidebarTabsHorizontal() ? 'start' : 'bottom'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebarTabLocation" }] : /* istanbul ignore next */ []));
         // Setup debounced search
-        this.searchSubject
-            .pipe(debounceTime(this.config.debounceSearch), distinctUntilChanged())
-            .subscribe((query) => {
+        this.searchSubject.pipe(debounceTime(this.config.debounceSearch), distinctUntilChanged()).subscribe((query) => {
             this.sidebar.setSearchQuery(query);
         });
     }
@@ -9398,7 +9472,7 @@ class AXConversationSidebarComponent {
         this.searchSubject.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationSidebarComponent, isStandalone: true, selector: "ax-conversation-sidebar", outputs: { conversationSelected: "conversationSelected" }, ngImport: i0, template: "    <div class=\"sidebar\">\n      <!-- Header with Menu and Search -->\n      <div class=\"sidebar-header\">\n        <!-- <ax-button [look]=\"'outline'\" [size]=\"'md'\"  class=\"menu-button\">\n          <i class=\"fa-light fa-bars\"></i>\n        </ax-button> -->\n        <div class=\"sidebar-search\">\n          <ax-search-box\n            [value]=\"sidebar.searchQuery()\"\n            (valueChange)=\"onSearchChange($event)\"\n            [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n          ></ax-search-box>\n        </div>\n      </div>\n\n      <!-- Tabs -->\n      <ax-tabs (onActiveTabChanged)=\"onTabChange($event)\" [look]=\"'with-line'\" [style.overflow]=\"'hidden'\">\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item [text]=\"getTabLabel(tab.id)\" [key]=\"tab.id\">\n            @if (tab.icon) {\n              <ax-prefix>\n                <ax-icon>\n                  <i [class]=\"'tab-icon ' + tab.icon\" aria-hidden=\"true\"></i>\n                </ax-icon>\n              </ax-prefix>\n            }\n            @if (tab.badge && getBadgeValue(tab.id); as badgeText) {\n              <ax-suffix>\n                <ax-badge [text]=\"badgeText\" [color]=\"'primary'\" />\n              </ax-suffix>\n            }\n          </ax-tab-item>\n        }\n      </ax-tabs>\n\n      <!-- Conversation List -->\n      <div\n        class=\"sidebar-list\"\n        axInfiniteScroll\n        [threshold]=\"config.infiniteScrollThreshold\"\n        [edge]=\"'bottom'\"\n        [scrollDisabled]=\"loading() || loadingMore() || !hasMoreConversations()\"\n        (scrollThreshold)=\"onScrollThreshold($event)\"\n      >\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          @for (i of [1, 2, 3, 4]; track i) {\n            <div class=\"conversation-skeleton\">\n              <ax-skeleton class=\"skeleton-avatar\"></ax-skeleton>\n              <div class=\"skeleton-content\">\n                <div class=\"skeleton-header\">\n                  <ax-skeleton class=\"skeleton-title\"></ax-skeleton>\n                  <ax-skeleton class=\"skeleton-time\"></ax-skeleton>\n                </div>\n                <ax-skeleton class=\"skeleton-message\"></ax-skeleton>\n              </div>\n            </div>\n          }\n        } @else if (filteredConversations().length === 0) {\n          <div class=\"list-empty\">\n            <div class=\"empty-icon\"><i class=\"fa-light fa-comments\"></i></div>\n            <h3 class=\"empty-title\">{{ '@acorex:chat.sidebar.empty-title' | translate | async }}</h3>\n            <p class=\"empty-description\">\n              @if (sidebar.searchQuery()) {\n                {{ '@acorex:chat.sidebar.empty-search' | translate | async }}\n              } @else {\n                {{ '@acorex:chat.sidebar.empty-default' | translate | async }}\n              }\n            </p>\n          </div>\n        } @else {\n          @for (conversation of filteredConversations(); track conversation.id) {\n            <ax-conversation-item [conversation]=\"conversation\" (clicked)=\"selectConversation($event)\" />\n          }\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--append\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-more' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{ '@acorex:chat.status.loading-more' | translate | async }}</ax-label>\n            </div>\n          }\n        }\n      </div>\n\n      <div class=\"new-conversation-button-container\">\n        <ng-content select=\"ax-suffix\">\n          <div class=\"new-conversation-button-container-inner\">\n            <ax-button\n              class=\"new-conversation-btn\"\n              [text]=\"'@acorex:chat.actions.new-conversation' | translate | async\"\n              [look]=\"'solid'\"\n              (onClick)=\"openNewConversationPopup()\"\n            ></ax-button>\n          </div>\n        </ng-content>\n      </div>\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-sidebar{display:block;height:100%;width:100%;@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterAppend{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeaveAppend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.35rem)}}}ax-conversation-sidebar .sidebar{position:relative;display:flex;height:100%;flex-direction:column}ax-conversation-sidebar .sidebar-header{display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-sidebar .menu-button{flex-shrink:0}ax-conversation-sidebar .sidebar-search{flex:1}ax-conversation-sidebar .sidebar-list{position:relative;flex:1;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 16)}ax-conversation-sidebar .new-conversation-button-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);inset-inline-end:calc(var(--spacing, .25rem) * 1);bottom:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .new-conversation-button-container-inner{display:flex;align-items:center;justify-content:center}ax-conversation-sidebar .list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:4rem;--tw-leading: 1;line-height:1;opacity:50%}ax-conversation-sidebar .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:300px;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-sidebar .empty-action{margin-top:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-sidebar .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-sidebar .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-sidebar .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-sidebar .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-sidebar .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-sidebar .load-more-enter{animation:axChatLoadMoreEnterAppend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-sidebar .load-more-leave{animation:axChatLoadMoreLeaveAppend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-sidebar .load-more-dot{animation:none;opacity:.65}ax-conversation-sidebar .load-more-enter,ax-conversation-sidebar .load-more-leave{animation:none}}ax-conversation-sidebar .tab-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-sidebar .conversation-skeleton{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-sidebar .skeleton-avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-sidebar .skeleton-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-title{height:calc(var(--spacing, .25rem) * 4);flex:1;border-radius:.25rem}ax-conversation-sidebar .skeleton-time{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 12);border-radius:.25rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-sidebar .skeleton-message{height:calc(var(--spacing, .25rem) * 3);width:80%;border-radius:.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationItemComponent, selector: "ax-conversation-item", inputs: ["conversation"], outputs: ["clicked"] }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationSidebarComponent, isStandalone: true, selector: "ax-conversation-sidebar", outputs: { conversationSelected: "conversationSelected" }, ngImport: i0, template: "<div class=\"sidebar\" [class.sidebar--tabs-horizontal]=\"isSidebarTabsHorizontal()\">\n  <!-- Header with Menu and Search -->\n  <div class=\"sidebar-header\">\n    <!-- <ax-button [look]=\"'outline'\" [size]=\"'md'\"  class=\"menu-button\">\n          <i class=\"fa-light fa-bars\"></i>\n        </ax-button> -->\n    <div class=\"sidebar-search\">\n      <ax-search-box\n        [value]=\"sidebar.searchQuery()\"\n        (valueChange)=\"onSearchChange($event)\"\n        [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n        class=\"rounded-full\"\n      ></ax-search-box>\n    </div>\n  </div>\n\n  <div class=\"sidebar-body\" [class.sidebar-body--tabs-horizontal]=\"isSidebarTabsHorizontal()\">\n    <!-- Tabs -->\n    <div class=\"sidebar-tabs\">\n      <ax-tabs\n        (onActiveTabChanged)=\"onTabChange($event)\"\n        [look]=\"'with-line'\"\n        [location]=\"sidebarTabLocation()\"\n        [style.overflow]=\"'hidden'\"\n        [class]=\"sidebarTabLocation() && 'surface'\"\n      >\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item\n            [text]=\"getTabLabel(tab.id)\"\n            [key]=\"tab.id\"\n            [class]=\"sidebarTabLocation() === 'start' && 'limitedTab'\"\n          >\n            @if (tab.icon) {\n              <ax-prefix>\n                <ax-icon>\n                  <i [class]=\"'tab-icon ' + tab.icon\" aria-hidden=\"true\"></i>\n                </ax-icon>\n              </ax-prefix>\n            }\n            @if (tab.badge && getBadgeValue(tab.id); as badgeText) {\n              <ax-suffix>\n                <ax-badge [text]=\"badgeText\" [color]=\"'primary'\" />\n              </ax-suffix>\n            }\n          </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n\n    <div class=\"sidebar-main\">\n      <!-- Conversation List -->\n      <div\n        class=\"sidebar-list\"\n        axInfiniteScroll\n        [threshold]=\"config.infiniteScrollThreshold\"\n        [edge]=\"'bottom'\"\n        [scrollDisabled]=\"loading() || loadingMore() || !hasMoreConversations()\"\n        (scrollThreshold)=\"onScrollThreshold($event)\"\n      >\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          @for (i of [1, 2, 3, 4]; track i) {\n            <div class=\"conversation-skeleton\">\n              <ax-skeleton class=\"skeleton-avatar\"></ax-skeleton>\n              <div class=\"skeleton-content\">\n                <div class=\"skeleton-header\">\n                  <ax-skeleton class=\"skeleton-title\"></ax-skeleton>\n                  <ax-skeleton class=\"skeleton-time\"></ax-skeleton>\n                </div>\n                <ax-skeleton class=\"skeleton-message\"></ax-skeleton>\n              </div>\n            </div>\n          }\n        } @else if (filteredConversations().length === 0) {\n          <div class=\"list-empty\">\n            <div class=\"empty-icon\"><i class=\"fa-light fa-comments\"></i></div>\n            <h3 class=\"empty-title\">{{ '@acorex:chat.sidebar.empty-title' | translate | async }}</h3>\n            <p class=\"empty-description\">\n              @if (sidebar.searchQuery()) {\n                {{ '@acorex:chat.sidebar.empty-search' | translate | async }}\n              } @else {\n                {{ '@acorex:chat.sidebar.empty-default' | translate | async }}\n              }\n            </p>\n          </div>\n        } @else {\n          @for (conversation of filteredConversations(); track conversation.id) {\n            <ax-conversation-item [conversation]=\"conversation\" (clicked)=\"selectConversation($event)\" />\n          }\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--append\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-more' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{ '@acorex:chat.status.loading-more' | translate | async }}</ax-label>\n            </div>\n          }\n        }\n      </div>\n\n      <div class=\"new-conversation-button-container\">\n        <ng-content select=\"ax-suffix\">\n          <div class=\"new-conversation-button-container-inner\">\n            <ax-button\n              class=\"new-conversation-btn\"\n              [text]=\"'@acorex:chat.actions.new-conversation' | translate | async\"\n              [look]=\"'solid'\"\n              (onClick)=\"openNewConversationPopup()\"\n            ></ax-button>\n          </div>\n        </ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-sidebar{display:block;height:100%;width:100%;@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterAppend{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeaveAppend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.35rem)}}}ax-conversation-sidebar .limitedTab{width:calc(var(--spacing, .25rem) * 16)!important;padding:calc(var(--spacing, .25rem) * 1)!important;font-size:var(--text-xs, .75rem)!important;line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))!important}ax-conversation-sidebar .sidebar{position:relative;display:flex;height:100%;flex-direction:column}ax-conversation-sidebar .sidebar-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .menu-button{flex-shrink:0}ax-conversation-sidebar .sidebar-search{flex:1}ax-conversation-sidebar .sidebar-body{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-sidebar .sidebar-body--tabs-horizontal{flex-direction:row}ax-conversation-sidebar .sidebar-tabs{flex-shrink:0}ax-conversation-sidebar .sidebar-body--tabs-horizontal .sidebar-tabs{height:100%}ax-conversation-sidebar .sidebar-body--tabs-horizontal .sidebar-tabs ax-tabs{height:100%;width:auto}ax-conversation-sidebar .sidebar-main{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-sidebar .sidebar-list{position:relative;flex:1;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 16)}ax-conversation-sidebar .new-conversation-button-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);inset-inline-end:calc(var(--spacing, .25rem) * 1);bottom:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .new-conversation-button-container-inner{display:flex;align-items:center;justify-content:center}ax-conversation-sidebar .list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:4rem;--tw-leading: 1;line-height:1;opacity:50%}ax-conversation-sidebar .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:300px;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-sidebar .empty-action{margin-top:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-sidebar .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-sidebar .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-sidebar .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-sidebar .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-sidebar .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-sidebar .load-more-enter{animation:axChatLoadMoreEnterAppend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-sidebar .load-more-leave{animation:axChatLoadMoreLeaveAppend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-sidebar .load-more-dot{animation:none;opacity:.65}ax-conversation-sidebar .load-more-enter,ax-conversation-sidebar .load-more-leave{animation:none}}ax-conversation-sidebar .tab-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-sidebar .conversation-skeleton{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-sidebar .skeleton-avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-sidebar .skeleton-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-title{height:calc(var(--spacing, .25rem) * 4);flex:1;border-radius:.25rem}ax-conversation-sidebar .skeleton-time{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 12);border-radius:.25rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-sidebar .skeleton-message{height:calc(var(--spacing, .25rem) * 3);width:80%;border-radius:.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationItemComponent, selector: "ax-conversation-item", inputs: ["conversation"], outputs: ["clicked"] }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationSidebarComponent, decorators: [{
             type: Component,
@@ -9415,7 +9489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTranslationModule,
                         AXConversationItemComponent,
                         AXConversationInfiniteScrollDirective,
-                    ], template: "    <div class=\"sidebar\">\n      <!-- Header with Menu and Search -->\n      <div class=\"sidebar-header\">\n        <!-- <ax-button [look]=\"'outline'\" [size]=\"'md'\"  class=\"menu-button\">\n          <i class=\"fa-light fa-bars\"></i>\n        </ax-button> -->\n        <div class=\"sidebar-search\">\n          <ax-search-box\n            [value]=\"sidebar.searchQuery()\"\n            (valueChange)=\"onSearchChange($event)\"\n            [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n          ></ax-search-box>\n        </div>\n      </div>\n\n      <!-- Tabs -->\n      <ax-tabs (onActiveTabChanged)=\"onTabChange($event)\" [look]=\"'with-line'\" [style.overflow]=\"'hidden'\">\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item [text]=\"getTabLabel(tab.id)\" [key]=\"tab.id\">\n            @if (tab.icon) {\n              <ax-prefix>\n                <ax-icon>\n                  <i [class]=\"'tab-icon ' + tab.icon\" aria-hidden=\"true\"></i>\n                </ax-icon>\n              </ax-prefix>\n            }\n            @if (tab.badge && getBadgeValue(tab.id); as badgeText) {\n              <ax-suffix>\n                <ax-badge [text]=\"badgeText\" [color]=\"'primary'\" />\n              </ax-suffix>\n            }\n          </ax-tab-item>\n        }\n      </ax-tabs>\n\n      <!-- Conversation List -->\n      <div\n        class=\"sidebar-list\"\n        axInfiniteScroll\n        [threshold]=\"config.infiniteScrollThreshold\"\n        [edge]=\"'bottom'\"\n        [scrollDisabled]=\"loading() || loadingMore() || !hasMoreConversations()\"\n        (scrollThreshold)=\"onScrollThreshold($event)\"\n      >\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          @for (i of [1, 2, 3, 4]; track i) {\n            <div class=\"conversation-skeleton\">\n              <ax-skeleton class=\"skeleton-avatar\"></ax-skeleton>\n              <div class=\"skeleton-content\">\n                <div class=\"skeleton-header\">\n                  <ax-skeleton class=\"skeleton-title\"></ax-skeleton>\n                  <ax-skeleton class=\"skeleton-time\"></ax-skeleton>\n                </div>\n                <ax-skeleton class=\"skeleton-message\"></ax-skeleton>\n              </div>\n            </div>\n          }\n        } @else if (filteredConversations().length === 0) {\n          <div class=\"list-empty\">\n            <div class=\"empty-icon\"><i class=\"fa-light fa-comments\"></i></div>\n            <h3 class=\"empty-title\">{{ '@acorex:chat.sidebar.empty-title' | translate | async }}</h3>\n            <p class=\"empty-description\">\n              @if (sidebar.searchQuery()) {\n                {{ '@acorex:chat.sidebar.empty-search' | translate | async }}\n              } @else {\n                {{ '@acorex:chat.sidebar.empty-default' | translate | async }}\n              }\n            </p>\n          </div>\n        } @else {\n          @for (conversation of filteredConversations(); track conversation.id) {\n            <ax-conversation-item [conversation]=\"conversation\" (clicked)=\"selectConversation($event)\" />\n          }\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--append\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-more' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{ '@acorex:chat.status.loading-more' | translate | async }}</ax-label>\n            </div>\n          }\n        }\n      </div>\n\n      <div class=\"new-conversation-button-container\">\n        <ng-content select=\"ax-suffix\">\n          <div class=\"new-conversation-button-container-inner\">\n            <ax-button\n              class=\"new-conversation-btn\"\n              [text]=\"'@acorex:chat.actions.new-conversation' | translate | async\"\n              [look]=\"'solid'\"\n              (onClick)=\"openNewConversationPopup()\"\n            ></ax-button>\n          </div>\n        </ng-content>\n      </div>\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-sidebar{display:block;height:100%;width:100%;@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterAppend{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeaveAppend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.35rem)}}}ax-conversation-sidebar .sidebar{position:relative;display:flex;height:100%;flex-direction:column}ax-conversation-sidebar .sidebar-header{display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-sidebar .menu-button{flex-shrink:0}ax-conversation-sidebar .sidebar-search{flex:1}ax-conversation-sidebar .sidebar-list{position:relative;flex:1;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 16)}ax-conversation-sidebar .new-conversation-button-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);inset-inline-end:calc(var(--spacing, .25rem) * 1);bottom:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .new-conversation-button-container-inner{display:flex;align-items:center;justify-content:center}ax-conversation-sidebar .list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:4rem;--tw-leading: 1;line-height:1;opacity:50%}ax-conversation-sidebar .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:300px;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-sidebar .empty-action{margin-top:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-sidebar .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-sidebar .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-sidebar .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-sidebar .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-sidebar .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-sidebar .load-more-enter{animation:axChatLoadMoreEnterAppend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-sidebar .load-more-leave{animation:axChatLoadMoreLeaveAppend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-sidebar .load-more-dot{animation:none;opacity:.65}ax-conversation-sidebar .load-more-enter,ax-conversation-sidebar .load-more-leave{animation:none}}ax-conversation-sidebar .tab-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-sidebar .conversation-skeleton{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-sidebar .skeleton-avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-sidebar .skeleton-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-title{height:calc(var(--spacing, .25rem) * 4);flex:1;border-radius:.25rem}ax-conversation-sidebar .skeleton-time{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 12);border-radius:.25rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-sidebar .skeleton-message{height:calc(var(--spacing, .25rem) * 3);width:80%;border-radius:.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"sidebar\" [class.sidebar--tabs-horizontal]=\"isSidebarTabsHorizontal()\">\n  <!-- Header with Menu and Search -->\n  <div class=\"sidebar-header\">\n    <!-- <ax-button [look]=\"'outline'\" [size]=\"'md'\"  class=\"menu-button\">\n          <i class=\"fa-light fa-bars\"></i>\n        </ax-button> -->\n    <div class=\"sidebar-search\">\n      <ax-search-box\n        [value]=\"sidebar.searchQuery()\"\n        (valueChange)=\"onSearchChange($event)\"\n        [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n        class=\"rounded-full\"\n      ></ax-search-box>\n    </div>\n  </div>\n\n  <div class=\"sidebar-body\" [class.sidebar-body--tabs-horizontal]=\"isSidebarTabsHorizontal()\">\n    <!-- Tabs -->\n    <div class=\"sidebar-tabs\">\n      <ax-tabs\n        (onActiveTabChanged)=\"onTabChange($event)\"\n        [look]=\"'with-line'\"\n        [location]=\"sidebarTabLocation()\"\n        [style.overflow]=\"'hidden'\"\n        [class]=\"sidebarTabLocation() && 'surface'\"\n      >\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item\n            [text]=\"getTabLabel(tab.id)\"\n            [key]=\"tab.id\"\n            [class]=\"sidebarTabLocation() === 'start' && 'limitedTab'\"\n          >\n            @if (tab.icon) {\n              <ax-prefix>\n                <ax-icon>\n                  <i [class]=\"'tab-icon ' + tab.icon\" aria-hidden=\"true\"></i>\n                </ax-icon>\n              </ax-prefix>\n            }\n            @if (tab.badge && getBadgeValue(tab.id); as badgeText) {\n              <ax-suffix>\n                <ax-badge [text]=\"badgeText\" [color]=\"'primary'\" />\n              </ax-suffix>\n            }\n          </ax-tab-item>\n        }\n      </ax-tabs>\n    </div>\n\n    <div class=\"sidebar-main\">\n      <!-- Conversation List -->\n      <div\n        class=\"sidebar-list\"\n        axInfiniteScroll\n        [threshold]=\"config.infiniteScrollThreshold\"\n        [edge]=\"'bottom'\"\n        [scrollDisabled]=\"loading() || loadingMore() || !hasMoreConversations()\"\n        (scrollThreshold)=\"onScrollThreshold($event)\"\n      >\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          @for (i of [1, 2, 3, 4]; track i) {\n            <div class=\"conversation-skeleton\">\n              <ax-skeleton class=\"skeleton-avatar\"></ax-skeleton>\n              <div class=\"skeleton-content\">\n                <div class=\"skeleton-header\">\n                  <ax-skeleton class=\"skeleton-title\"></ax-skeleton>\n                  <ax-skeleton class=\"skeleton-time\"></ax-skeleton>\n                </div>\n                <ax-skeleton class=\"skeleton-message\"></ax-skeleton>\n              </div>\n            </div>\n          }\n        } @else if (filteredConversations().length === 0) {\n          <div class=\"list-empty\">\n            <div class=\"empty-icon\"><i class=\"fa-light fa-comments\"></i></div>\n            <h3 class=\"empty-title\">{{ '@acorex:chat.sidebar.empty-title' | translate | async }}</h3>\n            <p class=\"empty-description\">\n              @if (sidebar.searchQuery()) {\n                {{ '@acorex:chat.sidebar.empty-search' | translate | async }}\n              } @else {\n                {{ '@acorex:chat.sidebar.empty-default' | translate | async }}\n              }\n            </p>\n          </div>\n        } @else {\n          @for (conversation of filteredConversations(); track conversation.id) {\n            <ax-conversation-item [conversation]=\"conversation\" (clicked)=\"selectConversation($event)\" />\n          }\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--append\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-more' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{ '@acorex:chat.status.loading-more' | translate | async }}</ax-label>\n            </div>\n          }\n        }\n      </div>\n\n      <div class=\"new-conversation-button-container\">\n        <ng-content select=\"ax-suffix\">\n          <div class=\"new-conversation-button-container-inner\">\n            <ax-button\n              class=\"new-conversation-btn\"\n              [text]=\"'@acorex:chat.actions.new-conversation' | translate | async\"\n              [look]=\"'solid'\"\n              (onClick)=\"openNewConversationPopup()\"\n            ></ax-button>\n          </div>\n        </ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-sidebar{display:block;height:100%;width:100%;@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterAppend{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeaveAppend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.35rem)}}}ax-conversation-sidebar .limitedTab{width:calc(var(--spacing, .25rem) * 16)!important;padding:calc(var(--spacing, .25rem) * 1)!important;font-size:var(--text-xs, .75rem)!important;line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))!important}ax-conversation-sidebar .sidebar{position:relative;display:flex;height:100%;flex-direction:column}ax-conversation-sidebar .sidebar-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .menu-button{flex-shrink:0}ax-conversation-sidebar .sidebar-search{flex:1}ax-conversation-sidebar .sidebar-body{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-sidebar .sidebar-body--tabs-horizontal{flex-direction:row}ax-conversation-sidebar .sidebar-tabs{flex-shrink:0}ax-conversation-sidebar .sidebar-body--tabs-horizontal .sidebar-tabs{height:100%}ax-conversation-sidebar .sidebar-body--tabs-horizontal .sidebar-tabs ax-tabs{height:100%;width:auto}ax-conversation-sidebar .sidebar-main{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-sidebar .sidebar-list{position:relative;flex:1;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 16)}ax-conversation-sidebar .new-conversation-button-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);inset-inline-end:calc(var(--spacing, .25rem) * 1);bottom:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .new-conversation-button-container-inner{display:flex;align-items:center;justify-content:center}ax-conversation-sidebar .list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:4rem;--tw-leading: 1;line-height:1;opacity:50%}ax-conversation-sidebar .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-sidebar .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:300px;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-sidebar .empty-action{margin-top:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-sidebar .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-sidebar .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-sidebar .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-sidebar .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-sidebar .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-sidebar .load-more-enter{animation:axChatLoadMoreEnterAppend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-sidebar .load-more-leave{animation:axChatLoadMoreLeaveAppend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-sidebar .load-more-dot{animation:none;opacity:.65}ax-conversation-sidebar .load-more-enter,ax-conversation-sidebar .load-more-leave{animation:none}}ax-conversation-sidebar .tab-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-sidebar .conversation-skeleton{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-sidebar .skeleton-avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-sidebar .skeleton-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-sidebar .skeleton-title{height:calc(var(--spacing, .25rem) * 4);flex:1;border-radius:.25rem}ax-conversation-sidebar .skeleton-time{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 12);border-radius:.25rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-sidebar .skeleton-message{height:calc(var(--spacing, .25rem) * 3);width:80%;border-radius:.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { conversationSelected: [{ type: i0.Output, args: ["conversationSelected"] }] } });
 
 class AXConversationNewDialogComponent extends AXBasePageComponent {