<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">Direct Messages</h1>
        <p class="text-xs text-muted-foreground">{{ directMessages.conversations().length }} chats</p>
      </div>
    </header>

    <div
      appThemeNode="dmConversationList"
      class="min-h-0 flex-1 overflow-y-auto p-2"
    >
      @if (directMessages.conversations().length === 0) {
        <div class="flex h-full items-center justify-center px-4 text-center text-sm text-muted-foreground">No direct messages yet.</div>
      } @else {
        <div class="space-y-1">
          @for (conversation of directMessages.conversations(); track trackConversationId($index, conversation)) {
            <app-dm-conversation-item
              [conversation]="conversation"
              (conversationOpened)="conversationSelected.emit($event)"
            />
          }
        </div>
      }
    </div>

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