/* ===============================
   chatOAME MathJax styling
   =============================== */

.math-display, .math-diagram {
  margin: 0.9em 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  min-height: 1em;
  contain: content;
}
.math-inline { display: inline-block; vertical-align: baseline; }

.mjx-tex-source { display: none !important; }

/* CHTML containers */
mjx-container[jax="CHTML"] { display: inline-block; max-width: 100%; }
mjx-container[jax="CHTML"] mjx-math { max-width: 100%; }

/* SVG containers (diagrams / exports) */
mjx-container[jax="SVG"] { display: inline-block; max-width: 100%; }
mjx-container[jax="SVG"] svg { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.math-inline mjx-container[jax="SVG"] svg { display: inline; margin: 0; }

/* Keep blocks scrollable on narrow screens */
.math-display.math-rendered, .math-diagram.math-rendered {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

/* Hundreds chart grid visual (works for CHTML and SVG output markup) */
mjx-container .hundreds-chart mjx-mtd {
  border: 1px solid rgba(0,0,0,.22);
  padding: .25em .35em;
  min-width: 2.2em;
  text-align: center;
  vertical-align: middle;
}
mjx-container .hundreds-chart mjx-mtr:first-child mjx-mtd {
  background: rgba(0,0,0,.03);
  font-weight: 600;
}
mjx-container .hundreds-chart mjx-mtr:nth-child(odd) mjx-mtd {
  background: rgba(0,0,0,.012);
}

@media (prefers-color-scheme: dark) {
  mjx-container .hundreds-chart mjx-mtd { border-color: rgba(255,255,255,.25); }
  mjx-container .hundreds-chart mjx-mtr:first-child mjx-mtd { background: rgba(255,255,255,.06); }
  mjx-container .hundreds-chart mjx-mtr:nth-child(odd) mjx-mtd { background: rgba(255,255,255,.03); }
}