@if (toastService.visible()) {
  <div
    class="fixed top-4 left-1/2 -translate-x-1/2 z-[9999] px-4 py-2.5 rounded-xl shadow-lg flex items-center gap-2 text-sm font-medium toast-enter max-w-[94vw]"
    [class]="toastService.toastType() === 'success'
      ? 'bg-green-500 text-white'
      : toastService.toastType() === 'error'
        ? 'bg-red-500 text-white'
        : 'bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900'"
  >
    <fa-icon
      [icon]="toastService.toastType() === 'success'
        ? faCheckCircle
        : toastService.toastType() === 'error'
          ? faExclamationCircle
          : faInfoCircle"
      class="text-base flex-shrink-0"
    ></fa-icon>
    <span class="leading-snug">{{ toastService.message() }}</span>
  </div>
}