/* ABOUTME: Defensive CSS snippet to prevent host-page styles from leaking into the OpenDialog ChatUI widget */
/*
* USAGE: Paste this entire stylesheet into your HTML `` tag, after Bootstrap
* and before your own styles. You can use any of these methods:
*
* 1. As a
*
* 2. As a `` in
*
* 3. Load via JavaScript before the ChatUI widget:
* const style = document.createElement('style');
* style.textContent = `... paste CSS here ...`;
* document.head.appendChild(style);
*
* This defensive stylesheet resets Bootstrap and other host-page styles to prevent
* them from cascading into the OpenDialog ChatUI widget. It targets `.od-wrapper`,
* the root element of the widget, and does not affect the rest of your page.
*/
/* ============================================================================
Base typography: Font-size and line-height
============================================================================ */
/* Fix: Reset root font-size to safe default
Client rule: `html { font-size: 62.5% }` → 10px
Widget issue: Widget sets `font-size: 1rem` which resolves to 10px, breaking em scaling
Solution: Lock to 16px (browser default) so widget's `1rem` and `em` units work correctly */
.od-wrapper {
font-size: 16px;
/* Fix: Reset line-height to normal
Client rule: Bootstrap `body { line-height: 1.42857 }` → 14.28px at 10px base
Widget issue: Breaks spacing, should be widget-controlled
Solution: Reset to 1.5 for natural text flow */
line-height: 1.5;
/* Fix: Reset text-align to left
Client rule: Element selectors (e.g. `body`, `div`, `section`) set `text-align: center`
Widget issue: Message text, buttons and input render centred instead of left-aligned
Solution: Lock to left at the wrapper root so all descendants inherit correctly */
text-align: left;
/* Fix: Restore antialiased font rendering
Widget rule: `.od-wrapper__body { -webkit-font-smoothing: antialiased }`
Widget issue: In minimal mode, `.od-wrapper__body` doesn't exist in the DOM,
so text renders with subpixel antialiasing (macOS), appearing heavier than intended
Solution: Apply antialiased rendering at the wrapper level */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================================
Font-family: Override host-page wildcard selector
============================================================================ */
/* Fix: Force widget font-family to 'Inter' (widget design intent)
Client rule: `html * { font-family: font-reg !important }` (in style.css)
Widget issue: `!important` on wildcard cascades into widget, breaks Inter appearance
Solution: Use `!important` on both .od-wrapper and all descendants to win the cascade */
.od-wrapper,
.od-wrapper * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* ============================================================================
Text content: Paragraph and heading resets
============================================================================ */
/* Fix: Remove Bootstrap paragraph bottom margin
Client rule: Bootstrap `p { margin: 0 0 10px }`
Widget issue: Adds 10px gap below each message paragraph
Solution: Reset margin to 0. .odl-markdown paragraphs restore their margin below. */
.od-wrapper p {
margin: 0;
}
/* Fix: Host page applies background-image to bare `form` elements
Client rule: `form { background-image: url(...) }` or similar
Widget issue: Chat input form shows the host page's decorative background
Solution: Strip background-image and ensure clean background on form elements */
.od-wrapper form {
background-image: none;
background-repeat: no-repeat;
}
/* Fix: Compensate for broken rem units in markdown content
Client rule: Bootstrap `html { font-size: 62.5% }` → root = 10px
Widget issue: Message library uses `rem` for .odl-markdown spacing (e.g.
margin-bottom: 1rem). Since rem is relative to not the wrapper,
1rem = 10px instead of 16px. Our wrapper font-size: 16px can't fix this.
Solution: Use `em` (relative to parent's 16px) instead of `rem` for the
affected markdown spacing properties. */
.od-wrapper .odl-markdown p {
margin-bottom: 1em;
}
.od-wrapper .odl-markdown blockquote {
margin: 0 0 1em;
padding: 0.5em 1em;
}
.od-wrapper .odl-markdown ul,
.od-wrapper .odl-markdown ol {
/* Fix: Reset list margin and padding
Client rules: Normalize/Bootstrap `ul, ol { margin: 1em 0; padding: 0 0 0 40px }`
Widget issue: Lists in messages get extra top/bottom margin and oversized left indent
Solution: Zero the margin, use `em` for padding-inline-start (rem is broken by
the 62.5% root font-size) */
margin: 0 0 1em;
padding: 0;
padding-inline-start: 1em;
}
/* Fix: Reset list-item spacing
Client rules: Element selectors on `li` adding margin, padding, or line-height overrides
Widget issue: List items in messages have inconsistent spacing and indentation
Solution: Zero margin/padding and let the widget's own styles control spacing */
.od-wrapper .odl-markdown li {
margin: 0;
padding: 0;
list-style: disc;
}
.od-wrapper .odl-markdown ol > li {
list-style: decimal;
}
/* Fix: Preserve the message library's first/last child margin resets
Client rule: .odl-markdown applies *:first-child { margin-top: 0 } and *:last-child { margin-bottom: 0 }
Widget issue: Our p { margin: 0 } might conflict
Solution: Explicitly re-apply first/last child resets to ensure clean spacing */
.od-wrapper .odl-markdown *:first-child {
margin-top: 0;
}
.od-wrapper .odl-markdown *:last-child {
margin-bottom: 0;
}
/* Fix: Reset heading font properties to inherit from widget
Client rules: Bootstrap h1–h6 define `font-size: 36px|30px|etc`, `font-weight: 500`,
`line-height: 1.1`, `font-family: inherit`
Widget issue: Headings in messages render oversized and with incorrect weight
Solution: Force inherit for all properties and zero margins */
.od-wrapper h1,
.od-wrapper h2,
.od-wrapper h3,
.od-wrapper h4,
.od-wrapper h5,
.od-wrapper h6 {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
}
/* Fix: Ensure strong/bold text is actually bold
Client rule: Bootstrap `strong { font-weight: 700 }` (correct in isolation)
Widget issue: Computed fontWeight shows 500 instead of 700 (something overriding)
Solution: Explicitly set font-weight: 700 to ensure bold text renders bold */
.od-wrapper strong,
.od-wrapper b {
font-weight: 700;
}
/* ============================================================================
Form elements: Button and textarea resets
============================================================================ */
/* Fix: Neutralise host-page button styling without clobbering widget button styles
Client rules:
- button[disabled] { border: 2px outset buttonface; color: graytext; background: #ddd }
- Bootstrap button appearance/cursor overrides
Solution: Only reset the specific properties that host CSS is setting incorrectly.
Do NOT reset background, padding, border-radius, dimensions — the widget's own
component styles set these intentionally. */
.od-wrapper button {
font-family: inherit !important;
font-size: inherit;
line-height: inherit;
-webkit-appearance: none;
appearance: none;
}
/* Fix: Remove host page's ugly disabled button styling
Client rule: button[disabled] { border: 2px outset buttonface; color: graytext; background: #ddd }
Widget issue: Disabled send button gets ugly 3D border
Solution: Only reset the outset border — let widget component styles handle the rest */
.od-wrapper button:disabled {
border-style: none;
}
/* Fix: Reset textarea font to inherit from corrected wrapper
Client rule: Bootstrap `textarea { font: inherit }` chains broken font-family
Widget issue: Textareas in the widget inherit wrong font (font_reg)
Solution: Explicitly set font-family: inherit to get 'Inter' from .od-wrapper */
.od-wrapper textarea {
font-family: inherit !important;
font-size: inherit;
line-height: inherit;
}
/* ============================================================================
Text color: Fallback for base text colour
============================================================================ */
/* Fix: Set safe base text colour (optional fallback)
Client rule: Bootstrap `body { color: rgb(51, 51, 51) }`
Widget note: Widget components set colours via theme v-bind(), which should take
precedence. This is a safety net if no component style applies.
Solution: Set neutral dark grey to match widget's genericText colour intent */
.od-wrapper {
color: #2d2d2d;
}
/* ============================================================================
Links: Anchor element resets
============================================================================ */
/* Fix: Prevent host-page link styles leaking into widget
Client rules: Element selectors on `a` setting colour, text-decoration, or display
Widget issue: Links in messages may render in the wrong colour or lose/gain underlines
Solution: Reset to inherit so widget component styles take full control */
.od-wrapper a {
color: inherit;
text-decoration: inherit;
}
/* ============================================================================
Images: Prevent host-page image overrides
============================================================================ */
/* Fix: Reset img element styles
Client rules: Element selectors on `img` setting border, max-width, or display
Widget issue: Images in rich messages may gain unwanted borders or collapse
Solution: Reset border and ensure sensible max-width without forcing display */
.od-wrapper img {
border: 0;
max-width: 100%;
}