.mermaid-diagram {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid #3f3f46;
  border-radius: 0.75rem;
  background: #09090b;
  overflow-x: auto;
}

.mermaid-diagram svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.mermaid-diagram :where(div, p, span, ul, ol, li, table, thead, tbody, tr, td, th, code, pre) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-indent: 0 !important;
  line-height: 1.2 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  box-shadow: none !important;
}

.mermaid-diagram :where(code, pre) {
  white-space: pre-wrap !important;
}

.mermaid-diagram foreignObject {
  overflow: visible;
}