{# Live notifications partial — Bootstrap 5 #}
<div class="d-flex flex-column gap-2">
  {% for notification in notifications %}
    <div class="border rounded p-3 bg-white shadow-sm">
      <div class="d-flex">
        <div class="flex-shrink-0">
          <span class="d-inline-flex align-items-center justify-content-center rounded-circle me-3"
                style="width:32px;height:32px;background:#e7f1ff;">
            <i class="fas fa-info-circle text-primary"></i>
          </span>
        </div>
        <div class="flex-grow-1">
          <p class="mb-1 small text-dark">{{ notification.message }}</p>
          <p class="mb-0 text-muted small">{{ notification.sent_at|timesince }} ago</p>
        </div>
      </div>
    </div>
  {% empty %}
    <p class="text-muted small mb-0">No recent notifications</p>
  {% endfor %}
</div>