# Styles

> For the complete documentation index, see [llms.txt](/llms.txt)

> Customize the Biel.ai widget appearance with CSS custom properties and CSS parts.

Two approaches for customizing widget styles:

1. **CSS custom properties** — Override colors, fonts, spacing, and sizing.
2. **CSS parts** (advanced) — Target specific elements inside the Shadow DOM.

## CSS custom properties

Define CSS custom properties in your stylesheet using the `:root` selector:

```css
:root { --biel-primary-color: #00D68F;
    ...}
```

### Properties

```css
:root { /* Colors */
    --biel-primary-color: #0070F4;
    --biel-primary-light-color: #3a99ff;
    --biel-primary-hover-color: #005FCC;
    --biel-secondary-color: #f9fafb;
    --biel-secondary-hover-color: #ebebeb;
    --biel-light-color: #ccc;
    --biel-dark-color: #191919;
    --biel-dark-hover-color: #333;
    --biel-text-color: #5f6368;
    --biel-white-color: #fff;
    --biel-white-hover-color: #eee;
    --biel-highlight-color: #ffb422;
    --biel-scrollbar-color: #888888;
    --biel-scrollbar-hover-color: #666666;
    --biel-code-header-color: #3a3a3a;
    --biel-code-body-color: #3b3b3b;
    --biel-table-header-color: #372b2b;

    /* Fonts */
    --biel-font-family: "Inter", "Tahoma", "sans-serif";
    --biel-text-sm-font-size: 12px;
    --biel-text-font-size: 14px;
    --biel-text-lg-font-size: 16px;
    --biel-text-xl-font-size: 18px;
    --biel-text-xxl-font-size: 20px;
    --biel-code-snippet-font-family: "Courier New", "Courier", "monospace";

    /* Biel button */
    --biel-button-border-radius: 20px;
    --biel-button-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    --biel-button-dark-bg-color: var(--biel-primary-color);
    --biel-button-dark-bg-color-hover: var(--biel-primary-color);
    --biel-button-dark-text-color: var(--biel-white-color);
    --biel-button-icon-size: 20px;
    --biel-button-light-bg-color: var(--biel-white-color);
    --biel-button-light-bg-color-hover: var(--biel-white-color);
    --biel-button-light-text-color: var(--biel-primary-color);
    --biel-button-text-font-size: var(--biel-text-lg-font-size);
    --biel-button-text-font-weight: 400;
    --biel-button-padding: 8px 15px;
    --biel-button-position-top: 15px;
    --biel-button-position-bottom: 15px;
    --biel-button-position-left: 15px;
    --biel-button-position-right: 15px;

    /* Biel bot */
    --biel-bot-close-bg-color: var(--biel-white-color);
    --biel-bot-close-color: var(--biel-dark-color);
    --biel-bot-content-bg-color: var(--biel-white-color);
    --biel-bot-content-border-color: rgba(0, 0, 0, 0.08);
    --biel-bot-content-border-radius: 12px;
    --biel-bot-content-box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);

    --biel-bot-content-font-family: var(--biel-font-family);
    --biel-bot-content-position-bottom: 10px;
    --biel-bot-content-position-left: 10px;
    --biel-bot-content-position-right: 10px;
    --biel-bot-content-position-top: 10px;
    --biel-bot-content-max-width: 600px;
    --biel-bot-content-text-color: var(--biel-text-color);
    --biel-bot-content-z-index: 300;

    /* Biel bot chat */
    --biel-chat-scrollbar-color: var(--biel-scrollbar-color);
    --biel-chat-scrollbar-hover-color: var(--biel-scrollbar-hover-color);
    --biel-chat-height: 45vh;
    --biel-chat-embedded-height: 450px;

    /* Biel bot header */
    --biel-header-font-family: var(--biel-font-family);
    --biel-header-font-size: var(--biel-text-xl-font-size);
    --biel-header-font-weight: 600;
    --biel-header-powered-by-font-weight: 400;
    --biel-header-powered-by-text-color: var(--biel-text-color);
    --biel-header-powered-by-link-color: var(--biel-dark-color);
    --biel-header-text-color: var(--biel-dark-color);
    --biel-header-border-color: var(--biel-light-color);

    /* Biel input options dropdown */
    --biel-dropdown-bg-color: var(--biel-white-color);
    --biel-dropdown-border-color: var(--biel-light-color);
    --biel-dropdown-hover-bg-color: var(--biel-secondary-color);
    --biel-dropdown-selected-bg-color: var(--biel-white-hover-color);
    --biel-dropdown-selected-hover-bg-color: var(--biel-secondary-hover-color);
    --biel-dropdown-text-color: var(--biel-dark-hover-color);
    --biel-dropdown-text-secondary-color: var(--biel-text-color);

    /* Biel bot message */
    --biel-message-biel-text-color: var(--biel-dark-color);
    --biel-message-user-text-color: var(--biel-white-color);
    --biel-message-biel-bg-color: var(--biel-secondary-color);
    --biel-message-user-bg-color: var(--biel-dark-color);
    --biel-message-avatar-width: 20px;
    --biel-message-avatar-height: 20px;
    --biel-message-padding: 10px;
    --biel-message-avatar-margin-right: 10px;
    --biel-message-border-radius: 10px;
    --biel-message-code-font-size: 14px;
    --biel-message-code-bg-color: var(--biel-code-body-color);
    --biel-message-code-inline-text-color: var(--biel-dark-color);
    --biel-message-code-inline-bg-color: var(--biel-white-hover-color);
    --biel-message-code-inline-border-radius: 4px;
    --biel-message-font-size: var(--biel-text-font-size);
    --biel-message-label-font-size: var(--biel-text-sm-font-size);
    --biel-message-h1-font-size: var(--biel-text-xxl-font-size);
    --biel-message-h2-font-size: var(--biel-text-xl-font-size);
    --biel-message-h3-font-size: var(--biel-text-lg-font-size);
    --biel-message-h4-font-size: var(--biel-text-lg-font-size);
    --biel-message-h5-font-size: var(--biel-text-lg-font-size);
    --biel-message-h6-font-size: var(--biel-text-lg-font-size);
    --biel-message-link-color: var(--biel-primary-light-color);
    --biel-message-source-font-size: 14px;
    --biel-message-source-bg-color: var(--biel-white-hover-color);
    --biel-message-source-bg-hover-color: var(--biel-light-color);
    --biel-message-source-text-color: var(--biel-dark-color);
    /* Biel bot input */
    --biel-input-color: var(--biel-dark-color);
    --biel-input-button-color: var(--biel-white-color);
    --biel-input-button-bg-color: var(--biel-primary-color);
    --biel-input-button-border-color: var(--biel-dark-color);
    --biel-input-button-hover-color: var(--biel-white-color);
    --biel-input-button-hover-bg-color: var(--biel-primary-hover-color);
    --biel-input-button-hover-border-color: var(--biel-primary-hover-color);
    --biel-input-border-color: var(--biel-dark-color);
    --biel-input-border-radius: 6px;
    --biel-input-border-focus-color: var(--biel-dark-color);
    --biel-input-font-family: var(--biel-font-family);
    --biel-input-textarea-max-height: 114px;
    --biel-input-textarea-min-height: 19px;

    /* Biel bot input options */
    --biel-input-options-button-hover-bg-color: var(--biel-secondary-color);
    --biel-input-options-button-hover-border-color: var(--biel-dark-color);
    --biel-input-options-button-focus-border-color: var(--biel-dark-color);

    /* Biel bot code snippet */
    --biel-code-snippet-header-text-color: var(--biel-light-color);
    --biel-code-snippet-content-text-color: var(--biel-white-color);
    --biel-code-snippet-header-bg-color: var(--biel-code-header-color);
    --biel-code-snippet-content-bg-color: var(--biel-dark-color);
    --biel-code-snippet-font-size: var(--biel-text-font-size);

    /* Biel bot table */
    --biel-table-th-bg-color: var(--biel-table-header-color);
    --biel-table-bg-color: var(--biel-dark-color);
    --biel-table-content-text-color: var(--biel-white-color);

    /* Biel bot suggested questions */
    --biel-suggested-questions-border-radius: 8px;
    --biel-suggested-questions-bg-color: var(--biel-white-color);
    --biel-suggested-questions-bg-hover-color: var(--biel-primary-color);
    --biel-suggested-questions-border-color: var(--biel-primary-color);
    --biel-suggested-questions-padding: 8px 12px;
    --biel-suggested-questions-text-color: var(--biel-dark-color);
    --biel-suggested-questions-text-hover-color: var(--biel-white-color);
    --biel-suggested-questions-title-font-size: var(--biel-text-sm-font-size);
    --biel-suggested-questions-font-size: var(--biel-text-font-size);

    /* Biel bot feedback */
    --biel-feedback-bg-color: var(--biel-white-hover-color);
    --biel-feedback-bg-hover-color: var(--biel-light-color);
    --biel-feedback-background-selected-color: var(--biel-primary-color);
    --biel-feedback-text-color: var(--biel-dark-color);
    --biel-feedback-text-selected-color: var(--biel-white-color);

    /* Biel bot footer */
    --biel-footer-font-size: var(--biel-text-sm-font-size);

    /* Biel search button */
    --biel-search-button-text-display: none;
    --biel-search-button-ctrl-k-display: none;
    --biel-search-button-border-radius: 20px;
    --biel-search-button-border-color: var(--biel-light-color);
    --biel-search-button-bg-color: var(--biel-white-color);
    --biel-search-button-text-color: var(--biel-dark-color);
    --biel-search-button-icon-size: 20px;
    --biel-search-button-width: 100%;
    --biel-search-button-max-width: fit-content;
    --biel-search-button-padding: 8px;
    --biel-search-button-icon-margin-right: 0px;
    --biel-search-button-text-font-size: var(--biel-text-lg-font-size);
    --biel-search-button-text-font-weight: 400;
    --biel-search-button-z-index: 300;

    /* Biel search */
    --biel-search-content-bg-color: var(--biel-white-color);
    --biel-search-content-border-color: rgba(0, 0, 0, 0.08);
    --biel-search-content-border-radius: 12px;
    --biel-search-content-box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    --biel-search-content-font-family: var(--biel-font-family);
    --biel-search-content-max-width: 700px;
    --biel-search-content-max-height: 100dvh;
    --biel-search-content-position-bottom: 10px;
    --biel-search-content-position-left: 10px;
    --biel-search-content-position-right: 10px;
    --biel-search-content-position-top: 10px;
    --biel-search-content-position-top-center: 50px;
    --biel-search-content-text-color: var(--biel-dark-color);
    --biel-search-content-z-index: 300;
    --biel-search-body-max-height: calc(80dvh - 30px);

    /* Biel search result */
    --biel-search-result-bg-color: var(--biel-secondary-color);
    --biel-search-result-bg-hover-color: var(--biel-secondary-hover-color);
    --biel-search-result-border-radius: 6px;
    --biel-search-result-border-color: var(--biel-light-color);
    --biel-search-result-description-color: var(--biel-scrollbar-hover-color);
    --biel-search-result-mark-color: var(--biel-primary-color);
    --biel-search-result-padding: 10px 8px;
    --biel-search-result-title-color: var(--biel-dark-color);
    --biel-search-result-title-font-size: var(--biel-text-xl-font-size);
    --biel-search-result-description-font-size: var(--biel-text-lg-font-size);
    --biel-search-result-description-line-height: 1.4;
    --biel-search-line-height: 1;

    /* Biel search ask ai button */
    --biel-search-ask-ai-bg-color: var(--biel-primary-color);
    --biel-search-ask-ai-border-radius: 8px;
    --biel-search-ask-ai-color: var(--biel-white-color);
    /* Biel search filters */
    --biel-search-filter-color: var(--biel-dark-color);
    --biel-search-filter-selected-color: var(--biel-white-color);
    --biel-search-filter-bg-color: var(--biel-white-color);
    --biel-search-filter-selected-bg-color: var(--biel-primary-color);
    --biel-search-filter-border-color: var(--biel-white-hover-color);
    --biel-search-filter-hover-color: var(--biel-white-hover-color);
    --biel-search-filter-selected-border-color: var(--biel-primary-color);

    /* Biel search footer */
    --biel-search-footer-command-key-border-color: var(--biel-header-border-color);

    /* Biel search toctree */
    --biel-search-toctree-page-bg-color: var(--biel-secondary-color);
    --biel-search-toctree-page-border-color: var(--biel-light-color);
    --biel-search-toctree-page-text-color: var(--biel-dark-color);
    --biel-search-toctree-count-color: var(--biel-scrollbar-hover-color);
    --biel-search-toctree-border-color: var(--biel-light-color);
    --biel-search-toctree-page-title-font-size: var(--biel-text-xl-font-size);
    --biel-search-toctree-page-title-font-weight: 500;
    --biel-search-toctree-count-font-size: var(--biel-text-sm-font-size);
    --biel-search-toctree-title-height: 100%;

    /* Biel terms modal */
    --biel-terms-modal-color: var(--biel-dark-color);
    --biel-terms-modal-bg-color: var(--biel-white-color);
    --biel-terms-modal-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --biel-terms-modal-link-color: var(--biel-primary-light-color);
    --biel-terms-modal-accept-btn-bg-color-disabled: var(--biel-primary-light-color);
    --biel-terms-modal-accept-btn-color-disabled: var(--biel-white-color);
    --biel-terms-modal-accept-btn-bg-color: var(--biel-primary-color);
    --biel-terms-modal-accept-btn-color: var(--biel-white-color);
    --biel-terms-modal-accept-btn-bg-color-hover: var(--biel-primary-hover-color);
    --biel-terms-modal-decline-btn-bg-color: var(--biel-white-hover-color);
    --biel-terms-modal-decline-btn-hover-bg-color: var(--biel-light-color);
    --biel-terms-modal-decline-btn-color: var(--biel-dark-color);
    --biel-terms-modal-close-btn-color: var(--biel-dark-color);
    --biel-terms-modal-close-btn-color-hover: var(--biel-dark-hover-color);

    /* Biel continue button */
    --biel-continue-button-bg-color: var(--biel-white-hover-color);
    --biel-continue-button-bg-color-hover: var(--biel-light-color);
    --biel-continue-button-color: var(--biel-dark-color);}

[data-theme='dark'] { --biel-text-color: #b0b8c4;
    --biel-scrollbar-color: #555555;
    --biel-scrollbar-hover-color: #333333;
    --biel-bot-button-bg-color-active: transparent;
    --biel-bot-button-icon-color: var(--biel-white-color);
    --biel-bot-button-text-color: var(--biel-white-color);
    --biel-header-text-color: var(--biel-white-color);
    --biel-bot-close-bg-color: transparent;
    --biel-bot-close-color: var(--biel-white-color);
    --biel-bot-content-bg-color: var(--biel-dark-color);
    --biel-bot-content-border-color: rgba(255, 255, 255, 0.1);
    --biel-bot-content-text-color: var(--biel-text-color);
    --biel-header-border-color: #363636;
    --biel-header-powered-by-link-color: var(--biel-white-color);
    --biel-dropdown-bg-color: var(--biel-message-biel-bg-color);
    --biel-dropdown-border-color: var(--biel-header-border-color);
    --biel-dropdown-hover-bg-color: var(--biel-feedback-bg-color);
    --biel-dropdown-selected-bg-color: var(--biel-feedback-bg-hover-color);
    --biel-dropdown-selected-hover-bg-color: var(--biel-message-source-bg-hover-color);
    --biel-dropdown-text-color: var(--biel-white-color);
    --biel-dropdown-text-secondary-color: var(--biel-text-color);
    --biel-input-color: var(--biel-white-color);
    --biel-input-border-color: var(--biel-white-color);
    --biel-input-border-focus-color: var(--biel-white-color);
    --biel-input-button-color: var(--biel-white-color);
    --biel-input-button-bg-color: var(--biel-primary-color);
    --biel-input-button-border-color: var(--biel-primary-color);
    --biel-input-button-hover-color: var(--biel-white-color);
    --biel-input-button-hover-bg-color: var(--biel-primary-hover-color);
    --biel-input-button-hover-border-color: var(--biel-primary-hover-color);
    --biel-input-options-button-hover-bg-color: var(--biel-message-biel-bg-color);
    --biel-input-options-button-hover-border-color: var(--biel-white-color);
    --biel-input-options-button-focus-border-color: var(--biel-white-color);
    --biel-message-biel-text-color: var(--biel-white-color);
    --biel-message-biel-bg-color: #2a2a2a;
    --biel-message-user-text-color: var(--biel-white-color);
    --biel-message-user-bg-color: #2a2a2a;
    --biel-message-source-color: var(--biel-white-hover-color);
    --biel-message-source-bg-color: #3a3a3a;
    --biel-message-source-bg-hover-color: #4a4a4a;
    --biel-message-source-text-color: var(--biel-white-color);
    --biel-message-source-link-color: var(--biel-primary-color);
    --biel-suggested-questions-text-color: var(--biel-white-color);
    --biel-suggested-questions-bg-color: var(--biel-dark-color);
    --biel-feedback-bg-color: #3a3a3a;
    --biel-feedback-bg-hover-color: #4a4a4a;
    --biel-feedback-text-color: var(--biel-white-color);
    --biel-search-button-bg-color: var(--biel-dark-color);
    --biel-search-button-text-color: var(--biel-white-color);
    --biel-search-button-border-color: var(--biel-primary-color);
    --biel-search-content-text-color: var(--biel-text-color);
    --biel-search-content-bg-color: var(--biel-dark-color);
    --biel-search-content-border-color: rgba(255, 255, 255, 0.1);
    --biel-search-result-bg-color: #2b2b2b;
    --biel-search-result-bg-hover-color: #3a3a3a;
    --biel-search-result-border-color: #363636;
    --biel-search-result-title-color: var(--biel-white-color);
    --biel-search-result-description-color: var(--biel-text-color);
    --biel-search-result-mark-color: var(--biel-primary-light-color);
    --biel-code-snippet-header-text-color: var(--biel-text-color);
    --biel-code-snippet-text-color: var(--biel-white-color);
    --biel-search-filter-color: var(--biel-white-color);
    --biel-search-filter-selected-color: var(--biel-white-color);
    --biel-search-filter-bg-color: var(--biel-dark-color);
    --biel-search-filter-selected-bg-color: var(--biel-primary-color);
    --biel-search-filter-border-color: #3a3a3a;
    --biel-search-filter-hover-color: #3a3a3a;
    --biel-search-filter-selected-border-color: var(--biel-primary-color);
    --biel-terms-modal-bg-color: var(--biel-dark-color);
    --biel-terms-modal-color: var(--biel-white-color);
    --biel-terms-modal-close-btn-color: var(--biel-white-color);
    --biel-terms-modal-close-btn-color-hover: var(--biel-white-hover-color);
    --biel-search-toctree-page-bg-color: var(--biel-search-result-bg-color);
    --biel-search-toctree-page-border-color: var(--biel-search-result-border-color);
    --biel-search-toctree-page-text-color: var(--biel-white-color);
    --biel-search-toctree-count-color: var(--biel-text-color);
    --biel-search-toctree-border-color: var(--biel-search-result-border-color);}

@media (min-width: 768px) { :root { --biel-search-button-text-display: block;
        --biel-search-button-ctrl-k-display: block;
        --biel-search-button-padding: 8px 15px;
        --biel-search-button-icon-margin-right: 5px;
        --biel-search-content-max-height: 80dvh;
        --biel-search-body-max-height: 50dvh;}}
```

