/* Figures in answers.
 *
 * Chainlit renders every markdown image inside a fixed 16:9 box 448px wide
 * (`Markdown.tsx`: a `sm:max-w-sm md:max-w-md` wrapper around an `AspectRatio`
 * holding an `h-full w-full object-contain` image). Half the corpus figures are
 * portrait, up to 1280x1675, so that box letterboxes them into a grey band at
 * roughly a seventh of their size.
 *
 * These rules undo the box and let a figure keep its own shape. Every override
 * is `!important` for two reasons: the ratio arrives as an inline style, and
 * Chainlit links this file ahead of its own stylesheet, so equal specificity
 * loses.
 *
 * `[data-radix-aspect-ratio-wrapper]` is Radix's own marker and the whole
 * frontend uses `AspectRatio` in exactly one place — the markdown image — so it
 * reads as "a figure in an answer" with nothing else to catch.
 */

/* the padding-bottom spacer holding the ratio open */
[data-radix-aspect-ratio-wrapper] {
  padding-bottom: 0 !important;
}

/* the absolutely-positioned grey box stretched inside it */
[data-radix-aspect-ratio-wrapper] > * {
  position: static !important;
  background: transparent !important;
}

/* the 448px cap the renderer puts around the whole thing */
div:has(> [data-radix-aspect-ratio-wrapper]) {
  max-width: 100% !important;
}

/* The height cap is what keeps a tall figure from pushing its own caption off
 * the screen; the rest is the figure's own shape, up to the message column. */
[data-radix-aspect-ratio-wrapper] img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 70vh;
  cursor: zoom-in;
}

/* The overlay `figures.js` opens on click, over the same black-80 backdrop
 * Chainlit's own image lightbox uses. */
.figure-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgb(0 0 0 / 80%);
  cursor: zoom-out;
}

/* Class plus attribute, so it outranks the `display: flex` above. */
.figure-lightbox[hidden] {
  display: none;
}

/* Sized rather than capped: a figure the inline view already showed at full
 * column width has nothing to give if the overlay only caps it, so the box
 * fills the viewport and `contain` fits the figure inside it either way —
 * scaling a small scan up, a tall one down. */
.figure-lightbox img {
  width: 90vw;
  height: 90vh;
  object-fit: contain;
}