<div
  class="group flex gap-3 rounded-lg p-2 transition-colors hover:bg-secondary/30"
  [class.flex-row-reverse]="isOutgoing()"
>
  <div class="grid h-9 w-9 flex-shrink-0 place-items-center rounded-full bg-secondary text-xs font-semibold text-foreground">
    {{ isOutgoing() ? 'You'[0] : message().senderId[0] || '?' }}
  </div>

  <div
    class="min-w-0 max-w-3xl flex-1"
    [class.text-right]="isOutgoing()"
  >
    <div
      class="mb-0.5 flex items-baseline gap-2"
      [class.justify-end]="isOutgoing()"
    >
      <span class="text-sm font-semibold text-foreground">{{ isOutgoing() ? 'You' : message().senderId }}</span>
      <span class="text-xs text-muted-foreground">{{ message().timestamp | date: 'shortTime' }}</span>
    </div>

    @if (requiresRichMarkdown(message().content)) {
      <div class="mt-1 inline-block max-w-full rounded-lg bg-card px-3 py-2 text-left text-sm text-foreground">
        <app-chat-message-markdown [content]="message().content" />
      </div>
    } @else {
      <p
        class="mt-1 inline-block max-w-full whitespace-pre-wrap break-words rounded-lg bg-card px-3 py-2 text-left text-sm leading-5 text-foreground"
      >
        {{ message().content }}
      </p>
    }

    @if (isOutgoing()) {
      <span
        data-testid="message-status"
        class="mt-1 inline-flex items-center gap-1 text-[10px] font-semibold uppercase text-muted-foreground"
      >
        <ng-icon
          [name]="statusIcon(message().status)"
          class="h-3 w-3"
          [class.fill-current]="message().status === 'ACKNOWLEDGED'"
        />
        {{ message().status }}
      </span>
    }
  </div>
</div>
