fix(chat-widget): empty-state placeholder doesn't clear — :host([hidden]) override

[joelteply]

Bug (Joel reported)

Chat widget's "💬 Send your first message / Try @Helper..." empty-state placeholder doesn't clear when the room actually has messages. Visible after sending a fresh message into a room with prior history — the empty-state panel still shows below the messages.

Root cause

EmptyStateWidget (LitElement custom element <empty-state>) defines:

:host {
  display: flex;
  ...
}

ChatWidget toggles the empty state via the HTML hidden attribute (updateEntityCount() → emptyState.toggleAttribute('hidden', !isEmpty)). The hidden attribute applies display: none via the user-agent stylesheet — but the more-specific author rule :host { display: flex } WINS the cascade, so hidden has zero visual effect. The toggle silently no-ops; the panel keeps rendering.

This is the well-known custom-element-with-explicit-display gotcha called out in the HTML5 spec: https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute

Fix

Add an explicit :host([hidden]) { display: none; } rule to the component's static styles.

:host([hidden]) {
  display: none;
}

Wins by being more specific than :host alone (attribute selector wraps the host pseudo-class).

Why other consumers weren't broken

UserListWidget, RoomListWidget, TrainingDashboardWidget, the Reactive* widgets all use ${this.isEmpty ? this.renderEmptyState() : nothing} — they conditionally include the element in the template rather than always-in-DOM + toggle-hidden. ChatWidget chose the toggle-hidden pattern because of the surrounding container/sibling layout, so the right fix is to make hidden work as expected for the component (benefits any future caller that uses the toggle pattern too).

Verification

• npm run build:ts clean.
• 19-line patch (4 lines of CSS + 15 lines of comment explaining the gotcha + spec link). The comment is load-bearing because the rule looks redundant alongside :host { display: flex } until you know the cascade history.

UI visual verification: this is a CSS-only fix to a well-understood class of bug; will follow up after merge with npm start + screenshot of a freshly-loaded populated room showing no empty-state placeholder.