/**
 * Defensive baseline styles for the Help Panel widget.
 *
 * Prevents integrator apps from unintentionally overriding inherited CSS properties
 * (e.g., text-align, font-family) via global styles.
 *
 * Unless noted otherwise, these rules have lower specificity than inline styles (style=)
 * and MUI's sx prop, so existing component styling remains unaffected.
 */

.help-panel {
  text-align: left;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  letter-spacing: normal;
  font-weight: 400;
  font-style: normal;
  direction: ltr;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  white-space: normal;
  user-select: text;
}

/**
 * Restores the initial `min-height: auto` / `min-width: auto` that host-wide resets like
 * `* { min-height: 0; }` remove. Without it, flex items can shrink below their content and overlap each other.
 *
 * Specificity is (0,0,1): it beats the host's `*` (0,0,0), but loses to every MUI/sx class
 * and to inline styles, so any min-height/min-width set by the widget itself still applies.
 */
:where(.help-panel) :not(html) {
  min-height: auto;
  min-width: auto;
}

/**
 * Restores the browser's default list markers for unstyled lists (e.g. chat Markdown) that
 * resets like `ol, ul { list-style: none; }` remove. Elements with a class (MUI lists) are excluded.
 */
:where(.help-panel) ul:not([class]) {
  list-style: disc outside;
}

:where(.help-panel) :is(ul, ol):not([class]) ul:not([class]) {
  list-style-type: circle;
}

:where(.help-panel) :is(ul, ol):not([class]) :is(ul, ol):not([class]) ul:not([class]) {
  list-style-type: square;
}

:where(.help-panel) ol:not([class]) {
  list-style: decimal outside;
}

/**
 * Neutralizes host rules forcing a bottom margin on MUI body text, e.g.
 * `:not(.MuiListItemText-root) > .MuiTypography-body1 { margin-bottom: 1rem !important; }`.
 *
 * Must be `!important` with higher specificity than such rules, so a `marginBottom`/`mb`
 * set via `sx` on a body1 Typography inside the panel has no effect - use `gutterBottom`,
 * `paragraph` or a wrapper element instead.
 */
.help-panel.help-panel .MuiTypography-body1:not(.MuiTypography-gutterBottom):not(.MuiTypography-paragraph) {
  margin-bottom: 0 !important;
}