<!--
  ContextMenu has two presentations:
  - On phone-sized viewports the menu opens as a bottom sheet anchored to the bottom of the screen.
  - On desktop it remains an absolutely-positioned popover at the requested (x, y) coordinates.
-->
@if (isMobile()) {
  <app-bottom-sheet
    [title]="sheetTitle()"
    [ariaLabel]="sheetTitle() || ('shared.dialog.menuFallbackAria' | translate)"
    (dismissed)="closed.emit(undefined)"
  >
    <div class="flex flex-col py-1">
      <ng-content />
    </div>
  </app-bottom-sheet>
} @else {
  <!-- Invisible backdrop that captures clicks outside -->
  <div
    class="fixed inset-0 z-40"
    (click)="closed.emit(undefined)"
    (contextmenu)="$event.preventDefault(); closed.emit(undefined)"
    (keydown.enter)="closed.emit(undefined)"
    (keydown.space)="closed.emit(undefined)"
    role="button"
    tabindex="0"
    aria-label="{{ 'shared.dialog.closeMenuAria' | translate }}"
  ></div>
  <!-- Positioned menu panel -->
  <div
    #panel
    appThemeNode="contextMenuSurface"
    class="fixed z-50 bg-card border border-border rounded-lg shadow-lg py-1"
    [class]="widthPx() ? '' : width()"
    [style.left.px]="clampedX()"
    [style.top.px]="clampedY()"
    [style.width.px]="widthPx() || null"
  >
    <ng-content />
  </div>
}
