diff --git a/index.html b/index.html
index 487bd39..6de249c 100644
--- a/index.html
+++ b/index.html
@@ -51,8 +51,8 @@
html body div[class*="chat-launcher"],
html body button[aria-label*="chat"],
html body button[title*="chat"] {
- right: 16px !important;
- bottom: 80px !important;
+ right: 80px !important;
+ bottom: 24px !important;
width: 48px !important;
height: 48px !important;
font-size: 20px !important;
@@ -64,52 +64,13 @@
html body div[class*="chat-launcher"],
html body button[aria-label*="chat"],
html body button[title*="chat"] {
- right: 12px !important;
- bottom: 70px !important;
+ right: 70px !important;
+ bottom: 24px !important;
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
}
}
-
- /* Override any inline styles */
- div[style*="bottom"] {
- bottom: 24px !important;
- right: 120px !important;
- }
-
- /* Reposition existing contact button */
- .fixed.bottom-6.right-6 {
- bottom: 24px !important;
- right: 130px !important;
- z-index: 9998 !important;
- width: 52px !important;
- height: 52px !important;
- border-radius: 0.5rem !important;
- padding: 0 !important;
- display: flex !important;
- 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;
- }
- }
@@ -152,65 +113,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) {
- 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('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');
}
});
-
- // Also reposition chat containers
- const chatContainers = document.querySelectorAll('[class*="chat-container"], [class*="chat-popup"], [class*="chat-widget"]');
- chatContainers.forEach(container => {
- if (container) {
- 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
+ }, 3000);
// 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) {
- 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('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 06973d6..dd53fdb 100644
--- a/src/components/AccessibilityToggle.tsx
+++ b/src/components/AccessibilityToggle.tsx
@@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
{/* Toggle Button */}