CTA Brand Theme

Use these classes and CSS variables to brand the ai12z Search control. The screenshots call out where each style applies.

Where to put styles

Add your overrides to a site stylesheet that loads after the ai12z control, or place them in a page-level style block. CSS variables are the primary way to theme the control and work across the shadow DOM.

Search bar (input field)

Classes

.custom-input — Input field styling (padding, radius, borders)
.btn-bg-color — Submit button (arrow) background
.mic-icon — Microphone icon
.plus-icon — Plus icon
.custom-input:focus — Focus/active border color
.custom-input::placeholder — Placeholder typography and color
.model-heading — Heading above the search bar

CSS variables

--ai12z-searchbar-bgcolor — Search bar background color
--ai12z-plus-icon-color — Plus icon color
--ai12z-mic-color — Microphone icon color
--ai12z-button-bgcolor — Submit button background color
--ai12z-border-color — Input border color (usually matches the search bar background)
--ai12z-input-placeholder-color — Placeholder text color
--ai12z-input-placeholder-font-size — Placeholder font size
--ai12z-heading-color — Heading color
--ai12z-heading-font-size — Heading font size

Example

:root {
  --ai12z-searchbar-bgcolor: #f3f6fb;
  --ai12z-border-color: #e6eefc;
  --ai12z-plus-icon-color: #6b7a99;
  --ai12z-mic-color: #1f6fff;
  --ai12z-button-bgcolor: #1f6fff;
  --ai12z-input-placeholder-color: #9aa5b1;
  --ai12z-input-placeholder-font-size: 15px;
  --ai12z-heading-color: #1e293b;
  --ai12z-heading-font-size: 20px;
}

.custom-input::placeholder {
  color: var(--ai12z-input-placeholder-color);
}
.custom-input:focus {
  outline: none;
  border-color: var(--ai12z-border-color);
}

Search bar elements

The + button in the search bar opens a menu of actions — Upload Images, Capture, Start Over, and View Recent Chat. Theme it with the CSS variables below; use the classes only for structural changes.

CSS variables

Set any of these to restyle the menu. Omit one to keep its default.

Variable	Default	Controls
`--ai12z-menu-bg`	`#fff`	Menu surface background
`--ai12z-menu-border-color`	`rgba(17, 24, 39, 0.08)`	Menu border color
`--ai12z-menu-radius`	`0.875rem`	Corner radius
`--ai12z-menu-shadow`	soft layered shadow	Drop shadow
`--ai12z-menu-width`	`15rem`	Menu width
`--ai12z-menu-item-color`	`#374151`	Row label color
`--ai12z-menu-item-font-size`	`0.875rem`	Row label font size
`--ai12z-menu-item-hover-bg`	`#f3f4f6`	Row hover / focus background
`--ai12z-menu-icon-color`	`#6b7280`	Row icon color
`--ai12z-menu-focus-ring`	`rgba(59, 130, 246, 0.55)`	Keyboard focus ring

The + icon color itself is set with --ai12z-plus-icon-color (see Search bar, above).

Example

:root {
  --ai12z-menu-bg: #ffffff;
  --ai12z-menu-border-color: #e6eefc;
  --ai12z-menu-radius: 12px;
  --ai12z-menu-item-color: #1e293b;
  --ai12z-menu-item-hover-bg: #eef2ff;
  --ai12z-menu-icon-color: #6b7a99;
  --ai12z-menu-focus-ring: #1f6fff;
}

Dark mode

The menu follows the OS color scheme. When the system is in dark mode (prefers-color-scheme: dark) the variables are remapped to dark defaults automatically — no class or setting required. A variable you set on :root applies to light mode; to customize the dark palette, override the tokens inside the same media query, added through the dashboard Style tab so the CSS reaches the control:

@media (prefers-color-scheme: dark) {
  .ai12z-plus-menu {
    --ai12z-menu-bg: #0f172a;
    --ai12z-menu-border-color: rgba(255, 255, 255, 0.1);
    --ai12z-menu-item-color: #e2e8f0;
    --ai12z-menu-item-hover-bg: rgba(148, 163, 184, 0.16);
    --ai12z-menu-icon-color: #94a3b8;
  }
}

Keyboard and accessibility

The menu implements the WAI-ARIA menu button pattern and is keyboard-operable to WCAG 2.1 AA:

Key	Action
`Enter` / `Space` / `↓` on the + button	Open the menu, focus the first item
`↑` on the + button	Open the menu, focus the last item
`↓` / `↑`	Move between items (wraps around)
`Home` / `End`	First / last item
`Enter` / `Space`	Activate the focused item and close
`Escape`	Close and return focus to the + button
`Tab`	Close and move focus to the next control

While closed, the popover is inert (removed from the tab order and the accessibility tree). Focus visibility uses --ai12z-menu-focus-ring. When overriding styles, keep the role, tabindex, and aria-* attributes intact so keyboard and screen-reader support keep working.

