/* ISCC Copilot Widget — typography, border & layout corrections (server-injected).
 *
 * The Chainlit copilot renders inside a shadow DOM on the documentation sites.
 * Those sites (Zensical theme) set `html { font-size: 20-22px }`, and because
 * `rem` always resolves against the host page root — even across a shadow
 * boundary — every rem-based size inside the widget inflates ~25-37%. The worst
 * offender is the paragraph line-height: markdown paragraphs render as
 * `div.leading-7` (1.75rem), which balloons to ~35px (a 2.2 line-height ratio).
 *
 * This sheet is injected into the widget shadow root from the server via the
 * `custom_fonts` list in `public/theme.json` (the copilot appends each entry as
 * a stylesheet, with no font-type check), so it needs no changes to the
 * documentation sites. Rules are scoped to `#cl-shadow-root` — the id selector
 * also lifts specificity above the per-site class-based overrides, so they win
 * regardless of load order. Values are unitless / fixed px so they stay immune
 * to the inflated root font-size.
 */

/* Tighten loose, rem-based paragraph line-heights to consistent multipliers. */
#cl-shadow-root .leading-7 {
  line-height: 1.55 !important;
}
#cl-shadow-root .leading-6 {
  line-height: 1.45 !important;
}
#cl-shadow-root .leading-8 {
  line-height: 1.7 !important;
}
#cl-shadow-root .leading-loose {
  line-height: 1.8 !important;
}
#cl-shadow-root :is(h1, h2, h3, h4, h5) {
  line-height: 1.3 !important;
}

/* Pin border-radii inflated by the host root font-size to their intended sizes. */
#cl-shadow-root .rounded-lg {
  border-radius: 8px !important;
}
#cl-shadow-root .rounded-xl {
  border-radius: 11px !important;
}
#cl-shadow-root .rounded-2xl {
  border-radius: 14px !important;
}
#cl-shadow-root .rounded-3xl {
  border-radius: 18px !important;
}

/* Drop the assistant message avatar. Its image fails to resolve against the
 * documentation-site origin, leaving a grey pulsing fallback circle. Hiding the
 * avatar column (a direct-child span; the message body is a sibling div) and
 * zeroing the row gap reclaims the space so the answer's left edge lines up with
 * the chat input box, giving the answer matching left and right margins. */
#cl-shadow-root .ai-message > span.inline-block {
  display: none !important;
}
#cl-shadow-root .ai-message {
  gap: 0 !important;
}

/* Widen the chat panel on desktop. The inner card's width is `min(400px, 80vw)`;
 * lifting the cap to 460px only changes viewports above ~575px (where 80vw > 460),
 * so phones keep the identical 80vw width and the layout never breaks on mobile.
 * The outer Radix popper has `min-width: max-content`, so it grows to fit. */
#cl-shadow-root .copilot-container-collapsed {
  width: min(460px, 80vw) !important;
}