## CSS parts

For fine-grained control, the widget exposes CSS parts that let you style elements inside the Shadow DOM using the `::part()` pseudo-element.

**Syntax:**

```css
/* Styling a component's own parts */
component-name::part(part-name) { /* your styles */}

/* Styling nested component parts (with prefix) */
parent-component::part(child-component-part-name) { /* your styles */}
```

**Naming conventions:**

- **Direct parts** use simple names: `biel-bot::part(modal)`, `biel-button::part(button)`
- **Nested parts** use prefixed names: `biel-bot::part(biel-message-bubble)`, `biel-search::part(biel-search-result-title)`

### Finding available parts

1. Right-click the widget and select **Inspect**.
2. Expand the `#shadow-root` inside the component tag.
3. Look for elements with `part="..."` attributes.

### Examples

#### Custom biel button

```css
/* Square button with custom color */
biel-button::part(button) { border-radius: 8px;
  background-color: #ff5722;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
  transition: all 0.2s ease;}

/* Hover effect */
biel-button::part(button):hover { background-color: #f4511e;
  transform: translateY(-2px);}
```

#### Custom chat message styling

```css
/* Modern chat bubble design */
biel-bot::part(biel-message-bubble) { border-radius: 18px 18px 18px 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}

/* Message content spacing */
biel-bot::part(biel-message-content) { line-height: 1.6;
  padding: 4px 0;}
```

#### Branded search interface

```css
/* Rounded search input */
biel-search::part(biel-search-input-input) { border-radius: 50px;
  padding: 12px 20px;
  border: 2px solid #e0e0e0;}

/* Highlighted results */
biel-search::part(biel-search-result-container) { border-left: 3px solid #667eea;
  transition: all 0.2s ease;}

biel-search::part(biel-search-result-container):hover { transform: translateX(4px);}
```