Add Tooltip component and show sensitive message count on auto-redact

Introduce a reusable Tooltip component with delayed hover reveal,
viewport-aware horizontal nudging, and smooth CSS entrance animation.
Supports top/bottom positioning via a data-side attribute.

FilterPanel now wraps the auto-redact checkbox in a Tooltip that
explains what auto-redaction detects. When sensitive messages exist
in the current view, a red pill badge displays the count next to
the label, giving users immediate visibility into how many messages
contain detectable secrets before toggling auto-redact on.

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

src/client/styles/main.css

@@ -552,3 +552,43 @@ mark.search-highlight {
     @apply focus-visible:ring-red-500;
   }
 }
+
+/* ═══════════════════════════════════════════════
+   Tooltip
+   ═══════════════════════════════════════════════ */
+
+.tooltip-popup {
+  pointer-events: none;
+  max-width: 280px;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  color: var(--color-foreground);
+  background: var(--color-surface-overlay);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  animation: tooltip-in 120ms cubic-bezier(0.16, 1, 0.3, 1);
+  white-space: normal;
+}
+
+.tooltip-popup[data-side="top"] {
+  transform-origin: bottom center;
+  translate: -50% -100%;
+}
+
+.tooltip-popup[data-side="bottom"] {
+  transform-origin: top center;
+  translate: -50% 0;
+}
+
+@keyframes tooltip-in {
+  from {
+    opacity: 0;
+    scale: 0.96;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}