</div>
						<div class="d-flex gap-2">
							<button type="button" id="filterToggleBtn" class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#filterPanel" aria-expanded="false" aria-controls="filterPanel">
								<i class="fa fa-filter" aria-hidden="true"></i>
								<la:message key="labels.chat_filter" />
								<span id="filterBadge" class="badge rounded-pill bg-primary d-none">0</span>

						</div>
						<div class="d-flex gap-2">
							<button type="button" id="filterToggleBtn" class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#filterPanel" aria-expanded="false" aria-controls="filterPanel">
								<i class="fa fa-filter" aria-hidden="true"></i>
								<la:message key="labels.chat_filter" />
								<span id="filterBadge" class="badge rounded-pill bg-primary d-none">0</span>

            errorBanner: $('#errorBanner'),
            charCount: $('#charCount'),
            filterToggleBtn: $('#filterToggleBtn'),
            filterBadge: $('#filterBadge'),
            filterPanel: $('#filterPanel')
        };

        bindEvents();
        autoResizeTextarea();
        updateCharCount();
        showStatus('ready');
    }

    /**
     * Bind event handlers
     */

}

@keyframes lozenge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ============================================
   Filter Panel
   ============================================ */
#filterPanel {
    background-color: #fafbfc;
    border-bottom: 1px solid #dfe1e6;
}

.filter-panel-body {
    padding: 0.75rem 1rem;
}

.filter-dropdowns {
    display: flex;
    flex-wrap: wrap;