<!-- Please search existing work items before filing to avoid duplicates. --> ## Summary The `ai_chatbot` module's default "Toolbar" DeepChat style (`deepchat_styles/toolbar.yml`) sets `textInput.styles.container.marginRight: 16px` but never sets a matching `marginLeft`. Since the DeepChat library renders this container using the default `content-box` box model (no `box-sizing: border-box` is set anywhere in its bundle), the missing left margin makes the input textbox sit flush against the left edge of the chat widget, with a visible 16px gap only on the right. This is independent of where the chat toggle is placed on the page — it reproduces with both `bottom-right` and `bottom-left` placement, since the flaw is in the style definition itself, not in the placement CSS. <!-- Testing Setup (optional — to reproduce on a clean install): mkdir my-drupal-site && cd my-drupal-site ddev config --project-type=drupal11 --docroot=web ddev composer create-project drupal/cms ddev drush site:install --account-name=admin --account-pass=admin -y # Enable AI Dashboard and ai_api_explorer # Launch the site and open the AI dashboard to add an OpenAI or Anthropic key: ddev launch $(ddev drush uli /admin/config/ai) --> ## Steps to reproduce 1. Install the `ai` module with the `ai_chatbot` submodule enabled and place the "AI DeepChat Chatbot" block using the default "Toolbar" style file (`toolbar.yml`). 2. Open the chat widget on any page (reproduces with either `bottom-right` or `bottom-left` placement). 3. Observe the text input field at the bottom of the widget. ## Expected result The input textbox should have symmetric spacing from the left and right edges of the chat widget, matching the visual balance of the rest of the UI (message bubbles, avatars, etc., which all use symmetric margins). ## Actual result The input textbox is flush against the left edge of the chat widget (no left margin), with a visible 16px gap only on the right, making the layout look unbalanced/misaligned. Confirmed to reproduce regardless of widget placement (bottom-left and bottom-right both affected). ## Environment - Drupal version: 11.4.4 - Module version: 1.4.4 - PHP version: 8.4.22 - Provider: N/A (frontend/CSS issue, provider-agnostic) - Last known working version: N/A (appears to have always been missing) ### Frontend environment *(only required for UI / frontend issues)* - OS: macOS - Browser: Firefox 152.0.6 (aarch64), Chrome 150.0.7871.125 (Official Build) (arm64) ### Screenshots / recordings *(optional)* {width=900 height=397} ### Error messages or logs *(optional)* N/A — purely a visual/CSS layout issue, no errors logged. <!-- If this issue description was significantly AI-generated (entire sections, not autocomplete), please note it in a comment below. See https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquette/policy-on-the-use-of-ai-when-contributing-to-drupal --> AI-Generated: Yes. Claude (Anthropic) was used to investigate the module's source code (`DeepChatFormBlock.php`, `deepchat.bundle.js`, `toolbar.yml`) and draft this issue summary, steps to reproduce, and root cause analysis. I reviewed and verified the technical findings against my own site's configuration before submitting.