{{--
    "Keine Verbindung" / "Verbindung wiederhergestellt" — shared by both
    shells (console and portal), unlike the toast a few lines away in each
    layout. Deliberately its own element rather than reusing that toast:

    - The toast always self-dismisses after a fixed 3.2s. A dropped
      connection can easily outlast that, and the message quietly
      disappearing while still offline would read as "resolved" when it is
      not.
    - Both are `fixed`, bottom-anchored pills; keeping them at different
      corners means an unrelated toast firing while this is up (a
      client-side-only action, e.g. the VPN config "copied") never overlaps
      it.

    The two icons are both always in the DOM with x-show toggling between
    them, rather than one icon whose :class is swapped, so R18's "never
    larger than the call site asked for" stays trivially true either way.

    See connectionBanner() in resources/js/app.js for the three signals
    (navigator.onLine, the online/offline window events, and real Livewire
    request failures) that drive offline/justRestored.
--}}
<div
    x-data="connectionBanner()"
    @offline.window="markOffline()"
    @online.window="markOnline()"
    @connection-lost.window="markOffline()"
    @connection-restored.window="markOnline()"
    x-show="offline || justRestored"
    x-cloak
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 translate-y-2"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-2"
    role="status" aria-live="polite"
    class="fixed bottom-6 right-6 z-[80] flex items-center gap-2 rounded-pill border px-4 py-2.5 text-sm font-semibold shadow-md"
    {{-- Same token pairs as <x-ui.alert variant="warning|success">; not
         that component itself, since its class string is fixed at
         server-render time and this toggles purely client-side. --}}
    :class="offline ? 'border-warning-border bg-warning-bg text-warning' : 'border-success-border bg-success-bg text-success'"
>
    <x-ui.icon name="alert-triangle" class="size-4" x-show="offline" />
    <x-ui.icon name="check" class="size-4" x-show="!offline" />
    <span x-text="offline ? @js(__('common.connection_lost')) : @js(__('common.connection_restored'))"></span>
</div>