feat: enhance push notification management and error handling

- Implemented error handling for unhandled promise rejections related to message channels, improving stability during push notification operations.
- Updated the PushNotificationManager component to manage push subscription registration with timeouts, preventing application hangs.
- Enhanced the sidebar and chat components to display user avatars, improving user experience and visual consistency.
- Refactored email processing logic to support scheduled email sending, integrating new backend functionalities for better email management.
- Improved overall error handling and logging across components to reduce console spam and enhance debugging capabilities.

apps/web/src/lib/components/PushNotificationManager.svelte

@@ -12,51 +12,116 @@
 
   const client = useConvexClient();
 
+  // Capturar erros de Promise não tratados relacionados a message channel
+  // Este erro geralmente vem de extensões do Chrome ou comunicação com Service Worker
+  if (typeof window !== "undefined") {
+    window.addEventListener(
+      "unhandledrejection",
+      (event: PromiseRejectionEvent) => {
+        const reason = event.reason;
+        const errorMessage =
+          reason?.message || reason?.toString() || "";
+        
+        // Filtrar apenas erros relacionados a message channel fechado
+        if (
+          errorMessage.includes("message channel closed") ||
+          errorMessage.includes("asynchronous response") ||
+          (errorMessage.includes("message channel") && 
+           errorMessage.includes("closed"))
+        ) {
+          // Prevenir que o erro apareça no console
+          event.preventDefault();
+          // Silenciar o erro - é geralmente causado por extensões do Chrome
+          return false;
+        }
+      },
+      { capture: true }
+    );
+  }
+
   onMount(async () => {
+    let checkAuth: ReturnType<typeof setInterval> | null = null;
+    let mounted = true;
+
     // Aguardar usuário estar autenticado
-    const checkAuth = setInterval(async () => {
-      if (authStore.usuario) {
-        clearInterval(checkAuth);
-        await registrarPushSubscription();
+    checkAuth = setInterval(async () => {
+      if (authStore.usuario && mounted) {
+        clearInterval(checkAuth!);
+        checkAuth = null;
+        try {
+          await registrarPushSubscription();
+        } catch (error) {
+          // Silenciar erros de push subscription para evitar spam no console
+          if (error instanceof Error && !error.message.includes("message channel")) {
+            console.error("Erro ao configurar push notifications:", error);
+          }
+        }
       }
     }, 500);
 
     // Limpar intervalo após 30 segundos (timeout)
-    setTimeout(() => {
-      clearInterval(checkAuth);
+    const timeout = setTimeout(() => {
+      if (checkAuth) {
+        clearInterval(checkAuth);
+        checkAuth = null;
+      }
     }, 30000);
 
     return () => {
-      clearInterval(checkAuth);
+      mounted = false;
+      if (checkAuth) {
+        clearInterval(checkAuth);
+      }
+      clearTimeout(timeout);
     };
   });
 
   async function registrarPushSubscription() {
     try {
-      // Solicitar subscription
-      const subscription = await solicitarPushSubscription();
+      // Verificar se Service Worker está disponível antes de tentar
+      if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+        return;
+      }
+
+      // Solicitar subscription com timeout para evitar travamentos
+      const subscriptionPromise = solicitarPushSubscription();
+      const timeoutPromise = new Promise<null>((resolve) => 
+        setTimeout(() => resolve(null), 5000)
+      );
+
+      const subscription = await Promise.race([subscriptionPromise, timeoutPromise]);
 
       if (!subscription) {
-        console.log("ℹ️ Push subscription não disponível ou permissão negada");
+        // Não logar para evitar spam no console quando VAPID key não está configurada
         return;
       }
 
       // Converter para formato serializável
       const subscriptionData = subscriptionToJSON(subscription);
 
-      // Registrar no backend
-      const resultado = await client.mutation(api.pushNotifications.registrarPushSubscription, {
+      // Registrar no backend com timeout
+      const mutationPromise = client.mutation(api.pushNotifications.registrarPushSubscription, {
         endpoint: subscriptionData.endpoint,
         keys: subscriptionData.keys,
         userAgent: navigator.userAgent,
       });
 
+      const timeoutMutationPromise = new Promise<{ sucesso: false; erro: string }>((resolve) =>
+        setTimeout(() => resolve({ sucesso: false, erro: "Timeout" }), 5000)
+      );
+
+      const resultado = await Promise.race([mutationPromise, timeoutMutationPromise]);
+
       if (resultado.sucesso) {
         console.log("✅ Push subscription registrada com sucesso");
-      } else {
+      } else if (resultado.erro && !resultado.erro.includes("Timeout")) {
         console.error("❌ Erro ao registrar push subscription:", resultado.erro);
       }
     } catch (error) {
+      // Ignorar erros relacionados a message channel fechado
+      if (error instanceof Error && error.message.includes("message channel")) {
+        return;
+      }
       console.error("❌ Erro ao configurar push notifications:", error);
     }
   }

apps/web/src/lib/components/Sidebar.svelte

@@ -11,6 +11,7 @@
   import ChatWidget from "$lib/components/chat/ChatWidget.svelte";
   import PresenceManager from "$lib/components/chat/PresenceManager.svelte";
   import { getBrowserInfo } from "$lib/utils/browserInfo";
+  import { getAvatarUrl } from "$lib/utils/avatarGenerator";
 
   let { children }: { children: Snippet } = $props();
 
@@ -19,6 +20,22 @@
   // Caminho atual da página
   const currentPath = $derived(page.url.pathname);
 
+  // Função para obter a URL do avatar/foto do usuário
+  const avatarUrlDoUsuario = $derived(() => {
+    const usuario = authStore.usuario;
+    if (!usuario) return null;
+    
+    // Prioridade: fotoPerfilUrl > avatar > fallback com nome
+    if (usuario.fotoPerfilUrl) {
+      return usuario.fotoPerfilUrl;
+    }
+    if (usuario.avatar) {
+      return getAvatarUrl(usuario.avatar);
+    }
+    // Fallback: gerar avatar baseado no nome
+    return getAvatarUrl(usuario.nome);
+  });
+
   // Função para gerar classes do menu ativo
   function getMenuClasses(isActive: boolean) {
     const baseClasses = "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
@@ -209,12 +226,14 @@
       </p>
     </div>
   </div>
-  <div class="flex-none flex items-center gap-4">
+  <div class="flex-none flex items-center gap-4 ml-auto">
     {#if authStore.autenticado}
-      <!-- Sino de notificações -->
-      <NotificationBell />
+      <!-- Sino de notificações no canto superior direito -->
+      <div class="relative">
+        <NotificationBell />
+      </div>
       
-      <div class="hidden lg:flex flex-col items-end">
+      <div class="hidden lg:flex flex-col items-end mr-2">
         <span class="text-sm font-semibold text-primary">{authStore.usuario?.nome}</span>
         <span class="text-xs text-base-content/60">{authStore.usuario?.role.nome}</span>
       </div>
@@ -233,19 +252,28 @@
           <!-- Anel de pulso sutil -->
           <div class="absolute inset-0 rounded-2xl" style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div>
           
-          <!-- Ícone de usuário moderno -->
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
-            style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-          >
-            <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
-          </svg>
+          <!-- Avatar/Foto do usuário ou ícone padrão -->
+          {#if avatarUrlDoUsuario()}
+            <img
+              src={avatarUrlDoUsuario()}
+              alt={authStore.usuario?.nome || "Usuário"}
+              class="w-full h-full object-cover relative z-10"
+            />
+          {:else}
+            <!-- Ícone de usuário moderno (fallback) -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
+              style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
+            >
+              <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
+            </svg>
+          {/if}
           
           <!-- Badge de status online -->
-          <div class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg" style="animation: pulse-dot 2s ease-in-out infinite;"></div>
+          <div class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg z-20" style="animation: pulse-dot 2s ease-in-out infinite;"></div>
         </button>
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4 border border-primary/20">
@@ -295,36 +323,36 @@
 
 <div class="drawer lg:drawer-open" style="margin-top: 96px;">
   <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col lg:ml-72" style="height: calc(100vh - 96px);">
+  <div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 96px);">
     <!-- Page content -->
     <div class="flex-1 overflow-y-auto">
       {@render children?.()}
-      
-      <!-- Footer -->
-      <footer class="footer footer-center bg-gradient-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner mt-8">
-        <div class="grid grid-flow-col gap-6 text-sm font-medium">
-          <button type="button" class="link link-hover hover:text-primary transition-colors" onclick={() => openAboutModal()}>Sobre</button>
-          <span class="text-base-content/30">•</span>
-          <a href="/" class="link link-hover hover:text-primary transition-colors">Contato</a>
-          <span class="text-base-content/30">•</span>
-          <a href="/" class="link link-hover hover:text-primary transition-colors">Suporte</a>
-          <span class="text-base-content/30">•</span>
-          <a href="/" class="link link-hover hover:text-primary transition-colors">Privacidade</a>
-        </div>
-        <div class="flex items-center gap-3 mt-2">
-          <div class="avatar">
-            <div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
-              <img src={logo} alt="Logo" class="w-full h-full object-contain" />
-            </div>
-          </div>
-          <div class="text-left">
-            <p class="text-xs font-bold text-primary">Governo do Estado de Pernambuco</p>
-            <p class="text-xs text-base-content/70">Secretaria de Esportes</p>
-          </div>
-        </div>
-        <p class="text-xs text-base-content/60 mt-2">© {new Date().getFullYear()} - Todos os direitos reservados</p>
-      </footer>
     </div>
+    
+    <!-- Footer -->
+    <footer class="footer footer-center bg-gradient-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner flex-shrink-0">
+      <div class="grid grid-flow-col gap-6 text-sm font-medium">
+        <button type="button" class="link link-hover hover:text-primary transition-colors" onclick={() => openAboutModal()}>Sobre</button>
+        <span class="text-base-content/30">•</span>
+        <a href="/" class="link link-hover hover:text-primary transition-colors">Contato</a>
+        <span class="text-base-content/30">•</span>
+        <a href="/" class="link link-hover hover:text-primary transition-colors">Suporte</a>
+        <span class="text-base-content/30">•</span>
+        <a href="/" class="link link-hover hover:text-primary transition-colors">Privacidade</a>
+      </div>
+      <div class="flex items-center gap-3 mt-2">
+        <div class="avatar">
+          <div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
+            <img src={logo} alt="Logo" class="w-full h-full object-contain" />
+          </div>
+        </div>
+        <div class="text-left">
+          <p class="text-xs font-bold text-primary">Governo do Estado de Pernambuco</p>
+          <p class="text-xs text-base-content/70">Secretaria de Esportes</p>
+        </div>
+      </div>
+      <p class="text-xs text-base-content/60 mt-2">© {new Date().getFullYear()} - Todos os direitos reservados</p>
+    </footer>
   </div>
   <div class="drawer-side z-40 fixed" style="margin-top: 96px;">
     <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"

apps/web/src/lib/components/chat/ChatList.svelte

@@ -21,17 +21,36 @@
   $effect(() => {
     console.log("📊 [ChatList] Usuários carregados:", usuarios?.data?.length || 0);
     console.log("👤 [ChatList] Meu perfil:", meuPerfil?.data?.nome || "Carregando...");
-    console.log("📋 [ChatList] Lista completa:", usuarios?.data);
+    console.log("🆔 [ChatList] Meu ID:", meuPerfil?.data?._id || "Não encontrado");
+    if (usuarios?.data) {
+      const meuId = meuPerfil?.data?._id;
+      const meusDadosNaLista = usuarios.data.find((u: any) => u._id === meuId);
+      if (meusDadosNaLista) {
+        console.warn("⚠️ [ChatList] ATENÇÃO: Meu usuário está na lista do backend!", meusDadosNaLista.nome);
+      }
+    }
   });
 
   const usuariosFiltrados = $derived.by(() => {
-    if (!usuarios?.data || !Array.isArray(usuarios.data) || !meuPerfil?.data) return [];
+    if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
+    
+    // Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos
+    if (!meuPerfil?.data) {
+      console.log("⏳ [ChatList] Aguardando perfil do usuário...");
+      return [];
+    }
     
     const meuId = meuPerfil.data._id;
     
-    // Filtrar o próprio usuário da lista
+    // Filtrar o próprio usuário da lista (filtro de segurança no frontend)
     let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuId);
     
+    // Log se ainda estiver na lista após filtro (não deveria acontecer)
+    const aindaNaLista = listaFiltrada.find((u: any) => u._id === meuId);
+    if (aindaNaLista) {
+      console.error("❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!");
+    }
+    
     // Aplicar busca por nome/email/matrícula
     if (searchQuery.trim()) {
       const query = searchQuery.toLowerCase();
@@ -159,6 +178,24 @@
           onclick={() => handleClickUsuario(usuario)}
           disabled={processando}
         >
+          <!-- Ícone de mensagem -->
+          <div class="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110"
+               style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="w-5 h-5 text-primary"
+            >
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              <path d="M9 10h.01M15 10h.01"/>
+            </svg>
+          </div>
+
           <!-- Avatar -->
           <div class="relative flex-shrink-0">
             <UserAvatar 

apps/web/src/lib/components/chat/ChatWidget.svelte

@@ -12,6 +12,8 @@
   import { api } from "@sgse-app/backend/convex/_generated/api";
   import ChatList from "./ChatList.svelte";
   import ChatWindow from "./ChatWindow.svelte";
+  import { authStore } from "$lib/stores/auth.svelte";
+  import { getAvatarUrl } from "$lib/utils/avatarGenerator";
 
   const count = useQuery(api.chat.contarNotificacoesNaoLidas, {});
 
@@ -19,6 +21,22 @@
   let isMinimized = $state(false);
   let activeConversation = $state<string | null>(null);
 
+  // Função para obter a URL do avatar/foto do usuário logado
+  const avatarUrlDoUsuario = $derived(() => {
+    const usuario = authStore.usuario;
+    if (!usuario) return null;
+    
+    // Prioridade: fotoPerfilUrl > avatar > fallback com nome
+    if (usuario.fotoPerfilUrl) {
+      return usuario.fotoPerfilUrl;
+    }
+    if (usuario.avatar) {
+      return getAvatarUrl(usuario.avatar);
+    }
+    // Fallback: gerar avatar baseado no nome
+    return getAvatarUrl(usuario.nome);
+  });
+
   // Posição do widget (arrastável)
   let position = $state({ x: 0, y: 0 });
   let isDragging = $state(false);
@@ -259,25 +277,34 @@
       <!-- Efeitos de fundo animados -->
       <div class="absolute inset-0 opacity-30" style="background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 50%);"></div>
       <div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
-      <!-- Título com ícone moderno 3D -->
+      <!-- Título com avatar/foto do usuário logado -->
       <h2 class="text-xl font-bold flex items-center gap-3 relative z-10">
-        <!-- Ícone de chat com efeito glassmorphism -->
-        <div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.2) inset;">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="w-5 h-5"
-            style="filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));"
-          >
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-            <line x1="9" y1="10" x2="15" y2="10"/>
-            <line x1="9" y1="14" x2="13" y2="14"/>
-          </svg>
+        <!-- Avatar/Foto do usuário logado com efeito glassmorphism -->
+        <div class="relative flex items-center justify-center w-10 h-10 rounded-xl overflow-hidden" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.2) inset;">
+          {#if avatarUrlDoUsuario()}
+            <img
+              src={avatarUrlDoUsuario()}
+              alt={authStore.usuario?.nome || "Usuário"}
+              class="w-full h-full object-cover"
+            />
+          {:else}
+            <!-- Fallback: ícone de chat genérico -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="w-5 h-5"
+              style="filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));"
+            >
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              <line x1="9" y1="10" x2="15" y2="10"/>
+              <line x1="9" y1="14" x2="13" y2="14"/>
+            </svg>
+          {/if}
         </div>
         <span class="tracking-wide font-extrabold" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3); letter-spacing: 0.02em;">Mensagens</span>
       </h2>

apps/web/src/lib/components/chat/ChatWindow.svelte

@@ -77,23 +77,22 @@
     <!-- Botão Voltar -->
     <button
       type="button"
-      class="btn btn-ghost btn-sm btn-circle"
+      class="btn btn-ghost btn-sm btn-circle hover:bg-primary/20 transition-all duration-200 hover:scale-110"
       onclick={voltarParaLista}
       aria-label="Voltar"
+      title="Voltar para lista de conversas"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        fill="none"
         viewBox="0 0 24 24"
-        stroke-width="1.5"
+        fill="none"
         stroke="currentColor"
-        class="w-5 h-5"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-6 h-6 text-primary"
       >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
-        />
+        <path d="M19 12H5M12 19l-7-7 7-7"/>
       </svg>
     </button>
 

apps/web/src/lib/components/chat/MessageList.svelte

@@ -21,8 +21,19 @@
   let shouldScrollToBottom = true;
   let lastMessageCount = 0;
 
-  // Obter ID do usuário atual
-  const usuarioAtualId = $derived(authStore.usuario?._id);
+  // Obter ID do usuário atual - usar $state para garantir reatividade
+  let usuarioAtualId = $state<string | null>(null);
+
+  // Atualizar usuarioAtualId sempre que authStore.usuario mudar
+  $effect(() => {
+    const usuario = authStore.usuario;
+    if (usuario?._id) {
+      const idStr = String(usuario._id).trim();
+      usuarioAtualId = idStr || null;
+    } else {
+      usuarioAtualId = null;
+    }
+  });
 
   // Auto-scroll para a última mensagem quando novas mensagens chegam
   $effect(() => {
@@ -49,8 +60,11 @@
   $effect(() => {
     if (mensagens?.data && mensagens.data.length > 0 && usuarioAtualId) {
       const ultimaMensagem = mensagens.data[mensagens.data.length - 1];
+      const remetenteIdStr = ultimaMensagem.remetenteId 
+        ? String(ultimaMensagem.remetenteId).trim() 
+        : (ultimaMensagem.remetente?._id ? String(ultimaMensagem.remetente._id).trim() : null);
       // Só marcar como lida se não for minha mensagem
-      if (ultimaMensagem.remetente?._id !== usuarioAtualId) {
+      if (remetenteIdStr && remetenteIdStr !== usuarioAtualId) {
         client.mutation(api.chat.marcarComoLida, {
           conversaId,
           mensagemId: ultimaMensagem._id,
@@ -77,6 +91,7 @@
 
   interface Mensagem {
     _id: Id<"mensagens">;
+    remetenteId: Id<"usuarios">;
     remetente?: {
       _id: Id<"usuarios">;
       nome: string;
@@ -226,11 +241,26 @@
 
       <!-- Mensagens do dia -->
       {#each mensagensDia as mensagem (mensagem._id)}
-        {@const isMinha = mensagem.remetente?._id === usuarioAtualId}
+        {@const remetenteIdStr = (() => {
+          // Priorizar remetenteId direto da mensagem
+          if (mensagem.remetenteId) {
+            return String(mensagem.remetenteId).trim();
+          }
+          // Fallback para remetente._id
+          if (mensagem.remetente?._id) {
+            return String(mensagem.remetente._id).trim();
+          }
+          return null;
+        })()}
+        {@const isMinha = usuarioAtualId && remetenteIdStr && remetenteIdStr === usuarioAtualId}
         <div class={`flex mb-4 w-full ${isMinha ? "justify-end" : "justify-start"}`}>
           <div class={`flex flex-col max-w-[75%] ${isMinha ? "items-end" : "items-start"}`}>
-            <!-- Nome do remetente (apenas se não for minha) -->
-            {#if !isMinha}
+            <!-- Nome do remetente (sempre exibido, mas discreto para mensagens próprias) -->
+            {#if isMinha}
+              <p class="text-xs text-base-content/40 mb-1 px-3">
+                Você
+              </p>
+            {:else}
               <p class="text-xs text-base-content/60 mb-1 px-3">
                 {mensagem.remetente?.nome || "Usuário"}
               </p>
@@ -240,7 +270,7 @@
             <div
               class={`rounded-2xl px-4 py-2 ${
                 isMinha
-                  ? "bg-primary text-primary-content rounded-br-sm"
+                  ? "bg-blue-200 text-gray-900 rounded-br-sm"
                   : "bg-base-200 text-base-content rounded-bl-sm"
               }`}
             >