🤖 Remove overly aggressive mermaid error hiding

The CSS rule [id^="d"][id*="mermaid"] was too broad and hid actual
diagrams, not just error messages. The JavaScript cleanup that searched
for error messages by selector was also unnecessary.

Simplified approach:
- Removed CSS rule that hid all mermaid-related elements
- Only clean up the specific element with our generated ID
- Let mermaid render naturally and show errors via React state

This allows diagrams to display in Storybook while still handling
errors gracefully through the error state UI.

Generated with `cmux`

Author: ammar-agent

src/components/Messages/Mermaid.tsx

@@ -151,20 +151,12 @@ export const Mermaid: React.FC<{ chart: string }> = ({ chart }) => {
           containerRef.current.innerHTML = renderedSvg;
         }
       } catch (err) {
-        // Clean up any DOM elements mermaid might have created
+        // Clean up any DOM elements mermaid might have created with our ID
         const errorElement = document.getElementById(id);
         if (errorElement) {
           errorElement.remove();
         }
 
-        // Also clean up any error-related elements mermaid might have added to the body
-        const errorMessages = document.querySelectorAll('[id^="d"][id*="mermaid"]');
-        errorMessages.forEach((el) => {
-          if (el.textContent?.includes("Syntax error")) {
-            el.remove();
-          }
-        });
-
         setError(err instanceof Error ? err.message : "Failed to render diagram");
         setSvg(""); // Clear any previous SVG
         if (containerRef.current) {

src/styles/globals.css

@@ -614,11 +614,6 @@ code {
   max-height: 80vh;
 }
 
-/* Hide any mermaid error messages that slip through */
-[id^="d"][id*="mermaid"] {
-  display: none !important;
-}
-
 /* Zoom wrapper for mermaid */
 .markdown-content .react-transform-wrapper {
   position: relative;