- Add downloadChatAudio translation key to all 19 language files
- Update chat bubble download buttons to use correct translation
- Fix download button duplication by creating buttons initially
- Position download buttons next to play buttons in chat bubbles
- Adjust action toolbelt spacing to 24px for better layout
- Convert read page button to use tooltips for status updates
- Add download button that appears after audio generation
- Keep download button persistent after audio ends for continued access
- Remove DOM status container creation, use tooltips instead
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update all readPageWithHermes calls to pass button parameter
- Remove CSS styling for page reader status DOM element
- Ensure all Read Page buttons use tooltips instead of separate status div
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace DOM status element with tooltip functionality in page-reader.js
- Add translation keys for read page status messages to all 18 languages
- Update page-reader.js to use button tooltips instead of separate status div
- Fix TTS download button duplication guard with consistent CSS classes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Set chat area padding to 0px
- Remove light mode specific copy button styling for consistency
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove copy button background, add light mode styling with white bg
- Ensure modal title stays white across themes
- Set chat box to off-white (#f8f9fa) for light mode, dark (#1a1a1a) for dark mode
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add light mode specific styling for copy code button (white bg, dark text)
- Ensure modal title stays white in both builtin and pico CSS versions
- Prevent PicoCSS from overriding title color in light mode
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add font-size: 14px to .user-message and .ai-message classes
- Prevents inheritance of 18px font from emoji-only styles
- Ensures chat bubbles maintain proper 14px text size
- Applied to both builtin and PicoCSS styles
- Reduce z-index from 10 to 5 for copy code buttons
- Prevents buttons from appearing on top of settings panel
- Settings panel has z-index 10 and should stay on top when open
- Applied to both builtin and PicoCSS styles
- Move copy code button from bottom-left to bottom-right of code blocks
- Increase main modal width from 70vw to 80vw
- Increase max-width from 800px to 1000px
- Prevents horizontal scrolling in chat area
- Applied to both builtin and PicoCSS override styles
- Change border-radius from 20px to 6px for square corners
- Make emoji-only buttons fixed 36x36px squares
- Use grid layout with place-content: center for emoji centering
- Matches the style of emoji buttons used in chat messages
- Reduced padding to 8px for consistent square appearance
- Change fullPageRaw button from text to emoji + tooltip format
- Use 📝 emoji for markdown conversion functionality
- Follows same pattern as other action buttons
- Remove smart translate button functionality (non-working)
- Convert all action buttons to emoji + tooltip format:
📖 Read Page, 🔊 TTS Anything, 🌐 Translate, 📋 Copy Raw, 📄 Copy HTML
- Add emoji-only CSS class with 18px font size for emojis
- Add backdrop removal for TTS and translate modals in builtin CSS
- Update button creation to use title attribute for tooltips
- Reduce padding for emoji-only buttons (8px 12px vs 8px 16px)
- Remove overflow hidden and text-overflow ellipsis from buttons
- Change grid-auto-columns from minmax(0, max-content) to max-content
- Allow buttons to stretch to accommodate full text without truncation
- Keep white-space: nowrap to prevent text wrapping
- Lower settings panel by 15px more (80px to 95px top offset)
- Use place-content instead of place-items for proper grid centering
- Keep all layouts using CSS Grid as requested
- Fix gear and close button centering in both CSS files
- Add ::backdrop overrides for all dialog modals
- Set backdrop-filter to none and background-color to transparent
- Applied to uncloseai-embedded-modal, translate-modal, and tts-modal
- Removes the blurry backdrop effect from PicoCSS theme
- Increase settings panel top offset from 60px to 80px to avoid header
- Remove max-height: 40vh restriction on settings panel
- Add overflow hidden and text-overflow ellipsis to buttons
- Change grid-auto-columns to minmax(0, max-content) for proper sizing
- Ensure buttons don't expand beyond their content width
- Use grid-auto-flow: column for horizontal button layouts
- Fix controls and message actions to display horizontally
- Add theme-aware background colors for settings panel
- Move settings panel top position to avoid covering header
- Ensure all button text stays within button boundaries
- Convert modal container from flex column to grid with explicit rows
- Replace flex centering with grid place-items: center
- Convert header layouts from flex space-between to grid 1fr auto
- Transform input areas from flex to grid column layouts
- Update chat messages from flex column to grid single column
- Convert TTS controls, voice selection, and audio controls to grid
- Replace flex-wrap patterns with grid auto-fit minmax columns
- Remove all flex-shrink, flex-direction, and space-between properties
- Update align-self flex-start/end to justify-self start/end for grid
- Apply changes to both builtin and PicoCSS override stylesheets
This completes the systematic conversion from Flexbox to CSS Grid
layouts throughout the modal interface as requested.
- Changed settings panel from flex to CSS Grid layout
- When open, settings panel covers the entire modal with absolute positioning
- Uses grid-template-columns: 1fr with 20px gap and align-content: start
- Added background color and z-index for proper overlay behavior
- Updated both PicoCSS and built-in CSS versions
- Increased font-size from 13px to 18px for .uncloseai-btn-control (toolbelt buttons)
- Moved code copy button to bottom-left and increased size to 18px
- Increased background opacity from 0.7 to 0.9 for code copy button
- Changed message backgrounds from solid colors to 95% opacity for better visibility
- Updated both PicoCSS and built-in CSS versions
- Updated .uncloseai-btn-small font-size from 12px to 18px in both CSS files
- Makes emoji icons more visible and appropriately sized
- Improves button usability and visual hierarchy
- Increased width from 110px to 120px to accommodate 'uncloseai.' text
- Added white-space: nowrap to prevent any text wrapping
- Updated both PicoCSS and built-in CSS versions
- Wait for CSS to load via onload event before creating button
- Prevents button appearing unstyled on initial page load
- Fallback to direct modal opening if toggleUncloseaiEmbeddedModal not available
- Refactored button creation into separate function for better flow control
- Added 100ms delay when CSS needs to be loaded for floating button
- This ensures CSS rules are parsed before button is displayed
- Fixes issue where button appeared unstyled in top-left corner
- Moved 115+ inline styles from uncloseai-embed-modal.js to CSS classes
- Cleaned all inline styles from page-reader.js, widget-library.js, chat.js, models.js, file-upload.js
- Added CSS custom properties for theming support
- Created reusable CSS classes for buttons, containers, and UI elements
- Only retained legitimate dynamic styles (height calculations, position adjustments)
- Improved consistency with PicoCSS overrides
- Fixed the inline style replacement to maintain dynamic theming
- Added CSS custom properties (variables) for theme-aware styling
- CSS classes now use var() with fallback values for light theme
- JavaScript sets CSS custom properties on theme changes
- Maintains full light/dark theme compatibility for all button types
This ensures the replaced CSS classes work correctly with the existing theming system instead of using static colors.
- Replaced TTS, delete, and download buttons with utility classes
- Converted message action containers to CSS classes
- Replaced form labels and sections with semantic classes
- Reduced inline styles from 131 to 99 in main modal (32 styles removed)
- Updated CSS classes to match exact styling requirements
- Added uncloseai-btn-control class for standard modal action buttons
- Replaced control button inline styles with CSS class
- Reduced inline styles from 131 to 118 in main modal file
- Established pattern for systematic cleanup of remaining 200+ inline styles
- Added comprehensive utility CSS classes to both builtin and pico stylesheets
- Replaced copy button, close button, title container, and header right styling
- 208 total inline styles identified across codebase
- Started systematic replacement with reusable CSS classes
- Convert CSS links, script sources, image sources, and navigation links
- Use current page URL as base for proper relative URL resolution
- Skip data: URLs, fragments, and protocol-relative URLs
- Ensure all assets load properly in new window context
- Convert relative CSS URLs to absolute URLs using current origin
- Ensure translated pages can load original blog CSS in new window
- Maintain modal functionality with external CSS files
- Skip URLs that are already absolute (http/https or protocol-relative)
- Add logging to see how many CSS links are found
- Log each CSS file being inlined and success/failure
- Help diagnose why translated pages may not have modal styling
- Fetch external uncloseai CSS files and inline them as <style> tags
- Replace body content with translated version while preserving page structure
- Ensure new window is self-contained and doesn't need external CSS requests
- Maintain new window approach to avoid breaking current page
The CSS refactoring broke translated page rendering. The original function
was working correctly by translating the complete HTML document structure.
Translated pages don't need modal CSS, just the original page styling.
- Update translateCurrentPage() to preserve original page HTML structure
- Extract only text content for translation while keeping head/styles
- Create properly formatted translated page with clean typography
- Fix issue where translated pages opened in new windows lacked CSS styling
- Change CSS loading logic to detect actual PicoCSS link tags on page
- Blog sites without PicoCSS now correctly load uncloseai-modal-builtin.css
- PicoCSS sites load uncloseai-modal-pico.css with proper overrides
- Fix modal appearing full-screen on blog sites that don't use PicoCSS
- Remove all inline CSS from translate-modal.js, tts-modal.js, and widget-library.js
- Replace inline styles with CSS classes in both builtin and pico CSS files
- Eliminate USE_CUSTOM_STYLING conditionals from styling code
- Add proper CSS classes: translate-modal-*, tts-modal-*, widget-*
- Maintain all functionality while achieving clean separation of concerns
- Fix modal sizing issues on large displays through proper PicoCSS overrides
- Support responsive design with mobile-first approach (≤480px full screen)
- Pass all tests: formatting, exports, translations, and integration
