feat: enhance ErrorModal and ChatWindow error handling

- Added HelpCircle icon to ErrorModal for improved visual feedback.
- Implemented logic to differentiate between instructions and technical details in ErrorModal.
- Updated ChatWindow to utilize traduzirErro for user-friendly error messages during call initiation.
- Enhanced error handling to provide clearer instructions and details based on error types.

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertCircle, X } from 'lucide-svelte';
+	import { AlertCircle, X, HelpCircle } from 'lucide-svelte';
 
 	interface Props {
 		open: boolean;
@@ -10,6 +10,18 @@
 	}
 
 	let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();
+	
+	// Verificar se details contém instruções ou apenas detalhes técnicos
+	const temInstrucoes = $derived.by(() => {
+		if (!details) return false;
+		// Se contém palavras-chave de instruções, é uma instrução
+		return details.includes('Por favor') || 
+		       details.includes('aguarde') || 
+		       details.includes('recarregue') ||
+		       details.includes('Verifique') ||
+		       details.includes('tente novamente') ||
+		       details.match(/^\d+\./); // Começa com número (lista numerada)
+	});
 
 	let modalRef: HTMLDialogElement;
 
@@ -37,12 +49,12 @@
 			<!-- Header -->
 			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
 				<h2 id="modal-title" class="text-error flex items-center gap-2 text-xl font-bold">
-					<AlertCircle class="h-5 w-5" strokeWidth={2} />
+					<AlertCircle class="h-6 w-6" strokeWidth={2.5} />
 					{title}
 				</h2>
 				<button
 					type="button"
-					class="btn btn-sm btn-circle"
+					class="btn btn-sm btn-circle btn-ghost"
 					onclick={handleClose}
 					aria-label="Fechar"
 				>
@@ -52,17 +64,41 @@
 
 			<!-- Content -->
 			<div class="px-6 py-6">
-				<p class="text-base-content mb-4">{message}</p>
+				<!-- Mensagem principal -->
+				<div class="mb-6">
+					<p class="text-base-content text-base leading-relaxed font-medium">{message}</p>
+				</div>
+
+				<!-- Instruções ou detalhes (se houver) -->
 				{#if details}
-					<div class="bg-base-200 mb-4 rounded-lg p-4">
-						<p class="text-base-content/70 text-sm whitespace-pre-line">{details}</p>
+					<div class="bg-info/10 border-info/30 mb-4 rounded-lg border-l-4 p-4">
+						<div class="flex items-start gap-3">
+							<HelpCircle class="text-info h-5 w-5 shrink-0 mt-0.5" strokeWidth={2} />
+							<div class="flex-1">
+								<p class="text-base-content/90 text-sm font-semibold mb-2">
+									{temInstrucoes ? 'Como resolver:' : 'Informação adicional:'}
+								</p>
+								<div class="text-base-content/80 text-sm space-y-2">
+									{#each details.split('\n').filter(line => line.trim().length > 0) as linha (linha)}
+										{#if linha.trim().match(/^\d+\./)}
+											<div class="flex items-start gap-2">
+												<span class="text-info font-semibold shrink-0">{linha.trim().split('.')[0]}.</span>
+												<span class="flex-1 leading-relaxed">{linha.trim().substring(linha.trim().indexOf('.') + 1).trim()}</span>
+											</div>
+										{:else}
+											<p class="leading-relaxed">{linha.trim()}</p>
+										{/if}
+									{/each}
+								</div>
+							</div>
+						</div>
 					</div>
 				{/if}
 			</div>
 
 			<!-- Footer -->
-			<div class="modal-action px-6 pb-6">
-				<button class="btn btn-primary" onclick={handleClose}> Fechar </button>
+			<div class="modal-action border-base-300 border-t px-6 pb-6 pt-4">
+				<button class="btn btn-primary btn-md" onclick={handleClose}> Entendi, obrigado </button>
 			</div>
 		</div>