Classes (structural overrides only — prefer the variables)

Class-level overrides must be applied through the dashboard Style tab (custom CSS is injected into the control); the CSS variables above also work from a site stylesheet or theme.

Class	Element
`.ai12z-plus-anchor`	Wrapper that positions the menu (holds the + button)
`.ai12z-plus-menu`	Popover container (carries `data-open="true" \| "false"`)
`.ai12z-menu-list`	The list of rows
`.ai12z-menu-item`	A menu row
`.ai12z-menu-item__icon`	Row icon
`.ai12z-menu-item__label`	Row label text
`.ai12z-menu-item--uploader`	The Upload Images row

Example — open the menu upward

If you embed the input near the bottom of the viewport, flip the open direction:

.ai12z-plus-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.5rem;
  transform-origin: bottom left;
}

Search suggestions (categories and results)

Classes

.custom-title — Category section title
.cta-search-text — Result title
.cta-search-results-list:hover — Hover state for a result row
.cta-search-description — Result description text

CSS variables

--ai12z-category-font-size — Category title font size
--ai12z-category-font-color — Category title color
--ai12z-search-result-title-color — Result title color
--ai12z-search-result-title-font-size — Result title font size
--ai12z-search-result-description-color — Result description color
--ai12z-search-result-description-font-size — Result description font size
--ai12z-hover-bg-color — Hover background for result rows

Example

:root {
  --ai12z-category-font-size: 14px;
  --ai12z-category-font-color: #475569;
  --ai12z-search-result-title-color: #0f172a;
  --ai12z-search-result-title-font-size: 16px;
  --ai12z-search-result-description-color: #64748b;
  --ai12z-search-result-description-font-size: 13px;
  --ai12z-hover-bg-color: #eef2ff;
}

Chat bubbles (user and bot)

Classes

.chat-list-item — Bubble container
.non-pending-user — User bubble background
.copy-btn — Copy/feedback icons (hover state)
.ai12z-cta-link — Link color inside a bot response
.ai12z-cta-link:hover — Link hover color inside a bot response

CSS variables

--ai12z-bubble-font-color — Bubble font color
--ai12z-bubble-background — Bubble background color
--ai12z-feedback-color — Feedback icon hover color
--ai12z-feedback-selected — Selected state color (e.g., thumbs up/down)
--ai12z-button-bgcolor — Button background inside responses
--ai12z-link-color — Inline link color in responses
--ai12z-link-hover-color — Inline link hover color

Example

:root {
  --ai12z-bubble-font-color: #0f172a;
  --ai12z-bubble-background: #e6f0ff;
  --ai12z-feedback-color: #64748b;
  --ai12z-feedback-selected: #1f6fff;
  --ai12z-link-color: #1f6fff;
  --ai12z-link-hover-color: #1747b3;
}

.chat-list-item {
  color: var(--ai12z-bubble-font-color);
}
.ai12z-cta-link {
  color: var(--ai12z-link-color);
}
.ai12z-cta-link:hover {
  color: var(--ai12z-link-hover-color);
}

Bot response bubble elements

Privacy statement

Class

.custom-msg — Privacy statement typography

CSS variable

--ai12z-font-mute — Privacy statement font color

Example

:root {
  --ai12z-font-mute: #6b7280;
}
.custom-msg {
  color: var(--ai12z-font-mute);
}

--ai12z-dialog-margin - This will allow us to customize the cta modal dialog. --ai12z-search-page-bgcolor - This will allow us to customize the search bar background color for the search results page. --ai12z-search-page-button-bgcolor - This will allow us to customize the button background color in search results page.

:root {
  --ai12z-dialog-margin: 3rem 0 0 0;
  --ai12z-search-page-bgcolor: #f3f4f6;
  --ai12z-search-page-button-bgcolor: var(--ai12z-primary-color);
}

Notes

If a style doesn’t apply, confirm your stylesheet loads after the control and that you’re overriding CSS variables at :root or a parent container.
Classes target elements exposed by the control; prefer variables for theme-wide changes.
Keep adequate contrast for accessibility when changing text and background colors.

Troubleshooting

Variable not applying? Confirm your stylesheet loads after the control script and the variable is defined at :root.
Cached old styles? Hard refresh or clear cache (Ctrl/Cmd + Shift + R).
Unsure which variable to change? Inspect the element in DevTools, search for --ai12z in the Styles panel to see applied sources.

inspect elements

Where to put styles​

Search bar (input field)​

Options menu (the + button)​

Search suggestions (categories and results)​

Chat bubbles (user and bot)​

Privacy statement​

Notes​

Troubleshooting​

Where to put styles

Search bar (input field)

Options menu (the + button)

Search suggestions (categories and results)

Chat bubbles (user and bot)

Privacy statement

Notes

Troubleshooting