feat: enhance ErrorModal and chat components with new features and improvements

- Refactored ErrorModal to utilize a dialog element for better accessibility and user experience, including a close button with an icon.
- Updated chat components to improve participant display and message read status, enhancing user engagement and clarity.
- Introduced loading indicators for user and conversation data in SalaReuniaoManager to improve responsiveness during data fetching.
- Enhanced message handling in MessageList to indicate whether messages have been read, providing users with better feedback on message status.
- Improved overall structure and styling across various components for consistency and maintainability.

apps/web/src/routes/(dashboard)/perfil/+page.svelte

@@ -10,6 +10,7 @@
   import { generateAvatarGallery, type Avatar } from "$lib/utils/avatars";
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import { page } from "$app/stores";
+  import { X, Calendar } from "lucide-svelte";
 
   const client = useConvexClient();
 
@@ -2218,12 +2219,29 @@
 
 <!-- Modal Wizard Solicitação de Ausência -->
 {#if mostrarWizardAusencia && funcionarioIdDisponivel}
-  <dialog class="modal modal-open">
-    <div class="modal-box max-w-4xl max-h-[90vh] overflow-hidden">
-      <h3 class="font-bold text-2xl mb-6 text-center">
-        Nova Solicitação de Ausência
-      </h3>
-      <div class="max-h-[80vh] overflow-y-auto">
+  <dialog 
+    class="modal modal-open" 
+    onclick={(e) => e.target === e.currentTarget && (mostrarWizardAusencia = false)}
+  >
+    <div class="modal-box max-w-4xl max-h-[90vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2">
+          <Calendar class="w-5 h-5 text-primary" />
+          Nova Solicitação de Ausência
+        </h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-circle"
+          onclick={() => (mostrarWizardAusencia = false)}
+          aria-label="Fechar"
+        >
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto p-6">
         <WizardSolicitacaoAusencia
           funcionarioId={funcionarioIdDisponivel}
           onSucesso={async () => {
@@ -2242,9 +2260,10 @@
         />
       </div>
     </div>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="modal-backdrop" onclick={() => (mostrarWizardAusencia = false)}></div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button type="button" onclick={() => (mostrarWizardAusencia = false)}>fechar</button>
+    </form>
   </dialog>
 {/if}