<div id="flashed-messages" class="fixed top-24 right-6 z-[100] w-full max-w-sm pointer-events-none space-y-3">
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      {% for message in messages %}
        <div class="pointer-events-auto">
            {% if message is string and message.strip().startswith('<div') %}
                {{ message | safe }}
            {% else %}
                {# Fallback for plain text messages (e.g. from extensions) #}
                <div x-data="{ show: true }"
                     x-show="show"
                     x-init="setTimeout(() => show = false, 5000)"
                     x-transition:leave="transition ease-in duration-300"
                     x-transition:leave-start="opacity-100 scale-100"
                     x-transition:leave-end="opacity-0 scale-95"
                     class="flex items-center p-4 rounded-2xl border bg-white dark:bg-slate-900 shadow-2xl shadow-slate-200/50 dark:shadow-none border-slate-100 dark:border-slate-800 group"
                     role="alert">
                  <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center text-indigo-500">
                    <i class="fas fa-info-circle text-sm"></i>
                  </div>
                  <div class="ml-3 text-[10px] font-black uppercase tracking-[0.15em] text-slate-600 dark:text-slate-300">
                    {{ message }}
                  </div>
                  <button @click="show = false" type="button" class="ml-auto w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-600 dark:hover:text-white transition-all">
                    <i class="fas fa-times text-xs"></i>
                  </button>
                </div>
            {% endif %}
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}
</div>
