<aside
  appThemeNode="dmConversationsPanel"
  class="flex min-h-0 w-full min-w-0 overflow-hidden border-r border-border bg-card"
  [ngStyle]="listPanelStyles()"
>
  <section class="flex h-full w-full min-w-0 flex-col">
    <header
      appThemeNode="dmConversationsHeader"
      class="flex h-14 shrink-0 items-center gap-2 border-b border-border px-3"
    >
      <div class="grid h-8 w-8 place-items-center rounded-lg bg-secondary text-muted-foreground">
        <ng-icon
          name="lucideMessageCircle"
          class="h-4 w-4"
        />
      </div>
      <div class="min-w-0">
        <h1 class="truncate text-sm font-semibold text-foreground">{{ 'dm.conversations.title' | translate }}</h1>
        <p class="text-xs text-muted-foreground">{{ 'dm.conversations.chatCount' | translate: { count: directMessages.conversations().length } }}</p>
      </div>
    </header>

    <div
      appThemeNode="dmConversationList"
      class="flex min-h-0 flex-1 flex-col"
    >
      @if (directMessages.conversations().length === 0) {
        <div class="flex h-full items-center justify-center px-4 text-center text-sm text-muted-foreground">
          {{ 'dm.conversations.empty' | translate }}
        </div>
      } @else {
        <app-virtual-list
          class="block h-full p-2"
          [items]="directMessages.conversations()"
          [estimateSize]="64"
          [overscan]="6"
          [trackBy]="trackConversationId"
        >
          <ng-template
            #item
            let-conversation
          >
            <app-dm-conversation-item
              class="block pb-1"
              [conversation]="conversation"
              (conversationOpened)="conversationSelected.emit($event)"
            />
          </ng-template>
        </app-virtual-list>
      }
    </div>

    <div
      appThemeNode="dmVoiceControlsArea"
      class="border-t border-border px-2 py-3"
    >
      <app-voice-controls />
    </div>
  </section>
</aside>
