<div
  #messagesContainer
  appThemeNode="chatMessageList"
  class="absolute inset-0 space-y-4 overflow-y-auto p-4"
  [style.padding-bottom.px]="bottomPadding()"
  (scroll)="onScroll()"
>
  @if (syncing() && !loading()) {
    <div class="flex items-center justify-center gap-2 py-1.5 text-xs text-muted-foreground">
      <div class="h-3 w-3 animate-spin rounded-full border-b-2 border-primary"></div>
      <span>{{ 'chat.messageList.syncing' | translate }}</span>
    </div>
  }

  @if (refreshLoading()) {
    <div class="pointer-events-none sticky top-0 z-10 flex justify-center py-1">
      <div class="rounded-full border border-border bg-background/85 px-2.5 py-1 text-[11px] text-muted-foreground shadow-sm">
        {{ 'chat.messageList.loading' | translate }}
      </div>
    </div>
  }

  @if (initialLoading()) {
    <div class="flex items-center justify-center py-8">
      <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
    </div>
  } @else if (messages().length === 0) {
    <div class="flex h-full flex-col items-center justify-center text-muted-foreground">
      <p class="text-lg">{{ 'chat.messageList.emptyTitle' | translate }}</p>
      <p class="text-sm">{{ 'chat.messageList.emptySubtitle' | translate }}</p>
    </div>
  } @else {
    <div
      #messagesContent
      class="space-y-4"
    >
      @if (hasMoreMessages()) {
        <div class="flex items-center justify-center py-3">
          @if (loadingMore()) {
            <div class="h-5 w-5 animate-spin rounded-full border-b-2 border-primary"></div>
          } @else {
            <button
              type="button"
              (click)="loadMore()"
              class="rounded-md px-3 py-1 text-xs text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
            >
              {{ 'chat.messageList.loadOlder' | translate }}
            </button>
          }
        </div>
      }

      @for (message of messages(); track message.id; let index = $index) {
        @if (dateSeparatorLabels().get(index); as separatorLabel) {
          <div
            appThemeNode="chatDateSeparator"
            class="flex items-center gap-3 py-1"
          >
            <div class="h-px flex-1 bg-border"></div>
            <span class="rounded-full border border-border bg-background/90 px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm">
              {{ separatorLabel }}
            </span>
            <div class="h-px flex-1 bg-border"></div>
          </div>
        }

        <app-chat-message-item
          [message]="message"
          [repliedMessage]="findRepliedMessage(message.replyToId)"
          [currentUserId]="currentUserId()"
          [isAdmin]="isAdmin()"
          [userLookup]="userLookup()"
          (replyRequested)="handleReplyRequested($event)"
          (deleteRequested)="handleDeleteRequested($event)"
          (editSaved)="handleEditSaved($event)"
          (reactionAdded)="handleReactionAdded($event)"
          (reactionToggled)="handleReactionToggled($event)"
          (referenceRequested)="handleReferenceRequested($event)"
          (downloadRequested)="handleDownloadRequested($event)"
          (imageOpened)="handleImageOpened($event)"
          (imageGalleryOpened)="handleImageGalleryOpened($event)"
          (imageContextMenuRequested)="handleImageContextMenuRequested($event)"
          (embedRemoved)="handleEmbedRemoved($event)"
        />
      }
    </div>
  }

  @if (showNewMessagesBar()) {
    <div class="pointer-events-none sticky bottom-4 flex justify-center">
      <div
        appThemeNode="chatNewMessagesBar"
        class="pointer-events-auto flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 shadow"
      >
        <span class="text-sm text-muted-foreground">{{ 'chat.messageList.newMessages' | translate }}</span>
        <button
          type="button"
          (click)="readLatest()"
          class="rounded bg-primary px-2 py-1 text-sm text-primary-foreground hover:bg-primary/90"
        >
          {{ 'chat.messageList.readLatest' | translate }}
        </button>
      </div>
    </div>
  }
</div>
