diff --git a/index.html b/index.html
index f0c6179..487bd39 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,33 @@
transform: none !important;
}
+ /* Mobile responsive positioning */
+ @media (max-width: 768px) {
+ html body div[class*="chat-button"],
+ html body div[class*="chat-launcher"],
+ html body button[aria-label*="chat"],
+ html body button[title*="chat"] {
+ right: 16px !important;
+ bottom: 80px !important;
+ width: 48px !important;
+ height: 48px !important;
+ font-size: 20px !important;
+ }
+ }
+
+ @media (max-width: 640px) {
+ html body div[class*="chat-button"],
+ html body div[class*="chat-launcher"],
+ html body button[aria-label*="chat"],
+ html body button[title*="chat"] {
+ right: 12px !important;
+ bottom: 70px !important;
+ width: 44px !important;
+ height: 44px !important;
+ font-size: 18px !important;
+ }
+ }
+
/* Override any inline styles */
div[style*="bottom"] {
bottom: 24px !important;
@@ -64,6 +91,25 @@
align-items: center !important;
justify-content: center !important;
}
+
+ /* Mobile positioning for contact button */
+ @media (max-width: 768px) {
+ .fixed.bottom-6.right-6 {
+ right: 16px !important;
+ bottom: 16px !important;
+ width: 48px !important;
+ height: 48px !important;
+ }
+ }
+
+ @media (max-width: 640px) {
+ .fixed.bottom-6.right-6 {
+ right: 12px !important;
+ bottom: 12px !important;
+ width: 44px !important;
+ height: 44px !important;
+ }
+ }
@@ -106,14 +152,25 @@
// Force reposition after chat loads
setTimeout(() => {
+ const isMobile = window.innerWidth <= 768;
+ const isSmallMobile = window.innerWidth <= 640;
+
const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
chatButtons.forEach(button => {
if (button) {
- button.style.setProperty('bottom', '24px', 'important');
- button.style.setProperty('right', '120px', 'important');
+ if (isSmallMobile) {
+ button.style.setProperty('bottom', '70px', 'important');
+ button.style.setProperty('right', '12px', 'important');
+ } else if (isMobile) {
+ button.style.setProperty('bottom', '80px', 'important');
+ button.style.setProperty('right', '16px', 'important');
+ } else {
+ button.style.setProperty('bottom', '24px', 'important');
+ button.style.setProperty('right', '120px', 'important');
+ }
button.style.setProperty('position', 'fixed', 'important');
button.style.setProperty('z-index', '9999', 'important');
- button.style.setProperty('transform', 'none', 'important'); // Ensure no transform interferes
+ button.style.setProperty('transform', 'none', 'important');
}
});
@@ -121,20 +178,39 @@
const chatContainers = document.querySelectorAll('[class*="chat-container"], [class*="chat-popup"], [class*="chat-widget"]');
chatContainers.forEach(container => {
if (container) {
- container.style.setProperty('bottom', '24px', 'important');
- container.style.setProperty('right', '120px', 'important');
- container.style.setProperty('position', 'fixed', 'important'); // Ensure position is fixed
+ if (isSmallMobile) {
+ container.style.setProperty('bottom', '70px', 'important');
+ container.style.setProperty('right', '12px', 'important');
+ } else if (isMobile) {
+ container.style.setProperty('bottom', '80px', 'important');
+ container.style.setProperty('right', '16px', 'important');
+ } else {
+ container.style.setProperty('bottom', '24px', 'important');
+ container.style.setProperty('right', '120px', 'important');
+ }
+ container.style.setProperty('position', 'fixed', 'important');
}
});
}, 3000); // Increased delay to 3 seconds
// Continuous repositioning - run every 500ms
setInterval(() => {
+ const isMobile = window.innerWidth <= 768;
+ const isSmallMobile = window.innerWidth <= 640;
+
const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
chatButtons.forEach(button => {
if (button) {
- button.style.setProperty('bottom', '24px', 'important');
- button.style.setProperty('right', '120px', 'important');
+ if (isSmallMobile) {
+ button.style.setProperty('bottom', '70px', 'important');
+ button.style.setProperty('right', '12px', 'important');
+ } else if (isMobile) {
+ button.style.setProperty('bottom', '80px', 'important');
+ button.style.setProperty('right', '16px', 'important');
+ } else {
+ button.style.setProperty('bottom', '24px', 'important');
+ button.style.setProperty('right', '120px', 'important');
+ }
button.style.setProperty('position', 'fixed', 'important');
button.style.setProperty('z-index', '9999', 'important');
button.style.setProperty('transform', 'none', 'important');
diff --git a/src/components/AccessibilityToggle.tsx b/src/components/AccessibilityToggle.tsx
index f3cbbc2..06973d6 100644
--- a/src/components/AccessibilityToggle.tsx
+++ b/src/components/AccessibilityToggle.tsx
@@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
{/* Toggle Button */}