{% if messages %}
  <div class="fixed left-1/2 top-[calc(var(--nav-h)+0.75rem)] z-[70] w-[92%] max-w-md -translate-x-1/2 space-y-2.5">
    {% for message in messages %}
      <div data-toast
           class="toast flex items-start gap-3 rounded-2xl border px-4 py-3 shadow-2xl glass
                  {% if message.tags == 'success' %}border-emerald-500/30 text-emerald-300
                  {% elif message.tags == 'error' %}border-red-500/30 text-red-300
                  {% else %}border-brand-500/30 text-brand-300{% endif %}">
        <span class="mt-0.5 shrink-0">
          {% if message.tags == 'success' %}
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
          {% elif message.tags == 'error' %}
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
          {% else %}
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          {% endif %}
        </span>
        <p class="flex-1 text-sm font-medium">{{ message }}</p>
        <button data-toast-close aria-label="Tutup" class="shrink-0 text-neutral-500 transition hover:text-neutral-200">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>
    {% endfor %}
  </div>
{% endif %}