@acorex/components 22.0.0-next.35 → 22.0.0-next.37

package/fesm2022/acorex-components-conversation.mjs

@@ -1,9 +1,11 @@
 import { AXComponentCloseEvent, AXCommonModule, AXDataSource, AXClosableComponent } from '@acorex/cdk/common';
+import * as i1 from '@acorex/components/decorators';
+import { AXDecoratorModule, AXDecoratorGenericComponent } from '@acorex/components/decorators';
 import { AXTabsComponent, AXTabItemComponent } from '@acorex/components/tabs';
 import * as i2 from '@angular/common';
 import { CommonModule, NgComponentOutlet, isPlatformBrowser, DOCUMENT, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, computed, Injector, runInInjectionContext, PLATFORM_ID, DestroyRef, viewChild, ViewContainerRef, input, output, effect, ViewEncapsulation, Component, ElementRef, HostListener, Directive, EventEmitter, afterNextRender, untracked, model, viewChildren, SecurityContext, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, computed, Injector, runInInjectionContext, PLATFORM_ID, DestroyRef, viewChild, ViewContainerRef, input, output, effect, ViewEncapsulation, Component, ElementRef, HostListener, Directive, EventEmitter, afterNextRender, untracked, NgZone, ChangeDetectorRef, model, viewChildren, SecurityContext, NgModule } from '@angular/core';
 import { AXUploaderService, AXUploaderZoneDirective, AXUploaderBrowseDirective } from '@acorex/cdk/uploader';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXPopupService } from '@acorex/components/popup';
@@ -12,13 +14,11 @@ import * as i3 from '@acorex/core/translation';
 import { translateSync, AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { Subject, BehaviorSubject, takeUntil, catchError, EMPTY, throttleTime, debounceTime, distinctUntilChanged, Observable, filter, firstValueFrom } from 'rxjs';
 import { AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent } from '@acorex/components/button';
-import * as i1$1 from '@acorex/components/decorators';
-import { AXDecoratorModule, AXDecoratorGenericComponent } from '@acorex/components/decorators';
 import { AXDropdownPanelComponent } from '@acorex/components/dropdown';
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXTextAreaComponent } from '@acorex/components/text-area';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXLoadingComponent } from '@acorex/components/loading';
 import { AXResizableDirective } from '@acorex/cdk/resizable';
