/*
 * KaTeX math block / inline styles — TODO-142.
 *
 * Pairs with shared/chat-core/math.js. Each math expression in a chat
 * message lives inside either:
 *
 *   .math-inline                 — inline `$...$`, sits inside paragraph
 *   .math-block                  — block   `$$...$$`, own paragraph
 *
 * The actual KaTeX visuals come from `katex.min.css` (linked once in
 * index.html). This file only styles the wrapper chrome around them —
 * borders, padding, error states, and block-level copy interaction —
 * all using `--anypal-*` semantic tokens so dark/light themes follow
 * the global palette without per-rule overrides.
 */

/* ---- Inline math ($...$) ----------------------------------------------- */

.math-inline {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.math-inline[data-math-pending] {
  /* While KaTeX lazy-loads, show the raw source in a code-like style so
     the user sees progress instead of an empty span. */
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  color: var(--anypal-fg-muted, var(--anypal-fg, #1a1a1a));
  background: var(--anypal-muted, rgba(127, 127, 127, 0.08));
  padding: 1px 6px;
  border-radius: 4px;
  line-height: normal;
}

.math-inline.math-inline-rendered {
  background: transparent;
  padding: 0;
  /* KaTeX inline output already brings its own baseline; the wrapper
     shouldn't double up. */
}

.math-inline-error,
.math-inline.math-block-error {
  background: rgba(196, 69, 69, 0.10);
  color: var(--anypal-error, #c44545);
  border-radius: 4px;
  padding: 0 4px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---- Block math ($$...$$) ---------------------------------------------- */

.math-block {
  position: relative;
  display: block;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--anypal-border, #d4d4d4);
  border-radius: 8px;
  background: var(--anypal-surface, var(--anypal-bg, #fff));
  overflow-x: auto;
  /* Without this, very long formulas push the chat bubble wider. */
  max-width: 100%;
}

[data-theme="dark"] .math-block {
  background: var(--anypal-surface, var(--anypal-bg, #1e1e1e));
}

.math-block[data-math-pending] {
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--anypal-fg-muted, var(--anypal-fg, #1a1a1a));
  background: var(--anypal-muted, rgba(127, 127, 127, 0.05));
  white-space: pre-wrap;
  word-break: break-word;
}

.math-block.math-block-rendered {
  /* KaTeX puts its own .katex-display wrapper inside; reset the
     pre-render font-family so KaTeX's font hierarchy wins. */
  font-family: inherit;
  cursor: copy;
}

.math-block.math-block-rendered:focus-visible {
  outline: 2px solid var(--anypal-focus, #2f80ed);
  outline-offset: 2px;
}

.math-block .katex-display {
  margin: 0;
  /* Remove KaTeX's default relative top/bottom margin so wrapper padding stays fixed. */
  text-align: left;
}

.math-block .katex-display > .katex {
  /* Long expressions: scroll horizontally instead of clipping. */
  white-space: normal;
}

.math-block.math-action-success {
  border-color: var(--anypal-success, #22a06b);
}

/* ---- Error state ------------------------------------------------------- */

.math-block.math-block-error {
  border-color: var(--anypal-error, #c44545);
  background: rgba(196, 69, 69, 0.04);
}

.math-error-head {
  font-weight: 600;
  color: var(--anypal-error, #c44545);
  font-size: 12px;
  margin-bottom: 6px;
}

.math-error-source {
  margin: 0;
  padding: 6px 8px;
  background: var(--anypal-muted, rgba(127, 127, 127, 0.06));
  border-radius: 4px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.math-error-detail {
  margin-top: 6px;
  color: var(--anypal-error, #c44545);
  font-size: 11px;
  opacity: 0.85;
}