Corrige comportamentos do chat e melhora UX

- Corrige contador de mensagens resetando sozinho (web)
  - Adiciona verificacao de visibilidade antes de marcar como lido
  - Verifica se aba esta ativa antes de marcar como lido

- Adiciona sincronizacao de estado do chat entre abas (web)
  - Usa BroadcastChannel para sincronizar aberto/fechado/minimizado
  - Persiste estado no localStorage

- Corrige chat minimizando sozinho no desktop (Rust)
  - Verifica se chat esta expandido antes de minimizar
  - Mantem chat aberto quando usuario esta usando

- Melhora encerramento automatico de sessoes de chat
  - Muda criterio de inatividade de chat para maquina offline
  - Sessao permanece ativa enquanto Raven estiver aberto
  - Encerra apenas quando maquina fica offline por 5+ min

- Corrige tabela de tickets em /devices
  - Adiciona acentuacao correta (Ultima atualizacao, Responsavel)
  - Torna linha inteira clicavel para abrir ticket

- Ajusta sidebar
  - Menu Tickets agora expande ao clicar (igual Cadastros)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/tickets/ticket-chat-panel.tsx

@@ -82,7 +82,9 @@ export function TicketChatPanel({ ticketId }: TicketChatPanelProps) {
 
   const messagesEndRef = useRef<HTMLDivElement | null>(null)
   const inputRef = useRef<HTMLTextAreaElement | null>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
   const [draft, setDraft] = useState("")
+  const [isVisible, setIsVisible] = useState(false)
   const [isSending, setIsSending] = useState(false)
   const [isStartingChat, setIsStartingChat] = useState(false)
   const [isEndingChat, setIsEndingChat] = useState(false)
@@ -93,8 +95,38 @@ export function TicketChatPanel({ ticketId }: TicketChatPanelProps) {
   const liveChat = chat?.liveChat
   const hasActiveSession = Boolean(liveChat?.activeSession)
 
+  // Detectar visibilidade do componente na viewport
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting)
+      },
+      { threshold: 0.1 }
+    )
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [])
+
+  // Detectar se a aba esta ativa
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        setIsVisible(false)
+      }
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange)
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange)
+  }, [])
+
+  // Marcar como lido apenas quando o componente esta visivel E a aba esta ativa
   useEffect(() => {
     if (!viewerId || !chat || !Array.isArray(chat.messages) || chat.messages.length === 0) return
+    // Verificar se o componente esta visivel e a aba esta ativa
+    if (!isVisible || document.visibilityState === "hidden") return
+
     const unreadIds = chat.messages
       .filter((message) => {
         const alreadyRead = (message.readBy ?? []).some((entry) => entry.userId === viewerId)
@@ -109,7 +141,7 @@ export function TicketChatPanel({ ticketId }: TicketChatPanelProps) {
     }).catch((error) => {
       console.error("Failed to mark chat messages as read", error)
     })
-  }, [markChatRead, chat, ticketId, viewerId])
+  }, [markChatRead, chat, ticketId, viewerId, isVisible])
 
   useEffect(() => {
     if (messagesEndRef.current) {
@@ -230,7 +262,7 @@ export function TicketChatPanel({ ticketId }: TicketChatPanelProps) {
   }
 
   return (
-    <Card className="flex flex-col overflow-hidden border-slate-200">
+    <Card ref={containerRef} className="flex flex-col overflow-hidden border-slate-200">
       {/* Header */}
       <CardHeader className="flex flex-row items-center justify-between gap-2 border-b border-slate-100 bg-slate-50 px-4 pr-3 py-3">
         <div className="flex items-center gap-3">