.odoc-msc-diagram {
  margin: 1em 0;
  overflow: auto;
}

.odoc-msc-diagram svg,
.odoc-msc-diagram img {
  max-width: 100%;
  height: auto;
}

/* Fallback for noscript */
.odoc-msc-diagram noscript pre {
  background: #f8f8f8;
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
}

.odoc-msc-error pre {
  color: #c00;
}

/* Dark mode support - target specific mscgen SVG elements */
@media (prefers-color-scheme: dark) {
  /* Main background */
  .odoc-msc-diagram svg {
    background-color: transparent;
  }

  /* Text labels - make them light colored */
  .odoc-msc-diagram svg text {
    fill: #ebdbb2 !important;
  }

  /* Lines and arrows */
  .odoc-msc-diagram svg line,
  .odoc-msc-diagram svg path,
  .odoc-msc-diagram svg polyline,
  .odoc-msc-diagram svg polygon {
    stroke: #a89984 !important;
  }

  /* Arrow heads and filled shapes */
  .odoc-msc-diagram svg polygon[fill],
  .odoc-msc-diagram svg path[fill] {
    fill: #a89984 !important;
  }

  /* Entity boxes - use dark background with border */
  .odoc-msc-diagram svg rect {
    fill: #3c3836 !important;
    stroke: #665c54 !important;
  }

  /* Keep white fills as dark fills */
  .odoc-msc-diagram svg [fill="white"],
  .odoc-msc-diagram svg [fill="#fff"],
  .odoc-msc-diagram svg [fill="#ffffff"],
  .odoc-msc-diagram svg [fill="rgb(255,255,255)"] {
    fill: #3c3836 !important;
  }

  /* Keep black strokes as light strokes */
  .odoc-msc-diagram svg [stroke="black"],
  .odoc-msc-diagram svg [stroke="#000"],
  .odoc-msc-diagram svg [stroke="#000000"],
  .odoc-msc-diagram svg [stroke="rgb(0,0,0)"] {
    stroke: #a89984 !important;
  }

  .odoc-msc-diagram noscript pre {
    background: #3c3836;
    color: #ebdbb2;
  }

  .odoc-msc-error pre {
    color: #fb4934;
  }
}