/* ==========================================================================
   Mermaid Diagrams — Shape colors, text, edge styles, copy button
   ========================================================================== */

/* Container */
.mermaid {
  background: transparent !important;
  border-color: var(--app-border-primary) !important;
}

/* ---------------------------------------------------------------------------
   Node Shapes
   --------------------------------------------------------------------------- */

/* Process nodes — Rectangles */
.mermaid svg .node rect {
  fill: #bbdefb !important;
  stroke: #1976d2 !important;
  stroke-width: 2px !important;
}

/* Decision nodes — Diamonds/Rhombus */
.mermaid svg .node polygon {
  fill: #fff59d !important;
  stroke: #f57f17 !important;
  stroke-width: 2px !important;
}

/* Start/End nodes — Circles and Ellipses */
.mermaid svg .node circle,
.mermaid svg .node ellipse {
  fill: #c5e1a5 !important;
  stroke: #689f38 !important;
  stroke-width: 2px !important;
}

/* ---------------------------------------------------------------------------
   Text & Labels
   --------------------------------------------------------------------------- */

.mermaid svg .node .label,
.mermaid svg .nodeLabel {
  fill: #212529 !important;
  font-weight: 500 !important;
  font-size: calc(14px * var(--app-font-scale, 1)) !important;
}

.mermaid svg .edgeLabel .label {
  fill: #212529 !important;
  font-size: calc(12px * var(--app-font-scale, 1)) !important;
}

/* ---------------------------------------------------------------------------
   Edges & Arrows
   --------------------------------------------------------------------------- */

.mermaid svg .edgePath .path {
  stroke: #6c757d !important;
  stroke-width: 2px !important;
}

.mermaid svg .edgeLabel rect {
  fill: #c5e1a5 !important;
  stroke: #689f38 !important;
  stroke-width: 1px !important;
}

/* ---------------------------------------------------------------------------
   Mermaid Copy Button — Match research copy button sizing
   --------------------------------------------------------------------------- */

.mermaid-copy-btn {
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--spacing-xs) !important;
}

.mermaid-copy-btn i {
  font-size: var(--font-size-base) !important;
}