/**
 * Presentation for chatOAME math visuals.
 *
 * SCOPED BY SOURCE, NOT BY CLASS. Every rule below is keyed on
 * `[src*="/chatoame/v1/mv/"]`, which matches exactly the images this plugin
 * serves and nothing else on the site. That matters more than it looks: the
 * one thing this file has to do is override an inline style, which needs
 * `!important`, and `!important` on a class selector would reach every image
 * in the chat — uploads, generated pictures, avatars.
 *
 * WHY IT IS NEEDED AT ALL. AI Engine's Markdown renderer (markdown-to-jsx)
 * applies an inline style to every image it creates:
 *
 *     style={{ maxWidth: "100%", maxHeight: 220, width: "auto", cursor: "zoom-in" }}
 *
 * 220 pixels is sensible for a photo in a chat bubble and unusable for a
 * mathematics diagram: a number line becomes a smear and a labelled triangle
 * becomes unreadable. An inline style cannot be beaten by an ordinary rule, so
 * these three declarations are `!important` and the rest are not.
 *
 * The `cursor: zoom-in` and the click-to-open behaviour are AI Engine's, and
 * they are kept: tapping a diagram to open the full-size SVG in its own tab is
 * exactly the right affordance on a phone.
 *
 * @package chatoame-math-visuals
 */

/* -------------------------------------------------------------------------
 * 1. Size
 * ---------------------------------------------------------------------- */

img[src*="/chatoame/v1/mv/"] {
	/* The three that must beat the inline style. */
	max-height: none !important;
	width: 100% !important;
	height: auto !important;

	/* A diagram wider than about 34rem stops being easier to read and starts
	   being harder: the labels get further from what they label. */
	max-width: min(100%, 34rem);
	display: block;
	margin: 1.25rem auto;

	/* The SVG carries its own intrinsic width and height, so the browser
	   reserves the right box before the bytes arrive and the reply does not
	   jump as figures load. */
	background-color: #ffffff;
	border-radius: 0.4rem;
}

/* Diagrams that are naturally wide — number lines, double number lines,
   timelines — earn more room. Matching on the file name is not possible
   (the URL is a hash), so this is done by container instead: inside a wide
   reply column, allow the full width. */
@media (min-width: 60rem) {
	img[src*="/chatoame/v1/mv/"] {
		max-width: min(100%, 40rem);
	}
}

/* -------------------------------------------------------------------------
 * 2. Spacing against neighbouring content
 *
 * A figure between two paragraphs needs air; a figure immediately after a list
 * item or a display equation needs more, because both of those already carry
 * their own bottom margin and the two collapse into something cramped.
 * ---------------------------------------------------------------------- */

.mwai-text p:has(> img[src*="/chatoame/v1/mv/"]) {
	margin: 1.25rem 0;
}

.mwai-text li img[src*="/chatoame/v1/mv/"] {
	margin: 0.75rem 0;
	max-width: min(100%, 28rem);
}

.mwai-text .math-display + p > img[src*="/chatoame/v1/mv/"],
.mwai-text mjx-container[display="true"] + p > img[src*="/chatoame/v1/mv/"] {
	margin-top: 1.6rem;
}

/* A caption, when the model supplied one. Emitted as an emphasised line
   directly after the image. */
.mwai-text p:has(> img[src*="/chatoame/v1/mv/"]) + p > em:only-child {
	display: block;
	text-align: center;
	font-size: 0.9em;
	opacity: 0.8;
	margin-top: -0.6rem;
}

/* -------------------------------------------------------------------------
 * 3. Phones
 *
 * The figures are drawn on a light ground with dark ink, so on a narrow screen
 * the useful change is edge-to-edge width and a little more vertical room —
 * not shrinking, which is what the 220px cap was doing.
 * ---------------------------------------------------------------------- */

@media (max-width: 40rem) {
	img[src*="/chatoame/v1/mv/"] {
		max-width: 100%;
		margin: 1rem auto;
		border-radius: 0.3rem;
	}
}

/* -------------------------------------------------------------------------
 * 4. Dark mode
 *
 * The SVG is drawn for a white ground and its ink is near-black, so it keeps
 * its own background rather than inverting: a filter-inverted mathematics
 * diagram turns a shaded region into a hole and reverses the meaning of
 * "filled". A soft border and a slightly muted white keep it from glaring
 * against a dark reply.
 * ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	img[src*="/chatoame/v1/mv/"] {
		background-color: #f8fafc;
		box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
	}
}

.mwai-dark img[src*="/chatoame/v1/mv/"],
[data-theme="dark"] img[src*="/chatoame/v1/mv/"] {
	background-color: #f8fafc;
	box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
}

/* -------------------------------------------------------------------------
 * 5. Print
 * ---------------------------------------------------------------------- */

@media print {
	img[src*="/chatoame/v1/mv/"] {
		max-width: 100%;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* -------------------------------------------------------------------------
 * 6. The exporter carrier
 *
 * Hidden from readers; present for the export tools. `hidden` alone is not
 * enough, because a theme's `display` rule can override the attribute.
 * ---------------------------------------------------------------------- */

.chatoame-math-visuals-carrier {
	display: none !important;
}