## Problem/Motivation When the AI chatbot renders a response that contains images or videos, the media is not constrained to the chatbot's viewport. Instead it currently shows/overflows everywhere, breaking out of the chat window and affecting the surrounding page layout. ## Steps to reproduce 1. Enable and configure `ai_chatbot`. 2. Trigger a chatbot response that includes an image or a video (e.g. markdown image syntax or an embedded video). 3. Observe that the media is rendered outside the bounds of the chatbot viewport rather than inside it. ## Proposed resolution The chatbot should render images and videos **inside** its own viewport: - Constrain rendered images and videos to the chatbot message area (respect the viewport width/height, scale responsively). - Prevent media from overflowing into or affecting the rest of the page. ## Remaining tasks - [ ] Identify where image/video output is rendered in the chatbot response markup. - [ ] Scope/contain media rendering to the chatbot viewport (CSS and/or template changes). - [ ] Verify responsive behaviour across viewport sizes. ## User interface changes Images and videos returned by the chatbot will display within the chatbot viewport instead of across the page.