/* CloudQubes Mermaid Minimal Styling & Boundary Text Padding */
.mermaid {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 1.75rem 0;
  padding: 1.75rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  overflow-x: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

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

.mermaid foreignObject {
  overflow: visible !important;
}

.mermaid text,
.mermaid .nodeLabel,
.mermaid .edgeLabel {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Edge label pill styling with comfortable padding */
.mermaid .edgeLabel .labelBkg {
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Icon label pill styling with comfortable padding */
.mermaid .icon-shape .labelBkg {
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Subgraph titles */
.mermaid .cluster-label span.nodeLabel {
  font-weight: 700 !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.mermaid .nodeLabel p,
.mermaid .edgeLabel p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Subgraph box rounded borders */
.mermaid .cluster rect {
  rx: 8px !important;
  ry: 8px !important;
}

/* Sequence diagram typography & readability */
.mermaid .actor {
  font-weight: 600 !important;
}

.mermaid .messageText {
  font-weight: 500 !important;
}

.mermaid .noteText {
  font-weight: 500 !important;
}

/* Interactive cursor & action buttons for rendered diagrams */
.mermaid.mermaid-interactive {
  position: relative;
  cursor: pointer;
}

.mermaid .mermaid-actions {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.mermaid:hover .mermaid-actions {
  opacity: 1;
}

@media (hover: none) {
  .mermaid .mermaid-actions {
    opacity: 1;
  }
}

/* Mermaid Lightbox Modal Styling */
dialog.mermaid-lightbox {
  border: none;
  background: transparent;
  padding: 1rem;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: none;
}

dialog.mermaid-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

dialog.mermaid-lightbox::backdrop {
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mermaid-viewport {
  touch-action: none;
}

.mermaid-canvas {
  will-change: transform;
}

/* Architecture-beta & flowchart group background and edge safety rules */
.mermaid .node-bkg,
.mermaid-canvas .node-bkg,
.mermaid-lightbox .node-bkg {
  fill: none !important;
}

.mermaid .edge,
.mermaid-canvas .edge,
.mermaid-lightbox .edge {
  fill: none !important;
}

.mermaid .arrow,
.mermaid-canvas .arrow,
.mermaid-lightbox .arrow {
  stroke: none;
}

.mermaid-canvas svg {
  max-width: 92% !important;
  max-height: 92% !important;
  width: auto !important;
  height: auto !important;
  display: block;
  user-select: none;
  pointer-events: none;
}