@@ -36,6 +36,7 @@ import { AXContextMenuComponent } from '@acorex/components/menu';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 import * as i3$1 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
+import { AXPlatform } from '@acorex/core/platform';
 import * as i1$6 from '@acorex/components/skeleton';
 import { AXSkeletonComponent, AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -60,35 +61,19 @@ import { DomSanitizer } from '@angular/platform-browser';
  * Centralized configuration values to avoid magic numbers
  */
 
-const AX_ALL_CONVERSATION_MEDIA_PICKERS = [
-    'image',
-    'video',
-    'audio',
-    'file',
-    'voice',
-    'location',
-];
-const AX_ALL_CONVERSATION_COMPOSER_TABS = ['emoji', 'sticker'];
-function resolveConversationMediaPickers(features) {
-    return features?.mediaPickers ?? AX_ALL_CONVERSATION_MEDIA_PICKERS;
-}
-function resolveConversationComposerTabs(features) {
-    return features?.composerTabs ?? AX_ALL_CONVERSATION_COMPOSER_TABS;
-}
-function isMediaPickerEnabled(picker, features) {
-    return resolveConversationMediaPickers(features).includes(picker);
-}
-function isComposerTabEnabled(tab, features) {
-    return resolveConversationComposerTabs(features).includes(tab);
-}
-
 /**
+
  * Default Configuration Values
+
  * Centralized defaults to avoid magic numbers throughout the codebase
+
  */
 /**
+
  * Default conversation configuration
+
  * All values are explicitly defined here for easy maintenance and documentation
+
  */
 const AX_DEFAULT_CONVERSATION_CONFIG = {
     // Pagination
@@ -123,16 +108,20 @@ const AX_DEFAULT_CONVERSATION_CONFIG = {
     // Message list
     messageListBackground: '',
     features: {
-        mediaPickers: [...AX_ALL_CONVERSATION_MEDIA_PICKERS],
-        composerTabs: [...AX_ALL_CONVERSATION_COMPOSER_TABS],
+        composerTabs: [],
     },
     debugApiLogging: false,
 };
 /**
+
  * Helper function to merge user config with defaults
+
  * Properly handles array merging to avoid reference issues
+
  * @param userConfig - User-provided configuration
+
  * @returns Merged configuration with all required fields
+
  */
 function mergeWithDefaults(userConfig) {
     if (!userConfig) {
@@ -144,7 +133,6 @@ function mergeWithDefaults(userConfig) {
         features: {
             ...AX_DEFAULT_CONVERSATION_CONFIG.features,
             ...userConfig.features,
-            mediaPickers: userConfig.features?.mediaPickers ?? AX_DEFAULT_CONVERSATION_CONFIG.features.mediaPickers,
             composerTabs: userConfig.features?.composerTabs ?? AX_DEFAULT_CONVERSATION_CONFIG.features.composerTabs,
         },
     };
@@ -247,6 +235,13 @@ const AX_CONVERSATION_REGISTRY_CONFIG = new InjectionToken('AX_CONVERSATION_REGI
     factory: () => ({}),
 });
 
+function resolveConversationComposerTabs(features) {
+    return features?.composerTabs ?? [];
+}
+function isComposerTabEnabled(tab, features) {
+    return resolveConversationComposerTabs(features).includes(tab);
+}
+
 /**
  * API call logger for AXConversationService.
  * Enabled via `debugApiLogging` in conversation config.
@@ -839,6 +834,19 @@ const AX_CONVERSATION_GENERIC_PRIVATE_TITLES = new Set(['', 'new chat', 'new con
 function isGenericPrivateConversationTitle(title) {
     return AX_CONVERSATION_GENERIC_PRIVATE_TITLES.has((title ?? '').trim().toLowerCase());
 }
+/**
+ * Find an existing private 1:1 conversation between the current user and a peer.
+ * Matches conversations with exactly those two participants.
+ */
+function findExistingPrivateConversation(conversations, currentUserId, peerUserId) {
+    return conversations.find((conversation) => {
+        if (conversation.type !== 'private') {
+            return false;
+        }
+        const participantIds = new Set(conversation.participants.map((participant) => participant.id));
+        return participantIds.size === 2 && participantIds.has(currentUserId) && participantIds.has(peerUserId);
+    });
+}
 /** Other participant in a private 1v1 chat (excludes the current viewer). */
 function resolvePrivatePeerParticipant(conversation, currentUserId) {
     if (conversation.type !== 'private') {
@@ -894,6 +902,11 @@ function resolveConversationForViewer(conversation, currentUserId) {
         icon,
     };
 }
+/** Whether message reactions are enabled for a conversation. Defaults to `true` when omitted. */
+function isConversationReactionsEnabled(conversation) {
+    const value = conversation?.metadata?.reactionsEnabled;
+    return value !== false;
+}
 
 const AX_CONVERSATION_MEDIA_TYPES = new Set(['image', 'video', 'audio', 'file']);
 const normalizers = {};
@@ -1366,6 +1379,9 @@ function withNormalizedPayload(message) {
     return { ...message, timestamp, payload: normalizeMessagePayload(message.payload) };
 }
 class AXConversationState {
+    bumpInboxRevision() {
+        this._inboxRevision.update((revision) => revision + 1);
+    }
     constructor(config) {
         this.config = config;
         this._conversations = signal(new Map(), /* @ts-ignore */
@@ -1374,15 +1390,21 @@ class AXConversationState {
         ...(ngDevMode ? [{ debugName: "_messages" }] : /* istanbul ignore next */ []));
         this._conversationMessages = signal(new Map(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_conversationMessages" }] : /* istanbul ignore next */ []));
+        /** Bumped on every inbox mutation so derived lists always recompute. */
+        this._inboxRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_inboxRevision" }] : /* istanbul ignore next */ []));
         this.conversations = computed(() => {
+            this._inboxRevision();
             const convMap = this._conversations();
             return Array.from(convMap.values());
-        }, { ...(ngDevMode ? { debugName: "conversations" } : /* istanbul ignore next */ {}), equal: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "conversations" }] : /* istanbul ignore next */ []));
     }
     setConversations(conversations) {
         const convMap = new Map();
         conversations.forEach((conv) => convMap.set(conv.id, conv));
         this._conversations.set(convMap);
+        this.bumpInboxRevision();
     }
     addConversations(conversations) {
         this._conversations.update((existingConversations) => {
@@ -1398,6 +1420,7 @@ class AXConversationState {
             }
             return newConversations;
         });
+        this.bumpInboxRevision();
     }
     setConversation(conversation) {
         this._conversations.update((conversations) => {
@@ -1405,6 +1428,7 @@ class AXConversationState {
             newConversations.set(conversation.id, conversation);
             return newConversations;
         });
+        this.bumpInboxRevision();
     }
     getConversation(conversationId) {
         return this._conversations().get(conversationId);
@@ -1421,6 +1445,7 @@ class AXConversationState {
             newConversations.delete(conversationId);
             return newConversations;
         });
+        this.bumpInboxRevision();
         const messageIds = this._conversationMessages().get(conversationId) || [];
         this._messages.update((messages) => {
             const newMessages = new Map(messages);
@@ -1938,56 +1963,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const AX_CONVERSATION_FILE_PICKERS = ['image', 'video', 'audio', 'file', 'voice'];
-async function loadConversationFileTypes(features) {
-    const enabled = AX_CONVERSATION_FILE_PICKERS.filter((picker) => isMediaPickerEnabled(picker, features));
-    if (!enabled.length) {
+const AX_CONVERSATION_FILE_CATALOG_LOADERS = {
+    [AX_CONVERSATION_IMAGE_CATALOG]: async () => {
+        const mod = await Promise.resolve().then(function () { return conversationImage_fileType; });
+        return mod.createConversationImageFileType();
+    },
+    [AX_CONVERSATION_VIDEO_CATALOG]: async () => {
+        const mod = await Promise.resolve().then(function () { return conversationVideo_fileType; });
+        return mod.createConversationVideoFileType();
+    },
+    [AX_CONVERSATION_AUDIO_CATALOG]: async () => {
+        const mod = await Promise.resolve().then(function () { return conversationAudio_fileType; });
+        return mod.createConversationAudioFileType();
+    },
+    [AX_CONVERSATION_FILE_CATALOG]: async () => {
+        const mod = await Promise.resolve().then(function () { return conversationFile_fileType; });
+        return mod.createConversationFileFileType();
+    },
+    [AX_CONVERSATION_VOICE_CATALOG]: async () => {
+        const mod = await Promise.resolve().then(function () { return conversationVoice_fileType; });
+        return mod.createConversationVoiceFileType();
+    },
+};
+async function loadConversationFileTypes(catalogNames) {
+    const uniqueCatalogs = [...new Set(catalogNames.filter(Boolean))];
+    if (!uniqueCatalogs.length) {
         return [];
     }
     const types = [];
-    for (const picker of enabled) {
-        switch (picker) {
-            case 'image': {
-                const mod = await Promise.resolve().then(function () { return conversationImage_fileType; });
-                types.push(mod.createConversationImageFileType());
-                break;
-            }
-            case 'video': {
-                const mod = await Promise.resolve().then(function () { return conversationVideo_fileType; });
-                types.push(mod.createConversationVideoFileType());
-                break;
-            }
-            case 'audio': {
-                const mod = await Promise.resolve().then(function () { return conversationAudio_fileType; });
-                types.push(mod.createConversationAudioFileType());
-                break;
-            }
-            case 'file': {
-                const mod = await Promise.resolve().then(function () { return conversationFile_fileType; });
-                types.push(mod.createConversationFileFileType());
-                break;
-            }
-            case 'voice': {
-                const mod = await Promise.resolve().then(function () { return conversationVoice_fileType; });
-                types.push(mod.createConversationVoiceFileType());
-                break;
-            }
+    for (const catalogName of uniqueCatalogs) {
+        const loader = AX_CONVERSATION_FILE_CATALOG_LOADERS[catalogName];
+        if (loader) {
+            types.push(await loader());
         }
     }
     return types;
 }
-/** Lazy-loads conversation file catalogs only for enabled media pickers. */
+/** Built-in conversation catalogs (lazy-loaded on first registry resolve). */
+const AX_CONVERSATION_BUILTIN_FILE_CATALOGS = [
+    AX_CONVERSATION_IMAGE_CATALOG,
+    AX_CONVERSATION_VIDEO_CATALOG,
+    AX_CONVERSATION_AUDIO_CATALOG,
+    AX_CONVERSATION_FILE_CATALOG,
+    AX_CONVERSATION_VOICE_CATALOG,
+];
+/**
+ * Lazy-loads conversation file catalogs for the root file-type registry.
+ * Must not inject {@link AXConversationComposerActionRegistry} — that registry
+ * depends on {@link AXFileTypeRegistryService}, which would create a circular DI cycle.
+ */
 class AXConversationComposerFileTypesProvider extends AXFileTypeInfoProvider {
-    constructor() {
-        super(...arguments);
-        this.config = inject(AX_CONVERSATION_CONFIG, { optional: true });
-        this.cache = null;
-    }
     async items() {
-        if (!this.cache) {
-            this.cache = await loadConversationFileTypes(this.config?.features);
-        }
-        return this.cache;
+        return loadConversationFileTypes([...AX_CONVERSATION_BUILTIN_FILE_CATALOGS]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerFileTypesProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerFileTypesProvider }); }
@@ -1998,8 +2025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 /** Ensures built-in conversation catalogs exist on the root file-type registry. */
 const AX_CONVERSATION_FILE_TYPES_READY = new InjectionToken('AX_CONVERSATION_FILE_TYPES_READY');
-/** Registers validation rules and lazy conversation file-type catalogs for enabled pickers. */
-function provideConversationComposerFileTypes(_features) {
+/** Registers validation rules and lazy conversation file-type catalogs for composer actions. */
+function provideConversationComposerFileTypes() {
     return [
         provideFileValidationRules(),
         provideFileTypeInfoProvider(AXConversationComposerFileTypesProvider),
@@ -2010,6 +2037,122 @@ function provideConversationComposerFileTypes(_features) {
     ];
 }
 
+const AX_CONVERSATION_COMPOSER_EMOJI_TAB = {
+    id: 'emoji',
+    title: '@acorex:chat.tabs.emoji',
+    icon: 'fa-light fa-face-smile',
+    priority: 100,
+    componentLoader: () => Promise.resolve().then(function () { return index$1; }).then((m) => m.AXConversationEmojiTabComponent),
+    enabled: true,
+};
+const AX_CONVERSATION_COMPOSER_STICKER_TAB = {
+    id: 'sticker',
+    title: '@acorex:chat.tabs.stickers',
+    icon: 'fa-light fa-note-sticky',
+    priority: 90,
+    componentLoader: () => Promise.resolve().then(function () { return index; }).then((m) => m.AXConversationStickerTabComponent),
+    enabled: true,
+};
+/** Built-in composer popup tabs keyed by {@link AXConversationComposerTabFeature}. */
+const AX_CONVERSATION_BUILTIN_COMPOSER_TABS = {
+    emoji: AX_CONVERSATION_COMPOSER_EMOJI_TAB,
+    sticker: AX_CONVERSATION_COMPOSER_STICKER_TAB,
+};
+
+/**
+ * Composer Tab Registry
+ * Register custom tabs for the composer popup (emoji, stickers, GIFs, etc.)
+ */
+/**
+ * Composer Tab Registry Service
+ */
+class AXConversationComposerTabRegistry {
+    constructor() {
+        this._tabs = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_tabs" }] : /* istanbul ignore next */ []));
+        this.translation = inject(AXTranslationService);
+        /** All registered tabs */
+        this.tabs = this._tabs.asReadonly();
+        /** Enabled tabs sorted by priority */
+        this.enabledTabs = computed(() => [...this._tabs()].filter((tab) => tab.enabled !== false).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabledTabs" }] : /* istanbul ignore next */ []));
+        /** Whether the composer popup has any tabs to show. */
+        this.hasEnabledTabs = computed(() => this.enabledTabs().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasEnabledTabs" }] : /* istanbul ignore next */ []));
+        const conversationConfig = inject(AX_CONVERSATION_CONFIG, { optional: true });
+        for (const tabId of resolveConversationComposerTabs(conversationConfig?.features)) {
+            const builtIn = AX_CONVERSATION_BUILTIN_COMPOSER_TABS[tabId];
+            if (builtIn) {
+                this.register(builtIn);
+            }
+        }
+        inject(AX_CONVERSATION_DEFAULT_COMPOSER_TABS, { optional: true })?.forEach((tab) => this.register(tab));
+        const registryConfig = inject(AX_CONVERSATION_REGISTRY_CONFIG, { optional: true });
+        registryConfig?.composerTabs?.forEach((tab) => this.register(tab));
+    }
+    /**
+     * Register a composer tab
+     */
+    register(tab) {
+        // Validate tab
+        if (!tab.id) {
+            throw new Error('Composer tab must have an id');
+        }
+        if (!tab.title) {
+            throw new Error('Composer tab must have a title');
+        }
+        if (!tab.component && !tab.componentLoader) {
+            throw new Error('Composer tab must have a component or componentLoader');
+        }
+        // Check for duplicates
+        const existing = this._tabs().find((t) => t.id === tab.id);
+        if (existing) {
+            console.warn(`Composer tab "${tab.id}" is already registered. Replacing...`);
+            this.unregister(tab.id);
+        }
+        // Add to registry
+        this._tabs.update((tabs) => [...tabs, tab]);
+    }
+    /**
+     * Unregister a composer tab
+     */
+    unregister(id) {
+        this._tabs.update((tabs) => tabs.filter((t) => t.id !== id));
+    }
+    /**
+     * Get tab by ID
+     */
+    getTabById(id) {
+        return this._tabs().find((t) => t.id === id);
+    }
+    getTabTitle(tab) {
+        return this.translation.translateSync(tab.title);
+    }
+    /**
+     * Enable/disable a tab
+     */
+    setEnabled(id, enabled) {
+        this._tabs.update((tabs) => tabs.map((tab) => (tab.id === id ? { ...tab, enabled } : tab)));
+    }
+    /**
+     * Update tab badge
+     */
+    setBadge(id, badge) {
+        this._tabs.update((tabs) => tabs.map((tab) => (tab.id === id ? { ...tab, badge } : tab)));
+    }
+    /**
+     * Clear all tabs
+     */
+    clear() {
+        this._tabs.set([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerTabRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerTabRegistry }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerTabRegistry, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 /**
  * Composer Action Registry
  * Register custom action buttons for the composer (attach, voice, location, etc.)
@@ -2027,7 +2170,7 @@ class AXConversationComposerActionRegistry {
         ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
         this.translation = inject(AXTranslationService);
         this.injector = inject(Injector);
-        this.fileTypeRegistry = inject(AXFileTypeRegistryService);
+        this.composerTabRegistry = inject(AXConversationComposerTabRegistry);
         /** All registered actions */
         this.actions = this._actions.asReadonly();
         /** Left-side actions sorted by priority */
@@ -2085,11 +2228,16 @@ class AXConversationComposerActionRegistry {
         // Add to registry
         this._actions.update((actions) => [...actions, action]);
         if (action.fileType) {
+            this.fileTypeRegistry().invalidateCache();
             void this.ensureFileTypeExists(action.fileType);
         }
     }
+    /** Resolved lazily to avoid a DI cycle with {@link AXConversationComposerFileTypesProvider}. */
+    fileTypeRegistry() {
+        return this.injector.get(AXFileTypeRegistryService);
+    }
     async ensureFileTypeExists(fileType) {
-        const match = await this.fileTypeRegistry.get(fileType);
+        const match = await this.fileTypeRegistry().get(fileType);
         if (!match) {
             console.warn(`[AXConversationComposerActionRegistry] Unknown fileType "${fileType}". ` +
                 'Register its AXFileTypeInfoProvider in app providers before using this action.');
@@ -2106,7 +2254,13 @@ class AXConversationComposerActionRegistry {
      */
     getVisibleActions(position, context) {
         const actions = position === 'left' ? this.leftActions() : this.rightActions();
-        return actions.filter((action) => runInInjectionContext(this.injector, () => action.visible(context)));
+        const hasComposerTabs = this.composerTabRegistry.hasEnabledTabs();
+        return actions.filter((action) => {
+            if (action.id === 'emoji' && !hasComposerTabs) {
+                return false;
+            }
+            return runInInjectionContext(this.injector, () => action.visible(context));
+        });
     }
     /**
      * Get enabled actions for a position
@@ -2185,92 +2339,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-/**
- * Composer Tab Registry
- * Register custom tabs for the composer popup (emoji, stickers, GIFs, etc.)
- */
-/**
- * Composer Tab Registry Service
- */
-class AXConversationComposerTabRegistry {
-    constructor() {
-        this._tabs = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_tabs" }] : /* istanbul ignore next */ []));
-        this.translation = inject(AXTranslationService);
-        /** All registered tabs */
-        this.tabs = this._tabs.asReadonly();
-        /** Enabled tabs sorted by priority */
-        this.enabledTabs = computed(() => [...this._tabs()].filter((tab) => tab.enabled !== false).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0)), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "enabledTabs" }] : /* istanbul ignore next */ []));
-        // Register default tabs from individual token
-        inject(AX_CONVERSATION_DEFAULT_COMPOSER_TABS, { optional: true })?.forEach((tab) => this.register(tab));
-        // Register tabs from AX_CONVERSATION_REGISTRY_CONFIG
-        const config = inject(AX_CONVERSATION_REGISTRY_CONFIG, { optional: true });
-        config?.composerTabs?.forEach((tab) => this.register(tab));
-    }
-    /**
-     * Register a composer tab
-     */
-    register(tab) {
-        // Validate tab
-        if (!tab.id) {
-            throw new Error('Composer tab must have an id');
-        }
-        if (!tab.title) {
-            throw new Error('Composer tab must have a title');
-        }
-        if (!tab.component && !tab.componentLoader) {
-            throw new Error('Composer tab must have a component or componentLoader');
-        }
-        // Check for duplicates
-        const existing = this._tabs().find((t) => t.id === tab.id);
-        if (existing) {
-            console.warn(`Composer tab "${tab.id}" is already registered. Replacing...`);
-            this.unregister(tab.id);
-        }
-        // Add to registry
-        this._tabs.update((tabs) => [...tabs, tab]);
-    }
-    /**
-     * Unregister a composer tab
-     */
-    unregister(id) {
-        this._tabs.update((tabs) => tabs.filter((t) => t.id !== id));
-    }
-    /**
-     * Get tab by ID
-     */
-    getTabById(id) {
-        return this._tabs().find((t) => t.id === id);
-    }
-    getTabTitle(tab) {
-        return this.translation.translateSync(tab.title);
-    }
-    /**
-     * Enable/disable a tab
-     */
-    setEnabled(id, enabled) {
-        this._tabs.update((tabs) => tabs.map((tab) => (tab.id === id ? { ...tab, enabled } : tab)));
-    }
-    /**
-     * Update tab badge
-     */
-    setBadge(id, badge) {
-        this._tabs.update((tabs) => tabs.map((tab) => (tab.id === id ? { ...tab, badge } : tab)));
-    }
-    /**
-     * Clear all tabs
-     */
-    clear() {
-        this._tabs.set([]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerTabRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerTabRegistry }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerTabRegistry, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 /**
  * Abstract Base Registry
  * Base class for all registries with common functionality
@@ -3075,6 +3143,8 @@ class AXConversationService {
         this.initPromise = null;
         /** Generation counter — stale page-0 loads are ignored after conversation switches. */
         this.messageLoadGeneration = 0;
+        /** Bumps when a conversation is created while a list load is in flight. */
+        this.conversationListLoadGeneration = 0;
         /** Batched read-receipt queue keyed by conversation ID. */
         this.readQueue = new Map();
         /** Session cache for available reaction emojis. */
@@ -3222,14 +3292,20 @@ class AXConversationService {
     async loadConversations() {
         this._loading.set(true);
         this._error.set(null);
+        const loadGeneration = this.conversationListLoadGeneration;
         try {
             const pagination = {
                 page: 0,
                 pageSize: this.config.conversationPageSize,
             };
             const result = await this.callApi('loadConversations', 'conversationApi', 'getConversations', () => this.conversationApi.getConversations(pagination, undefined), pagination, undefined);
-            // Store conversations
-            this.state.setConversations(result.items);
+            if (loadGeneration !== this.conversationListLoadGeneration) {
+                // A create (or newer reload) started while this request was in flight — merge, do not replace.
+                this.state.addConversations(result.items);
+            }
+            else {
+                this.state.setConversations(result.items);
+            }
             this._conversationsPagination.set({
                 page: 0,
                 hasMore: result.hasMore,
@@ -3827,7 +3903,22 @@ class AXConversationService {
      * Updates conversation metadata including unread count, last message, etc.
      */
     handleConversationUpdate(conversation) {
-        this.state.setConversation(conversation);
+        this.syncConversationToInbox(conversation);
+    }
+    /**
+     * Insert or refresh a conversation in the in-memory inbox.
+     * @param promote When true, bumps activity so the chat sorts to the top (create / reopen).
+     */
+    syncConversationToInbox(conversation, promote = false) {
+        const now = new Date();
+        const existing = this.state.getConversation(conversation.id);
+        const base = existing ?? conversation;
+        this.state.setConversation({
+            ...base,
+            ...conversation,
+            lastMessageAt: promote ? now : (conversation.lastMessageAt ?? base.lastMessageAt ?? now),
+            updatedAt: conversation.updatedAt ?? now,
+        });
     }
     /**
      * Update conversation's last message
@@ -3936,17 +4027,31 @@ class AXConversationService {
      * @param participantIds - Array of participant user IDs
      * @param type - Conversation type (private, group, channel)
      * @param metadata - Optional metadata (title, avatar, etc.)
-     * @returns Created conversation
+     * @param options - Optional flags (`forceCreate` recreates private chats even when one exists)
+     * @returns Created or existing conversation
      */
-    async createConversation(participantIds, type, metadata) {
+    async createConversation(participantIds, type, metadata, options) {
         try {
+            await this.ensureInitialized();
             const currentUser = this._currentUser();
             const creatorId = currentUser?.id;
             const isPrivate = type === 'private';
+            const forceCreate = options?.forceCreate === true;
             const scopedParticipantIds = [...participantIds];
             if (creatorId && !scopedParticipantIds.includes(creatorId)) {
                 scopedParticipantIds.unshift(creatorId);
             }
+            if (isPrivate && !forceCreate && creatorId) {
+                const peerUserId = scopedParticipantIds.find((id) => id !== creatorId);
+                if (peerUserId) {
+                    const existing = findExistingPrivateConversation(this.state.conversations(), creatorId, peerUserId);
+                    if (existing) {
+                        this.syncConversationToInbox(existing, true);
+                        return resolveConversationForViewer(existing, creatorId);
+                    }
+                }
+            }
+            this.conversationListLoadGeneration++;
             const createData = {
                 type,
                 participantIds: scopedParticipantIds,
@@ -3956,9 +4061,10 @@ class AXConversationService {
                 avatar: isPrivate ? undefined : AXConversationService.normalizeOptionalString(metadata?.['avatar']),
                 icon: isPrivate ? undefined : AXConversationService.normalizeOptionalString(metadata?.['icon']),
                 metadata: isPrivate ? undefined : metadata,
+                forceCreate,
             };
             const conversation = await this.callApi('createConversation', 'conversationApi', 'createConversation', () => this.conversationApi.createConversation(createData), createData);
-            this.state.setConversation(conversation);
+            this.syncConversationToInbox(conversation, true);
             return resolveConversationForViewer(conversation, creatorId);
         }
         catch (error) {
@@ -4506,6 +4612,9 @@ class AXConversationComposerPopupComponent {
         /** Enabled tabs from registry */
         this.enabledTabs = computed(() => this.registry.composerTabs.enabledTabs(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "enabledTabs" }] : /* istanbul ignore next */ []));
+        /** Whether more than one tab is available */
+        this.hasMultipleTabs = computed(() => this.enabledTabs().length > 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasMultipleTabs" }] : /* istanbul ignore next */ []));
         // Load first tab by default
         effect(() => {
             if (!this.activeTabId() && this.enabledTabs().length > 0) {
@@ -4585,11 +4694,11 @@ class AXConversationComposerPopupComponent {
         this.onClosed.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerPopupComponent, isStandalone: true, selector: "ax-conversation-composer-popup", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, onItemSelected: { classPropertyName: "onItemSelected", publicName: "onItemSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemSelected: "itemSelected", onClosed: "onClosed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "    <div class=\"composer-popup\">\n      <!-- Tabs -->\n      <ax-tabs (onActiveTabChanged)=\"onTabChange($event)\">\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item [text]=\"getTabTitle(tab.id)\" [key]=\"tab.id\">\n            <ng-template #prefix>\n              @if (tab.icon) {\n                <span class=\"tab-icon fa-light\" [class]=\"tab.icon\"></span>\n              }\n            </ng-template>\n          </ax-tab-item>\n        }\n      </ax-tabs>\n\n      <!-- Tab Content -->\n      <div class=\"popup-content\">\n        <ng-container #contentContainer></ng-container>\n      </div>\n    </div>\n", styles: ["@layer components{ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;height:100%;width:100%;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4);height:max(400px,50vh)}ax-conversation-composer-popup .popup-content{flex:1;overflow-y:auto}ax-conversation-composer-popup .tab-icon{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerPopupComponent, isStandalone: true, selector: "ax-conversation-composer-popup", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, onItemSelected: { classPropertyName: "onItemSelected", publicName: "onItemSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemSelected: "itemSelected", onClosed: "onClosed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"composer-popup\"\n  [class.composer-popup--single-tab]=\"!hasMultipleTabs()\"\n>\n  @if (hasMultipleTabs()) {\n    <header class=\"composer-popup__header\">\n      <ax-tabs look=\"default\" location=\"top\" [fitParent]=\"true\" (onActiveTabChanged)=\"onTabChange($event)\">\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item\n            [text]=\"getTabTitle(tab.id)\"\n            [key]=\"tab.id\"\n            [active]=\"activeTabId() === tab.id\"\n            [attr.aria-label]=\"getTabTitle(tab.id)\"\n            [title]=\"getTabTitle(tab.id)\"\n          >\n            <ax-prefix>\n              @if (tab.icon) {\n                <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n              }\n            </ax-prefix>\n          </ax-tab-item>\n        }\n      </ax-tabs>\n    </header>\n  }\n\n  <div class=\"composer-popup__content\">\n    <ng-container #contentContainer></ng-container>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.composer-emoji-popover-panel{overflow:hidden;border-radius:.65rem;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-lightest-surface));width:min(22rem,92vw);box-shadow:0 4px 16px #0000001a}.composer-emoji-popover{display:block;width:100%}ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;width:100%;flex-direction:column;overflow:hidden;height:min(22rem,55vh);min-height:18rem}ax-conversation-composer-popup .composer-popup--single-tab .composer-popup__content{padding-top:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer-popup .composer-popup__header{flex-shrink:0;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) * 2.5);padding-top:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tabs{width:100%}ax-conversation-composer-popup .composer-popup__header ax-tab-item{min-height:calc(var(--spacing, .25rem) * 9);justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tab-item .ax-tab-item-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix{display:flex;align-items:center;justify-content:center}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix i{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-composer-popup .composer-popup__content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow-x:hidden;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);scrollbar-gutter:stable}ax-conversation-composer-popup .composer-popup__content>ng-component{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex-direction:column}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-conversation-composer-popup', encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXTabsComponent, AXTabItemComponent], template: "    <div class=\"composer-popup\">\n      <!-- Tabs -->\n      <ax-tabs (onActiveTabChanged)=\"onTabChange($event)\">\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item [text]=\"getTabTitle(tab.id)\" [key]=\"tab.id\">\n            <ng-template #prefix>\n              @if (tab.icon) {\n                <span class=\"tab-icon fa-light\" [class]=\"tab.icon\"></span>\n              }\n            </ng-template>\n          </ax-tab-item>\n        }\n      </ax-tabs>\n\n      <!-- Tab Content -->\n      <div class=\"popup-content\">\n        <ng-container #contentContainer></ng-container>\n      </div>\n    </div>\n", styles: ["@layer components{ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;height:100%;width:100%;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4);height:max(400px,50vh)}ax-conversation-composer-popup .popup-content{flex:1;overflow-y:auto}ax-conversation-composer-popup .tab-icon{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-conversation-composer-popup', encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent], template: "<div\n  class=\"composer-popup\"\n  [class.composer-popup--single-tab]=\"!hasMultipleTabs()\"\n>\n  @if (hasMultipleTabs()) {\n    <header class=\"composer-popup__header\">\n      <ax-tabs look=\"default\" location=\"top\" [fitParent]=\"true\" (onActiveTabChanged)=\"onTabChange($event)\">\n        @for (tab of enabledTabs(); track tab.id) {\n          <ax-tab-item\n            [text]=\"getTabTitle(tab.id)\"\n            [key]=\"tab.id\"\n            [active]=\"activeTabId() === tab.id\"\n            [attr.aria-label]=\"getTabTitle(tab.id)\"\n            [title]=\"getTabTitle(tab.id)\"\n          >\n            <ax-prefix>\n              @if (tab.icon) {\n                <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n              }\n            </ax-prefix>\n          </ax-tab-item>\n        }\n      </ax-tabs>\n    </header>\n  }\n\n  <div class=\"composer-popup__content\">\n    <ng-container #contentContainer></ng-container>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.composer-emoji-popover-panel{overflow:hidden;border-radius:.65rem;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-lightest-surface));width:min(22rem,92vw);box-shadow:0 4px 16px #0000001a}.composer-emoji-popover{display:block;width:100%}ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;width:100%;flex-direction:column;overflow:hidden;height:min(22rem,55vh);min-height:18rem}ax-conversation-composer-popup .composer-popup--single-tab .composer-popup__content{padding-top:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer-popup .composer-popup__header{flex-shrink:0;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) * 2.5);padding-top:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tabs{width:100%}ax-conversation-composer-popup .composer-popup__header ax-tab-item{min-height:calc(var(--spacing, .25rem) * 9);justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tab-item .ax-tab-item-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix{display:flex;align-items:center;justify-content:center}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix i{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-composer-popup .composer-popup__content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow-x:hidden;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);scrollbar-gutter:stable}ax-conversation-composer-popup .composer-popup__content>ng-component{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex-direction:column}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], onItemSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "onItemSelected", required: false }] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
@@ -4603,6 +4712,122 @@ function resolveComposerMaxFiles(action, config) {
     return Math.max(1, action?.maxFiles ?? config.maxFilesPerMessage);
 }
 
+/** Library default when no per-conversation or global background is set. */
+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%)',
+};
+/** Predefined chat-area backgrounds for the info panel (light + dark variants). */
+const AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS = [
+    {
+        id: 'solid-default',
+        value: AX_CONVERSATION_DEFAULT_MESSAGE_LIST_THEME_BACKGROUND,
+    },
+    {
+        id: 'solid-graphite',
+        value: {
+            light: 'rgb(var(--ax-sys-color-lighter-surface))',
+            dark: 'rgb(var(--ax-sys-color-darker-surface))',
+        },
+    },
+    {
+        id: 'solid-olive',
+        value: {
+            light: 'rgba(132, 144, 88, 0.24)',
+            dark: 'linear-gradient(165deg, rgba(163, 177, 110, 0.12) 0%, rgb(var(--ax-sys-color-darker-surface)) 70%)',
+        },
+    },
+    {
+        id: 'solid-sky',
+        value: {
+            light: 'rgba(56, 189, 248, 0.2)',
+            dark: 'linear-gradient(165deg, rgba(14, 165, 233, 0.14) 0%, rgb(var(--ax-sys-color-darker-surface)) 72%)',
+        },
+    },
+    {
+        id: 'grad-aurora',
+        value: {
+            light: 'linear-gradient(140deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%)',
+            dark: 'linear-gradient(140deg, rgba(30, 58, 138, 0.5) 0%, rgba(76, 29, 149, 0.38) 52%, rgb(var(--ax-sys-color-darker-surface)) 100%)',
+        },
+    },
+    {
+        id: 'grad-sunset',
+        value: {
+            light: 'linear-gradient(140deg, rgba(251, 113, 133, 0.34) 0%, rgba(251, 191, 36, 0.32) 100%)',
+            dark: 'linear-gradient(140deg, rgba(159, 18, 57, 0.38) 0%, rgba(146, 64, 14, 0.32) 55%, rgb(var(--ax-sys-color-darker-surface)) 100%)',
+        },
+    },
+];
+const AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID = 'solid-default';
+
+/** Subtle 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' &&
+        value !== null &&
+        'light' in value &&
+        'dark' in value &&
+        typeof value.light === 'string' &&
+        typeof value.dark === 'string');
+}
+/** Pick the raw CSS string for the active theme; `undefined` when unset. */
+function resolveMessageListBackgroundRaw(value, isDark) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    return isDark ? value.dark : value.light;
+}
+/** Turn bare `https://...` or `/path` into valid CSS `background` for images. */
+function normalizeMessageListBackgroundValue(raw) {
+    const v = raw.trim();
+    if (v === '') {
+        return AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND;
+    }
+    const lower = v.toLowerCase();
+    if (lower === 'transparent' || lower === 'none') {
+        return v;
+    }
+    if (/^url\s*\(/i.test(v)) {
+        return v;
+    }
+    if (/^https?:\/\//i.test(v)) {
+        const escaped = v.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+        return `url("${escaped}") center / cover no-repeat`;
+    }
+    if (v.startsWith('/') && !/^(linear|radial|conic|rgb|hsl|var)\b/i.test(v)) {
+        const escaped = v.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+        return `url("${escaped}") center / cover no-repeat`;
+    }
+    return v;
+}
+/** Resolve config/metadata background for the active theme, with library default fallback. */
+function resolveMessageListBackgroundStyle(value, isDark) {
+    const raw = resolveMessageListBackgroundRaw(value, isDark) ??
+        resolveMessageListBackgroundRaw(AX_CONVERSATION_DEFAULT_MESSAGE_LIST_THEME_BACKGROUND, isDark);
+    if (raw === undefined) {
+        return AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND;
+    }
+    return normalizeMessageListBackgroundValue(raw);
+}
+/** Whether two stored backgrounds represent the same preset (supports legacy string values). */
+function isSameMessageListBackground(a, b, isDark) {
+    if (a === undefined) {
+        return false;
+    }
+    if (typeof a === 'string') {
+        if (a === '') {
+            return false;
+        }
+        const themeValue = isDark ? b.dark : b.light;
+        return a === themeValue;
+    }
+    return a.light === b.light && a.dark === b.dark;
+}
+
 function isUserProfile(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -5695,7 +5920,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", 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 }], ngImport: i0, template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\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            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(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-dropdown-panel>\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)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(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-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\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\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\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        (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%}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}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 .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;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-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{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-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 .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%;max-width:var(--container-md, 28rem);max-height:31.25rem}}@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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.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", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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", 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 }], ngImport: i0, template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\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            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(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-dropdown-panel>\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)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(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-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\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\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\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%}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}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 .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;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-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{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-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 .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}}@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: "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: "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", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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,
@@ -5712,7 +5937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXPopoverComponent,
                         AXDropdownPanelComponent,
                         AXTranslationModule,
-                    ], template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\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            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(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-dropdown-panel>\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)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(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-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\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\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\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        (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%}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}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 .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;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-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{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-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 .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%;max-width:var(--container-md, 28rem);max-height:31.25rem}}@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"] }]
+                    ], template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\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            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(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-dropdown-panel>\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)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(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-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\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\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\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%}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}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 .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;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-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{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-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 .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}}@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"] }], 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 }] }] } });
 
 /**
@@ -5972,7 +6197,7 @@ class AXConversationAvatarComponent {
         ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationAvatarComponent, isStandalone: true, selector: "ax-conversation-avatar", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ax-conversation-avatar-size.px": "size()" } }, ngImport: i0, template: "<div class=\"ax-conversation-avatar\">\n  @if (customComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; inputs: customInputs()\" />\n  } @else {\n    <ax-avatar [size]=\"size()\">\n      @if (fallbackDisplay().avatar; as avatarSrc) {\n        <ax-image [src]=\"avatarSrc\" [alt]=\"fallbackDisplay().name\"></ax-image>\n      } @else if (fallbackDisplay().icon; as iconClass) {\n        <ax-icon><i [class]=\"iconClass\" aria-hidden=\"true\"></i></ax-icon>\n      } @else {\n        <ax-label>{{ fallbackInitials() }}</ax-label>\n      }\n    </ax-avatar>\n  }\n\n  @if (showStatus() && resolvedStatus(); as presence) {\n    <span\n      class=\"ax-conversation-avatar-status\"\n      [class.status-online]=\"presence === 'online'\"\n      [class.status-offline]=\"presence === 'offline'\"\n      [class.status-away]=\"presence === 'away'\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar{display:inline-flex}ax-conversation-avatar .ax-conversation-avatar{position:relative;display:inline-flex}ax-conversation-avatar .ax-conversation-avatar-status{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * .5);bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px)}ax-conversation-avatar .ax-conversation-avatar-status.status-online{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-success-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-away{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-warning-500))}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationAvatarComponent, isStandalone: true, selector: "ax-conversation-avatar", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ax-conversation-avatar-size.px": "size()" } }, ngImport: i0, template: "<div class=\"ax-conversation-avatar\">\n  @if (customComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; inputs: customInputs()\" />\n  } @else {\n    <ax-avatar [size]=\"size()\">\n      @if (fallbackDisplay().avatar; as avatarSrc) {\n        <ax-image [src]=\"avatarSrc\" [alt]=\"fallbackDisplay().name\"></ax-image>\n      } @else if (fallbackDisplay().icon; as iconClass) {\n        <ax-icon><i [class]=\"iconClass\" aria-hidden=\"true\"></i></ax-icon>\n      } @else {\n        <ax-label>{{ fallbackInitials() }}</ax-label>\n      }\n    </ax-avatar>\n  }\n\n  @if (showStatus() && resolvedStatus(); as presence) {\n    <span\n      class=\"ax-conversation-avatar-status\"\n      [class.status-online]=\"presence === 'online'\"\n      [class.status-offline]=\"presence === 'offline'\"\n      [class.status-away]=\"presence === 'away'\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar{display:inline-flex}ax-conversation-avatar .ax-conversation-avatar{position:relative;display:inline-flex}ax-conversation-avatar .ax-conversation-avatar-status{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * .5);bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px)}ax-conversation-avatar .ax-conversation-avatar-status.status-online{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-success-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-away{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-warning-500))}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationAvatarComponent, decorators: [{
             type: Component,
@@ -6426,7 +6651,7 @@ class AXConversationInfoBarComponent {
         }
     }
     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", avatarClick: "avatarClick", searchClick: "searchClick", searchQuery: "searchQuery", menuItemAction: "menuItemAction" }, ngImport: i0, template: "    @if (activeConversation(); as conversation) {\n      <div class=\"info-bar\">\n        <!-- Left: Avatar and Info -->\n        <ng-content select=\"ax-prefix\"></ng-content>\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'\"\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') {\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\">\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\"></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 class=\"info-component-fullwidth\" animate.enter=\"slide-in\" animate.leave=\"slide-out\">\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\">\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-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;cursor:pointer;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:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.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", avatarClick: "avatarClick", searchClick: "searchClick", searchQuery: "searchQuery", menuItemAction: "menuItemAction" }, ngImport: i0, template: "    @if (activeConversation(); as conversation) {\n      <div class=\"info-bar\">\n        <!-- Left: Avatar and Info -->\n        <ng-content select=\"ax-prefix\"></ng-content>\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'\"\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') {\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\">\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\"></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 class=\"info-component-fullwidth\" animate.enter=\"slide-in\" animate.leave=\"slide-out\">\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\">\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-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;cursor:pointer;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:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoBarComponent, decorators: [{
             type: Component,
@@ -6567,7 +6792,7 @@ class AXConversationForwardMessageDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationForwardMessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationForwardMessageDialogComponent, isStandalone: true, selector: "ax-conversation-forward-message-dialog", inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationForwardMessageDialogComponent }], viewQueries: [{ propertyName: "forwardListEmptyTpl", first: true, predicate: ["forwardListEmpty"], descendants: true, isSignal: true }, { propertyName: "forwardList", first: true, predicate: ["forwardList"], descendants: true, isSignal: true }], ngImport: i0, template: "    <div class=\"forward-message-dialog\">\n      <ng-template #forwardListEmpty>\n        <div class=\"forward-list-empty\">\n          @if (forwardSearchQuery()) {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-search' | translate | async }}\n          } @else {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-available' | translate | async }}\n          }\n        </div>\n      </ng-template>\n\n      <div class=\"dialog-content\">\n        <div class=\"forward-list-wrap\">\n          <ax-list\n            #forwardList\n            class=\"forward-list\"\n            [dataSource]=\"forwardListDataSource\"\n            [multiple]=\"true\"\n            [valueField]=\"'id'\"\n            [textField]=\"'title'\"\n            [checkbox]=\"false\"\n            [itemHeight]=\"52\"\n            [ngModel]=\"selectedConversationIds()\"\n            (ngModelChange)=\"selectedConversationIds.set($event ?? [])\"\n            [emptyTemplate]=\"forwardListEmptyTpl()\"\n            [itemTemplate]=\"forwardItemTpl\"\n          >\n            <ax-header class=\"forward-list-header\">\n              <div class=\"forward-list-header-inner\">\n                <ax-search-box\n                  [value]=\"forwardSearchQuery()\"\n                  (valueChange)=\"onForwardSearchChange($event)\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n                ></ax-search-box>\n              </div>\n            </ax-header>\n          </ax-list>\n        </div>\n      </div>\n\n      <ng-template #forwardItemTpl let-item>\n        @if (conversationFromItem(item); as conversation) {\n          <div class=\"forward-item-content\">\n            <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isSelected(conversation.id)\" tabindex=\"0\" />\n            <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"36\" />\n            <span class=\"forward-title-text ax-truncated\">{{ conversation.title }}</span>\n          </div>\n        }\n      </ng-template>\n\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n            [look]=\"'solid'\"\n            (onClick)=\"onCancel()\"\n          ></ax-button>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.forward' | translate | async\"\n            [look]=\"'solid'\"\n            [color]=\"'primary'\"\n            [disabled]=\"!canForward()\"\n            (onClick)=\"onForward()\"\n          ></ax-button>\n        </ax-suffix>\n      </ax-footer>\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-forward-message-dialog{display:block}ax-conversation-forward-message-dialog .forward-message-dialog{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-forward-message-dialog .dialog-content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden}ax-conversation-forward-message-dialog .forward-list-wrap{overflow:hidden;height:min(50vh,24rem)}ax-conversation-forward-message-dialog .forward-list{display:block;height:100%}ax-conversation-forward-message-dialog .forward-list-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-forward-message-dialog .forward-list-header-inner{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-forward-message-dialog .forward-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 2);transition:background-color .2s ease}ax-conversation-forward-message-dialog .forward-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-forward-message-dialog .forward-list-empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 5);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-forward-message-dialog .dialog-footer{flex-shrink:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { 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: 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: 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: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationForwardMessageDialogComponent, isStandalone: true, selector: "ax-conversation-forward-message-dialog", inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationForwardMessageDialogComponent }], viewQueries: [{ propertyName: "forwardListEmptyTpl", first: true, predicate: ["forwardListEmpty"], descendants: true, isSignal: true }, { propertyName: "forwardList", first: true, predicate: ["forwardList"], descendants: true, isSignal: true }], ngImport: i0, template: "    <div class=\"forward-message-dialog\">\n      <ng-template #forwardListEmpty>\n        <div class=\"forward-list-empty\">\n          @if (forwardSearchQuery()) {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-search' | translate | async }}\n          } @else {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-available' | translate | async }}\n          }\n        </div>\n      </ng-template>\n\n      <div class=\"dialog-content\">\n        <div class=\"forward-list-wrap\">\n          <ax-list\n            #forwardList\n            class=\"forward-list\"\n            [dataSource]=\"forwardListDataSource\"\n            [multiple]=\"true\"\n            [valueField]=\"'id'\"\n            [textField]=\"'title'\"\n            [checkbox]=\"false\"\n            [itemHeight]=\"52\"\n            [ngModel]=\"selectedConversationIds()\"\n            (ngModelChange)=\"selectedConversationIds.set($event ?? [])\"\n            [emptyTemplate]=\"forwardListEmptyTpl()\"\n            [itemTemplate]=\"forwardItemTpl\"\n          >\n            <ax-header class=\"forward-list-header\">\n              <div class=\"forward-list-header-inner\">\n                <ax-search-box\n                  [value]=\"forwardSearchQuery()\"\n                  (valueChange)=\"onForwardSearchChange($event)\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n                ></ax-search-box>\n              </div>\n            </ax-header>\n          </ax-list>\n        </div>\n      </div>\n\n      <ng-template #forwardItemTpl let-item>\n        @if (conversationFromItem(item); as conversation) {\n          <div class=\"forward-item-content\">\n            <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isSelected(conversation.id)\" tabindex=\"0\" />\n            <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"36\" />\n            <span class=\"forward-title-text ax-truncated\">{{ conversation.title }}</span>\n          </div>\n        }\n      </ng-template>\n\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n            [look]=\"'solid'\"\n            (onClick)=\"onCancel()\"\n          ></ax-button>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.forward' | translate | async\"\n            [look]=\"'solid'\"\n            [color]=\"'primary'\"\n            [disabled]=\"!canForward()\"\n            (onClick)=\"onForward()\"\n          ></ax-button>\n        </ax-suffix>\n      </ax-footer>\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-forward-message-dialog{display:block}ax-conversation-forward-message-dialog .forward-message-dialog{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-forward-message-dialog .dialog-content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden}ax-conversation-forward-message-dialog .forward-list-wrap{overflow:hidden;height:min(50vh,24rem)}ax-conversation-forward-message-dialog .forward-list{display:block;height:100%}ax-conversation-forward-message-dialog .forward-list-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-forward-message-dialog .forward-list-header-inner{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-forward-message-dialog .forward-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 2);transition:background-color .2s ease}ax-conversation-forward-message-dialog .forward-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-forward-message-dialog .forward-list-empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 5);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-forward-message-dialog .dialog-footer{flex-shrink:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { 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: 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: 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: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationForwardMessageDialogComponent, decorators: [{
             type: Component,
@@ -6794,46 +7019,7 @@ function resolveReactionPickerPlacement(isOwnMessage, isRtl) {
     return openTowardPhysicalStart ? 'end-top' : 'start-top';
 }
 
-/** Subtle chat-area wash when `messageListBackground` is not set in config (indigo → violet → rose → amber). */
-const AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND = 
-// 'linear-gradient(165deg, rgba(99, 102, 241, 0.14) 0%, rgba(139, 92, 246, 0.10) 34%, rgba(244, 114, 182, 0.11) 66%, rgba(251, 191, 36, 0.15) 100%)';
-'rgb(var(--ax-sys-color-primary-lightest-surface))';
-/** Turn bare `https://...` or `/path` into valid CSS `background` for images. */
-function normalizeMessageListBackgroundValue(raw) {
-    const v = raw.trim();
-    if (v === '') {
-        return AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND;
-    }
-    const lower = v.toLowerCase();
-    if (lower === 'transparent' || lower === 'none') {
-        return v;
-    }
-    if (/^url\s*\(/i.test(v)) {
-        return v;
-    }
-    if (/^https?:\/\//i.test(v)) {
-        const escaped = v.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-        return `url("${escaped}") center / cover no-repeat`;
-    }
-    if (v.startsWith('/') && !/^(linear|radial|conic|rgb|hsl|var)\b/i.test(v)) {
-        const escaped = v.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-        return `url("${escaped}") center / cover no-repeat`;
-    }
-    return v;
-}
 class AXConversationMessageListComponent {
-    /**
-     * Background for the message list scroll area from config, or the built-in soft gradient when unset/empty.
-     * Set `messageListBackground` to `transparent` or `none` for a flat look.
-     */
-    messageListBackgroundStyle() {
-        const conversationBackground = this.activeConversation()?.metadata?.['messageListBackground'];
-        const raw = typeof conversationBackground === 'string' ? conversationBackground : this.config.messageListBackground;
-        if (typeof raw !== 'string') {
-            return AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND;
-        }
-        return normalizeMessageListBackgroundValue(raw);
-    }
     resolvedEmptyStateComponent() {
         const fromMetadata = this.activeConversation()?.metadata?.['messageListEmptyComponent'];
         if (typeof fromMetadata === 'function') {
@@ -6854,7 +7040,21 @@ class AXConversationMessageListComponent {
         this.infoBarService = inject(AXConversationInfoBarService);
         this.translation = inject(AXTranslationService);
         this.document = inject(DOCUMENT);
+        this.platform = inject(AXPlatform);
         this.config = inject(AX_CONVERSATION_CONFIG);
+        /**
+         * Background for the message list scroll area from config, or the built-in soft wash when unset/empty.
+         * Set `messageListBackground` to `transparent` or `none` for a flat look.
+         * Supports `{ light, dark }` for theme-specific backgrounds.
+         */
+        this.messageListBackgroundStyle = computed(() => {
+            this.platform.themeMode();
+            const isDark = this.platform.isDark();
+            const conversationBackground = this.activeConversation()?.metadata?.['messageListBackground'];
+            const source = conversationBackground ?? this.config.messageListBackground;
+            return resolveMessageListBackgroundStyle(source, isDark);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "messageListBackgroundStyle" }] : /* istanbul ignore next */ []));
         /** Fallback when no conversation is active and no `ax-conversation-message-list-no-active` content is projected. */
         this.noActiveFallbackComponent = AXConversationMessageListNoActiveDefaultComponent;
         // Timeout cleanup to prevent memory leaks
@@ -6896,6 +7096,9 @@ class AXConversationMessageListComponent {
         this.showScrollButton = this.messageListService.showScrollButton;
         /** Active conversation */
         this.activeConversation = this.conversationService.activeConversation;
+        /** Whether the active conversation allows message reactions. */
+        this.reactionsEnabled = computed(() => isConversationReactionsEnabled(this.activeConversation()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reactionsEnabled" }] : /* istanbul ignore next */ []));
         /** Messages */
         this.messages = this.conversationService.activeMessages;
         /** Message action event */
@@ -6940,6 +7143,7 @@ class AXConversationMessageListComponent {
             untracked(() => {
                 if (currentConversationId !== previousConversationId) {
                     this.contextMenuMessageId.set(null);
+                    this.closeReactionPicker();
                     this.observedReadMessageIds.clear();
                     this.composerService.onConversationChanged(previousConversationId, currentConversationId);
                     this.infoBarService.onConversationChanged();
@@ -7253,8 +7457,18 @@ class AXConversationMessageListComponent {
         }
         return `${reaction.userIds.slice(0, 3).join(', ')} and ${reaction.count - 3} more`;
     }
+    /** Whether reactions can be shown or added for a message in the active conversation. */
+    messageSupportsReactions(message) {
+        if (!this.reactionsEnabled()) {
+            return false;
+        }
+        return this.registry.messageRenderers.getRenderer(message)?.capabilities.supportsReactions ?? false;
+    }
     /** Toggle reaction picker */
     toggleReactionPicker(message, event) {
+        if (!this.messageSupportsReactions(message)) {
+            return;
+        }
         const button = event.currentTarget ?? event.target.closest('button');
         if (!button) {
             return;
@@ -7327,6 +7541,9 @@ class AXConversationMessageListComponent {
     }
     /** Handle reaction click */
     onReactionClick(message, emoji) {
+        if (!this.messageSupportsReactions(message)) {
+            return;
+        }
         this.messageListService.reactToMessage(message.id, emoji);
     }
     /** Handle message action */
@@ -7567,7 +7784,7 @@ class AXConversationMessageListComponent {
         return message.id;
     }
     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  @for (cid of [conv.id]; track cid) {\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      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          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <ax-loading></ax-loading>\n          <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\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 trackMessageGroup($index, group)) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track trackMessage($index, message)) {\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                  <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                  <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 (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 (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;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}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;align-items:center;justify-content:center;text-align:center}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{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);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-medium, 500);font-weight:var(--font-weight-medium, 500)}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{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)}@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);background-color:rgba(var(--ax-sys-color-lightest-surface));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 .reply-preview{margin-bottom:.1rem;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{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));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-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}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.25rem;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.25rem;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-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;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-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}ax-conversation-message-list .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)}ax-conversation-message-list .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%}ax-conversation-message-list .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)}ax-conversation-message-list .picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .picker-close:focus-visible,ax-conversation-message-list .reaction-picker-emoji: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 .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)}ax-conversation-message-list .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}ax-conversation-message-list .reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-message-list .reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}ax-conversation-message-list .reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}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}}}@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: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "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  @for (cid of [conv.id]; track cid) {\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      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          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <ax-loading></ax-loading>\n          <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\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 trackMessageGroup($index, group)) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track trackMessage($index, message)) {\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;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}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;align-items:center;justify-content:center;text-align:center}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{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);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-medium, 500);font-weight:var(--font-weight-medium, 500)}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{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)}@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);background-color:rgba(var(--ax-sys-color-lightest-surface));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 .reply-preview{margin-bottom:.1rem;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{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));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-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}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.25rem;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.25rem;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;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-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}.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: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "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,
@@ -7587,7 +7804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXUploaderZoneDirective,
                         AXConversationAvatarComponent,
                         AXConversationRegistryComponentOutletComponent,
-                    ], template: "@if (activeConversation(); as conv) {\n  @for (cid of [conv.id]; track cid) {\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      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          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <ax-loading></ax-loading>\n          <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\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 trackMessageGroup($index, group)) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track trackMessage($index, message)) {\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                  <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                  <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 (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 (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;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}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;align-items:center;justify-content:center;text-align:center}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{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);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-medium, 500);font-weight:var(--font-weight-medium, 500)}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{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)}@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);background-color:rgba(var(--ax-sys-color-lightest-surface));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 .reply-preview{margin-bottom:.1rem;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{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));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-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}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.25rem;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.25rem;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-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;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-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}ax-conversation-message-list .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)}ax-conversation-message-list .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%}ax-conversation-message-list .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)}ax-conversation-message-list .picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .picker-close:focus-visible,ax-conversation-message-list .reaction-picker-emoji: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 .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)}ax-conversation-message-list .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}ax-conversation-message-list .reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-message-list .reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}ax-conversation-message-list .reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}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}}}@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  @for (cid of [conv.id]; track cid) {\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      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          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <ax-loading></ax-loading>\n          <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\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 trackMessageGroup($index, group)) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track trackMessage($index, message)) {\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;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}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;align-items:center;justify-content:center;text-align:center}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{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);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-medium, 500);font-weight:var(--font-weight-medium, 500)}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{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)}@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);background-color:rgba(var(--ax-sys-color-lightest-surface));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 .reply-preview{margin-bottom:.1rem;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{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));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-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}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.25rem;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.25rem;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;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-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}.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"] }]
         }], 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"] }] } });
 
 /**
@@ -7734,7 +7951,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class AXConversationSidebarService {
     constructor() {
         this.conversationService = inject(AXConversationService);
-        this.config = inject(AX_CONVERSATION_CONFIG);
         // Local UI state
         this.searchQuery = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
@@ -7749,55 +7965,12 @@ class AXConversationSidebarService {
         ...(ngDevMode ? [{ debugName: "hasMoreConversations" }] : /* istanbul ignore next */ []));
         // Tabs
         this.enabledTabs = this.registry.conversationTabs.enabledTabs;
-        // Memoization cache for filtered conversations
-        this.filterCache = new Map();
-        // Filtered conversations with memoization
+        // Filtered conversations (recomputed on every inbox change — no memo cache)
         this.filteredConversations = computed(() => {
             const conversations = this.conversations();
             const query = this.searchQuery();
             const tabId = this.activeTabId();
-            // Create cache key that includes pinned state, conversation order, and last message timestamps
-            const pinnedIds = conversations
-                .filter((c) => c.pinned)
-                .map((c) => c.id)
-                .join(',');
-            // Include last message timestamps in cache key to detect order changes
-            const timestampsHash = conversations
-                .map((c) => {
-                const time = c.lastMessageAt instanceof Date
-                    ? c.lastMessageAt.getTime()
-                    : c.lastMessage?.timestamp instanceof Date
-                        ? c.lastMessage.timestamp.getTime()
-                        : 0;
-                return `${c.id}:${time}`;
-            })
-                .join('|');
-            // Unread counts and archive state affect tab badges and list membership
-            const unreadHash = conversations.map((c) => `${c.id}:${c.unreadCount ?? 0}`).join('|');
-            const archivedHash = conversations.map((c) => `${c.id}:${c.archived ? 1 : 0}`).join('|');
-            const cacheKey = `${conversations.length}-${query}-${tabId}-${pinnedIds}-${timestampsHash}-${unreadHash}-${archivedHash}`;
-            // Return cached result if available
-            if (this.filterCache.has(cacheKey)) {
-                const cached = this.filterCache.get(cacheKey);
-                if (cached) {
-                    return cached;
-                }
-            }
-            // Perform filtering and sorting
-            const result = this.filterAndSort(conversations, query, tabId);
-            // Cache the result
-            this.filterCache.set(cacheKey, result);
-            // Cleanup old cache entries if cache is too large (proper LRU cleanup)
-            const maxCacheSize = this.config.filterCacheSize;
-            if (this.filterCache.size > maxCacheSize) {
-                // Delete oldest entries to maintain cache size
-                const entriesToDelete = this.filterCache.size - maxCacheSize;
-                const keys = Array.from(this.filterCache.keys());
-                for (let i = 0; i < entriesToDelete; i++) {
-                    this.filterCache.delete(keys[i]);
-                }
-            }
-            return result;
+            return this.filterAndSort(conversations, query, tabId);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filteredConversations" }] : /* istanbul ignore next */ []));
         void this.conversationService.ensureInitialized();
@@ -7910,6 +8083,8 @@ class AXConversationSidebarComponent {
         this.conversationService = inject(AXConversationService);
         this.popupService = inject(AXPopupService);
         this.translation = inject(AXTranslationService);
+        this.ngZone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
         /** Conversation selected event */
         this.conversationSelected = output();
         /** Search debouncing */
@@ -7963,7 +8138,13 @@ class AXConversationSidebarComponent {
             },
         });
         if (result?.data) {
-            this.selectConversation(result.data);
+            const conversation = result.data;
+            // Popup closes outside the normal component tree — run inside the zone so signal
+            // updates propagate to the sidebar list immediately.
+            this.ngZone.run(() => {
+                this.selectConversation(conversation);
+                this.cdr.markForCheck();
+            });
         }
     }
     /** Handle infinite scroll threshold - delegate to service */
@@ -7975,7 +8156,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 ?? 200\"\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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.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\">\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 ?? 200\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationSidebarComponent, decorators: [{
             type: Component,
@@ -8039,7 +8220,7 @@ class AXConversationAvatarPickerComponent {
         this.avatarUrl.set('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationAvatarPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationAvatarPickerComponent, isStandalone: true, selector: "ax-conversation-avatar-picker", inputs: { showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarUrl: "avatarUrlChange", onFileSelected: "onFileSelected" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "    <div class=\"avatar-picker\">\n      <!-- Preview -->\n      <div class=\"avatar-preview\" (click)=\"triggerFileInput()\">\n        @if (avatarUrl()) {\n          <ax-image [src]=\"avatarUrl()\" [alt]=\"'@acorex:chat.avatar.preview' | translate | async\"></ax-image>\n          <div class=\"preview-overlay\">\n            <i class=\"fa-light fa-camera\"></i>\n          </div>\n        } @else {\n          <div class=\"avatar-placeholder\">\n            <i class=\"fa-light fa-camera\"></i>\n            <span class=\"placeholder-text\">{{ '@acorex:chat.actions.choose-image' | translate | async }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"avatar-actions\">\n        <ax-button\n          [look]=\"'solid'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            avatarUrl()\n              ? ('@acorex:chat.actions.change-image' | translate | async)\n              : ('@acorex:chat.actions.upload-image' | translate | async)\n          \"\n          (onClick)=\"triggerFileInput()\"\n        >\n          <ax-prefix>\n            <ax-icon><i [class]=\"avatarUrl() ? 'fa-light fa-image' : 'fa-light fa-upload'\"></i></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        @if (showClearButton() && avatarUrl()) {\n          <ax-button\n            [look]=\"'outline'\"\n            [color]=\"'danger'\"\n            [text]=\"'@acorex:chat.actions.remove-image' | translate | async\"\n            (onClick)=\"clearAvatar()\"\n          >\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-trash-can\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Hidden File Input -->\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        class=\"avatar-picker__file-input\"\n        (change)=\"onFileInputChange($event)\"\n      />\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar-picker{display:block}ax-conversation-avatar-picker .avatar-picker{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 6);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-avatar-picker .avatar-preview{position:relative;display:flex;height:100px;width:100px;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));transition:all .25s ease;box-shadow:0 2px 8px #00000014}ax-conversation-avatar-picker .avatar-preview:hover{border-color:rgba(var(--ax-sys-color-primary-500));box-shadow:0 4px 12px #0000001f}ax-conversation-avatar-picker .avatar-preview:hover .preview-overlay{opacity:100%}ax-conversation-avatar-picker .avatar-preview ax-image{height:100%;width:100%}ax-conversation-avatar-picker .preview-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:var(--color-white, #fff);opacity:0%;background:#000000a6;transition:opacity .25s ease}ax-conversation-avatar-picker .avatar-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:2rem;color:rgba(var(--ax-sys-color-on-surface),.65)}ax-conversation-avatar-picker .placeholder-text{font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-widest, .1em);letter-spacing:var(--tracking-widest, .1em);text-transform:uppercase;opacity:80%}ax-conversation-avatar-picker .avatar-actions{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-avatar-picker .avatar-actions ax-button{width:100%}ax-conversation-avatar-picker .avatar-picker__file-input{display:none}}@property --tw-border-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-border-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: "ngmodule", type: FormsModule }, { 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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.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: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationAvatarPickerComponent, isStandalone: true, selector: "ax-conversation-avatar-picker", inputs: { showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarUrl: "avatarUrlChange", onFileSelected: "onFileSelected" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "    <div class=\"avatar-picker\">\n      <!-- Preview -->\n      <div class=\"avatar-preview\" (click)=\"triggerFileInput()\">\n        @if (avatarUrl()) {\n          <ax-image [src]=\"avatarUrl()\" [alt]=\"'@acorex:chat.avatar.preview' | translate | async\"></ax-image>\n          <div class=\"preview-overlay\">\n            <i class=\"fa-light fa-camera\"></i>\n          </div>\n        } @else {\n          <div class=\"avatar-placeholder\">\n            <i class=\"fa-light fa-camera\"></i>\n            <span class=\"placeholder-text\">{{ '@acorex:chat.actions.choose-image' | translate | async }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"avatar-actions\">\n        <ax-button\n          [look]=\"'solid'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            avatarUrl()\n              ? ('@acorex:chat.actions.change-image' | translate | async)\n              : ('@acorex:chat.actions.upload-image' | translate | async)\n          \"\n          (onClick)=\"triggerFileInput()\"\n        >\n          <ax-prefix>\n            <ax-icon><i [class]=\"avatarUrl() ? 'fa-light fa-image' : 'fa-light fa-upload'\"></i></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        @if (showClearButton() && avatarUrl()) {\n          <ax-button\n            [look]=\"'outline'\"\n            [color]=\"'danger'\"\n            [text]=\"'@acorex:chat.actions.remove-image' | translate | async\"\n            (onClick)=\"clearAvatar()\"\n          >\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-trash-can\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Hidden File Input -->\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        class=\"avatar-picker__file-input\"\n        (change)=\"onFileInputChange($event)\"\n      />\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar-picker{display:block}ax-conversation-avatar-picker .avatar-picker{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 6);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-avatar-picker .avatar-preview{position:relative;display:flex;height:100px;width:100px;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));transition:all .25s ease;box-shadow:0 2px 8px #00000014}ax-conversation-avatar-picker .avatar-preview:hover{border-color:rgba(var(--ax-sys-color-primary-500));box-shadow:0 4px 12px #0000001f}ax-conversation-avatar-picker .avatar-preview:hover .preview-overlay{opacity:100%}ax-conversation-avatar-picker .avatar-preview ax-image{height:100%;width:100%}ax-conversation-avatar-picker .preview-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:var(--color-white, #fff);opacity:0%;background:#000000a6;transition:opacity .25s ease}ax-conversation-avatar-picker .avatar-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:2rem;color:rgba(var(--ax-sys-color-on-surface),.65)}ax-conversation-avatar-picker .placeholder-text{font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-widest, .1em);letter-spacing:var(--tracking-widest, .1em);text-transform:uppercase;opacity:80%}ax-conversation-avatar-picker .avatar-actions{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-avatar-picker .avatar-actions ax-button{width:100%}ax-conversation-avatar-picker .avatar-picker__file-input{display:none}}@property --tw-border-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-border-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: "ngmodule", type: FormsModule }, { 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: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationAvatarPickerComponent, decorators: [{
             type: Component,
@@ -8134,6 +8315,8 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
         ...(ngDevMode ? [{ debugName: "_syncPopupTitleEffect" }] : /* istanbul ignore next */ []));
         this.usersListEmptyTpl = viewChild.required('usersListEmpty', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "usersListEmptyTpl" }] : /* istanbul ignore next */ []));
+        this.usersListLoadingTpl = viewChild.required('usersListLoading', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "usersListLoadingTpl" }] : /* istanbul ignore next */ []));
         this.usersList = viewChild('usersList', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "usersList" }] : /* istanbul ignore next */ []));
         this.usersListDataSource = new AXDataSource({
@@ -8249,7 +8432,7 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationNewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationNewDialogComponent, isStandalone: true, selector: "ax-conversation-new-dialog", inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationNewDialogComponent }], viewQueries: [{ propertyName: "usersListEmptyTpl", first: true, predicate: ["usersListEmpty"], descendants: true, isSignal: true }, { propertyName: "usersList", first: true, predicate: ["usersList"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "    <div class=\"new-conversation-panel\">\n      <div class=\"new-conversation-dialog-content\">\n        @if (showUserPickerStep()) {\n          <div class=\"form-field form-field--grow\">\n            <div class=\"users-list-wrap\">\n              <div class=\"users-list-search\">\n                <ax-search-box\n                  [value]=\"searchQuery()\"\n                  (valueChange)=\"onSearchChange($event)\"\n                  [disabled]=\"creating()\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-users' | translate | async\"\n                ></ax-search-box>\n              </div>\n              <ax-list\n                #usersList\n                class=\"users-list\"\n                [dataSource]=\"usersListDataSource\"\n                [multiple]=\"true\"\n                [checkbox]=\"false\"\n                [disabled]=\"creating()\"\n                [valueField]=\"'id'\"\n                [textField]=\"'name'\"\n                [itemHeight]=\"60\"\n                [ngModel]=\"selectedUserIds()\"\n                (ngModelChange)=\"onSelectedUsersChange($event ?? [])\"\n                [emptyTemplate]=\"usersListEmptyTpl()\"\n                [itemTemplate]=\"userItemTpl\"\n              ></ax-list>\n            </div>\n          </div>\n        }\n\n        @if (showGroupDetailsStep()) {\n          <div class=\"group-details-step\">\n            <div class=\"form-field\">\n              <input\n                class=\"title-input\"\n                [ngModel]=\"groupTitle()\"\n                (ngModelChange)=\"groupTitle.set($event ?? '')\"\n                [disabled]=\"creating()\"\n                [placeholder]=\"'@acorex:chat.placeholders.group-title-required' | translate | async\"\n              />\n            </div>\n            <div class=\"form-field\">\n              <ax-conversation-avatar-picker [(avatarUrl)]=\"groupAvatar\"></ax-conversation-avatar-picker>\n            </div>\n          </div>\n        }\n      </div>\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          @if (showGroupBackButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.back' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onBackFromGroupDetails()\"\n            ></ax-button>\n          } @else {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onCancel()\"\n            ></ax-button>\n          }\n          @if (showNextButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.next' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canGoNextToGroupDetails() || creating()\"\n              (onClick)=\"onNextToGroupDetails()\"\n            ></ax-button>\n          }\n          @if (showCreateButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.create' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canCreate() || creating()\"\n              (onClick)=\"onCreateConversation()\"\n            ></ax-button>\n          }\n        </ax-suffix>\n      </ax-footer>\n    </div>\n\n    <ng-template #usersListEmpty>\n      <div class=\"users-list-empty\">\n        @if (searchQuery()) {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-search' | translate | async }}\n        } @else {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-available' | translate | async }}\n        }\n      </div>\n    </ng-template>\n\n    <ng-template #userItemTpl let-item>\n      @if (userFromItem(item); as user) {\n        <div class=\"user-item-content\">\n          <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isUserSelected(user.id)\" tabindex=\"0\" />\n          <ax-conversation-avatar\n            kind=\"user\"\n            [userId]=\"user.id\"\n            [size]=\"48\"\n            [name]=\"user.name\"\n            [avatar]=\"user.avatar\"\n            [icon]=\"user.icon\"\n          />\n          <div class=\"user-item-text\">\n            <span class=\"truncated user-name-text\">{{ user.name }}</span>\n            @if (user.description) {\n              <span class=\"user-description-text truncated\">{{ user.description }}</span>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n", styles: ["@layer properties;@layer components{ax-conversation-new-dialog{display:block}ax-conversation-new-dialog .new-conversation-panel{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-new-dialog .new-conversation-dialog-content{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}ax-conversation-new-dialog .form-field--grow{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-new-dialog .group-details-step{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .form-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-new-dialog .field-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.6)}ax-conversation-new-dialog .title-input{height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);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-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}ax-conversation-new-dialog .users-list-wrap{display:flex;flex-direction:column;overflow:hidden;height:min(50vh,36rem)}ax-conversation-new-dialog .users-list-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .users-list{display:block;min-height:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-new-dialog .user-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .user-item-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-new-dialog .user-name-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .user-description-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-new-dialog .users-list-empty{padding:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.85rem;opacity:70%}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{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-font-weight: initial;--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { 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: 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: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationNewDialogComponent, isStandalone: true, selector: "ax-conversation-new-dialog", inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationNewDialogComponent }], viewQueries: [{ propertyName: "usersListEmptyTpl", first: true, predicate: ["usersListEmpty"], descendants: true, isSignal: true }, { propertyName: "usersListLoadingTpl", first: true, predicate: ["usersListLoading"], descendants: true, isSignal: true }, { propertyName: "usersList", first: true, predicate: ["usersList"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "    <div class=\"new-conversation-panel\">\n      <div class=\"new-conversation-dialog-content\">\n        @if (showUserPickerStep()) {\n          <div class=\"form-field form-field--grow\">\n            <div class=\"users-list-wrap\">\n              <div class=\"users-list-search\">\n                <ax-search-box\n                  [value]=\"searchQuery()\"\n                  (valueChange)=\"onSearchChange($event)\"\n                  [disabled]=\"creating()\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-users' | translate | async\"\n                ></ax-search-box>\n              </div>\n              <ax-list\n                #usersList\n                class=\"users-list\"\n                [dataSource]=\"usersListDataSource\"\n                [multiple]=\"true\"\n                [checkbox]=\"false\"\n                [disabled]=\"creating()\"\n                [valueField]=\"'id'\"\n                [textField]=\"'name'\"\n                [itemHeight]=\"60\"\n                [ngModel]=\"selectedUserIds()\"\n                (ngModelChange)=\"onSelectedUsersChange($event ?? [])\"\n                [emptyTemplate]=\"usersListEmptyTpl()\"\n                [loadingTemplate]=\"usersListLoadingTpl()\"\n                [itemTemplate]=\"userItemTpl\"\n              ></ax-list>\n            </div>\n          </div>\n        }\n\n        @if (showGroupDetailsStep()) {\n          <div class=\"group-details-step\">\n            <div class=\"form-field\">\n              <input\n                class=\"title-input\"\n                [ngModel]=\"groupTitle()\"\n                (ngModelChange)=\"groupTitle.set($event ?? '')\"\n                [disabled]=\"creating()\"\n                [placeholder]=\"'@acorex:chat.placeholders.group-title-required' | translate | async\"\n              />\n            </div>\n            <div class=\"form-field\">\n              <ax-conversation-avatar-picker [(avatarUrl)]=\"groupAvatar\"></ax-conversation-avatar-picker>\n            </div>\n          </div>\n        }\n      </div>\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          @if (showGroupBackButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.back' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onBackFromGroupDetails()\"\n            ></ax-button>\n          } @else {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onCancel()\"\n            ></ax-button>\n          }\n          @if (showNextButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.next' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canGoNextToGroupDetails() || creating()\"\n              (onClick)=\"onNextToGroupDetails()\"\n            ></ax-button>\n          }\n          @if (showCreateButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.create' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canCreate() || creating()\"\n              (onClick)=\"onCreateConversation()\"\n            ></ax-button>\n          }\n        </ax-suffix>\n      </ax-footer>\n    </div>\n\n    <ng-template #usersListEmpty>\n      <div class=\"users-list-empty\">\n        @if (searchQuery()) {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-search' | translate | async }}\n        } @else {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-available' | translate | async }}\n        }\n      </div>\n    </ng-template>\n\n    <ng-template #usersListLoading>\n      <div class=\"user-item-skeleton\">\n        <ax-skeleton class=\"skeleton-checkbox\" [animated]=\"true\"></ax-skeleton>\n        <ax-skeleton class=\"skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n        <div class=\"skeleton-text\">\n          <ax-skeleton class=\"skeleton-name\" [animated]=\"true\"></ax-skeleton>\n          <ax-skeleton class=\"skeleton-description\" [animated]=\"true\"></ax-skeleton>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template #userItemTpl let-item>\n      @if (userFromItem(item); as user) {\n        <div class=\"user-item-content\">\n          <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isUserSelected(user.id)\" tabindex=\"0\" />\n          <ax-conversation-avatar\n            kind=\"user\"\n            [userId]=\"user.id\"\n            [size]=\"48\"\n            [name]=\"user.name\"\n            [avatar]=\"user.avatar\"\n            [icon]=\"user.icon\"\n          />\n          <div class=\"user-item-text\">\n            <span class=\"truncated user-name-text\">{{ user.name }}</span>\n            @if (user.description) {\n              <span class=\"user-description-text truncated\">{{ user.description }}</span>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n", styles: ["@layer properties;@layer components{ax-conversation-new-dialog{display:block}ax-conversation-new-dialog .new-conversation-panel{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-new-dialog .new-conversation-dialog-content{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}ax-conversation-new-dialog .form-field--grow{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-new-dialog .group-details-step{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .form-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-new-dialog .field-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.6)}ax-conversation-new-dialog .title-input{height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);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-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}ax-conversation-new-dialog .users-list-wrap{display:flex;flex-direction:column;overflow:hidden;height:min(50vh,36rem)}ax-conversation-new-dialog .users-list-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .users-list{display:block;min-height:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-new-dialog .user-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .user-item-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-new-dialog .user-name-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .user-description-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-new-dialog .users-list-empty{padding:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.85rem;opacity:70%}ax-conversation-new-dialog .user-item-skeleton{display:flex;height:60px;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .skeleton-checkbox{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);flex-shrink:0;border-radius:.25rem}ax-conversation-new-dialog .skeleton-avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-new-dialog .skeleton-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .skeleton-name{height:calc(var(--spacing, .25rem) * 4);width:calc(3/5 * 100%);border-radius:.25rem}ax-conversation-new-dialog .skeleton-description{height:calc(var(--spacing, .25rem) * 3);width:40%;border-radius:.25rem}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{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-font-weight: initial;--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: 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: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { 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: 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: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationNewDialogComponent, decorators: [{
             type: Component,
@@ -8260,11 +8443,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXListComponent,
                         AXSearchBoxComponent,
                         AXDecoratorGenericComponent,
+                        AXSkeletonComponent,
                         AXConversationAvatarPickerComponent,
                         AXConversationAvatarComponent,
                         AXTranslationModule,
-                    ], providers: [{ provide: AXClosableComponent, useExisting: AXConversationNewDialogComponent }], template: "    <div class=\"new-conversation-panel\">\n      <div class=\"new-conversation-dialog-content\">\n        @if (showUserPickerStep()) {\n          <div class=\"form-field form-field--grow\">\n            <div class=\"users-list-wrap\">\n              <div class=\"users-list-search\">\n                <ax-search-box\n                  [value]=\"searchQuery()\"\n                  (valueChange)=\"onSearchChange($event)\"\n                  [disabled]=\"creating()\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-users' | translate | async\"\n                ></ax-search-box>\n              </div>\n              <ax-list\n                #usersList\n                class=\"users-list\"\n                [dataSource]=\"usersListDataSource\"\n                [multiple]=\"true\"\n                [checkbox]=\"false\"\n                [disabled]=\"creating()\"\n                [valueField]=\"'id'\"\n                [textField]=\"'name'\"\n                [itemHeight]=\"60\"\n                [ngModel]=\"selectedUserIds()\"\n                (ngModelChange)=\"onSelectedUsersChange($event ?? [])\"\n                [emptyTemplate]=\"usersListEmptyTpl()\"\n                [itemTemplate]=\"userItemTpl\"\n              ></ax-list>\n            </div>\n          </div>\n        }\n\n        @if (showGroupDetailsStep()) {\n          <div class=\"group-details-step\">\n            <div class=\"form-field\">\n              <input\n                class=\"title-input\"\n                [ngModel]=\"groupTitle()\"\n                (ngModelChange)=\"groupTitle.set($event ?? '')\"\n                [disabled]=\"creating()\"\n                [placeholder]=\"'@acorex:chat.placeholders.group-title-required' | translate | async\"\n              />\n            </div>\n            <div class=\"form-field\">\n              <ax-conversation-avatar-picker [(avatarUrl)]=\"groupAvatar\"></ax-conversation-avatar-picker>\n            </div>\n          </div>\n        }\n      </div>\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          @if (showGroupBackButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.back' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onBackFromGroupDetails()\"\n            ></ax-button>\n          } @else {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onCancel()\"\n            ></ax-button>\n          }\n          @if (showNextButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.next' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canGoNextToGroupDetails() || creating()\"\n              (onClick)=\"onNextToGroupDetails()\"\n            ></ax-button>\n          }\n          @if (showCreateButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.create' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canCreate() || creating()\"\n              (onClick)=\"onCreateConversation()\"\n            ></ax-button>\n          }\n        </ax-suffix>\n      </ax-footer>\n    </div>\n\n    <ng-template #usersListEmpty>\n      <div class=\"users-list-empty\">\n        @if (searchQuery()) {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-search' | translate | async }}\n        } @else {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-available' | translate | async }}\n        }\n      </div>\n    </ng-template>\n\n    <ng-template #userItemTpl let-item>\n      @if (userFromItem(item); as user) {\n        <div class=\"user-item-content\">\n          <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isUserSelected(user.id)\" tabindex=\"0\" />\n          <ax-conversation-avatar\n            kind=\"user\"\n            [userId]=\"user.id\"\n            [size]=\"48\"\n            [name]=\"user.name\"\n            [avatar]=\"user.avatar\"\n            [icon]=\"user.icon\"\n          />\n          <div class=\"user-item-text\">\n            <span class=\"truncated user-name-text\">{{ user.name }}</span>\n            @if (user.description) {\n              <span class=\"user-description-text truncated\">{{ user.description }}</span>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n", styles: ["@layer properties;@layer components{ax-conversation-new-dialog{display:block}ax-conversation-new-dialog .new-conversation-panel{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-new-dialog .new-conversation-dialog-content{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}ax-conversation-new-dialog .form-field--grow{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-new-dialog .group-details-step{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .form-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-new-dialog .field-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.6)}ax-conversation-new-dialog .title-input{height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);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-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}ax-conversation-new-dialog .users-list-wrap{display:flex;flex-direction:column;overflow:hidden;height:min(50vh,36rem)}ax-conversation-new-dialog .users-list-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .users-list{display:block;min-height:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-new-dialog .user-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .user-item-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-new-dialog .user-name-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .user-description-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-new-dialog .users-list-empty{padding:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.85rem;opacity:70%}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{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-font-weight: initial;--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }], usersListEmptyTpl: [{ type: i0.ViewChild, args: ['usersListEmpty', { isSignal: true }] }], usersList: [{ type: i0.ViewChild, args: ['usersList', { isSignal: true }] }] } });
+                    ], providers: [{ provide: AXClosableComponent, useExisting: AXConversationNewDialogComponent }], template: "    <div class=\"new-conversation-panel\">\n      <div class=\"new-conversation-dialog-content\">\n        @if (showUserPickerStep()) {\n          <div class=\"form-field form-field--grow\">\n            <div class=\"users-list-wrap\">\n              <div class=\"users-list-search\">\n                <ax-search-box\n                  [value]=\"searchQuery()\"\n                  (valueChange)=\"onSearchChange($event)\"\n                  [disabled]=\"creating()\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-users' | translate | async\"\n                ></ax-search-box>\n              </div>\n              <ax-list\n                #usersList\n                class=\"users-list\"\n                [dataSource]=\"usersListDataSource\"\n                [multiple]=\"true\"\n                [checkbox]=\"false\"\n                [disabled]=\"creating()\"\n                [valueField]=\"'id'\"\n                [textField]=\"'name'\"\n                [itemHeight]=\"60\"\n                [ngModel]=\"selectedUserIds()\"\n                (ngModelChange)=\"onSelectedUsersChange($event ?? [])\"\n                [emptyTemplate]=\"usersListEmptyTpl()\"\n                [loadingTemplate]=\"usersListLoadingTpl()\"\n                [itemTemplate]=\"userItemTpl\"\n              ></ax-list>\n            </div>\n          </div>\n        }\n\n        @if (showGroupDetailsStep()) {\n          <div class=\"group-details-step\">\n            <div class=\"form-field\">\n              <input\n                class=\"title-input\"\n                [ngModel]=\"groupTitle()\"\n                (ngModelChange)=\"groupTitle.set($event ?? '')\"\n                [disabled]=\"creating()\"\n                [placeholder]=\"'@acorex:chat.placeholders.group-title-required' | translate | async\"\n              />\n            </div>\n            <div class=\"form-field\">\n              <ax-conversation-avatar-picker [(avatarUrl)]=\"groupAvatar\"></ax-conversation-avatar-picker>\n            </div>\n          </div>\n        }\n      </div>\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          @if (showGroupBackButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.back' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onBackFromGroupDetails()\"\n            ></ax-button>\n          } @else {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onCancel()\"\n            ></ax-button>\n          }\n          @if (showNextButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.next' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canGoNextToGroupDetails() || creating()\"\n              (onClick)=\"onNextToGroupDetails()\"\n            ></ax-button>\n          }\n          @if (showCreateButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.create' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canCreate() || creating()\"\n              (onClick)=\"onCreateConversation()\"\n            ></ax-button>\n          }\n        </ax-suffix>\n      </ax-footer>\n    </div>\n\n    <ng-template #usersListEmpty>\n      <div class=\"users-list-empty\">\n        @if (searchQuery()) {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-search' | translate | async }}\n        } @else {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-available' | translate | async }}\n        }\n      </div>\n    </ng-template>\n\n    <ng-template #usersListLoading>\n      <div class=\"user-item-skeleton\">\n        <ax-skeleton class=\"skeleton-checkbox\" [animated]=\"true\"></ax-skeleton>\n        <ax-skeleton class=\"skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n        <div class=\"skeleton-text\">\n          <ax-skeleton class=\"skeleton-name\" [animated]=\"true\"></ax-skeleton>\n          <ax-skeleton class=\"skeleton-description\" [animated]=\"true\"></ax-skeleton>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template #userItemTpl let-item>\n      @if (userFromItem(item); as user) {\n        <div class=\"user-item-content\">\n          <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isUserSelected(user.id)\" tabindex=\"0\" />\n          <ax-conversation-avatar\n            kind=\"user\"\n            [userId]=\"user.id\"\n            [size]=\"48\"\n            [name]=\"user.name\"\n            [avatar]=\"user.avatar\"\n            [icon]=\"user.icon\"\n          />\n          <div class=\"user-item-text\">\n            <span class=\"truncated user-name-text\">{{ user.name }}</span>\n            @if (user.description) {\n              <span class=\"user-description-text truncated\">{{ user.description }}</span>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n", styles: ["@layer properties;@layer components{ax-conversation-new-dialog{display:block}ax-conversation-new-dialog .new-conversation-panel{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-new-dialog .new-conversation-dialog-content{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}ax-conversation-new-dialog .form-field--grow{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-new-dialog .group-details-step{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .form-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-new-dialog .field-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.6)}ax-conversation-new-dialog .title-input{height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);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-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}ax-conversation-new-dialog .users-list-wrap{display:flex;flex-direction:column;overflow:hidden;height:min(50vh,36rem)}ax-conversation-new-dialog .users-list-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .users-list{display:block;min-height:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-new-dialog .user-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .user-item-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-new-dialog .user-name-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .user-description-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-new-dialog .users-list-empty{padding:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.85rem;opacity:70%}ax-conversation-new-dialog .user-item-skeleton{display:flex;height:60px;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .skeleton-checkbox{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);flex-shrink:0;border-radius:.25rem}ax-conversation-new-dialog .skeleton-avatar{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-new-dialog .skeleton-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .skeleton-name{height:calc(var(--spacing, .25rem) * 4);width:calc(3/5 * 100%);border-radius:.25rem}ax-conversation-new-dialog .skeleton-description{height:calc(var(--spacing, .25rem) * 3);width:40%;border-radius:.25rem}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{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-font-weight: initial;--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }], usersListEmptyTpl: [{ type: i0.ViewChild, args: ['usersListEmpty', { isSignal: true }] }], usersListLoadingTpl: [{ type: i0.ViewChild, args: ['usersListLoading', { isSignal: true }] }], usersList: [{ type: i0.ViewChild, args: ['usersList', { isSignal: true }] }] } });
 
 var newConversationDialog_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -8617,6 +8801,9 @@ function normalizeAllConversationMessageIndexes() {
     }
 }
 
+/** Bump when demo seed shape changes so IndexedDB is reset on next connect. */
+const AX_CONVERSATION_DEMO_SEED_VERSION = 2;
+
 /**
  * Shared In-Memory Storage
  * Internal storage shared between all IndexedDB API implementations
@@ -8687,12 +8874,15 @@ class AXConversationSharedStorage {
      * Seed initial data if not already seeded
      */
     async seedIfEmpty() {
-        // First, try to load from IndexedDB
         await this.loadFromIndexedDB();
-        if (this.isSeeded || this.participants.size > 0) {
+        const storedVersion = await axConversationIndexedDbStorage.getSetting('demoSeedVersion');
+        const needsReseed = storedVersion !== AX_CONVERSATION_DEMO_SEED_VERSION;
+        if (needsReseed && (this.isSeeded || this.participants.size > 0)) {
+            console.log('🔄 Demo seed version changed — resetting IndexedDB demo data');
+            await this.clearAllData();
+        }
+        if (this.isSeeded && !needsReseed) {
             console.log('✅ Data already exists, skipping seed');
-            const { ensurePaginationDemoData } = await Promise.resolve().then(function () { return paginationDemoData; });
-            await ensurePaginationDemoData();
             if (this.participants.size > 0) {
                 this.startPresenceSimulation();
             }
@@ -8701,6 +8891,20 @@ class AXConversationSharedStorage {
         const { seedSharedStorageInitialData } = await Promise.resolve().then(function () { return sharedStorage_seed; });
         await seedSharedStorageInitialData(this);
     }
+    /** Wipe in-memory and persisted demo data (used when seed version changes). */
+    async clearAllData() {
+        this.participants.clear();
+        this.conversations.clear();
+        this.messages.clear();
+        this.messagesByConversation.clear();
+        this.isSeeded = false;
+        this.isLoadedFromDB = false;
+        await axConversationIndexedDbStorage.clear(AXConversationIndexedDbStores.PARTICIPANTS);
+        await axConversationIndexedDbStorage.clear(AXConversationIndexedDbStores.CONVERSATIONS);
+        await axConversationIndexedDbStorage.clear(AXConversationIndexedDbStores.MESSAGES);
+        await axConversationIndexedDbStorage.putSetting('isSeeded', false);
+        await axConversationIndexedDbStorage.putSetting('demoSeedVersion', null);
+    }
     /** @internal Used by demo seed module */
     markSeeded() {
         this.isSeeded = true;
@@ -8927,174 +9131,15 @@ var sharedStorage = /*#__PURE__*/Object.freeze({
     axConversationSharedStorage: axConversationSharedStorage
 });
 
-/**
- * Extra seed data so sidebar, message-list, and user-picker pagination can be exercised in the demo.
- */
-/** Dedicated chat for message-list infinite-scroll / page loading tests. */
-const AX_MESSAGE_PAGINATION_CONVERSATION_ID = 'conv-pag-msgs';
-const AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION = 200;
-const AX_CONVERSATION_MESSAGE_PAGINATION_COUNT = 500;
-const AX_CONVERSATION_MIN_USERS_FOR_PAGINATION = 50;
-const AX_PAGINATION_DB_BATCH_SIZE = 50;
-/**
- * Append demo users when the participant list is too small for the new-conversation picker (page size 10).
- */
-async function ensureUsersPaginationDemoData() {
-    const users = Array.from(axConversationSharedStorage.participants.values()).filter((user) => user.id !== axConversationSharedStorage.currentUserId);
-    if (users.length >= AX_CONVERSATION_MIN_USERS_FOR_PAGINATION) {
-        return;
-    }
-    const toCreate = AX_CONVERSATION_MIN_USERS_FOR_PAGINATION - users.length;
-    const statuses = ['online', 'offline', 'away'];
-    const titles = ['Developer', 'Designer', 'Manager', 'Analyst', 'Engineer', 'QA', 'DevOps', 'Support'];
-    for (let i = 0; i < toCreate; i++) {
-        const index = users.length + i + 1;
-        const participant = {
-            id: `user-pag-${index}`,
-            name: `Demo User ${String(index).padStart(2, '0')}`,
-            description: `${titles[i % titles.length]} · Pagination demo`,
-            avatar: `https://i.pravatar.cc/150?img=${(index % 70) + 1}`,
-            status: statuses[i % statuses.length],
-            lastSeen: new Date(Date.now() - i * 300_000),
-            profile: {
-                bio: `Mock user #${index} for new-conversation list pagination`,
-                email: `demo.user.${index}@example.com`,
-                title: titles[i % titles.length],
-            },
-            metadata: { tags: ['demo', 'pagination'] },
-        };
-        axConversationSharedStorage.participants.set(participant.id, participant);
-        await axConversationIndexedDbStorage.putParticipant(participant);
-    }
-}
-/**
- * Create a pinned private chat with {@link AX_CONVERSATION_MESSAGE_PAGINATION_COUNT} text messages.
- */
-async function ensureMessagePaginationConversation(currentUser, peer, now) {
-    const existingCount = axConversationSharedStorage.messagesByConversation.get(AX_MESSAGE_PAGINATION_CONVERSATION_ID)?.length ?? 0;
-    if (existingCount >= AX_CONVERSATION_MESSAGE_PAGINATION_COUNT) {
-        return;
-    }
-    if (!axConversationSharedStorage.conversations.has(AX_MESSAGE_PAGINATION_CONVERSATION_ID)) {
-        const conversation = {
-            id: AX_MESSAGE_PAGINATION_CONVERSATION_ID,
-            type: 'private',
-            title: `Message Pagination (${AX_CONVERSATION_MESSAGE_PAGINATION_COUNT})`,
-            participants: [currentUser, { ...peer, role: 'member' }],
-            lastMessageAt: new Date(now),
-            unreadCount: 0,
-            pinned: true,
-            status: { isTyping: false, typingUsers: [] },
-            settings: { notifications: true, showPreview: true },
-            archived: false,
-            metadata: {
-                profile: {
-                    description: 'Mock chat with 500 messages for testing message-list pagination',
-                    tags: ['demo', 'pagination', 'messages'],
-                    favorite: true,
-                },
-            },
-            createdAt: new Date(now - AX_CONVERSATION_MESSAGE_PAGINATION_COUNT * 60_000),
-            updatedAt: new Date(now),
-        };
-        axConversationSharedStorage.conversations.set(conversation.id, conversation);
-        await axConversationIndexedDbStorage.putConversation(conversation);
-    }
-    const toCreate = AX_CONVERSATION_MESSAGE_PAGINATION_COUNT - existingCount;
-    const pendingDbWrites = [];
-    let lastMessage;
-    for (let i = 0; i < toCreate; i++) {
-        const messageNumber = existingCount + i + 1;
-        const isOwn = messageNumber % 2 === 0;
-        const message = {
-            id: `msg-pag-test-${messageNumber}`,
-            conversationId: AX_MESSAGE_PAGINATION_CONVERSATION_ID,
-            senderId: isOwn ? currentUser.id : peer.id,
-            type: 'text',
-            timestamp: new Date(now - (AX_CONVERSATION_MESSAGE_PAGINATION_COUNT - messageNumber) * 60_000),
-            payload: {
-                type: 'text',
-                text: `Pagination test message #${messageNumber} of ${AX_CONVERSATION_MESSAGE_PAGINATION_COUNT} — scroll up to load older history.`,
-            },
-            status: 'read',
-            reactions: [],
-            metadata: {},
-        };
-        registerChatMessage(message);
-        pendingDbWrites.push(axConversationIndexedDbStorage.putMessage(message));
-        lastMessage = message;
-        if (pendingDbWrites.length >= AX_PAGINATION_DB_BATCH_SIZE) {
-            await Promise.all(pendingDbWrites);
-            pendingDbWrites.length = 0;
-        }
-    }
-    if (pendingDbWrites.length > 0) {
-        await Promise.all(pendingDbWrites);
-    }
-    const conv = axConversationSharedStorage.conversations.get(AX_MESSAGE_PAGINATION_CONVERSATION_ID);
-    if (conv && lastMessage) {
-        conv.lastMessage = lastMessage;
-        conv.lastMessageAt = lastMessage.timestamp;
-        conv.updatedAt = lastMessage.timestamp;
-        axConversationSharedStorage.conversations.set(conv.id, conv);
-        await axConversationIndexedDbStorage.putConversation(conv);
-    }
-}
-/**
- * Append demo chats/messages when the DB is too small for default page sizes (30 / 50).
- */
-async function ensurePaginationDemoData() {
-    await ensureUsersPaginationDemoData();
-    const conversationCount = axConversationSharedStorage.conversations.size;
-    const pagTestMessages = axConversationSharedStorage.messagesByConversation.get(AX_MESSAGE_PAGINATION_CONVERSATION_ID)?.length ?? 0;
-    if (conversationCount >= AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION &&
-        pagTestMessages >= AX_CONVERSATION_MESSAGE_PAGINATION_COUNT) {
-        return;
-    }
-    const participants = Array.from(axConversationSharedStorage.participants.values());
-    const currentUser = axConversationSharedStorage.participants.get(axConversationSharedStorage.currentUserId);
-    if (!currentUser || participants.length < 2) {
-        return;
-    }
-    const peer = axConversationSharedStorage.participants.get('user-2') ??
-        participants.find((p) => p.id !== currentUser.id) ??
-        participants[1];
-    const now = Date.now();
-    if (conversationCount < AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION) {
-        const toCreate = AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION - conversationCount;
-        for (let i = 0; i < toCreate; i++) {
-            const chatPeer = participants[(i % (participants.length - 1)) + 1];
-            const conversation = {
-                id: `conv-pag-${i}`,
-                type: 'private',
-                title: `Demo Chat ${i + 1} — ${chatPeer.name}`,
-                participants: [currentUser, { ...chatPeer, role: 'member' }],
-                lastMessageAt: new Date(now - i * 60_000),
-                unreadCount: 0,
-                pinned: i === 0,
-                status: { isTyping: false, typingUsers: [] },
-                settings: { notifications: true, showPreview: true },
-                archived: false,
-                metadata: { profile: { tags: ['demo', 'pagination'] } },
-                createdAt: new Date(now - i * 86_400_000),
-                updatedAt: new Date(now - i * 60_000),
-            };
-            axConversationSharedStorage.conversations.set(conversation.id, conversation);
-            await axConversationIndexedDbStorage.putConversation(conversation);
-        }
-    }
-    await ensureMessagePaginationConversation(currentUser, peer, now);
-}
-
-var paginationDemoData = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AX_MESSAGE_PAGINATION_CONVERSATION_ID: AX_MESSAGE_PAGINATION_CONVERSATION_ID,
-    ensurePaginationDemoData: ensurePaginationDemoData
-});
-
+const AX_CONVERSATION_DEMO_CONVERSATION_IDS = {
+    private: 'conv-demo-private',
+    group: 'conv-demo-group',
+    channel: 'conv-demo-channel',
+};
 async function seedSharedStorageInitialData(storage) {
-    console.log('🌱 Seeding initial data...');
-    // Create participants (15 users for realistic data) with profile information
+    console.log('🌱 Seeding demo data (3 conversations)...');
+    const now = Date.now();
+    const minutes = (n) => new Date(now - n * 60_000);
     const participants = [
         {
             id: 'current-user',
@@ -9104,741 +9149,395 @@ async function seedSharedStorageInitialData(storage) {
             status: 'online',
             lastSeen: new Date(),
             profile: {
-                bio: 'Software developer passionate about creating amazing user experiences',
-                email: 'you@example.com',
+                bio: 'Building chat experiences with ACoreX',
+                email: 'you@acorex.io',
                 phone: '+1 (555) 123-4567',
                 location: 'San Francisco, CA',
-                company: 'Tech Corp',
+                company: 'ACoreX',
                 title: 'Senior Developer',
             },
         },
         {
-            id: 'user-2',
+            id: 'user-alice',
             name: 'Alice Johnson',
             description: 'Lead Designer',
             avatar: 'https://i.pravatar.cc/150?img=5',
             status: 'online',
             lastSeen: new Date(),
             profile: {
-                bio: 'Product designer with a love for minimalist aesthetics',
-                email: 'alice.johnson@example.com',
-                phone: '+1 (555) 234-5678',
+                bio: 'Product designer focused on design systems',
+                email: 'alice.johnson@acorex.io',
                 location: 'New York, NY',
-                company: 'Design Studio',
+                company: 'ACoreX',
                 title: 'Lead Designer',
             },
         },
         {
-            id: 'user-3',
+            id: 'user-bob',
             name: 'Bob Smith',
             description: 'Tech Lead',
             avatar: 'https://i.pravatar.cc/150?img=12',
             status: 'away',
-            lastSeen: new Date(Date.now() - 300000),
+            lastSeen: minutes(12),
             profile: {
-                bio: 'Full-stack developer and open source enthusiast',
-                email: 'bob.smith@example.com',
-                phone: '+1 (555) 345-6789',
+                bio: 'Full-stack engineer and architecture reviewer',
+                email: 'bob.smith@acorex.io',
                 location: 'Austin, TX',
-                company: 'Startup Inc',
+                company: 'ACoreX',
                 title: 'Tech Lead',
             },
         },
         {
-            id: 'user-4',
+            id: 'user-carol',
             name: 'Carol Williams',
-            description: 'Marketing Manager',
+            description: 'Product Manager',
             avatar: 'https://i.pravatar.cc/150?img=20',
-            status: 'offline',
-            lastSeen: new Date(Date.now() - 3600000),
-            profile: {
-                bio: 'Marketing specialist focused on digital strategies',
-                email: 'carol.williams@example.com',
-                phone: '+1 (555) 456-7890',
-                location: 'Los Angeles, CA',
-                company: 'Marketing Pro',
-                title: 'Marketing Manager',
-            },
-        },
-        {
-            id: 'user-5',
-            name: 'David Brown',
-            description: 'DevOps Lead',
-            avatar: 'https://i.pravatar.cc/150?img=13',
-            status: 'online',
-            lastSeen: new Date(),
-            profile: {
-                bio: 'DevOps engineer passionate about automation',
-                email: 'david.brown@example.com',
-                phone: '+1 (555) 567-8901',
-                location: 'Seattle, WA',
-                company: 'Cloud Systems',
-                title: 'DevOps Lead',
-            },
-        },
-        {
-            id: 'user-6',
-            name: 'Emma Davis',
-            description: 'UX Researcher',
-            avatar: 'https://i.pravatar.cc/150?img=24',
-            status: 'offline',
-            lastSeen: new Date(Date.now() - 7200000),
-            profile: {
-                bio: 'UX researcher exploring human behavior',
-                email: 'emma.davis@example.com',
-                phone: '+1 (555) 678-9012',
-                location: 'Boston, MA',
-                company: 'Research Lab',
-                title: 'UX Researcher',
-            },
-        },
-        {
-            id: 'user-7',
-            name: 'Frank Miller',
-            description: 'Data Scientist',
-            avatar: 'https://i.pravatar.cc/150?img=33',
             status: 'online',
             lastSeen: new Date(),
             profile: {
-                bio: 'Data scientist turning data into insights',
-                email: 'frank.miller@example.com',
-                phone: '+1 (555) 789-0123',
+                bio: 'Owns the conversation component roadmap',
+                email: 'carol.williams@acorex.io',
                 location: 'Chicago, IL',
-                company: 'Data Corp',
-                title: 'Data Scientist',
-            },
-        },
-        {
-            id: 'user-8',
-            name: 'Grace Wilson',
-            description: 'Mobile Developer',
-            avatar: 'https://i.pravatar.cc/150?img=44',
-            status: 'away',
-            lastSeen: new Date(Date.now() - 600000),
-            profile: {
-                bio: 'Mobile app developer for iOS and Android',
-                email: 'grace.wilson@example.com',
-                phone: '+1 (555) 890-1234',
-                location: 'Miami, FL',
-                company: 'Mobile Solutions',
-                title: 'Mobile Developer',
-            },
-        },
-        {
-            id: 'user-9',
-            name: 'Henry Moore',
-            description: 'Security Engineer',
-            avatar: 'https://i.pravatar.cc/150?img=52',
-            status: 'online',
-            lastSeen: new Date(),
-            profile: {
-                bio: 'Security engineer protecting digital assets',
-                email: 'henry.moore@example.com',
-                phone: '+1 (555) 901-2345',
-                location: 'Denver, CO',
-                company: 'SecureNet',
-                title: 'Security Engineer',
+                company: 'ACoreX',
+                title: 'Product Manager',
             },
         },
         {
-            id: 'user-10',
-            name: 'Ivy Taylor',
-            description: 'Content Strategist',
-            avatar: 'https://i.pravatar.cc/150?img=47',
-            status: 'offline',
-            lastSeen: new Date(Date.now() - 10800000),
-            profile: {
-                bio: 'Content strategist crafting compelling narratives',
-                email: 'ivy.taylor@example.com',
-                phone: '+1 (555) 012-3456',
-                location: 'Portland, OR',
-                company: 'Content Agency',
-                title: 'Content Strategist',
-            },
-        },
-        {
-            id: 'user-11',
-            name: 'Jack Anderson',
-            description: 'Backend Engineer',
-            avatar: 'https://i.pravatar.cc/150?img=68',
-            status: 'online',
-            lastSeen: new Date(),
-            profile: {
-                bio: 'Backend engineer building scalable systems',
-                email: 'jack.anderson@example.com',
-                phone: '+1 (555) 123-4560',
-                location: 'Phoenix, AZ',
-                company: 'Backend Systems',
-                title: 'Backend Engineer',
-            },
-        },
-        {
-            id: 'user-12',
-            name: 'Kate Thomas',
-            description: 'Project Manager',
-            avatar: 'https://i.pravatar.cc/150?img=32',
-            status: 'away',
-            lastSeen: new Date(Date.now() - 900000),
-            profile: {
-                bio: 'Project manager keeping teams on track',
-                email: 'kate.thomas@example.com',
-                phone: '+1 (555) 234-5601',
-                location: 'Atlanta, GA',
-                company: 'Project Solutions',
-                title: 'Project Manager',
-            },
-        },
-        {
-            id: 'user-13',
-            name: 'Leo Jackson',
-            description: 'ML Engineer',
-            avatar: 'https://i.pravatar.cc/150?img=59',
-            status: 'online',
-            lastSeen: new Date(),
-            profile: {
-                bio: 'AI/ML engineer exploring artificial intelligence',
-                email: 'leo.jackson@example.com',
-                phone: '+1 (555) 345-6012',
-                location: 'San Jose, CA',
-                company: 'AI Labs',
-                title: 'ML Engineer',
-            },
-        },
-        {
-            id: 'user-14',
-            name: 'Mia White',
-            description: 'Business Analyst',
-            avatar: 'https://i.pravatar.cc/150?img=45',
+            id: 'user-david',
+            name: 'David Brown',
+            description: 'DevOps Engineer',
+            avatar: 'https://i.pravatar.cc/150?img=13',
             status: 'offline',
-            lastSeen: new Date(Date.now() - 14400000),
+            lastSeen: minutes(45),
             profile: {
-                bio: 'Business analyst bridging tech and business',
-                email: 'mia.white@example.com',
-                phone: '+1 (555) 456-0123',
-                location: 'Dallas, TX',
-                company: 'Business Analytics',
-                title: 'Business Analyst',
+                bio: 'Keeps staging and demo environments running',
+                email: 'david.brown@acorex.io',
+                location: 'Seattle, WA',
+                company: 'ACoreX',
+                title: 'DevOps Engineer',
             },
         },
         {
-            id: 'user-15',
-            name: 'Noah Harris',
+            id: 'user-emma',
+            name: 'Emma Davis',
             description: 'QA Engineer',
-            avatar: 'https://i.pravatar.cc/150?img=70',
-            status: 'online',
-            lastSeen: new Date(),
-            profile: {
-                bio: 'QA engineer ensuring quality in every release',
-                email: 'noah.harris@example.com',
-                phone: '+1 (555) 567-0124',
-                location: 'Nashville, TN',
-                company: 'Quality Assurance',
-                title: 'QA Engineer',
-            },
-        },
-        /** Demo: no avatar image — only participant `icon` (Font Awesome) in the message list */
-        {
-            id: 'demo-icon-only-user',
-            name: 'Icon Demo User',
-            description: 'No profile photo — FA icon only',
-            icon: 'fa-light fa-user',
+            avatar: 'https://i.pravatar.cc/150?img=24',
             status: 'online',
             lastSeen: new Date(),
             profile: {
-                bio: 'Seed user to demo participant icon without profile image',
-                email: 'icon.demo@example.com',
-                phone: '+1 (555) 999-0000',
-                location: 'Demo',
-                company: 'Acorex',
-                title: 'Demo',
+                bio: 'Tests chat flows end to end',
+                email: 'emma.davis@acorex.io',
+                location: 'Boston, MA',
+                company: 'ACoreX',
+                title: 'QA Engineer',
             },
         },
     ];
-    // Store participants in memory and IndexedDB
-    for (const p of participants) {
-        storage.participants.set(p.id, p);
-        await axConversationIndexedDbStorage.putParticipant(p);
+    const [me, alice, bob, carol, david, emma] = participants;
+    for (const participant of participants) {
+        storage.participants.set(participant.id, participant);
+        await axConversationIndexedDbStorage.putParticipant(participant);
     }
-    // Create conversations: 2 private + 3 groups (includes icon-only avatar demo)
-    const now = new Date();
     const conversations = [
-        // Private Chat 1: Alice Johnson
         {
-            id: 'conv-1',
+            id: AX_CONVERSATION_DEMO_CONVERSATION_IDS.private,
             type: 'private',
             title: 'Alice Johnson',
-            participants: [participants[0], { ...participants[1], role: 'member' }],
-            lastMessageAt: new Date(now.getTime() - 60000),
-            unreadCount: 2,
+            participants: [me, { ...alice, role: 'member' }],
+            lastMessageAt: minutes(2),
+            unreadCount: 1,
             status: { isTyping: false, typingUsers: [] },
             settings: { notifications: true, showPreview: true },
             archived: false,
             metadata: {
                 profile: {
-                    description: 'Private conversation with Alice Johnson',
+                    description: 'Direct messages with Alice about design handoff',
                     tags: ['work', 'design'],
                     favorite: true,
                 },
             },
-            createdAt: new Date(now.getTime() - 86400000),
-            updatedAt: new Date(now.getTime() - 60000),
-        },
-        // Private Chat 2: Bob Smith
-        {
-            id: 'conv-2',
-            type: 'private',
-            title: 'Bob Smith',
-            participants: [participants[0], { ...participants[2], role: 'member' }],
-            lastMessageAt: new Date(now.getTime() - 7200000),
-            unreadCount: 0,
-            status: { isTyping: false, typingUsers: [] },
-            settings: { notifications: true, showPreview: true },
-            archived: false,
-            metadata: {
-                profile: {
-                    description: 'Private conversation with Bob Smith',
-                    tags: ['development', 'tech'],
-                    favorite: false,
-                },
-            },
-            createdAt: new Date(now.getTime() - 259200000),
-            updatedAt: new Date(now.getTime() - 7200000),
+            createdAt: minutes(60 * 24 * 14),
+            updatedAt: minutes(2),
         },
-        // Group Chat 1: Project Team (3-5 members)
         {
-            id: 'conv-3',
+            id: AX_CONVERSATION_DEMO_CONVERSATION_IDS.group,
             type: 'group',
-            title: 'Project Team',
+            title: 'ACoreX Platform Team',
+            description: 'Sprint planning, releases, and blockers',
             avatar: 'https://i.pravatar.cc/150?img=50',
             participants: [
-                { ...participants[0], role: 'admin' },
-                { ...participants[1], role: 'member' },
-                { ...participants[2], role: 'member' },
-                { ...participants[4], role: 'member' },
+                { ...me, role: 'admin' },
+                { ...alice, role: 'member' },
+                { ...bob, role: 'member' },
+                { ...carol, role: 'member' },
+                { ...david, role: 'member' },
             ],
-            lastMessageAt: new Date(now.getTime() - 3600000),
-            unreadCount: 1,
+            lastMessageAt: minutes(8),
+            unreadCount: 2,
             status: { isTyping: false, typingUsers: [] },
             settings: { notifications: true, showPreview: true },
             archived: false,
             metadata: {
                 profile: {
-                    description: 'Team collaboration for current project',
-                    tags: ['work', 'project', 'team'],
+                    description: 'Cross-functional team working on the conversation module',
+                    tags: ['work', 'sprint', 'team'],
                     favorite: true,
                     groupInfo: {
                         createdBy: 'current-user',
-                        purpose: 'Project coordination and updates',
+                        purpose: 'Coordinate platform delivery and demos',
                     },
                 },
             },
-            createdAt: new Date(now.getTime() - 604800000),
-            updatedAt: new Date(now.getTime() - 3600000),
+            createdAt: minutes(60 * 24 * 30),
+            updatedAt: minutes(8),
         },
-        // Group Chat 2: Design Team (5-10 members)
         {
-            id: 'conv-4',
-            type: 'group',
-            title: 'Design Team',
-            avatar: 'https://i.pravatar.cc/150?img=65',
+            id: AX_CONVERSATION_DEMO_CONVERSATION_IDS.channel,
+            type: 'channel',
+            title: 'Product Updates',
+            description: 'Official announcements and release notes',
+            icon: 'fa-light fa-hashtag',
             participants: [
-                { ...participants[0], role: 'admin' },
-                { ...participants[1], role: 'member' },
-                { ...participants[3], role: 'member' },
-                { ...participants[5], role: 'member' },
-                { ...participants[6], role: 'member' },
-                { ...participants[7], role: 'member' },
-                { ...participants[8], role: 'member' },
-                { ...participants[10], role: 'member' },
+                { ...me, role: 'member' },
+                { ...carol, role: 'admin' },
+                { ...emma, role: 'admin' },
+                { ...alice, role: 'member' },
+                { ...bob, role: 'member' },
+                { ...david, role: 'member' },
             ],
-            lastMessageAt: new Date(now.getTime() - 10800000),
+            lastMessageAt: minutes(25),
             unreadCount: 0,
             status: { isTyping: false, typingUsers: [] },
             settings: { notifications: true, showPreview: true },
             archived: false,
             metadata: {
                 profile: {
-                    description: 'Design team collaboration and brainstorming',
-                    tags: ['design', 'creative', 'team'],
-                    favorite: false,
-                    groupInfo: {
-                        createdBy: 'user-2',
-                        purpose: 'Design reviews and creative discussions',
+                    description: 'Broadcast channel for product and engineering updates',
+                    tags: ['announcements', 'releases'],
+                    channelInfo: {
+                        createdBy: 'user-carol',
+                        isPublic: true,
+                        subscriberCount: 128,
                     },
                 },
             },
-            createdAt: new Date(now.getTime() - 1209600000),
-            updatedAt: new Date(now.getTime() - 10800000),
-        },
-        // Group: icon-only demo (no conversation avatar image; optional `icon` for chrome that reads it)
-        {
-            id: 'conv-icon-demo',
-            type: 'group',
-            title: 'Icon-only avatars (demo)',
-            icon: 'fa-light fa-users',
-            participants: [
-                { ...participants[0], role: 'admin' },
-                { ...participants[15], role: 'member' },
-            ],
-            lastMessageAt: new Date(now.getTime() - 120000),
-            unreadCount: 1,
-            status: { isTyping: false, typingUsers: [] },
-            settings: { notifications: true, showPreview: true },
-            archived: false,
-            metadata: {
-                profile: {
-                    description: 'Demo: sender has no avatar URL — Font Awesome icon from participant/conversation',
-                    tags: ['demo', 'icon'],
-                },
-            },
-            createdAt: new Date(now.getTime() - 86400000),
-            updatedAt: new Date(now.getTime() - 120000),
+            createdAt: minutes(60 * 24 * 90),
+            updatedAt: minutes(25),
         },
     ];
-    // Store conversations in memory and IndexedDB
-    for (const c of conversations) {
-        storage.conversations.set(c.id, c);
-        await axConversationIndexedDbStorage.putConversation(c);
-    }
-    // Create messages with ALL types for each conversation
-    const messages = [];
-    // Conv-1 (Private: Alice) - All message types
-    messages.push({
-        id: 'msg-1-1',
-        conversationId: 'conv-1',
-        senderId: 'user-2',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 300000),
-        payload: { type: 'text', text: 'Hey! How are you doing?' },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-1-2',
-        conversationId: 'conv-1',
-        senderId: 'current-user',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 270000),
-        payload: { type: 'text', text: "I'm good! Working on the new project." },
-        status: 'read',
-        reactions: [{ emoji: '👍', userId: 'user-2', timestamp: new Date(now.getTime() - 265000) }],
-        metadata: {},
-    }, {
-        id: 'msg-1-3',
-        conversationId: 'conv-1',
-        senderId: 'user-2',
-        type: 'image',
-        timestamp: new Date(now.getTime() - 240000),
-        payload: {
-            type: 'image',
-            images: [
-                {
-                    url: 'https://picsum.photos/400/300',
-                    thumbnailUrl: 'https://picsum.photos/200/150',
-                    width: 400,
-                    height: 300,
-                    mimeType: 'image/jpeg',
-                },
-            ],
-            caption: 'Check out this design!',
-        },
-        status: 'read',
-        reactions: [{ emoji: '🔥', userId: 'current-user', timestamp: new Date(now.getTime() - 235000) }],
-        metadata: {},
-    }, {
-        id: 'msg-1-4',
-        conversationId: 'conv-1',
-        senderId: 'current-user',
-        type: 'voice',
-        timestamp: new Date(now.getTime() - 180000),
-        payload: {
-            type: 'voice',
-            url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
-            duration: 15,
-            size: 245760,
-            waveform: [0.2, 0.4, 0.6, 0.8, 0.5, 0.3, 0.7, 0.9, 0.4, 0.2],
+    for (const conversation of conversations) {
+        storage.conversations.set(conversation.id, conversation);
+        await axConversationIndexedDbStorage.putConversation(conversation);
+    }
+    const messages = [
+        // Private — Alice
+        {
+            id: 'msg-private-1',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.private,
+            senderId: 'user-alice',
+            type: 'text',
+            timestamp: minutes(18),
+            payload: { type: 'text', text: 'Hi! I pushed the updated composer mockups to Figma.' },
+            status: 'read',
+            reactions: [],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-1-5',
-        conversationId: 'conv-1',
-        senderId: 'user-2',
-        type: 'audio',
-        timestamp: new Date(now.getTime() - 120000),
-        payload: {
-            type: 'audio',
-            audios: [
-                {
-                    url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
-                    title: 'Background Music',
-                    duration: 180,
-                    size: 3145728,
-                    mimeType: 'audio/mpeg',
-                },
-            ],
+        {
+            id: 'msg-private-2',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.private,
+            senderId: 'current-user',
+            type: 'text',
+            timestamp: minutes(15),
+            payload: { type: 'text', text: 'Nice — I will wire them into the showcase after lunch.' },
+            status: 'read',
+            reactions: [{ emoji: '👍', userId: 'user-alice', timestamp: minutes(14) }],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-1-6',
-        conversationId: 'conv-1',
-        senderId: 'current-user',
-        type: 'location',
-        timestamp: new Date(now.getTime() - 90000),
-        payload: {
-            type: 'location',
-            latitude: 37.7749,
-            longitude: -122.4194,
-            address: 'San Francisco, CA',
+        {
+            id: 'msg-private-3',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.private,
+            senderId: 'user-alice',
+            type: 'image',
+            timestamp: minutes(5),
+            payload: {
+                type: 'image',
+                images: [
+                    {
+                        url: 'https://picsum.photos/seed/acorex-composer/640/400',
+                        thumbnailUrl: 'https://picsum.photos/seed/acorex-composer/320/200',
+                        width: 640,
+                        height: 400,
+                        mimeType: 'image/jpeg',
+                    },
+                ],
+                caption: 'Sidebar + composer spacing tokens',
+            },
+            status: 'read',
+            reactions: [],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-1-7',
-        conversationId: 'conv-1',
-        senderId: 'user-2',
-        type: 'sticker',
-        timestamp: new Date(now.getTime() - 60000),
-        payload: {
-            type: 'sticker',
-            url: 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f44d.png',
-            packId: 'pack-1',
-            id: 'sticker-thumbs-up',
-            animated: false,
+        {
+            id: 'msg-private-4',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.private,
+            senderId: 'user-alice',
+            type: 'text',
+            timestamp: minutes(2),
+            payload: { type: 'text', text: 'Let me know if the 8px grid works for the message list.' },
+            status: 'delivered',
+            reactions: [],
+            metadata: {},
         },
-        status: 'delivered',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-1-8',
-        conversationId: 'conv-1',
-        senderId: 'user-2',
-        type: 'file',
-        timestamp: new Date(now.getTime() - 30000),
-        payload: {
-            type: 'file',
-            files: [
-                {
-                    url: 'https://example.com/document.pdf',
-                    name: 'Project_Proposal.pdf',
-                    size: 2048576,
-                    mimeType: 'application/pdf',
-                },
-            ],
+        // Group — Platform Team
+        {
+            id: 'msg-group-1',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.group,
+            senderId: 'user-carol',
+            type: 'text',
+            timestamp: minutes(22),
+            payload: { type: 'text', text: 'Sprint goal: ship the conversation showcase with realistic demo data.' },
+            status: 'read',
+            reactions: [],
+            metadata: {},
         },
-        status: 'delivered',
-        reactions: [],
-        metadata: {},
-    });
-    // Conv-2 (Private: Bob) - Mixed messages
-    messages.push({
-        id: 'msg-2-1',
-        conversationId: 'conv-2',
-        senderId: 'user-3',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 7200000),
-        payload: { type: 'text', text: 'Did you see the latest updates?' },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-2-2',
-        conversationId: 'conv-2',
-        senderId: 'current-user',
-        type: 'video',
-        timestamp: new Date(now.getTime() - 7180000),
-        payload: {
-            type: 'video',
-            videos: [
-                {
-                    url: 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4',
-                    thumbnailUrl: 'https://picsum.photos/640/360',
-                    duration: 60,
-                    size: 1048576,
-                    width: 1280,
-                    height: 720,
-                    mimeType: 'video/mp4',
-                },
-            ],
+        {
+            id: 'msg-group-2',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.group,
+            senderId: 'user-bob',
+            type: 'text',
+            timestamp: minutes(18),
+            payload: { type: 'text', text: 'IndexedDB APIs are ready — we can trim the seed to three chats.' },
+            status: 'read',
+            reactions: [{ emoji: '✅', userId: 'user-carol', timestamp: minutes(17) }],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [{ emoji: '😂', userId: 'user-3', timestamp: new Date(now.getTime() - 7175000) }],
-        metadata: {},
-    });
-    // Conv-3 (Group: Project Team) - Group messages
-    messages.push({
-        id: 'msg-3-1',
-        conversationId: 'conv-3',
-        senderId: 'user-2',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 3700000),
-        payload: { type: 'text', text: 'Team meeting at 3 PM today!' },
-        status: 'read',
-        reactions: [
-            { emoji: '👍', userId: 'current-user', timestamp: new Date(now.getTime() - 3695000) },
-            { emoji: '👍', userId: 'user-3', timestamp: new Date(now.getTime() - 3690000) },
-        ],
-        metadata: {},
-    }, {
-        id: 'msg-3-2',
-        conversationId: 'conv-3',
-        senderId: 'user-5',
-        type: 'image',
-        timestamp: new Date(now.getTime() - 3650000),
-        payload: {
-            type: 'image',
-            images: [
-                {
-                    url: 'https://picsum.photos/800/600',
-                    thumbnailUrl: 'https://picsum.photos/200/150',
-                    width: 800,
-                    height: 600,
-                    mimeType: 'image/jpeg',
-                },
-            ],
-            caption: 'Sprint planning board',
+        {
+            id: 'msg-group-3',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.group,
+            senderId: 'user-david',
+            type: 'text',
+            timestamp: minutes(12),
+            payload: { type: 'text', text: 'Staging deploy finished. Ping me if the demo DB needs a reset.' },
+            status: 'read',
+            reactions: [],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-3-3',
-        conversationId: 'conv-3',
-        senderId: 'current-user',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 3600000),
-        payload: { type: 'text', text: 'Great work everyone! 🎉' },
-        status: 'read',
-        reactions: [{ emoji: '🎉', userId: 'user-2', timestamp: new Date(now.getTime() - 3595000) }],
-        metadata: {},
-    }, {
-        id: 'msg-3-4',
-        conversationId: 'conv-3',
-        senderId: 'user-2',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 3550000),
-        payload: { type: 'text', text: 'Thanks! Looking forward to it.' },
-        status: 'delivered',
-        reactions: [],
-        metadata: {},
-    });
-    // Conv-4 (Group: Design Team) - Design-related messages
-    messages.push({
-        id: 'msg-4-1',
-        conversationId: 'conv-4',
-        senderId: 'user-7',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 10900000),
-        payload: { type: 'text', text: 'New design mockups are ready for review' },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-4-2',
-        conversationId: 'conv-4',
-        senderId: 'user-8',
-        type: 'file',
-        timestamp: new Date(now.getTime() - 10850000),
-        payload: {
-            type: 'file',
-            files: [
-                {
-                    url: 'https://example.com/designs.zip',
-                    name: 'UI_Designs_v2.zip',
-                    size: 15728640,
-                    mimeType: 'application/zip',
-                },
-            ],
+        {
+            id: 'msg-group-4',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.group,
+            senderId: 'current-user',
+            type: 'text',
+            timestamp: minutes(10),
+            payload: { type: 'text', text: 'On it — cleaning up empty chats and pagination mocks now.' },
+            status: 'read',
+            reactions: [],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-4-3',
-        conversationId: 'conv-4',
-        senderId: 'current-user',
-        type: 'sticker',
-        timestamp: new Date(now.getTime() - 10800000),
-        payload: {
-            type: 'sticker',
-            url: 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f389.png',
-            packId: 'pack-1',
-            id: 'sticker-party',
-            animated: false,
+        {
+            id: 'msg-group-5',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.group,
+            senderId: 'user-alice',
+            type: 'text',
+            timestamp: minutes(8),
+            payload: { type: 'text', text: 'Design review is tomorrow at 10:00. Please check the group avatar.' },
+            status: 'delivered',
+            reactions: [{ emoji: '🎨', userId: 'current-user', timestamp: minutes(7) }],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    });
-    // Conv-icon-demo: messages from icon-only participant (no avatar image, FA icon in list)
-    messages.push({
-        id: 'msg-icon-1',
-        conversationId: 'conv-icon-demo',
-        senderId: 'demo-icon-only-user',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 300000),
-        payload: {
+        // Channel — Product Updates
+        {
+            id: 'msg-channel-1',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.channel,
+            senderId: 'user-carol',
             type: 'text',
-            text: 'Hi — I have no profile photo, only a Font Awesome icon.',
+            timestamp: minutes(90),
+            payload: {
+                type: 'text',
+                text: '📢 v2.4 is live: composer plugins, file validation, and improved sidebar sorting.',
+            },
+            status: 'read',
+            reactions: [{ emoji: '🚀', userId: 'user-bob', timestamp: minutes(89) }],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-icon-2',
-        conversationId: 'conv-icon-demo',
-        senderId: 'current-user',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 240000),
-        payload: {
+        {
+            id: 'msg-channel-2',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.channel,
+            senderId: 'user-emma',
             type: 'text',
-            text: 'Looks good — the message list shows the icon where an avatar would be.',
+            timestamp: minutes(60),
+            payload: {
+                type: 'text',
+                text: '✅ Regression suite passed on Chrome, Firefox, and Safari.',
+            },
+            status: 'read',
+            reactions: [],
+            metadata: {},
+        },
+        {
+            id: 'msg-channel-3',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.channel,
+            senderId: 'user-carol',
+            type: 'file',
+            timestamp: minutes(30),
+            payload: {
+                type: 'file',
+                files: [
+                    {
+                        url: 'https://example.com/acorex-conversation-release-notes.pdf',
+                        name: 'ACoreX_Conversation_Release_Notes.pdf',
+                        size: 524_288,
+                        mimeType: 'application/pdf',
+                    },
+                ],
+            },
+            status: 'read',
+            reactions: [],
+            metadata: {},
         },
-        status: 'read',
-        reactions: [],
-        metadata: {},
-    }, {
-        id: 'msg-icon-3',
-        conversationId: 'conv-icon-demo',
-        senderId: 'demo-icon-only-user',
-        type: 'text',
-        timestamp: new Date(now.getTime() - 120000),
-        payload: {
+        {
+            id: 'msg-channel-4',
+            conversationId: AX_CONVERSATION_DEMO_CONVERSATION_IDS.channel,
+            senderId: 'user-carol',
             type: 'text',
-            text: 'Useful for bots or users without uploaded photos.',
+            timestamp: minutes(25),
+            payload: {
+                type: 'text',
+                text: 'Next up: voice messages in the composer and Storybook coverage for message renderers.',
+            },
+            status: 'read',
+            reactions: [],
+            metadata: {},
         },
-        status: 'delivered',
-        reactions: [],
-        metadata: {},
-    });
-    // Store all messages in memory and IndexedDB (sorted per conversation)
-    for (const m of messages) {
-        registerChatMessage(m);
-        await axConversationIndexedDbStorage.putMessage(m);
-    }
-    // Update conversations with last messages
-    conversations[0].lastMessage = messages.find((m) => m.id === 'msg-1-8');
-    conversations[1].lastMessage = messages.find((m) => m.id === 'msg-2-2');
-    conversations[2].lastMessage = messages.find((m) => m.id === 'msg-3-3');
-    conversations[3].lastMessage = messages.find((m) => m.id === 'msg-4-3');
-    conversations[4].lastMessage = messages.find((m) => m.id === 'msg-icon-3');
-    // Update in memory and IndexedDB
-    for (const c of conversations) {
-        storage.conversations.set(c.id, c);
-        await axConversationIndexedDbStorage.putConversation(c);
+    ];
+    for (const message of messages) {
+        registerChatMessage(message);
+        await axConversationIndexedDbStorage.putMessage(message);
+    }
+    const lastByConversation = new Map();
+    for (const message of messages) {
+        const current = lastByConversation.get(message.conversationId);
+        if (!current || message.timestamp > current.timestamp) {
+            lastByConversation.set(message.conversationId, message);
+        }
+    }
+    for (const conversation of conversations) {
+        const lastMessage = lastByConversation.get(conversation.id);
+        if (lastMessage) {
+            conversation.lastMessage = lastMessage;
+            conversation.lastMessageAt = lastMessage.timestamp;
+            conversation.updatedAt = lastMessage.timestamp;
+        }
+        storage.conversations.set(conversation.id, conversation);
+        await axConversationIndexedDbStorage.putConversation(conversation);
     }
     await axConversationIndexedDbStorage.putSetting('isSeeded', true);
+    await axConversationIndexedDbStorage.putSetting('demoSeedVersion', AX_CONVERSATION_DEMO_SEED_VERSION);
     storage.markSeeded();
-    await ensurePaginationDemoData();
     storage.startDemoSimulations();
 }
 
 var sharedStorage_seed = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    AX_CONVERSATION_DEMO_CONVERSATION_IDS: AX_CONVERSATION_DEMO_CONVERSATION_IDS,
     seedSharedStorageInitialData: seedSharedStorageInitialData
 });
 
@@ -9923,23 +9622,36 @@ function paginateChatOldestFirst(sortedOldestFirst, pagination) {
     };
 }
 
+/**
+ * Pagination demo data — disabled for the minimal 3-chat showcase seed.
+ * Kept as a no-op so existing imports remain valid.
+ */
+/** @deprecated Pagination demo chat removed from default seed. */
+const AX_MESSAGE_PAGINATION_CONVERSATION_ID = 'conv-pag-msgs';
+/** No-op: showcase uses a fixed 3-conversation seed (private, group, channel). */
+async function ensurePaginationDemoData() {
+    return;
+}
+
 /**
  * IndexedDB User API Implementation
  * Implements AXConversationUserApi using IndexedDB backend
  */
 class AXConversationIndexedDbUserApi extends AXConversationUserApi {
+    constructor() {
+        super(...arguments);
+        this.API_DELAY_MS = 2000;
+    }
     // =====================
     // User Profile
     // =====================
     async getCurrentUser() {
-        const user = axConversationSharedStorage.participants.get(axConversationSharedStorage.currentUserId);
-        if (!user) {
-            throw this.createError('USER_NOT_FOUND', 'Current user not found', 404);
-        }
-        return user;
+        await this.delay(this.API_DELAY_MS);
+        return this.getCurrentUserWithoutDelay();
     }
     async updateProfile(updates) {
-        const user = await this.getCurrentUser();
+        await this.delay(this.API_DELAY_MS);
+        const user = await this.getCurrentUserWithoutDelay();
         const { profile: profileUpdates, custom, bio, phone, email, ...participantUpdates } = updates;
         const legacyProfile = {};
         if (bio !== undefined)
@@ -9962,6 +9674,7 @@ class AXConversationIndexedDbUserApi extends AXConversationUserApi {
         };
     }
     async uploadAvatar(file) {
+        await this.delay(this.API_DELAY_MS);
         // Mock upload - return a data URL
         return new Promise((resolve) => {
             const reader = new FileReader();
@@ -9973,24 +9686,16 @@ class AXConversationIndexedDbUserApi extends AXConversationUserApi {
     // User Discovery
     // =====================
     async getUsers(pagination = { page: 0, pageSize: 50 }, filters) {
-        const users = Array.from(axConversationSharedStorage.participants.values());
-        let filtered = users.filter((u) => u.id !== axConversationSharedStorage.currentUserId);
-        if (filters?.query) {
-            const q = filters.query.toLowerCase();
-            filtered = filtered.filter((u) => {
-                const name = u.name.toLowerCase();
-                const desc = (u.description ?? '').toLowerCase();
-                return name.includes(q) || desc.includes(q);
-            });
-        }
-        filtered.sort((a, b) => a.name.localeCompare(b.name));
-        return paginateChatOldestFirst(filtered, pagination);
+        await this.delay(this.API_DELAY_MS);
+        return this.fetchUsers(pagination, filters);
     }
     async searchUsers(query) {
-        const result = await this.getUsers({ page: 0, pageSize: 1000 }, { query });
+        await this.delay(this.API_DELAY_MS);
+        const result = await this.fetchUsers({ page: 0, pageSize: 1000 }, { query });
         return result.items;
     }
     async getUserById(userId) {
+        await this.delay(this.API_DELAY_MS);
         const user = axConversationSharedStorage.participants.get(userId);
         if (!user) {
             throw this.createError('USER_NOT_FOUND', `User ${userId} not found`, 404);
@@ -9998,6 +9703,7 @@ class AXConversationIndexedDbUserApi extends AXConversationUserApi {
         return user;
     }
     async getUsersByIds(userIds) {
+        await this.delay(this.API_DELAY_MS);
         return userIds
             .map((id) => axConversationSharedStorage.participants.get(id))
             .filter((u) => u !== undefined);
@@ -10006,6 +9712,7 @@ class AXConversationIndexedDbUserApi extends AXConversationUserApi {
     // Presence Management
     // =====================
     async getUserPresence(userId) {
+        await this.delay(this.API_DELAY_MS);
         return {
             userId,
             status: 'online',
@@ -10013,33 +9720,29 @@ class AXConversationIndexedDbUserApi extends AXConversationUserApi {
         };
     }
     async updatePresence(_status, _statusText) {
-        // Mock presence update
-        await Promise.resolve();
+        await this.delay(this.API_DELAY_MS);
     }
     // =====================
     // User Blocking & Reporting
     // =====================
     async blockUser(_userId, _reason) {
-        // Mock block
-        await Promise.resolve();
+        await this.delay(this.API_DELAY_MS);
     }
     async unblockUser(_userId) {
-        // Mock unblock
-        await Promise.resolve();
+        await this.delay(this.API_DELAY_MS);
     }
     async getBlockedUsers() {
-        // Mock blocked users list
+        await this.delay(this.API_DELAY_MS);
         return [];
     }
     async reportUser(_userId, _reason) {
-        // Mock report
-        await Promise.resolve();
+        await this.delay(this.API_DELAY_MS);
     }
     // =====================
     // User Settings & Preferences
     // =====================
     async getUserSettings() {
-        // Mock user settings
+        await this.delay(this.API_DELAY_MS);
         return {
             theme: 'light',
             language: 'en',
@@ -10047,8 +9750,34 @@ class AXConversationIndexedDbUserApi extends AXConversationUserApi {
         };
     }
     async updateUserSettings(_settings) {
-        // Mock update settings
-        await Promise.resolve();
+        await this.delay(this.API_DELAY_MS);
+    }
+    // =====================
+    // Private Helpers
+    // =====================
+    getCurrentUserWithoutDelay() {
+        const user = axConversationSharedStorage.participants.get(axConversationSharedStorage.currentUserId);
+        if (!user) {
+            throw this.createError('USER_NOT_FOUND', 'Current user not found', 404);
+        }
+        return Promise.resolve(user);
+    }
+    fetchUsers(pagination, filters) {
+        const users = Array.from(axConversationSharedStorage.participants.values());
+        let filtered = users.filter((u) => u.id !== axConversationSharedStorage.currentUserId);
+        if (filters?.query) {
+            const q = filters.query.toLowerCase();
+            filtered = filtered.filter((u) => {
+                const name = u.name.toLowerCase();
+                const desc = (u.description ?? '').toLowerCase();
+                return name.includes(q) || desc.includes(q);
+            });
+        }
+        filtered.sort((a, b) => a.name.localeCompare(b.name));
+        return Promise.resolve(paginateChatOldestFirst(filtered, pagination));
+    }
+    delay(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationIndexedDbUserApi, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationIndexedDbUserApi }); }
@@ -10071,6 +9800,15 @@ class AXConversationIndexedDbConversationApi extends AXConversationApi {
         if (creatorId) {
             participantIds.add(creatorId);
         }
+        if (data.type === 'private' && !data.forceCreate && creatorId) {
+            const peerUserId = [...participantIds].find((id) => id !== creatorId);
+            if (peerUserId) {
+                const existing = findExistingPrivateConversation(Array.from(axConversationSharedStorage.conversations.values()), creatorId, peerUserId);
+                if (existing) {
+                    return existing;
+                }
+            }
+        }
         const conversation = {
             id: `conv-${Date.now()}`,
             type: data.type,
@@ -11776,7 +11514,7 @@ class AXConversationPickerToolbarComponent {
         ...(ngDevMode ? [{ debugName: "addMoreLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationPickerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXConversationPickerToolbarComponent, isStandalone: true, selector: "ax-conversation-picker-toolbar", inputs: { countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: true, transformFunction: null }, addMoreLabel: { classPropertyName: "addMoreLabel", publicName: "addMoreLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<span class=\"ax-conversation-picker__count\">{{ countLabel() }}</span>\n<ax-button [text]=\"addMoreLabel()\" [look]=\"'ghost'\" axUploaderBrowseHandle>\n  <ax-prefix>\n    <ax-icon><i class=\"fa-light fa-plus\"></i></ax-icon>\n  </ax-prefix>\n</ax-button>\n", styles: ["@layer properties;@layer components{ax-conversation-picker-toolbar{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;box-sizing:border-box;display:flex;flex-shrink: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));background-color:rgba(var(--ax-sys-color-lightest-surface));width:calc(100% + 1.5rem);margin-inline:-.75rem;padding:.375rem .75rem .5rem}ax-conversation-picker-toolbar .ax-conversation-picker__count{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-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.65)}@container picker (max-width: 480px){ax-conversation-picker-toolbar{width:calc(100% + 1rem);margin-inline:-.5rem;padding-inline:.5rem}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.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: "directive", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXConversationPickerToolbarComponent, isStandalone: true, selector: "ax-conversation-picker-toolbar", inputs: { countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: true, transformFunction: null }, addMoreLabel: { classPropertyName: "addMoreLabel", publicName: "addMoreLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<span class=\"ax-conversation-picker__count\">{{ countLabel() }}</span>\n<ax-button [text]=\"addMoreLabel()\" [look]=\"'ghost'\" axUploaderBrowseHandle>\n  <ax-prefix>\n    <ax-icon><i class=\"fa-light fa-plus\"></i></ax-icon>\n  </ax-prefix>\n</ax-button>\n", styles: ["@layer properties;@layer components{ax-conversation-picker-toolbar{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;box-sizing:border-box;display:flex;flex-shrink: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));background-color:rgba(var(--ax-sys-color-lightest-surface));width:calc(100% + 1.5rem);margin-inline:-.75rem;padding:.375rem .75rem .5rem}ax-conversation-picker-toolbar .ax-conversation-picker__count{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-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.65)}@container picker (max-width: 480px){ax-conversation-picker-toolbar{width:calc(100% + 1rem);margin-inline:-.5rem;padding-inline:.5rem}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: "directive", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationPickerToolbarComponent, decorators: [{
             type: Component,
@@ -12035,23 +11773,6 @@ var audioPicker_component = /*#__PURE__*/Object.freeze({
     AXConversationAudioPickerComponent: AXConversationAudioPickerComponent
 });
 
-const AX_CONVERSATION_COMPOSER_EMOJI_TAB = {
-    id: 'emoji',
-    title: '@acorex:chat.tabs.emoji',
-    icon: 'fa-light fa-face-smile',
-    priority: 100,
-    componentLoader: () => Promise.resolve().then(function () { return index$1; }).then((m) => m.AXConversationEmojiTabComponent),
-    enabled: true,
-};
-const AX_CONVERSATION_COMPOSER_STICKER_TAB = {
-    id: 'sticker',
-    title: '@acorex:chat.tabs.stickers',
-    icon: 'fa-light fa-note-sticky',
-    priority: 90,
-    componentLoader: () => Promise.resolve().then(function () { return index; }).then((m) => m.AXConversationStickerTabComponent),
-    enabled: true,
-};
-
 /**
  * Composer Tabs Plugins
  */
@@ -12127,11 +11848,11 @@ class AXConversationEmojiTabComponent {
         this.itemSelected.emit(emoji);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationEmojiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationEmojiTabComponent, isStandalone: true, selector: "ax-conversation-emoji-tab", outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"emoji-tab\">\n  <!-- Search -->\n  <div class=\"emoji-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search emoji...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"emoji-categories\">\n    @for (category of categories(); track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getCategoryClasses(category.id)\"\n        (click)=\"selectCategory(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Emoji Grid -->\n  <div class=\"emoji-grid\">\n    @for (emoji of filteredEmojis(); track emoji.char) {\n      <button\n        type=\"button\"\n        class=\"emoji-button\"\n        (click)=\"selectEmoji(emoji.char)\"\n        [attr.aria-label]=\"emoji.name\"\n        [title]=\"emoji.name\"\n      >\n        {{ emoji.char }}\n      </button>\n    }\n  </div>\n\n  @if (filteredEmojis().length === 0) {\n    <div class=\"emoji-empty\">\n      <p>{{ '@acorex:chat.empty.no-emojis-found' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-emoji-tab .emoji-tab{display:flex;height:100%;flex-direction:column}ax-conversation-emoji-tab .emoji-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-emoji-tab .emoji-categories{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow-x:auto;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-emoji-tab .category-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .category-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .category-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-emoji-tab .emoji-grid{display:grid;max-height:calc(var(--spacing, .25rem) * 60);gap:calc(var(--spacing, .25rem) * 1);grid-template-columns:repeat(auto-fill,32px)}ax-conversation-emoji-tab .emoji-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .emoji-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .emoji-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$4.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: "ngmodule", type: AXTranslationModule }, { 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: AXConversationEmojiTabComponent, isStandalone: true, selector: "ax-conversation-emoji-tab", outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"emoji-tab\">\n  <!-- Search -->\n  <div class=\"emoji-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search emoji...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"emoji-categories\">\n    @for (category of categories(); track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getCategoryClasses(category.id)\"\n        (click)=\"selectCategory(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Emoji Grid -->\n  <div class=\"emoji-grid\">\n    @for (emoji of filteredEmojis(); track emoji.char) {\n      <button\n        type=\"button\"\n        class=\"emoji-button\"\n        (click)=\"selectEmoji(emoji.char)\"\n        [attr.aria-label]=\"emoji.name\"\n        [title]=\"emoji.name\"\n      >\n        {{ emoji.char }}\n      </button>\n    }\n  </div>\n\n  @if (filteredEmojis().length === 0) {\n    <div class=\"emoji-empty\">\n      <p>{{ '@acorex:chat.empty.no-emojis-found' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-emoji-tab .emoji-tab{display:flex;height:100%;flex-direction:column}ax-conversation-emoji-tab .emoji-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;flex-shrink:0;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-emoji-tab .emoji-categories{margin-bottom:calc(var(--spacing, .25rem) * 2);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow-x:auto;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-bottom:calc(var(--spacing, .25rem) * 2);scrollbar-width:thin}ax-conversation-emoji-tab .category-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .category-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .category-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-emoji-tab .emoji-grid{display:grid;min-height:calc(var(--spacing, .25rem) * 0);flex:1;gap:calc(var(--spacing, .25rem) * 1);overflow-y:auto;grid-template-columns:repeat(auto-fill,32px);scrollbar-width:thin}ax-conversation-emoji-tab .emoji-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .emoji-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .emoji-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$4.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: "ngmodule", type: AXTranslationModule }, { 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: AXConversationEmojiTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-conversation-emoji-tab', encapsulation: ViewEncapsulation.None, imports: [CommonModule, FormsModule, AXSearchBoxModule, AXTranslationModule], template: "<div class=\"emoji-tab\">\n  <!-- Search -->\n  <div class=\"emoji-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search emoji...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"emoji-categories\">\n    @for (category of categories(); track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getCategoryClasses(category.id)\"\n        (click)=\"selectCategory(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Emoji Grid -->\n  <div class=\"emoji-grid\">\n    @for (emoji of filteredEmojis(); track emoji.char) {\n      <button\n        type=\"button\"\n        class=\"emoji-button\"\n        (click)=\"selectEmoji(emoji.char)\"\n        [attr.aria-label]=\"emoji.name\"\n        [title]=\"emoji.name\"\n      >\n        {{ emoji.char }}\n      </button>\n    }\n  </div>\n\n  @if (filteredEmojis().length === 0) {\n    <div class=\"emoji-empty\">\n      <p>{{ '@acorex:chat.empty.no-emojis-found' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-emoji-tab .emoji-tab{display:flex;height:100%;flex-direction:column}ax-conversation-emoji-tab .emoji-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-emoji-tab .emoji-categories{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow-x:auto;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-emoji-tab .category-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .category-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .category-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-emoji-tab .emoji-grid{display:grid;max-height:calc(var(--spacing, .25rem) * 60);gap:calc(var(--spacing, .25rem) * 1);grid-template-columns:repeat(auto-fill,32px)}ax-conversation-emoji-tab .emoji-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .emoji-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .emoji-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-conversation-emoji-tab', encapsulation: ViewEncapsulation.None, imports: [CommonModule, FormsModule, AXSearchBoxModule, AXTranslationModule], template: "<div class=\"emoji-tab\">\n  <!-- Search -->\n  <div class=\"emoji-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search emoji...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"emoji-categories\">\n    @for (category of categories(); track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getCategoryClasses(category.id)\"\n        (click)=\"selectCategory(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Emoji Grid -->\n  <div class=\"emoji-grid\">\n    @for (emoji of filteredEmojis(); track emoji.char) {\n      <button\n        type=\"button\"\n        class=\"emoji-button\"\n        (click)=\"selectEmoji(emoji.char)\"\n        [attr.aria-label]=\"emoji.name\"\n        [title]=\"emoji.name\"\n      >\n        {{ emoji.char }}\n      </button>\n    }\n  </div>\n\n  @if (filteredEmojis().length === 0) {\n    <div class=\"emoji-empty\">\n      <p>{{ '@acorex:chat.empty.no-emojis-found' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-emoji-tab .emoji-tab{display:flex;height:100%;flex-direction:column}ax-conversation-emoji-tab .emoji-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;flex-shrink:0;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-emoji-tab .emoji-categories{margin-bottom:calc(var(--spacing, .25rem) * 2);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow-x:auto;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-bottom:calc(var(--spacing, .25rem) * 2);scrollbar-width:thin}ax-conversation-emoji-tab .category-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .category-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .category-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-emoji-tab .emoji-grid{display:grid;min-height:calc(var(--spacing, .25rem) * 0);flex:1;gap:calc(var(--spacing, .25rem) * 1);overflow-y:auto;grid-template-columns:repeat(auto-fill,32px);scrollbar-width:thin}ax-conversation-emoji-tab .emoji-button{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .15s;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}@media(hover:hover){ax-conversation-emoji-tab .emoji-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-emoji-tab .emoji-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -13279,11 +13000,11 @@ class AXConversationStickerTabComponent {
         this.itemSelected.emit(sticker);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationStickerTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationStickerTabComponent, isStandalone: true, selector: "ax-conversation-sticker-tab", outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"sticker-tab\">\n  <!-- Search -->\n  <div class=\"sticker-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search stickers...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"sticker-packs\">\n    @for (category of stickerCategories; track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getPackClasses(category.id)\"\n        (click)=\"selectPack(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Loading State -->\n  @if (loading()) {\n    <div class=\"sticker-grid\">\n      @for (i of skeletonItems; track i) {\n        <div class=\"sticker-skeleton\">\n          <ax-skeleton [animated]=\"true\" class=\"skeleton-item\"></ax-skeleton>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Stickers Grid -->\n  @if (!loading() && activeStickers().length > 0) {\n    <div class=\"sticker-grid\">\n      @for (sticker of activeStickers(); track sticker.id) {\n        <button\n          type=\"button\"\n          class=\"sticker-button\"\n          (click)=\"selectSticker(sticker)\"\n          [attr.aria-label]=\"sticker.emoji\"\n        >\n          <img [src]=\"sticker.url\" [alt]=\"sticker.emoji || 'Sticker'\" class=\"sticker-image\" loading=\"lazy\" />\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (!loading() && activeStickers().length === 0) {\n    <div class=\"sticker-empty\">\n      <p>{{ '@acorex:chat.empty.no-stickers-available' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-sticker-tab .sticker-tab{display:flex;height:100%;flex-direction:column}ax-conversation-sticker-tab .sticker-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-sticker-tab .sticker-packs{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;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-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-sticker-tab .pack-button{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-sticker-tab .pack-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .pack-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-conversation-sticker-tab .sticker-grid{display:grid;max-height:calc(var(--spacing, .25rem) * 60);grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto}ax-conversation-sticker-tab .sticker-button{aspect-ratio:1 / 1;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);transition:all .15s}@media(hover:hover){ax-conversation-sticker-tab .sticker-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .sticker-image{height:100%;width:100%;object-fit:contain}ax-conversation-sticker-tab .sticker-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}ax-conversation-sticker-tab .sticker-skeleton{aspect-ratio:1 / 1;height:calc(var(--spacing, .25rem) * 20);overflow:hidden;border-radius:var(--radius-md, .375rem)}ax-conversation-sticker-tab .skeleton-item{height:100%;width:100%;border-radius:var(--radius-md, .375rem)}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$6.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$4.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: "ngmodule", type: AXTranslationModule }, { 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: AXConversationStickerTabComponent, isStandalone: true, selector: "ax-conversation-sticker-tab", outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"sticker-tab\">\n  <!-- Search -->\n  <div class=\"sticker-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search stickers...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"sticker-packs\">\n    @for (category of stickerCategories; track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getPackClasses(category.id)\"\n        (click)=\"selectPack(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Loading State -->\n  @if (loading()) {\n    <div class=\"sticker-grid\">\n      @for (i of skeletonItems; track i) {\n        <div class=\"sticker-skeleton\">\n          <ax-skeleton [animated]=\"true\" class=\"skeleton-item\"></ax-skeleton>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Stickers Grid -->\n  @if (!loading() && activeStickers().length > 0) {\n    <div class=\"sticker-grid\">\n      @for (sticker of activeStickers(); track sticker.id) {\n        <button\n          type=\"button\"\n          class=\"sticker-button\"\n          (click)=\"selectSticker(sticker)\"\n          [attr.aria-label]=\"sticker.emoji\"\n        >\n          <img [src]=\"sticker.url\" [alt]=\"sticker.emoji || 'Sticker'\" class=\"sticker-image\" loading=\"lazy\" />\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (!loading() && activeStickers().length === 0) {\n    <div class=\"sticker-empty\">\n      <p>{{ '@acorex:chat.empty.no-stickers-available' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-sticker-tab .sticker-tab{display:flex;height:100%;flex-direction:column}ax-conversation-sticker-tab .sticker-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;flex-shrink:0;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-sticker-tab .sticker-packs{margin-bottom:calc(var(--spacing, .25rem) * 2);display:flex;flex-shrink:0;gap:calc(var(--spacing, .25rem) * 1);overflow-x:auto;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-bottom:calc(var(--spacing, .25rem) * 2);scrollbar-width:thin}ax-conversation-sticker-tab .pack-button{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-sticker-tab .pack-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .pack-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-conversation-sticker-tab .sticker-grid{display:grid;min-height:calc(var(--spacing, .25rem) * 0);flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;scrollbar-width:thin}ax-conversation-sticker-tab .sticker-button{aspect-ratio:1 / 1;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);transition:all .15s}@media(hover:hover){ax-conversation-sticker-tab .sticker-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .sticker-image{height:100%;width:100%;object-fit:contain}ax-conversation-sticker-tab .sticker-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}ax-conversation-sticker-tab .sticker-skeleton{aspect-ratio:1 / 1;height:calc(var(--spacing, .25rem) * 20);overflow:hidden;border-radius:var(--radius-md, .375rem)}ax-conversation-sticker-tab .skeleton-item{height:100%;width:100%;border-radius:var(--radius-md, .375rem)}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$6.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$4.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: "ngmodule", type: AXTranslationModule }, { 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: AXConversationStickerTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-conversation-sticker-tab', encapsulation: ViewEncapsulation.None, imports: [CommonModule, FormsModule, AXSkeletonModule, AXSearchBoxModule, AXTranslationModule], template: "<div class=\"sticker-tab\">\n  <!-- Search -->\n  <div class=\"sticker-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search stickers...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"sticker-packs\">\n    @for (category of stickerCategories; track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getPackClasses(category.id)\"\n        (click)=\"selectPack(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Loading State -->\n  @if (loading()) {\n    <div class=\"sticker-grid\">\n      @for (i of skeletonItems; track i) {\n        <div class=\"sticker-skeleton\">\n          <ax-skeleton [animated]=\"true\" class=\"skeleton-item\"></ax-skeleton>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Stickers Grid -->\n  @if (!loading() && activeStickers().length > 0) {\n    <div class=\"sticker-grid\">\n      @for (sticker of activeStickers(); track sticker.id) {\n        <button\n          type=\"button\"\n          class=\"sticker-button\"\n          (click)=\"selectSticker(sticker)\"\n          [attr.aria-label]=\"sticker.emoji\"\n        >\n          <img [src]=\"sticker.url\" [alt]=\"sticker.emoji || 'Sticker'\" class=\"sticker-image\" loading=\"lazy\" />\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (!loading() && activeStickers().length === 0) {\n    <div class=\"sticker-empty\">\n      <p>{{ '@acorex:chat.empty.no-stickers-available' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-sticker-tab .sticker-tab{display:flex;height:100%;flex-direction:column}ax-conversation-sticker-tab .sticker-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-sticker-tab .sticker-packs{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;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-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-sticker-tab .pack-button{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-sticker-tab .pack-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .pack-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-conversation-sticker-tab .sticker-grid{display:grid;max-height:calc(var(--spacing, .25rem) * 60);grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto}ax-conversation-sticker-tab .sticker-button{aspect-ratio:1 / 1;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);transition:all .15s}@media(hover:hover){ax-conversation-sticker-tab .sticker-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .sticker-image{height:100%;width:100%;object-fit:contain}ax-conversation-sticker-tab .sticker-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}ax-conversation-sticker-tab .sticker-skeleton{aspect-ratio:1 / 1;height:calc(var(--spacing, .25rem) * 20);overflow:hidden;border-radius:var(--radius-md, .375rem)}ax-conversation-sticker-tab .skeleton-item{height:100%;width:100%;border-radius:var(--radius-md, .375rem)}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-conversation-sticker-tab', encapsulation: ViewEncapsulation.None, imports: [CommonModule, FormsModule, AXSkeletonModule, AXSearchBoxModule, AXTranslationModule], template: "<div class=\"sticker-tab\">\n  <!-- Search -->\n  <div class=\"sticker-search\">\n    <ax-search-box\n      [value]=\"searchQuery()\"\n      [placeholder]=\"'Search stickers...'\"\n      (onValueChanged)=\"onSearchChange($event)\"\n    ></ax-search-box>\n  </div>\n\n  <!-- Categories -->\n  <div class=\"sticker-packs\">\n    @for (category of stickerCategories; track category.id) {\n      <button\n        type=\"button\"\n        [class]=\"getPackClasses(category.id)\"\n        (click)=\"selectPack(category.id)\"\n        [attr.aria-label]=\"category.name\"\n        [title]=\"category.name\"\n      >\n        {{ category.icon }}\n      </button>\n    }\n  </div>\n\n  <!-- Loading State -->\n  @if (loading()) {\n    <div class=\"sticker-grid\">\n      @for (i of skeletonItems; track i) {\n        <div class=\"sticker-skeleton\">\n          <ax-skeleton [animated]=\"true\" class=\"skeleton-item\"></ax-skeleton>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Stickers Grid -->\n  @if (!loading() && activeStickers().length > 0) {\n    <div class=\"sticker-grid\">\n      @for (sticker of activeStickers(); track sticker.id) {\n        <button\n          type=\"button\"\n          class=\"sticker-button\"\n          (click)=\"selectSticker(sticker)\"\n          [attr.aria-label]=\"sticker.emoji\"\n        >\n          <img [src]=\"sticker.url\" [alt]=\"sticker.emoji || 'Sticker'\" class=\"sticker-image\" loading=\"lazy\" />\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (!loading() && activeStickers().length === 0) {\n    <div class=\"sticker-empty\">\n      <p>{{ '@acorex:chat.empty.no-stickers-available' | translate | async }}</p>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-sticker-tab .sticker-tab{display:flex;height:100%;flex-direction:column}ax-conversation-sticker-tab .sticker-search{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;flex-shrink:0;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-sticker-tab .sticker-packs{margin-bottom:calc(var(--spacing, .25rem) * 2);display:flex;flex-shrink:0;gap:calc(var(--spacing, .25rem) * 1);overflow-x:auto;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-bottom:calc(var(--spacing, .25rem) * 2);scrollbar-width:thin}ax-conversation-sticker-tab .pack-button{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:all .15s;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}@media(hover:hover){ax-conversation-sticker-tab .pack-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .pack-button-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-conversation-sticker-tab .sticker-grid{display:grid;min-height:calc(var(--spacing, .25rem) * 0);flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;scrollbar-width:thin}ax-conversation-sticker-tab .sticker-button{aspect-ratio:1 / 1;cursor:pointer;border-radius:var(--radius-md, .375rem);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 2);transition:all .15s}@media(hover:hover){ax-conversation-sticker-tab .sticker-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-sticker-tab .sticker-image{height:100%;width:100%;object-fit:contain}ax-conversation-sticker-tab .sticker-empty{padding:calc(var(--spacing, .25rem) * 8);text-align:center;opacity:60%}ax-conversation-sticker-tab .sticker-skeleton{aspect-ratio:1 / 1;height:calc(var(--spacing, .25rem) * 20);overflow:hidden;border-radius:var(--radius-md, .375rem)}ax-conversation-sticker-tab .skeleton-item{height:100%;width:100%;border-radius:var(--radius-md, .375rem)}}@property --tw-border-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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 var index = /*#__PURE__*/Object.freeze({
@@ -14066,7 +13787,7 @@ class AXConversationVoiceRecorderComponent {
         this.activeStream = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationVoiceRecorderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationVoiceRecorderComponent, isStandalone: true, selector: "ax-conversation-voice-recorder", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingComplete: "recordingComplete", recordingCancelled: "recordingCancelled" }, ngImport: i0, template: "<div class=\"voice-recorder\">\n  <!-- Header with Close Button -->\n  <div class=\"recorder-header\">\n    <h3 class=\"recorder-title\">{{ '@acorex:chat.voice-recorder.title' | translate | async }}</h3>\n    <button\n      type=\"button\"\n      class=\"close-button\"\n      (click)=\"cancel()\"\n      [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n    >\n      <i class=\"fa-light fa-xmark\"></i>\n    </button>\n  </div>\n\n  <div class=\"recorder-content\">\n    @if (isUploading()) {\n      <div class=\"recorder-upload\">\n        <ax-label>{{ getUploadingLabel() }}</ax-label>\n        <ax-progress-bar [progress]=\"uploadProgress()\" [mode]=\"'determinate'\" [height]=\"6\" />\n      </div>\n    } @else if (!isRecording()) {\n      <!-- Start Recording State -->\n      <div class=\"recorder-idle\">\n        <button class=\"record-button\" (click)=\"startRecording()\">\n          <i class=\"fa-light fa-microphone\"></i>\n        </button>\n        <span class=\"recorder-hint\">{{ '@acorex:chat.voice-recorder.tap-to-start' | translate | async }}</span>\n      </div>\n    } @else {\n      <!-- Recording State -->\n      <div class=\"recorder-active\">\n        <div class=\"recorder-info\">\n          <div class=\"recording-indicator\">\n            <span class=\"pulse-dot\"></span>\n            <span class=\"recording-text\">{{ '@acorex:chat.voice-recorder.recording' | translate | async }}</span>\n          </div>\n          <div class=\"recording-time\">{{ formattedTime() }}</div>\n        </div>\n\n        <div class=\"recorder-actions\">\n          <ax-button\n            [text]=\"translation.translateSync('@acorex:chat.actions.cancel')\"\n            [look]=\"'ghost'\"\n            (onClick)=\"cancelRecording()\"\n          >\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n\n          <ax-button\n            [text]=\"translation.translateSync('@acorex:chat.actions.send')\"\n            [look]=\"'primary'\"\n            (onClick)=\"stopRecording()\"\n          >\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-paper-plane\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-voice-recorder{display:block;width:100%;container-type:inline-size;@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}}ax-conversation-voice-recorder .voice-recorder{display:flex;width:100%;flex-direction:column;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-voice-recorder .recorder-header{display:flex;align-items:center;justify-content:space-between;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-voice-recorder .recorder-title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-voice-recorder .close-button{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);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-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));opacity:70%;transition:all .2s}@media(hover:hover){ax-conversation-voice-recorder .close-button:hover{background-color:rgba(var(--ax-sys-color-light-surface));opacity:100%}}ax-conversation-voice-recorder .recorder-upload{margin-inline:auto;display:flex;width:100%;max-width:calc(var(--spacing, .25rem) * 80);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 6)}ax-conversation-voice-recorder .recorder-content{display:flex;width:100%;align-items:center;padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .recorder-idle{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .record-button{display:flex;height:calc(var(--spacing, .25rem) * 14);width:calc(var(--spacing, .25rem) * 14);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-primary-surface));font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:rgba(var(--ax-sys-color-on-primary-surface));transition:all .2s;box-shadow:0 2px 8px rgba(var(--ax-sys-color-primary-500),.3)}@media(hover:hover){ax-conversation-voice-recorder .record-button:hover{background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-voice-recorder .recorder-hint{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:70%}ax-conversation-voice-recorder .recorder-active{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .recorder-info{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 6)}ax-conversation-voice-recorder .recording-indicator{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-voice-recorder .pulse-dot{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-danger-500));animation:pulse 1.5s ease-in-out infinite}ax-conversation-voice-recorder .recording-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-voice-recorder .recording-time{min-width:calc(var(--spacing, .25rem) * 20);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);--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-voice-recorder .recorder-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@container (max-width: 768px){ax-conversation-voice-recorder .voice-recorder{padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-voice-recorder .record-button{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-voice-recorder .recorder-info{gap:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .recording-time{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--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-voice-recorder .recorder-actions{gap:calc(var(--spacing, .25rem) * 2)}}@container (max-width: 480px){ax-conversation-voice-recorder .recorder-hint{font-size:.8125rem}ax-conversation-voice-recorder .recording-text{display:none}ax-conversation-voice-recorder .recording-time{min-width:60px;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--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,)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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;}@keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{transform:scale3d(1.05,1.05,1.05)}}@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-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: "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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.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: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i1$3.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationVoiceRecorderComponent, isStandalone: true, selector: "ax-conversation-voice-recorder", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingComplete: "recordingComplete", recordingCancelled: "recordingCancelled" }, ngImport: i0, template: "<div class=\"voice-recorder\">\n  <!-- Header with Close Button -->\n  <div class=\"recorder-header\">\n    <h3 class=\"recorder-title\">{{ '@acorex:chat.voice-recorder.title' | translate | async }}</h3>\n    <button\n      type=\"button\"\n      class=\"close-button\"\n      (click)=\"cancel()\"\n      [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n    >\n      <i class=\"fa-light fa-xmark\"></i>\n    </button>\n  </div>\n\n  <div class=\"recorder-content\">\n    @if (isUploading()) {\n      <div class=\"recorder-upload\">\n        <ax-label>{{ getUploadingLabel() }}</ax-label>\n        <ax-progress-bar [progress]=\"uploadProgress()\" [mode]=\"'determinate'\" [height]=\"6\" />\n      </div>\n    } @else if (!isRecording()) {\n      <!-- Start Recording State -->\n      <div class=\"recorder-idle\">\n        <button class=\"record-button\" (click)=\"startRecording()\">\n          <i class=\"fa-light fa-microphone\"></i>\n        </button>\n        <span class=\"recorder-hint\">{{ '@acorex:chat.voice-recorder.tap-to-start' | translate | async }}</span>\n      </div>\n    } @else {\n      <!-- Recording State -->\n      <div class=\"recorder-active\">\n        <div class=\"recorder-info\">\n          <div class=\"recording-indicator\">\n            <span class=\"pulse-dot\"></span>\n            <span class=\"recording-text\">{{ '@acorex:chat.voice-recorder.recording' | translate | async }}</span>\n          </div>\n          <div class=\"recording-time\">{{ formattedTime() }}</div>\n        </div>\n\n        <div class=\"recorder-actions\">\n          <ax-button\n            [text]=\"translation.translateSync('@acorex:chat.actions.cancel')\"\n            [look]=\"'ghost'\"\n            (onClick)=\"cancelRecording()\"\n          >\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n\n          <ax-button\n            [text]=\"translation.translateSync('@acorex:chat.actions.send')\"\n            [look]=\"'primary'\"\n            (onClick)=\"stopRecording()\"\n          >\n            <ax-prefix>\n              <ax-icon><i class=\"fa-light fa-paper-plane\"></i></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-voice-recorder{display:block;width:100%;container-type:inline-size;@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}}ax-conversation-voice-recorder .voice-recorder{display:flex;width:100%;flex-direction:column;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-voice-recorder .recorder-header{display:flex;align-items:center;justify-content:space-between;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-voice-recorder .recorder-title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-voice-recorder .close-button{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);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-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));opacity:70%;transition:all .2s}@media(hover:hover){ax-conversation-voice-recorder .close-button:hover{background-color:rgba(var(--ax-sys-color-light-surface));opacity:100%}}ax-conversation-voice-recorder .recorder-upload{margin-inline:auto;display:flex;width:100%;max-width:calc(var(--spacing, .25rem) * 80);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 6)}ax-conversation-voice-recorder .recorder-content{display:flex;width:100%;align-items:center;padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .recorder-idle{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .record-button{display:flex;height:calc(var(--spacing, .25rem) * 14);width:calc(var(--spacing, .25rem) * 14);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-primary-surface));font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:rgba(var(--ax-sys-color-on-primary-surface));transition:all .2s;box-shadow:0 2px 8px rgba(var(--ax-sys-color-primary-500),.3)}@media(hover:hover){ax-conversation-voice-recorder .record-button:hover{background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-voice-recorder .recorder-hint{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:70%}ax-conversation-voice-recorder .recorder-active{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .recorder-info{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 6)}ax-conversation-voice-recorder .recording-indicator{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-voice-recorder .pulse-dot{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-danger-500));animation:pulse 1.5s ease-in-out infinite}ax-conversation-voice-recorder .recording-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-voice-recorder .recording-time{min-width:calc(var(--spacing, .25rem) * 20);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);--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-voice-recorder .recorder-actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@container (max-width: 768px){ax-conversation-voice-recorder .voice-recorder{padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-voice-recorder .record-button{height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-voice-recorder .recorder-info{gap:calc(var(--spacing, .25rem) * 4)}ax-conversation-voice-recorder .recording-time{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--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-voice-recorder .recorder-actions{gap:calc(var(--spacing, .25rem) * 2)}}@container (max-width: 480px){ax-conversation-voice-recorder .recorder-hint{font-size:.8125rem}ax-conversation-voice-recorder .recording-text{display:none}ax-conversation-voice-recorder .recording-time{min-width:60px;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--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,)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{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;}@keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{transform:scale3d(1.05,1.05,1.05)}}@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-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: "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: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i1$3.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXConversationVoiceRecorderComponent, decorators: [{
             type: Component,
@@ -14651,6 +14372,7 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
         super(...arguments);
         this.toastService = inject(AXToastService);
         this.translation = inject(AXTranslationService);
+        this.platform = inject(AXPlatform);
         this.injectedConversationService = inject(AXConversationService, { optional: true });
         this.onClosed = output();
         this.activeTab = signal('profile', /* @ts-ignore */
@@ -14679,38 +14401,10 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
         this.editTitle = '';
         this.editAvatar = '';
         this.groupDetailsSaveInFlight = false;
-        this.backgroundPresets = [
-            {
-                id: 'solid-default',
-                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.default'),
-                value: 'rgb(var(--ax-sys-color-primary-lightest-surface))',
-            },
-            {
-                id: 'solid-graphite',
-                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.graphite'),
-                value: 'rgb(var(--ax-sys-color-lighter-surface))',
-            },
-            {
-                id: 'solid-olive',
-                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.olive'),
-                value: 'rgba(132, 144, 88, 0.24)',
-            },
-            {
-                id: 'solid-sky',
-                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.sky'),
-                value: 'rgba(56, 189, 248, 0.2)',
-            },
-            {
-                id: 'grad-aurora',
-                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.aurora'),
-                value: 'linear-gradient(140deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%)',
-            },
-            {
-                id: 'grad-sunset',
-                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.sunset'),
-                value: 'linear-gradient(140deg, rgba(251, 113, 133, 0.34) 0%, rgba(251, 191, 36, 0.32) 100%)',
-            },
-        ];
+        this.backgroundPresets = AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS.map((preset) => ({
+            ...preset,
+            label: this.translateBackgroundPresetLabel(preset.id),
+        }));
         this.heroSubtitle = computed(() => {
             const conversation = this.liveConversation();
             if (!conversation)
@@ -15008,21 +14702,36 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
             this.groupDetailsSaveInFlight = false;
         }
     }
-    isBackgroundSelected(value) {
+    isBackgroundSelected(preset) {
+        this.platform.themeMode();
         const bg = this.conversation?.metadata?.['messageListBackground'];
-        return (typeof bg === 'string' ? bg : '') === value;
+        if (bg === undefined ||
+            bg === '' ||
+            (isMessageListThemeBackground(bg) && !bg.light.trim() && !bg.dark.trim())) {
+            return preset.id === AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID;
+        }
+        return isSameMessageListBackground(bg, preset.value, this.platform.isDark());
+    }
+    presetBackgroundPreview(preset) {
+        this.platform.themeMode();
+        const raw = resolveMessageListBackgroundRaw(preset, this.platform.isDark()) ?? '';
+        return normalizeMessageListBackgroundValue(raw);
     }
     async applyMessageListBackground(value) {
+        const isReset = value === '' || (isMessageListThemeBackground(value) && !value.light.trim() && !value.dark.trim());
         try {
-            const metadata = {
-                ...(this.conversation.metadata ?? {}),
-                messageListBackground: value,
-            };
+            const metadata = { ...(this.conversation.metadata ?? {}) };
+            if (isReset) {
+                delete metadata.messageListBackground;
+            }
+            else {
+                metadata.messageListBackground = value;
+            }
             await this.conversationService.updateConversationMetadata(this.conversation.id, metadata);
             this.conversation.metadata = metadata;
-            this.toastService.success(value
-                ? this.translation.translateSync('@acorex:chat.info-panel.toasts.background-updated')
-                : this.translation.translateSync('@acorex:chat.info-panel.toasts.background-reset'));
+            this.toastService.success(isReset
+                ? this.translation.translateSync('@acorex:chat.info-panel.toasts.background-reset')
+                : this.translation.translateSync('@acorex:chat.info-panel.toasts.background-updated'));
         }
         catch (error) {
             console.error('Failed to update message list background:', error);
@@ -15034,6 +14743,17 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
             params: { label },
         });
     }
+    translateBackgroundPresetLabel(id) {
+        const labelKeys = {
+            'solid-default': '@acorex:chat.info-panel.background.presets.default',
+            'solid-graphite': '@acorex:chat.info-panel.background.presets.graphite',
+            'solid-olive': '@acorex:chat.info-panel.background.presets.olive',
+            'solid-sky': '@acorex:chat.info-panel.background.presets.sky',
+            'grad-aurora': '@acorex:chat.info-panel.background.presets.aurora',
+            'grad-sunset': '@acorex:chat.info-panel.background.presets.sunset',
+        };
+        return this.translation.translateSync(labelKeys[id] ?? id);
+    }
     ngOnDestroy() {
         if (this.groupTitleSaveTimer) {
             clearTimeout(this.groupTitleSaveTimer);
@@ -15047,7 +14767,7 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationInfoPanelComponent, isStandalone: true, selector: "ax-conversation-info-panel", outputs: { onClosed: "onClosed" }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationInfoPanelComponent }], usesInheritance: true, ngImport: i0, template: "@if (conversation) {\n  <div class=\"tg-info-panel\">\n    @if (panelView() === 'media' && selectedMediaCategory(); as category) {\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"mediaViewLoader\"\n        [inputs]=\"getMediaViewInputs(category)\"\n      />\n    } @else {\n      <div class=\"tg-info-panel__scroll\">\n        <section class=\"tg-hero\">\n          <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"96\" />\n          <h2 class=\"tg-hero__title\">{{ conversation.title }}</h2>\n          <p class=\"tg-hero__subtitle\">{{ heroSubtitle() }}</p>\n        </section>\n\n        <section class=\"tg-quick-actions\">\n          @for (action of quickActions(); track action.id) {\n            <button\n              type=\"button\"\n              class=\"tg-quick-action\"\n              [class.tg-quick-action--danger]=\"action.danger\"\n              [class.tg-quick-action--active]=\"action.id === 'mute' && isConversationMuted()\"\n              (click)=\"onQuickAction(action.id)\"\n            >\n              <span class=\"tg-quick-action__icon\"><i [class]=\"action.icon\"></i></span>\n              <span class=\"tg-quick-action__label\">{{ action.labelKey | translate | async }}</span>\n            </button>\n          }\n        </section>\n\n        <nav class=\"tg-tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'profile'\"\n            [attr.aria-selected]=\"activeTab() === 'profile'\"\n            (click)=\"setActiveTab('profile')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'manage'\"\n            [attr.aria-selected]=\"activeTab() === 'manage'\"\n            (click)=\"setActiveTab('manage')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}\n          </button>\n        </nav>\n\n        @if (activeTab() === 'profile') {\n          @if (profileFields().length > 0) {\n            <section class=\"tg-section tg-details\">\n              @for (field of profileFields(); track field.id) {\n                <div class=\"tg-detail-row\">\n                  <span class=\"tg-detail-row__icon\"><i [class]=\"field.icon\"></i></span>\n                  <div class=\"tg-detail-row__content\">\n                    <span class=\"tg-detail-row__value\">{{ field.value }}</span>\n                    <span class=\"tg-detail-row__label\">{{ field.labelKey | translate | async }}</span>\n                  </div>\n                </div>\n              }\n            </section>\n          }\n\n          @if (loadingMessages()) {\n            <div class=\"tg-loading\">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>\n          } @else if (mediaCategories().length > 0) {\n            <section class=\"tg-section tg-media\">\n              @for (category of mediaCategories(); track category.id) {\n                <button type=\"button\" class=\"tg-media-row\" (click)=\"openMediaCategory(category)\">\n                  <span class=\"tg-media-row__icon\"><i [class]=\"category.icon\"></i></span>\n                  <span class=\"tg-media-row__label\">{{ getMediaRowLabel(category) }}</span>\n                  <i class=\"fa-light fa-chevron-right tg-media-row__chevron\"></i>\n                </button>\n              }\n            </section>\n          }\n\n          @if (isGroupConversation()) {\n            <section class=\"tg-section tg-members\">\n              <div class=\"tg-section-header tg-section-header--row\">\n                <span class=\"tg-section-header__title\">{{ membersSectionTitle() }}</span>\n                <div class=\"tg-section-header__actions\">\n                  <button\n                    type=\"button\"\n                    class=\"tg-icon-btn\"\n                    (click)=\"toggleMemberSearch()\"\n                    [attr.aria-label]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-magnifying-glass\"></i>\n                  </button>\n                </div>\n              </div>\n              @if (showMemberSearch()) {\n                <div class=\"tg-members-search-wrap\">\n                  <ax-search-box\n                    class=\"tg-members-search\"\n                    [value]=\"memberSearchQuery()\"\n                    (valueChange)=\"onMemberSearchChange($event)\"\n                    [placeholder]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  ></ax-search-box>\n                </div>\n              }\n              @for (participant of filteredMembers(); track participant.id) {\n                <div class=\"tg-member-row\">\n                  <ax-conversation-avatar\n                    kind=\"user\"\n                    [userId]=\"participant.id\"\n                    [conversation]=\"conversation\"\n                    [size]=\"42\"\n                  />\n                  <div class=\"tg-member-row__content\">\n                    <span class=\"tg-member-row__name\">{{ participant.name }}</span>\n                    <span\n                      class=\"tg-member-row__meta\"\n                      [class.tg-member-row__meta--online]=\"participant.status === 'online'\"\n                    >\n                      {{ getMemberSubtitle(participant) }}\n                    </span>\n                  </div>\n                  @if (getMemberRoleLabel(participant); as roleLabel) {\n                    <span class=\"tg-member-row__badge\">{{ roleLabel | translate | async }}</span>\n                  }\n                </div>\n              }\n            </section>\n          }\n        }\n\n        @if (activeTab() === 'manage') {\n          <section class=\"tg-section tg-manage\">\n            @if (!isPrivateConversation()) {\n              <div class=\"tg-manage-block\">\n                <ax-label class=\"tg-manage-label\">{{\n                  '@acorex:chat.info-panel.group-details.title' | translate | async\n                }}</ax-label>\n                <ax-text-box\n                  [value]=\"editTitle\"\n                  (valueChange)=\"onGroupTitleChange($event)\"\n                  [placeholder]=\"'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async\"\n                ></ax-text-box>\n                <div class=\"tg-manage-avatar\">\n                  <ax-conversation-avatar-picker\n                    [(avatarUrl)]=\"editAvatar\"\n                    (avatarUrlChange)=\"onGroupAvatarChange($event)\"\n                  ></ax-conversation-avatar-picker>\n                </div>\n              </div>\n            }\n\n            <div class=\"tg-setting-row\">\n              <div class=\"tg-setting-row__info\">\n                <span class=\"tg-setting-row__title\">{{\n                  '@acorex:chat.info-panel.settings.archived' | translate | async\n                }}</span>\n                <span class=\"tg-setting-row__desc\">{{\n                  '@acorex:chat.info-panel.settings.archived-description' | translate | async\n                }}</span>\n              </div>\n              <ax-switch [(ngModel)]=\"archived\" (ngModelChange)=\"onArchivedChange($event)\"></ax-switch>\n            </div>\n\n            <div class=\"tg-manage-block tg-background-block\">\n              <ax-label class=\"tg-manage-label\">{{\n                '@acorex:chat.info-panel.background.title' | translate | async\n              }}</ax-label>\n              <p class=\"tg-background-desc\">\n                {{ '@acorex:chat.info-panel.background.description' | translate | async }}\n              </p>\n              <div class=\"tg-background-grid\">\n                @for (preset of backgroundPresets; track preset.id) {\n                  <button\n                    type=\"button\"\n                    class=\"tg-background-swatch\"\n                    [class.tg-background-swatch--active]=\"isBackgroundSelected(preset.value)\"\n                    [style.background]=\"preset.value\"\n                    (click)=\"applyMessageListBackground(preset.value)\"\n                    [attr.aria-label]=\"getBackgroundAriaLabel(preset.label)\"\n                  >\n                    <span class=\"tg-background-swatch__label\">{{ preset.label }}</span>\n                  </button>\n                }\n              </div>\n              <ax-button\n                [text]=\"'@acorex:chat.info-panel.actions.reset-to-default' | translate | async\"\n                [look]=\"'ghost'\"\n                (onClick)=\"applyMessageListBackground('')\"\n              ></ax-button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-panel{display:block;height:100%;width:100%}ax-conversation-info-panel .tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}ax-conversation-info-panel .tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}ax-conversation-info-panel .tg-hero{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center}ax-conversation-info-panel .tg-hero__title{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom: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-leading: 1.35;line-height:1.35;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-hero__subtitle{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-quick-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-quick-action{display:flex;max-width:5.5rem;min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-primary-500));transition:background-color .15s ease}ax-conversation-info-panel .tg-quick-action:hover{background-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-quick-action--danger{color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-quick-action--active{color:rgba(var(--ax-sys-color-warning-500));background:rgba(var(--ax-sys-color-warning-500),.14)}ax-conversation-info-panel .tg-quick-action--active .tg-quick-action__label{color:rgba(var(--ax-sys-color-warning-500));opacity:100%}ax-conversation-info-panel .tg-quick-action__icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: 1;line-height:1}ax-conversation-info-panel .tg-quick-action__label{text-align:center;font-size:.6875rem;--tw-leading: 1.1;line-height:1.1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-info-panel .tg-tabs{margin-inline:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 0);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-tab{flex:1;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;--tw-border-style: none;border-style:none;border-color:transparent;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));opacity:55%;transition:opacity .15s ease,color .15s ease,border-color .15s ease}ax-conversation-info-panel .tg-tab:hover{opacity:80%}ax-conversation-info-panel .tg-tab--active{color:rgba(var(--ax-sys-color-primary-500));opacity:100%;border-bottom-color:rgb(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-section{padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-detail-row,ax-conversation-info-panel .tg-member-row{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-panel .tg-media-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);text-align:start;transition:background-color .15s ease}ax-conversation-info-panel .tg-media-row:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-media-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:75%}ax-conversation-info-panel .tg-media-row__label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-media-row__chevron{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:.45}ax-conversation-info-panel .tg-loading{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.8125rem;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-detail-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-primary-500));opacity:90%}ax-conversation-info-panel .tg-detail-row__content,ax-conversation-info-panel .tg-member-row__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-detail-row__value,ax-conversation-info-panel .tg-member-row__name{overflow:hidden;font-size:.9375rem;--tw-leading: 1.3;line-height:1.3;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-detail-row__label,ax-conversation-info-panel .tg-member-row__meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.2;line-height:1.2;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-member-row__meta--online{color:rgba(var(--ax-sys-color-primary-500));opacity:100%}ax-conversation-info-panel .tg-section-header{display:flex;flex-direction:column;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) * 1.5)}ax-conversation-info-panel .tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}ax-conversation-info-panel .tg-section-header__actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-icon-btn{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-icon-btn:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-members-search-wrap{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-section-header__title{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: .06em;letter-spacing:.06em;color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase;opacity:55%}ax-conversation-info-panel .tg-members-search{width:100%}ax-conversation-info-panel .tg-member-row__badge{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}ax-conversation-info-panel .tg-manage{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-manage-block{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-manage-label{font-size:.8125rem;--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-info-panel .tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-setting-row__info{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-setting-row__title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-setting-row__desc{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-background-desc{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-info-panel .tg-background-grid{display:grid;gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-panel .tg-background-swatch{position:relative;height:calc(var(--spacing, .25rem) * 11);cursor:pointer;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;border-color:transparent}ax-conversation-info-panel .tg-background-swatch--active{border-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-background-swatch__label{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 1.5);bottom:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-font-weight: var(--font-weight-light, 300);font-weight:var(--font-weight-light, 300);--tw-tracking: .1rem;letter-spacing:.1rem;color:var(--color-white, #fff);mix-blend-mode:difference}ax-conversation-info-panel .tg-danger{padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-panel .tg-danger-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial;--tw-border-style: solid;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$2.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { 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: "ngmodule", type: AXTranslationModule }, { 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: AXConversationInfoPanelComponent, isStandalone: true, selector: "ax-conversation-info-panel", outputs: { onClosed: "onClosed" }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationInfoPanelComponent }], usesInheritance: true, ngImport: i0, template: "@if (conversation) {\n  <div class=\"tg-info-panel\">\n    @if (panelView() === 'media' && selectedMediaCategory(); as category) {\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"mediaViewLoader\"\n        [inputs]=\"getMediaViewInputs(category)\"\n      />\n    } @else {\n      <div class=\"tg-info-panel__scroll\">\n        <section class=\"tg-hero\">\n          <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"96\" />\n          <h2 class=\"tg-hero__title\">{{ conversation.title }}</h2>\n          <p class=\"tg-hero__subtitle\">{{ heroSubtitle() }}</p>\n        </section>\n\n        <section class=\"tg-quick-actions\">\n          @for (action of quickActions(); track action.id) {\n            <button\n              type=\"button\"\n              class=\"tg-quick-action\"\n              [class.tg-quick-action--danger]=\"action.danger\"\n              [class.tg-quick-action--active]=\"action.id === 'mute' && isConversationMuted()\"\n              (click)=\"onQuickAction(action.id)\"\n            >\n              <span class=\"tg-quick-action__icon\"><i [class]=\"action.icon\"></i></span>\n              <span class=\"tg-quick-action__label\">{{ action.labelKey | translate | async }}</span>\n            </button>\n          }\n        </section>\n\n        <nav class=\"tg-tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'profile'\"\n            [attr.aria-selected]=\"activeTab() === 'profile'\"\n            (click)=\"setActiveTab('profile')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'manage'\"\n            [attr.aria-selected]=\"activeTab() === 'manage'\"\n            (click)=\"setActiveTab('manage')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}\n          </button>\n        </nav>\n\n        @if (activeTab() === 'profile') {\n          @if (profileFields().length > 0) {\n            <section class=\"tg-section tg-details\">\n              @for (field of profileFields(); track field.id) {\n                <div class=\"tg-detail-row\">\n                  <span class=\"tg-detail-row__icon\"><i [class]=\"field.icon\"></i></span>\n                  <div class=\"tg-detail-row__content\">\n                    <span class=\"tg-detail-row__value\">{{ field.value }}</span>\n                    <span class=\"tg-detail-row__label\">{{ field.labelKey | translate | async }}</span>\n                  </div>\n                </div>\n              }\n            </section>\n          }\n\n          @if (loadingMessages()) {\n            <div class=\"tg-loading\">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>\n          } @else if (mediaCategories().length > 0) {\n            <section class=\"tg-section tg-media\">\n              @for (category of mediaCategories(); track category.id) {\n                <button type=\"button\" class=\"tg-media-row\" (click)=\"openMediaCategory(category)\">\n                  <span class=\"tg-media-row__icon\"><i [class]=\"category.icon\"></i></span>\n                  <span class=\"tg-media-row__label\">{{ getMediaRowLabel(category) }}</span>\n                  <i class=\"fa-light fa-chevron-right tg-media-row__chevron\"></i>\n                </button>\n              }\n            </section>\n          }\n\n          @if (isGroupConversation()) {\n            <section class=\"tg-section tg-members\">\n              <div class=\"tg-section-header tg-section-header--row\">\n                <span class=\"tg-section-header__title\">{{ membersSectionTitle() }}</span>\n                <div class=\"tg-section-header__actions\">\n                  <button\n                    type=\"button\"\n                    class=\"tg-icon-btn\"\n                    (click)=\"toggleMemberSearch()\"\n                    [attr.aria-label]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-magnifying-glass\"></i>\n                  </button>\n                </div>\n              </div>\n              @if (showMemberSearch()) {\n                <div class=\"tg-members-search-wrap\">\n                  <ax-search-box\n                    class=\"tg-members-search\"\n                    [value]=\"memberSearchQuery()\"\n                    (valueChange)=\"onMemberSearchChange($event)\"\n                    [placeholder]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  ></ax-search-box>\n                </div>\n              }\n              @for (participant of filteredMembers(); track participant.id) {\n                <div class=\"tg-member-row\">\n                  <ax-conversation-avatar\n                    kind=\"user\"\n                    [userId]=\"participant.id\"\n                    [conversation]=\"conversation\"\n                    [size]=\"42\"\n                  />\n                  <div class=\"tg-member-row__content\">\n                    <span class=\"tg-member-row__name\">{{ participant.name }}</span>\n                    <span\n                      class=\"tg-member-row__meta\"\n                      [class.tg-member-row__meta--online]=\"participant.status === 'online'\"\n                    >\n                      {{ getMemberSubtitle(participant) }}\n                    </span>\n                  </div>\n                  @if (getMemberRoleLabel(participant); as roleLabel) {\n                    <span class=\"tg-member-row__badge\">{{ roleLabel | translate | async }}</span>\n                  }\n                </div>\n              }\n            </section>\n          }\n        }\n\n        @if (activeTab() === 'manage') {\n          <section class=\"tg-section tg-manage\">\n            @if (!isPrivateConversation()) {\n              <div class=\"tg-manage-block\">\n                <ax-label class=\"tg-manage-label\">{{\n                  '@acorex:chat.info-panel.group-details.title' | translate | async\n                }}</ax-label>\n                <ax-text-box\n                  [value]=\"editTitle\"\n                  (valueChange)=\"onGroupTitleChange($event)\"\n                  [placeholder]=\"'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async\"\n                ></ax-text-box>\n                <div class=\"tg-manage-avatar\">\n                  <ax-conversation-avatar-picker\n                    [(avatarUrl)]=\"editAvatar\"\n                    (avatarUrlChange)=\"onGroupAvatarChange($event)\"\n                  ></ax-conversation-avatar-picker>\n                </div>\n              </div>\n            }\n\n            <div class=\"tg-setting-row\">\n              <div class=\"tg-setting-row__info\">\n                <span class=\"tg-setting-row__title\">{{\n                  '@acorex:chat.info-panel.settings.archived' | translate | async\n                }}</span>\n                <span class=\"tg-setting-row__desc\">{{\n                  '@acorex:chat.info-panel.settings.archived-description' | translate | async\n                }}</span>\n              </div>\n              <ax-switch [(ngModel)]=\"archived\" (ngModelChange)=\"onArchivedChange($event)\"></ax-switch>\n            </div>\n\n            <div class=\"tg-manage-block tg-background-block\">\n              <ax-label class=\"tg-manage-label\">{{\n                '@acorex:chat.info-panel.background.title' | translate | async\n              }}</ax-label>\n              <p class=\"tg-background-desc\">\n                {{ '@acorex:chat.info-panel.background.description' | translate | async }}\n              </p>\n              <div class=\"tg-background-grid\">\n                @for (preset of backgroundPresets; track preset.id) {\n                  <button\n                    type=\"button\"\n                    class=\"tg-background-swatch\"\n                    [class.tg-background-swatch--active]=\"isBackgroundSelected(preset)\"\n                    [style.background]=\"presetBackgroundPreview(preset.value)\"\n                    (click)=\"applyMessageListBackground(preset.value)\"\n                    [attr.aria-label]=\"getBackgroundAriaLabel(preset.label)\"\n                  >\n                    <span class=\"tg-background-swatch__label\">{{ preset.label }}</span>\n                  </button>\n                }\n              </div>\n              <ax-button\n                [text]=\"'@acorex:chat.info-panel.actions.reset-to-default' | translate | async\"\n                [look]=\"'ghost'\"\n                (onClick)=\"applyMessageListBackground('')\"\n              ></ax-button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-panel{display:block;height:100%;width:100%}ax-conversation-info-panel .tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}ax-conversation-info-panel .tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}ax-conversation-info-panel .tg-hero{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center}ax-conversation-info-panel .tg-hero__title{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom: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-leading: 1.35;line-height:1.35;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-hero__subtitle{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-quick-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-quick-action{display:flex;max-width:5.5rem;min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-primary-500));transition:background-color .15s ease}ax-conversation-info-panel .tg-quick-action:hover{background-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-quick-action--danger{color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-quick-action--active{color:rgba(var(--ax-sys-color-warning-500));background:rgba(var(--ax-sys-color-warning-500),.14)}ax-conversation-info-panel .tg-quick-action--active .tg-quick-action__label{color:rgba(var(--ax-sys-color-warning-500));opacity:100%}ax-conversation-info-panel .tg-quick-action__icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: 1;line-height:1}ax-conversation-info-panel .tg-quick-action__label{text-align:center;font-size:.6875rem;--tw-leading: 1.1;line-height:1.1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-info-panel .tg-tabs{margin-inline:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 0);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-tab{flex:1;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;--tw-border-style: none;border-style:none;border-color:transparent;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));opacity:55%;transition:opacity .15s ease,color .15s ease,border-color .15s ease}ax-conversation-info-panel .tg-tab:hover{opacity:80%}ax-conversation-info-panel .tg-tab--active{color:rgba(var(--ax-sys-color-primary-500));opacity:100%;border-bottom-color:rgb(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-section{padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-detail-row,ax-conversation-info-panel .tg-member-row{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-panel .tg-media-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);text-align:start;transition:background-color .15s ease}ax-conversation-info-panel .tg-media-row:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-media-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:75%}ax-conversation-info-panel .tg-media-row__label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-media-row__chevron{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:.45}ax-conversation-info-panel .tg-loading{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.8125rem;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-detail-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-primary-500));opacity:90%}ax-conversation-info-panel .tg-detail-row__content,ax-conversation-info-panel .tg-member-row__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-detail-row__value,ax-conversation-info-panel .tg-member-row__name{overflow:hidden;font-size:.9375rem;--tw-leading: 1.3;line-height:1.3;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-detail-row__label,ax-conversation-info-panel .tg-member-row__meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.2;line-height:1.2;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-member-row__meta--online{color:rgba(var(--ax-sys-color-primary-500));opacity:100%}ax-conversation-info-panel .tg-section-header{display:flex;flex-direction:column;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) * 1.5)}ax-conversation-info-panel .tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}ax-conversation-info-panel .tg-section-header__actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-icon-btn{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-icon-btn:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-members-search-wrap{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-section-header__title{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: .06em;letter-spacing:.06em;color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase;opacity:55%}ax-conversation-info-panel .tg-members-search{width:100%}ax-conversation-info-panel .tg-member-row__badge{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}ax-conversation-info-panel .tg-manage{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-manage-block{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-manage-label{font-size:.8125rem;--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-info-panel .tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-setting-row__info{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-setting-row__title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-setting-row__desc{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-background-desc{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-info-panel .tg-background-grid{display:grid;gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-panel .tg-background-swatch{position:relative;height:calc(var(--spacing, .25rem) * 11);cursor:pointer;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;border-color:transparent}ax-conversation-info-panel .tg-background-swatch--active{border-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-background-swatch__label{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 1.5);bottom:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-font-weight: var(--font-weight-light, 300);font-weight:var(--font-weight-light, 300);--tw-tracking: .1rem;letter-spacing:.1rem;color:var(--color-white, #fff);mix-blend-mode:difference}ax-conversation-info-panel .tg-danger{padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-panel .tg-danger-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial;--tw-border-style: solid;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$2.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { 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: "ngmodule", type: AXTranslationModule }, { 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: AXConversationInfoPanelComponent, decorators: [{
             type: Component,
@@ -15064,7 +14784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXConversationAvatarComponent,
                         AXConversationRegistryComponentOutletComponent,
                         AXTranslationModule,
-                    ], providers: [{ provide: AXClosableComponent, useExisting: AXConversationInfoPanelComponent }], template: "@if (conversation) {\n  <div class=\"tg-info-panel\">\n    @if (panelView() === 'media' && selectedMediaCategory(); as category) {\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"mediaViewLoader\"\n        [inputs]=\"getMediaViewInputs(category)\"\n      />\n    } @else {\n      <div class=\"tg-info-panel__scroll\">\n        <section class=\"tg-hero\">\n          <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"96\" />\n          <h2 class=\"tg-hero__title\">{{ conversation.title }}</h2>\n          <p class=\"tg-hero__subtitle\">{{ heroSubtitle() }}</p>\n        </section>\n\n        <section class=\"tg-quick-actions\">\n          @for (action of quickActions(); track action.id) {\n            <button\n              type=\"button\"\n              class=\"tg-quick-action\"\n              [class.tg-quick-action--danger]=\"action.danger\"\n              [class.tg-quick-action--active]=\"action.id === 'mute' && isConversationMuted()\"\n              (click)=\"onQuickAction(action.id)\"\n            >\n              <span class=\"tg-quick-action__icon\"><i [class]=\"action.icon\"></i></span>\n              <span class=\"tg-quick-action__label\">{{ action.labelKey | translate | async }}</span>\n            </button>\n          }\n        </section>\n\n        <nav class=\"tg-tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'profile'\"\n            [attr.aria-selected]=\"activeTab() === 'profile'\"\n            (click)=\"setActiveTab('profile')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'manage'\"\n            [attr.aria-selected]=\"activeTab() === 'manage'\"\n            (click)=\"setActiveTab('manage')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}\n          </button>\n        </nav>\n\n        @if (activeTab() === 'profile') {\n          @if (profileFields().length > 0) {\n            <section class=\"tg-section tg-details\">\n              @for (field of profileFields(); track field.id) {\n                <div class=\"tg-detail-row\">\n                  <span class=\"tg-detail-row__icon\"><i [class]=\"field.icon\"></i></span>\n                  <div class=\"tg-detail-row__content\">\n                    <span class=\"tg-detail-row__value\">{{ field.value }}</span>\n                    <span class=\"tg-detail-row__label\">{{ field.labelKey | translate | async }}</span>\n                  </div>\n                </div>\n              }\n            </section>\n          }\n\n          @if (loadingMessages()) {\n            <div class=\"tg-loading\">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>\n          } @else if (mediaCategories().length > 0) {\n            <section class=\"tg-section tg-media\">\n              @for (category of mediaCategories(); track category.id) {\n                <button type=\"button\" class=\"tg-media-row\" (click)=\"openMediaCategory(category)\">\n                  <span class=\"tg-media-row__icon\"><i [class]=\"category.icon\"></i></span>\n                  <span class=\"tg-media-row__label\">{{ getMediaRowLabel(category) }}</span>\n                  <i class=\"fa-light fa-chevron-right tg-media-row__chevron\"></i>\n                </button>\n              }\n            </section>\n          }\n\n          @if (isGroupConversation()) {\n            <section class=\"tg-section tg-members\">\n              <div class=\"tg-section-header tg-section-header--row\">\n                <span class=\"tg-section-header__title\">{{ membersSectionTitle() }}</span>\n                <div class=\"tg-section-header__actions\">\n                  <button\n                    type=\"button\"\n                    class=\"tg-icon-btn\"\n                    (click)=\"toggleMemberSearch()\"\n                    [attr.aria-label]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-magnifying-glass\"></i>\n                  </button>\n                </div>\n              </div>\n              @if (showMemberSearch()) {\n                <div class=\"tg-members-search-wrap\">\n                  <ax-search-box\n                    class=\"tg-members-search\"\n                    [value]=\"memberSearchQuery()\"\n                    (valueChange)=\"onMemberSearchChange($event)\"\n                    [placeholder]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  ></ax-search-box>\n                </div>\n              }\n              @for (participant of filteredMembers(); track participant.id) {\n                <div class=\"tg-member-row\">\n                  <ax-conversation-avatar\n                    kind=\"user\"\n                    [userId]=\"participant.id\"\n                    [conversation]=\"conversation\"\n                    [size]=\"42\"\n                  />\n                  <div class=\"tg-member-row__content\">\n                    <span class=\"tg-member-row__name\">{{ participant.name }}</span>\n                    <span\n                      class=\"tg-member-row__meta\"\n                      [class.tg-member-row__meta--online]=\"participant.status === 'online'\"\n                    >\n                      {{ getMemberSubtitle(participant) }}\n                    </span>\n                  </div>\n                  @if (getMemberRoleLabel(participant); as roleLabel) {\n                    <span class=\"tg-member-row__badge\">{{ roleLabel | translate | async }}</span>\n                  }\n                </div>\n              }\n            </section>\n          }\n        }\n\n        @if (activeTab() === 'manage') {\n          <section class=\"tg-section tg-manage\">\n            @if (!isPrivateConversation()) {\n              <div class=\"tg-manage-block\">\n                <ax-label class=\"tg-manage-label\">{{\n                  '@acorex:chat.info-panel.group-details.title' | translate | async\n                }}</ax-label>\n                <ax-text-box\n                  [value]=\"editTitle\"\n                  (valueChange)=\"onGroupTitleChange($event)\"\n                  [placeholder]=\"'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async\"\n                ></ax-text-box>\n                <div class=\"tg-manage-avatar\">\n                  <ax-conversation-avatar-picker\n                    [(avatarUrl)]=\"editAvatar\"\n                    (avatarUrlChange)=\"onGroupAvatarChange($event)\"\n                  ></ax-conversation-avatar-picker>\n                </div>\n              </div>\n            }\n\n            <div class=\"tg-setting-row\">\n              <div class=\"tg-setting-row__info\">\n                <span class=\"tg-setting-row__title\">{{\n                  '@acorex:chat.info-panel.settings.archived' | translate | async\n                }}</span>\n                <span class=\"tg-setting-row__desc\">{{\n                  '@acorex:chat.info-panel.settings.archived-description' | translate | async\n                }}</span>\n              </div>\n              <ax-switch [(ngModel)]=\"archived\" (ngModelChange)=\"onArchivedChange($event)\"></ax-switch>\n            </div>\n\n            <div class=\"tg-manage-block tg-background-block\">\n              <ax-label class=\"tg-manage-label\">{{\n                '@acorex:chat.info-panel.background.title' | translate | async\n              }}</ax-label>\n              <p class=\"tg-background-desc\">\n                {{ '@acorex:chat.info-panel.background.description' | translate | async }}\n              </p>\n              <div class=\"tg-background-grid\">\n                @for (preset of backgroundPresets; track preset.id) {\n                  <button\n                    type=\"button\"\n                    class=\"tg-background-swatch\"\n                    [class.tg-background-swatch--active]=\"isBackgroundSelected(preset.value)\"\n                    [style.background]=\"preset.value\"\n                    (click)=\"applyMessageListBackground(preset.value)\"\n                    [attr.aria-label]=\"getBackgroundAriaLabel(preset.label)\"\n                  >\n                    <span class=\"tg-background-swatch__label\">{{ preset.label }}</span>\n                  </button>\n                }\n              </div>\n              <ax-button\n                [text]=\"'@acorex:chat.info-panel.actions.reset-to-default' | translate | async\"\n                [look]=\"'ghost'\"\n                (onClick)=\"applyMessageListBackground('')\"\n              ></ax-button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-panel{display:block;height:100%;width:100%}ax-conversation-info-panel .tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}ax-conversation-info-panel .tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}ax-conversation-info-panel .tg-hero{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center}ax-conversation-info-panel .tg-hero__title{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom: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-leading: 1.35;line-height:1.35;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-hero__subtitle{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-quick-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-quick-action{display:flex;max-width:5.5rem;min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-primary-500));transition:background-color .15s ease}ax-conversation-info-panel .tg-quick-action:hover{background-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-quick-action--danger{color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-quick-action--active{color:rgba(var(--ax-sys-color-warning-500));background:rgba(var(--ax-sys-color-warning-500),.14)}ax-conversation-info-panel .tg-quick-action--active .tg-quick-action__label{color:rgba(var(--ax-sys-color-warning-500));opacity:100%}ax-conversation-info-panel .tg-quick-action__icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: 1;line-height:1}ax-conversation-info-panel .tg-quick-action__label{text-align:center;font-size:.6875rem;--tw-leading: 1.1;line-height:1.1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-info-panel .tg-tabs{margin-inline:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 0);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-tab{flex:1;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;--tw-border-style: none;border-style:none;border-color:transparent;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));opacity:55%;transition:opacity .15s ease,color .15s ease,border-color .15s ease}ax-conversation-info-panel .tg-tab:hover{opacity:80%}ax-conversation-info-panel .tg-tab--active{color:rgba(var(--ax-sys-color-primary-500));opacity:100%;border-bottom-color:rgb(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-section{padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-detail-row,ax-conversation-info-panel .tg-member-row{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-panel .tg-media-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);text-align:start;transition:background-color .15s ease}ax-conversation-info-panel .tg-media-row:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-media-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:75%}ax-conversation-info-panel .tg-media-row__label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-media-row__chevron{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:.45}ax-conversation-info-panel .tg-loading{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.8125rem;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-detail-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-primary-500));opacity:90%}ax-conversation-info-panel .tg-detail-row__content,ax-conversation-info-panel .tg-member-row__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-detail-row__value,ax-conversation-info-panel .tg-member-row__name{overflow:hidden;font-size:.9375rem;--tw-leading: 1.3;line-height:1.3;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-detail-row__label,ax-conversation-info-panel .tg-member-row__meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.2;line-height:1.2;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-member-row__meta--online{color:rgba(var(--ax-sys-color-primary-500));opacity:100%}ax-conversation-info-panel .tg-section-header{display:flex;flex-direction:column;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) * 1.5)}ax-conversation-info-panel .tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}ax-conversation-info-panel .tg-section-header__actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-icon-btn{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-icon-btn:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-members-search-wrap{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-section-header__title{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: .06em;letter-spacing:.06em;color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase;opacity:55%}ax-conversation-info-panel .tg-members-search{width:100%}ax-conversation-info-panel .tg-member-row__badge{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}ax-conversation-info-panel .tg-manage{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-manage-block{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-manage-label{font-size:.8125rem;--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-info-panel .tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-setting-row__info{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-setting-row__title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-setting-row__desc{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-background-desc{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-info-panel .tg-background-grid{display:grid;gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-panel .tg-background-swatch{position:relative;height:calc(var(--spacing, .25rem) * 11);cursor:pointer;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;border-color:transparent}ax-conversation-info-panel .tg-background-swatch--active{border-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-background-swatch__label{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 1.5);bottom:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-font-weight: var(--font-weight-light, 300);font-weight:var(--font-weight-light, 300);--tw-tracking: .1rem;letter-spacing:.1rem;color:var(--color-white, #fff);mix-blend-mode:difference}ax-conversation-info-panel .tg-danger{padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-panel .tg-danger-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial;--tw-border-style: solid;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], providers: [{ provide: AXClosableComponent, useExisting: AXConversationInfoPanelComponent }], template: "@if (conversation) {\n  <div class=\"tg-info-panel\">\n    @if (panelView() === 'media' && selectedMediaCategory(); as category) {\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"mediaViewLoader\"\n        [inputs]=\"getMediaViewInputs(category)\"\n      />\n    } @else {\n      <div class=\"tg-info-panel__scroll\">\n        <section class=\"tg-hero\">\n          <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"96\" />\n          <h2 class=\"tg-hero__title\">{{ conversation.title }}</h2>\n          <p class=\"tg-hero__subtitle\">{{ heroSubtitle() }}</p>\n        </section>\n\n        <section class=\"tg-quick-actions\">\n          @for (action of quickActions(); track action.id) {\n            <button\n              type=\"button\"\n              class=\"tg-quick-action\"\n              [class.tg-quick-action--danger]=\"action.danger\"\n              [class.tg-quick-action--active]=\"action.id === 'mute' && isConversationMuted()\"\n              (click)=\"onQuickAction(action.id)\"\n            >\n              <span class=\"tg-quick-action__icon\"><i [class]=\"action.icon\"></i></span>\n              <span class=\"tg-quick-action__label\">{{ action.labelKey | translate | async }}</span>\n            </button>\n          }\n        </section>\n\n        <nav class=\"tg-tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'profile'\"\n            [attr.aria-selected]=\"activeTab() === 'profile'\"\n            (click)=\"setActiveTab('profile')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'manage'\"\n            [attr.aria-selected]=\"activeTab() === 'manage'\"\n            (click)=\"setActiveTab('manage')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}\n          </button>\n        </nav>\n\n        @if (activeTab() === 'profile') {\n          @if (profileFields().length > 0) {\n            <section class=\"tg-section tg-details\">\n              @for (field of profileFields(); track field.id) {\n                <div class=\"tg-detail-row\">\n                  <span class=\"tg-detail-row__icon\"><i [class]=\"field.icon\"></i></span>\n                  <div class=\"tg-detail-row__content\">\n                    <span class=\"tg-detail-row__value\">{{ field.value }}</span>\n                    <span class=\"tg-detail-row__label\">{{ field.labelKey | translate | async }}</span>\n                  </div>\n                </div>\n              }\n            </section>\n          }\n\n          @if (loadingMessages()) {\n            <div class=\"tg-loading\">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>\n          } @else if (mediaCategories().length > 0) {\n            <section class=\"tg-section tg-media\">\n              @for (category of mediaCategories(); track category.id) {\n                <button type=\"button\" class=\"tg-media-row\" (click)=\"openMediaCategory(category)\">\n                  <span class=\"tg-media-row__icon\"><i [class]=\"category.icon\"></i></span>\n                  <span class=\"tg-media-row__label\">{{ getMediaRowLabel(category) }}</span>\n                  <i class=\"fa-light fa-chevron-right tg-media-row__chevron\"></i>\n                </button>\n              }\n            </section>\n          }\n\n          @if (isGroupConversation()) {\n            <section class=\"tg-section tg-members\">\n              <div class=\"tg-section-header tg-section-header--row\">\n                <span class=\"tg-section-header__title\">{{ membersSectionTitle() }}</span>\n                <div class=\"tg-section-header__actions\">\n                  <button\n                    type=\"button\"\n                    class=\"tg-icon-btn\"\n                    (click)=\"toggleMemberSearch()\"\n                    [attr.aria-label]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-magnifying-glass\"></i>\n                  </button>\n                </div>\n              </div>\n              @if (showMemberSearch()) {\n                <div class=\"tg-members-search-wrap\">\n                  <ax-search-box\n                    class=\"tg-members-search\"\n                    [value]=\"memberSearchQuery()\"\n                    (valueChange)=\"onMemberSearchChange($event)\"\n                    [placeholder]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  ></ax-search-box>\n                </div>\n              }\n              @for (participant of filteredMembers(); track participant.id) {\n                <div class=\"tg-member-row\">\n                  <ax-conversation-avatar\n                    kind=\"user\"\n                    [userId]=\"participant.id\"\n                    [conversation]=\"conversation\"\n                    [size]=\"42\"\n                  />\n                  <div class=\"tg-member-row__content\">\n                    <span class=\"tg-member-row__name\">{{ participant.name }}</span>\n                    <span\n                      class=\"tg-member-row__meta\"\n                      [class.tg-member-row__meta--online]=\"participant.status === 'online'\"\n                    >\n                      {{ getMemberSubtitle(participant) }}\n                    </span>\n                  </div>\n                  @if (getMemberRoleLabel(participant); as roleLabel) {\n                    <span class=\"tg-member-row__badge\">{{ roleLabel | translate | async }}</span>\n                  }\n                </div>\n              }\n            </section>\n          }\n        }\n\n        @if (activeTab() === 'manage') {\n          <section class=\"tg-section tg-manage\">\n            @if (!isPrivateConversation()) {\n              <div class=\"tg-manage-block\">\n                <ax-label class=\"tg-manage-label\">{{\n                  '@acorex:chat.info-panel.group-details.title' | translate | async\n                }}</ax-label>\n                <ax-text-box\n                  [value]=\"editTitle\"\n                  (valueChange)=\"onGroupTitleChange($event)\"\n                  [placeholder]=\"'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async\"\n                ></ax-text-box>\n                <div class=\"tg-manage-avatar\">\n                  <ax-conversation-avatar-picker\n                    [(avatarUrl)]=\"editAvatar\"\n                    (avatarUrlChange)=\"onGroupAvatarChange($event)\"\n                  ></ax-conversation-avatar-picker>\n                </div>\n              </div>\n            }\n\n            <div class=\"tg-setting-row\">\n              <div class=\"tg-setting-row__info\">\n                <span class=\"tg-setting-row__title\">{{\n                  '@acorex:chat.info-panel.settings.archived' | translate | async\n                }}</span>\n                <span class=\"tg-setting-row__desc\">{{\n                  '@acorex:chat.info-panel.settings.archived-description' | translate | async\n                }}</span>\n              </div>\n              <ax-switch [(ngModel)]=\"archived\" (ngModelChange)=\"onArchivedChange($event)\"></ax-switch>\n            </div>\n\n            <div class=\"tg-manage-block tg-background-block\">\n              <ax-label class=\"tg-manage-label\">{{\n                '@acorex:chat.info-panel.background.title' | translate | async\n              }}</ax-label>\n              <p class=\"tg-background-desc\">\n                {{ '@acorex:chat.info-panel.background.description' | translate | async }}\n              </p>\n              <div class=\"tg-background-grid\">\n                @for (preset of backgroundPresets; track preset.id) {\n                  <button\n                    type=\"button\"\n                    class=\"tg-background-swatch\"\n                    [class.tg-background-swatch--active]=\"isBackgroundSelected(preset)\"\n                    [style.background]=\"presetBackgroundPreview(preset.value)\"\n                    (click)=\"applyMessageListBackground(preset.value)\"\n                    [attr.aria-label]=\"getBackgroundAriaLabel(preset.label)\"\n                  >\n                    <span class=\"tg-background-swatch__label\">{{ preset.label }}</span>\n                  </button>\n                }\n              </div>\n              <ax-button\n                [text]=\"'@acorex:chat.info-panel.actions.reset-to-default' | translate | async\"\n                [look]=\"'ghost'\"\n                (onClick)=\"applyMessageListBackground('')\"\n              ></ax-button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-panel{display:block;height:100%;width:100%}ax-conversation-info-panel .tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}ax-conversation-info-panel .tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}ax-conversation-info-panel .tg-hero{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center}ax-conversation-info-panel .tg-hero__title{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom: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-leading: 1.35;line-height:1.35;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-hero__subtitle{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-quick-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-quick-action{display:flex;max-width:5.5rem;min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-primary-500));transition:background-color .15s ease}ax-conversation-info-panel .tg-quick-action:hover{background-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-quick-action--danger{color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-quick-action--active{color:rgba(var(--ax-sys-color-warning-500));background:rgba(var(--ax-sys-color-warning-500),.14)}ax-conversation-info-panel .tg-quick-action--active .tg-quick-action__label{color:rgba(var(--ax-sys-color-warning-500));opacity:100%}ax-conversation-info-panel .tg-quick-action__icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: 1;line-height:1}ax-conversation-info-panel .tg-quick-action__label{text-align:center;font-size:.6875rem;--tw-leading: 1.1;line-height:1.1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-info-panel .tg-tabs{margin-inline:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 0);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-info-panel .tg-tab{flex:1;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;--tw-border-style: none;border-style:none;border-color:transparent;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));opacity:55%;transition:opacity .15s ease,color .15s ease,border-color .15s ease}ax-conversation-info-panel .tg-tab:hover{opacity:80%}ax-conversation-info-panel .tg-tab--active{color:rgba(var(--ax-sys-color-primary-500));opacity:100%;border-bottom-color:rgb(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-section{padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-detail-row,ax-conversation-info-panel .tg-member-row{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-panel .tg-media-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);text-align:start;transition:background-color .15s ease}ax-conversation-info-panel .tg-media-row:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-media-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:75%}ax-conversation-info-panel .tg-media-row__label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-media-row__chevron{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:.45}ax-conversation-info-panel .tg-loading{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.8125rem;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-detail-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-primary-500));opacity:90%}ax-conversation-info-panel .tg-detail-row__content,ax-conversation-info-panel .tg-member-row__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-detail-row__value,ax-conversation-info-panel .tg-member-row__name{overflow:hidden;font-size:.9375rem;--tw-leading: 1.3;line-height:1.3;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-detail-row__label,ax-conversation-info-panel .tg-member-row__meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.2;line-height:1.2;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}ax-conversation-info-panel .tg-member-row__meta--online{color:rgba(var(--ax-sys-color-primary-500));opacity:100%}ax-conversation-info-panel .tg-section-header{display:flex;flex-direction:column;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) * 1.5)}ax-conversation-info-panel .tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}ax-conversation-info-panel .tg-section-header__actions{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-info-panel .tg-icon-btn{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-icon-btn:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-panel .tg-members-search-wrap{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-section-header__title{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: .06em;letter-spacing:.06em;color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase;opacity:55%}ax-conversation-info-panel .tg-members-search{width:100%}ax-conversation-info-panel .tg-member-row__badge{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}ax-conversation-info-panel .tg-manage{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-panel .tg-manage-block{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-manage-label{font-size:.8125rem;--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-info-panel .tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-panel .tg-setting-row__info{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-info-panel .tg-setting-row__title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-panel .tg-setting-row__desc{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-panel .tg-background-desc{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-info-panel .tg-background-grid{display:grid;gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-panel .tg-background-swatch{position:relative;height:calc(var(--spacing, .25rem) * 11);cursor:pointer;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;border-color:transparent}ax-conversation-info-panel .tg-background-swatch--active{border-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-panel .tg-background-swatch__label{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 1.5);bottom:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-font-weight: var(--font-weight-light, 300);font-weight:var(--font-weight-light, 300);--tw-tracking: .1rem;letter-spacing:.1rem;color:var(--color-white, #fff);mix-blend-mode:difference}ax-conversation-info-panel .tg-danger{padding-top:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-panel .tg-danger-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-info-panel .tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial;--tw-border-style: solid;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
 
 var conversationInfoPanel_component = /*#__PURE__*/Object.freeze({
@@ -17232,7 +16952,7 @@ function createProviders(options, includeServices) {
         const mergedConfig = mergeWithDefaults(config);
         providers.push({ provide: AX_CONVERSATION_CONFIG, useValue: mergedConfig });
         // Built-in conversation file-type plugins (image, video, audio, file, voice) + validation rules
-        providers.push(...provideConversationComposerFileTypes(mergedConfig.features));
+        providers.push(...provideConversationComposerFileTypes());
         if (realtimeApi) {
             providers.push({ provide: AXConversationRealtimeApi, useClass: realtimeApi });
         }
@@ -17610,5 +17330,5 @@ function getErrorMessage(code, params) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXConversationAiResponderService, AXConversationApi, AXConversationApiLoggerService, AXConversationAudioAttachmentComponent, AXConversationAudioFileTypeProvider, AXConversationAudioPickerComponent, AXConversationAudioRendererComponent, AXConversationBaseRegistry, AXConversationComposerActionRegistry, AXConversationComposerComponent, AXConversationComposerFileTypesProvider, AXConversationComposerPopupComponent, AXConversationComposerService, AXConversationComposerTabRegistry, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationEmojiTabComponent, AXConversationErrorHandlerService, AXConversationFallbackRendererComponent, AXConversationFileAttachmentComponent, AXConversationFileFileTypeProvider, AXConversationFilePickerComponent, AXConversationFileRendererComponent, AXConversationForwardMessageDialogComponent, AXConversationImageAttachmentComponent, AXConversationImageFileTypeProvider, AXConversationImagePickerComponent, AXConversationImageRendererComponent, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfiniteScrollDirective, AXConversationInfoBarActionRegistry, AXConversationInfoBarComponent, AXConversationInfoBarSearchComponent, AXConversationInfoBarService, AXConversationInfoMediaViewComponent, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationLocationPickerComponent, AXConversationLocationRendererComponent, AXConversationMediaPlaybackInfoBarBannerComponent, AXConversationMessageActionRegistry, AXConversationMessageApi, AXConversationMessageListComponent, AXConversationMessageListNoActiveDefaultComponent, AXConversationMessageListService, AXConversationMessageRendererCopyHostComponent, AXConversationMessageRendererRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationModule, AXConversationNewDialogComponent, AXConversationPickerCaptionComponent, AXConversationPickerEmptyComponent, AXConversationPickerFooterComponent, AXConversationPickerHeaderComponent, AXConversationPickerShellComponent, AXConversationPickerToolbarComponent, AXConversationRealtimeApi, AXConversationRegistryService, AXConversationService, AXConversationSharedStorage, AXConversationSidebarComponent, AXConversationSidebarService, AXConversationStickerRendererComponent, AXConversationStickerTabComponent, AXConversationSystemRendererComponent, AXConversationTabRegistry, AXConversationTextRendererComponent, AXConversationUserApi, AXConversationVideoAttachmentComponent, AXConversationVideoFileTypeProvider, AXConversationVideoPickerComponent, AXConversationVideoRendererComponent, AXConversationVoiceFileTypeProvider, AXConversationVoiceRecorderComponent, AXConversationVoiceRendererComponent, AX_ALL_CONVERSATION_COMPOSER_TABS, AX_ALL_CONVERSATION_MEDIA_PICKERS, AX_CONVERSATION_AI_API_KEY, AX_CONVERSATION_AUDIO_CATALOG, AX_CONVERSATION_AUDIO_PRESENTATION, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_COMPOSER_AUDIO_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_FILE_ACTION, AX_CONVERSATION_COMPOSER_IMAGE_ACTION, AX_CONVERSATION_COMPOSER_LOCATION_ACTION, AX_CONVERSATION_COMPOSER_STICKER_TAB, AX_CONVERSATION_COMPOSER_VIDEO_ACTION, AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION, AX_CONVERSATION_CONFIG, AX_CONVERSATION_CONNECTION_ERRORS, AX_CONVERSATION_CONVERSATION_AVATAR_COMPONENT, AX_CONVERSATION_CURSOR_PREFIX, AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS, AX_CONVERSATION_DEFAULT_COMPOSER_TABS, AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS, AX_CONVERSATION_DEFAULT_CONVERSATION_TABS, AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_RENDERERS, AX_CONVERSATION_ERRORS, AX_CONVERSATION_ERROR_HANDLER_CONFIG, AX_CONVERSATION_ERROR_MESSAGES, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_CATALOG, AX_CONVERSATION_FILE_ERRORS, AX_CONVERSATION_FILE_PRESENTATION, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_FILE_TYPES_READY, AX_CONVERSATION_IMAGE_CATALOG, AX_CONVERSATION_IMAGE_PRESENTATION, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_INFO_BAR_ARCHIVE_ACTION, AX_CONVERSATION_INFO_BAR_BLOCK_ACTION, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_ITEM_BLOCK_ACTION, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_LOCATION_ERRORS, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_CURSOR_PREFIX, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_ERRORS, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE, AX_CONVERSATION_REGISTRY_CONFIG, AX_CONVERSATION_STICKER_API_KEY, AX_CONVERSATION_STICKER_RENDERER, AX_CONVERSATION_SYSTEM_RENDERER, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_ARCHIVED, AX_CONVERSATION_TAB_BOT, AX_CONVERSATION_TAB_CHANNELS, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_UNREAD, AX_CONVERSATION_TEXT_RENDERER, AX_CONVERSATION_URL_ERRORS, AX_CONVERSATION_USER_AVATAR_COMPONENT, AX_CONVERSATION_USER_ERRORS, AX_CONVERSATION_VIDEO_CATALOG, AX_CONVERSATION_VIDEO_PRESENTATION, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_CATALOG, AX_CONVERSATION_VOICE_PRESENTATION, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, AX_MESSAGE_PAGINATION_CONVERSATION_ID, abortPickerUploads, applyAudioLocalPreview, applyConversationFilters, applyFileLocalPreview, applyLocalPreview, applyVideoLocalPreview, applyVoiceLocalPreview, audioItemFromUpload, axConversationIndexedDbStorage, axConversationSharedStorage, bindMediaRendererContentState, buildMediaGalleryTiles, canShowRendererContentError, cleanupPickerUploads, conversationAudioUtilities, conversationFileUtilities, conversationImageUtilities, conversationVideoUtilities, conversationVoiceUtilities, copyWithFileTypeFallback, createConversationAudioFileType, createConversationFileFileType, createConversationImageFileType, createConversationVideoFileType, createConversationVoiceFileType, createLocalPreviewUrl, createObjectUrl, createPickerDragHandlers, createResolvedMediaUrlSignal, deleteUploadedPickerMedia, dismissComposerPickerHost, encodeConversationCursor, encodeMessageCursor, ensurePaginationDemoData, fetchConversationMediaMessages, fetchConversationMediaPage, fileItemFromUpload, filterMessagesByMediaCategory, filterSupplementalInfoPanelMessages, formatDuration, formatErrorMessage, formatFileByteSize, formatFileSize, formatMediaDuration, formatPickerValidationMessage, getConversationLastActivity, getConversationMediaCategories, getConversationMessagesNewestFirst, getConversationProfileFields, getErrorMessage, getMessageAudioItems, getMessageVideoItems, getPickerCancelUploadLabel, getPrivatePeerParticipant, getSortedConversationsForInbox, inferFileExtensionHintFromMessage, isAttachmentListCategory, isComposerTabEnabled, isGenericPrivateConversationTitle, isGridMediaCategory, isMediaPickerEnabled, isMessageDeliveryPending, isNonPersistableMediaUrl, isPickerItemReadyToSend, isUploadAborted, limitFilesToCapacity, mediaCopyText, mergeAudioUploadResult, mergeFileUploadResult, mergeInfoPanelMessages, mergeUploadResult, mergeVideoUploadResult, mergeVoiceUploadResult, mergeWithDefaults, messageContainsLink, normalizeAllConversationMessageIndexes, normalizeAudioPayload, normalizeFilePayload, normalizeImagePayload, normalizeMessagePayload, normalizeMessagePayloadAsync, normalizeVideoPayload, notifyMaxFilesCapacityExceeded, notifyPickerValidationErrors, openWithFileType, paginateChatNewestFirst, paginateChatOldestFirst, parseChatCursor, pickDisplayMediaUrl, pickerItemToMediaReference, pickerItemToUploadResult, provideConversation, provideConversationComposerFileTypes, provideConversationFileCatalog, registerChatMessage, reportMediaLoadError, resolveComposerMaxFiles, resolveConversationAvatarDisplay, resolveConversationComposerTabs, resolveConversationForViewer, resolveConversationMediaPickers, resolveConversationMessageFileType, resolveConversationTitleForViewer, resolveGalleryImageUrl, resolveImageDisplayUrl, resolveParticipantProfile, resolvePersistableMediaUrl, resolvePersistedThumbnailUrl, resolvePrivatePeerParticipant, resolvePrivatePeerUserId, resolveUserAvatarDisplay, resolveVideoThumbnailUrl, revokeObjectUrl, revokePickerBlobPreviews, sanitizeInput, seedPickerInitialFiles, seedSharedStorageInitialData, shouldUseUserAvatarForConversation, sortConversationMessageIds, syncPlaybackInfoBarBanner, toUploaderReference as toMediaItemUploaderReference, toUploaderReference$1 as toUploaderReference, unregisterChatMessage, uploadPickerFile, validateConversationId, validateEmail, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds, videoItemFromUpload };
+export { AXConversationAiResponderService, AXConversationApi, AXConversationApiLoggerService, AXConversationAudioAttachmentComponent, AXConversationAudioFileTypeProvider, AXConversationAudioPickerComponent, AXConversationAudioRendererComponent, AXConversationBaseRegistry, AXConversationComposerActionRegistry, AXConversationComposerComponent, AXConversationComposerFileTypesProvider, AXConversationComposerPopupComponent, AXConversationComposerService, AXConversationComposerTabRegistry, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationEmojiTabComponent, AXConversationErrorHandlerService, AXConversationFallbackRendererComponent, AXConversationFileAttachmentComponent, AXConversationFileFileTypeProvider, AXConversationFilePickerComponent, AXConversationFileRendererComponent, AXConversationForwardMessageDialogComponent, AXConversationImageAttachmentComponent, AXConversationImageFileTypeProvider, AXConversationImagePickerComponent, AXConversationImageRendererComponent, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfiniteScrollDirective, AXConversationInfoBarActionRegistry, AXConversationInfoBarComponent, AXConversationInfoBarSearchComponent, AXConversationInfoBarService, AXConversationInfoMediaViewComponent, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationLocationPickerComponent, AXConversationLocationRendererComponent, AXConversationMediaPlaybackInfoBarBannerComponent, AXConversationMessageActionRegistry, AXConversationMessageApi, AXConversationMessageListComponent, AXConversationMessageListNoActiveDefaultComponent, AXConversationMessageListService, AXConversationMessageRendererCopyHostComponent, AXConversationMessageRendererRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationModule, AXConversationNewDialogComponent, AXConversationPickerCaptionComponent, AXConversationPickerEmptyComponent, AXConversationPickerFooterComponent, AXConversationPickerHeaderComponent, AXConversationPickerShellComponent, AXConversationPickerToolbarComponent, AXConversationRealtimeApi, AXConversationRegistryService, AXConversationService, AXConversationSharedStorage, AXConversationSidebarComponent, AXConversationSidebarService, AXConversationStickerRendererComponent, AXConversationStickerTabComponent, AXConversationSystemRendererComponent, AXConversationTabRegistry, AXConversationTextRendererComponent, AXConversationUserApi, AXConversationVideoAttachmentComponent, AXConversationVideoFileTypeProvider, AXConversationVideoPickerComponent, AXConversationVideoRendererComponent, AXConversationVoiceFileTypeProvider, AXConversationVoiceRecorderComponent, AXConversationVoiceRendererComponent, AX_CONVERSATION_AI_API_KEY, AX_CONVERSATION_AUDIO_CATALOG, AX_CONVERSATION_AUDIO_PRESENTATION, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_BUILTIN_COMPOSER_TABS, AX_CONVERSATION_COMPOSER_AUDIO_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_FILE_ACTION, AX_CONVERSATION_COMPOSER_IMAGE_ACTION, AX_CONVERSATION_COMPOSER_LOCATION_ACTION, AX_CONVERSATION_COMPOSER_STICKER_TAB, AX_CONVERSATION_COMPOSER_VIDEO_ACTION, AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION, AX_CONVERSATION_CONFIG, AX_CONVERSATION_CONNECTION_ERRORS, AX_CONVERSATION_CONVERSATION_AVATAR_COMPONENT, AX_CONVERSATION_CURSOR_PREFIX, AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS, AX_CONVERSATION_DEFAULT_COMPOSER_TABS, AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS, AX_CONVERSATION_DEFAULT_CONVERSATION_TABS, AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_THEME_BACKGROUND, AX_CONVERSATION_DEFAULT_MESSAGE_RENDERERS, AX_CONVERSATION_DEMO_CONVERSATION_IDS, AX_CONVERSATION_ERRORS, AX_CONVERSATION_ERROR_HANDLER_CONFIG, AX_CONVERSATION_ERROR_MESSAGES, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_CATALOG, AX_CONVERSATION_FILE_ERRORS, AX_CONVERSATION_FILE_PRESENTATION, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_FILE_TYPES_READY, AX_CONVERSATION_IMAGE_CATALOG, AX_CONVERSATION_IMAGE_PRESENTATION, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_INFO_BAR_ARCHIVE_ACTION, AX_CONVERSATION_INFO_BAR_BLOCK_ACTION, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_ITEM_BLOCK_ACTION, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_LOCATION_ERRORS, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_CURSOR_PREFIX, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_ERRORS, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE, AX_CONVERSATION_REGISTRY_CONFIG, AX_CONVERSATION_STICKER_API_KEY, AX_CONVERSATION_STICKER_RENDERER, AX_CONVERSATION_SYSTEM_RENDERER, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_ARCHIVED, AX_CONVERSATION_TAB_BOT, AX_CONVERSATION_TAB_CHANNELS, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_UNREAD, AX_CONVERSATION_TEXT_RENDERER, AX_CONVERSATION_URL_ERRORS, AX_CONVERSATION_USER_AVATAR_COMPONENT, AX_CONVERSATION_USER_ERRORS, AX_CONVERSATION_VIDEO_CATALOG, AX_CONVERSATION_VIDEO_PRESENTATION, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_CATALOG, AX_CONVERSATION_VOICE_PRESENTATION, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, AX_MESSAGE_PAGINATION_CONVERSATION_ID, abortPickerUploads, applyAudioLocalPreview, applyConversationFilters, applyFileLocalPreview, applyLocalPreview, applyVideoLocalPreview, applyVoiceLocalPreview, audioItemFromUpload, axConversationIndexedDbStorage, axConversationSharedStorage, bindMediaRendererContentState, buildMediaGalleryTiles, canShowRendererContentError, cleanupPickerUploads, conversationAudioUtilities, conversationFileUtilities, conversationImageUtilities, conversationVideoUtilities, conversationVoiceUtilities, copyWithFileTypeFallback, createConversationAudioFileType, createConversationFileFileType, createConversationImageFileType, createConversationVideoFileType, createConversationVoiceFileType, createLocalPreviewUrl, createObjectUrl, createPickerDragHandlers, createResolvedMediaUrlSignal, deleteUploadedPickerMedia, dismissComposerPickerHost, encodeConversationCursor, encodeMessageCursor, ensurePaginationDemoData, fetchConversationMediaMessages, fetchConversationMediaPage, fileItemFromUpload, filterMessagesByMediaCategory, filterSupplementalInfoPanelMessages, findExistingPrivateConversation, formatDuration, formatErrorMessage, formatFileByteSize, formatFileSize, formatMediaDuration, formatPickerValidationMessage, getConversationLastActivity, getConversationMediaCategories, getConversationMessagesNewestFirst, getConversationProfileFields, getErrorMessage, getMessageAudioItems, getMessageVideoItems, getPickerCancelUploadLabel, getPrivatePeerParticipant, getSortedConversationsForInbox, inferFileExtensionHintFromMessage, isAttachmentListCategory, isComposerTabEnabled, isConversationReactionsEnabled, isGenericPrivateConversationTitle, isGridMediaCategory, isMessageDeliveryPending, isMessageListThemeBackground, isNonPersistableMediaUrl, isPickerItemReadyToSend, isSameMessageListBackground, isUploadAborted, limitFilesToCapacity, mediaCopyText, mergeAudioUploadResult, mergeFileUploadResult, mergeInfoPanelMessages, mergeUploadResult, mergeVideoUploadResult, mergeVoiceUploadResult, mergeWithDefaults, messageContainsLink, normalizeAllConversationMessageIndexes, normalizeAudioPayload, normalizeFilePayload, normalizeImagePayload, normalizeMessageListBackgroundValue, normalizeMessagePayload, normalizeMessagePayloadAsync, normalizeVideoPayload, notifyMaxFilesCapacityExceeded, notifyPickerValidationErrors, openWithFileType, paginateChatNewestFirst, paginateChatOldestFirst, parseChatCursor, pickDisplayMediaUrl, pickerItemToMediaReference, pickerItemToUploadResult, provideConversation, provideConversationComposerFileTypes, provideConversationFileCatalog, registerChatMessage, reportMediaLoadError, resolveComposerMaxFiles, resolveConversationAvatarDisplay, resolveConversationComposerTabs, resolveConversationForViewer, resolveConversationMessageFileType, resolveConversationTitleForViewer, resolveGalleryImageUrl, resolveImageDisplayUrl, resolveMessageListBackgroundRaw, resolveMessageListBackgroundStyle, resolveParticipantProfile, resolvePersistableMediaUrl, resolvePersistedThumbnailUrl, resolvePrivatePeerParticipant, resolvePrivatePeerUserId, resolveUserAvatarDisplay, resolveVideoThumbnailUrl, revokeObjectUrl, revokePickerBlobPreviews, sanitizeInput, seedPickerInitialFiles, seedSharedStorageInitialData, shouldUseUserAvatarForConversation, sortConversationMessageIds, syncPlaybackInfoBarBanner, toUploaderReference as toMediaItemUploaderReference, toUploaderReference$1 as toUploaderReference, unregisterChatMessage, uploadPickerFile, validateConversationId, validateEmail, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds, videoItemFromUpload };
 //# sourceMappingURL=acorex-components-conversation.mjs.map