@if (message()) {
  <div class="app-error-alert-wrapper p-3.5 rounded-lg bg-danger/10 border border-danger/20 text-danger dark:text-danger-light flex items-start gap-3 text-xs font-medium relative mb-4 transition-all duration-200">
    <i class="ti ti-alert-circle text-lg shrink-0 mt-0.5 text-danger"></i>

    <div class="flex-grow min-w-0 break-words whitespace-pre-wrap">
      @if (title()) {
        <strong class="font-bold text-sm block mb-1 text-danger dark:text-danger-light leading-snug">
          {{ title() }}
        </strong>
      }

      <div class="text-xs text-danger/90 dark:text-danger-light/90 leading-relaxed">
        {{ message() }}
      </div>

      @if (detailsArray().length > 0) {
        <div class="mt-2 pt-2 border-t border-danger/15">
          <button
            type="button"
            class="text-[11px] font-semibold text-danger dark:text-danger-light hover:underline inline-flex items-center gap-1 focus:outline-none"
            (click)="toggleDetails()"
          >
            <i class="ti" [class.ti-chevron-down]="!showDetails()" [class.ti-chevron-up]="showDetails()"></i>
            <span>{{ showDetails() ? 'Hide Technical Details' : 'View Technical Details (' + detailsArray().length + ')' }}</span>
          </button>

          @if (showDetails()) {
            <ul class="mt-2 space-y-1 pl-4 list-disc text-[11px] font-mono opacity-90 max-h-48 overflow-y-auto bg-black/5 dark:bg-black/20 p-2.5 rounded border border-danger/20">
              @for (detail of detailsArray(); track $index) {
                <li>{{ detail }}</li>
              }
            </ul>
          }
        </div>
      }
    </div>

    <div class="flex items-center gap-1 shrink-0 ms-2">
      <button
        type="button"
        class="p-1 rounded hover:bg-danger/20 text-danger/70 hover:text-danger dark:text-danger-light/70 dark:hover:text-danger-light transition-colors text-sm"
        title="Copy Error Message"
        (click)="copyErrorText()"
      >
        <i class="ti" [class.ti-check]="copied()" [class.ti-copy]="!copied()"></i>
      </button>

      @if (dismissible()) {
        <button
          type="button"
          class="p-1 rounded hover:bg-danger/20 text-danger/70 hover:text-danger dark:text-danger-light/70 dark:hover:text-danger-light transition-colors text-sm"
          title="Dismiss"
          (click)="dismiss()"
        >
          <i class="ti ti-x"></i>
        </button>
      }
    </div>
  </div>
}