/* Mermaid diagram styling */
.mermaid {
  text-align: center;
  margin: 1.5rem 0;
}

/* Ensure diagrams are responsive */
.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Diagram container styling */
.diagram-container {
  background: var(--md-code-bg-color);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
}

/* Legend styling for diagrams */
.diagram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--md-code-bg-color);
  border-radius: 4px;
  font-size: 0.85rem;
}

.diagram-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.diagram-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

/* Visual hierarchy indicators */
.layer-thinking {
  background: linear-gradient(135deg, #7c4dff 0%, #536dfe 100%);
}

.layer-execution {
  background: linear-gradient(135deg, #00bcd4 0%, #26c6da 100%);
}

.layer-feedback {
  background: linear-gradient(135deg, #ffc107 0%, #ffca28 100%);
}