@if (session()) {
  <div class="fixed inset-0 z-[120] bg-black/60 backdrop-blur-sm"></div>

  <div class="pointer-events-none fixed inset-0 z-[121] flex items-center justify-center p-4">
    <section
      class="pointer-events-auto w-full max-w-sm rounded-lg border border-border bg-card shadow-2xl"
      role="dialog"
      aria-modal="true"
      aria-labelledby="incoming-call-title"
    >
      <div class="flex flex-col items-center px-6 pb-6 pt-7 text-center">
        <div class="relative">
          @if (caller(); as callerUser) {
            <app-user-avatar
              [avatarUrl]="callerUser.avatarUrl"
              [name]="callerUser.displayName || callerUser.username"
              [showStatusBadge]="true"
              [status]="callerUser.status"
              size="xl"
            />
          } @else {
            <div class="grid h-16 w-16 place-items-center rounded-full bg-secondary text-xl font-semibold text-secondary-foreground">
              {{ callerName().charAt(0).toUpperCase() }}
            </div>
          }

          <div class="absolute -bottom-1 -right-1 grid h-7 w-7 place-items-center rounded-full border border-card bg-green-600 text-white shadow-lg">
            <ng-icon
              name="lucidePhone"
              class="h-3.5 w-3.5"
            />
          </div>
        </div>

        <p class="mt-5 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Incoming call</p>
        <h2
          id="incoming-call-title"
          class="mt-2 text-xl font-semibold text-foreground"
        >
          {{ callerName() }} is calling
        </h2>
        <p class="mt-1 text-sm text-muted-foreground">{{ callKindLabel() }}</p>

        <div class="mt-6 grid w-full grid-cols-2 gap-3">
          <button
            type="button"
            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
            (click)="decline()"
          >
            <ng-icon
              name="lucidePhoneOff"
              class="h-4 w-4"
            />
            Decline
          </button>

          <button
            type="button"
            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-green-600 px-4 text-sm font-semibold text-white transition-colors hover:bg-green-500 disabled:cursor-not-allowed disabled:opacity-70"
            [disabled]="answering()"
            (click)="answer()"
          >
            <ng-icon
              name="lucidePhone"
              class="h-4 w-4"
            />
            Answer
          </button>
        </div>
      </div>
    </section>
  </div>
}