/**
 * Custom Accessibility Widget Styles
 * Theme: Green (#198754)
 * Mobile & Tablet Responsive
 */

/* ========================================
   THEME CUSTOMIZATION
   ======================================== */

/* Widget Icon Button */
._access-icon {
    --_access-icon-bg: #3b5998 !important;
    --_access-icon-color: #fff !important;
    --_access-icon-width: 56px !important;
    --_access-icon-height: 56px !important;
    --_access-icon-bottom: 20px !important;
    --_access-icon-right: 20px !important;
    --_access-icon-border-radius: 50% !important;
    --_access-icon-z-index: 9999 !important;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4) !important;
    transition: all 0.3s ease !important;
}

._access-icon:hover {
    --_access-icon-transform-hover: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.6) !important;
}

/* Widget Menu Panel */
._access-menu {
    --_access-menu-background-color: #ffffff !important;
    --_access-menu-border: solid 2px #198754 !important;
    --_access-menu-border-radius: 12px !important;
    --_access-menu-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    --_access-menu-bottom: 90px !important;
    --_access-menu-right: 20px !important;
}

/* Menu Header */
._access-menu ._text-center {
    --_access-menu-header-color: #198754 !important;
    --_access-menu-header-font-size: 20px !important;
    --_access-menu-header-font-weight: 600 !important;
}

/* Menu Buttons */
._access-menu ul li button {
    --_access-menu-item-button-background: #f8f9fa !important;
    --_access-menu-item-button-border: solid 1px #e0e0e0 !important;
    --_access-menu-item-button-border-radius: 8px !important;
    --_access-menu-item-color: #333 !important;
    min-height: 48px !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
}

._access-menu ul li button:hover {
    --_access-menu-item-button-hover-background-color: #e8f5e9 !important;
    --_access-menu-item-button-hover-color: #198754 !important;
    border-color: #198754 !important;
}

._access-menu ul li button.active {
    --_access-menu-item-button-active-background-color: #198754 !important;
    --_access-menu-item-button-active-color: #ffffff !important;
    border-color: #198754 !important;
}

/* ========================================
   MOBILE & TABLET RESPONSIVENESS
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    ._access-icon {
        --_access-icon-width: 52px !important;
        --_access-icon-height: 52px !important;
        --_access-icon-bottom: 16px !important;
        --_access-icon-right: 16px !important;
    }

    ._access-menu {
        --_access-menu-width: 320px !important;
        --_access-menu-bottom: 80px !important;
        --_access-menu-right: 16px !important;
    }
}

/* Mobile (≤ 767px) */
@media (max-width: 768px) {
    ._access-icon {
        --_access-icon-width: 50px !important;
        --_access-icon-height: 50px !important;
        --_access-icon-bottom: 16px !important;
        --_access-icon-right: 16px !important;
        font-size: 28px !important;
    }

    ._access-menu {
        --_access-menu-width: calc(100vw - 32px) !important;
        --_access-menu-max-width: 360px !important;
        --_access-menu-bottom: 76px !important;
        --_access-menu-right: 16px !important;
        --_access-menu-max-height: calc(100vh - 120px) !important;
    }

    ._access-menu ul li button {
        min-height: 48px !important;
        min-width: 48px !important;
        font-size: 14px !important;
        padding: 12px 10px !important;
        text-indent: 32px !important;
    }

    ._access-menu ul li button:before {
        font-size: 20px !important;
        left: 8px !important;
    }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
    ._access-icon {
        --_access-icon-width: 48px !important;
        --_access-icon-height: 48px !important;
        --_access-icon-bottom: 12px !important;
        --_access-icon-right: 12px !important;
        font-size: 26px !important;
    }

    ._access-menu {
        --_access-menu-width: calc(100vw - 24px) !important;
        --_access-menu-bottom: 70px !important;
        --_access-menu-right: 12px !important;
    }

    ._access-menu ._text-center {
        --_access-menu-header-font-size: 18px !important;
    }
}

/* ========================================
   SAFE POSITIONING (NO OVERLAP)
   ======================================== */

/* Ensure widget doesn't overlap form navigation buttons */
._access-icon,
._access-menu {
    pointer-events: auto !important;
}

/* Prevent overlap with signature pad, camera, and form buttons */
@media (max-height: 600px) {
    ._access-icon {
        --_access-icon-bottom: 8px !important;
    }

    ._access-menu {
        --_access-menu-max-height: 400px !important;
        --_access-menu-bottom: 60px !important;
    }
}

/* ========================================
   TOUCH-FRIENDLY ENHANCEMENTS
   ======================================== */

/* Minimum touch target size: 48px × 48px (WCAG AAA) */
._access-icon {
    min-width: 48px !important;
    min-height: 48px !important;
}

._access-menu ul li button {
    min-height: 48px !important;
    min-width: 48px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(25, 135, 84, 0.2) !important;
}

/* Adequate spacing between buttons */
._access-menu ul {
    gap: 8px !important;
    padding: 8px !important;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Prevent layout shift */
._access-icon,
._access-menu {
    will-change: transform, opacity !important;
}

/* Smooth transitions */
._access-icon,
._access-menu,
._access-menu ul li button {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   LANDSCAPE ORIENTATION SUPPORT
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    ._access-menu {
        --_access-menu-max-height: calc(100vh - 80px) !important;
        --_access-menu-bottom: 10px !important;
    }
}

/* ========================================
   SCROLLBAR STYLING (MOBILE)
   ======================================== */

._access-menu ul::-webkit-scrollbar {
    width: 6px !important;
}

._access-menu ul::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

._access-menu ul::-webkit-scrollbar-thumb {
    background: #198754 !important;
    border-radius: 10px !important;
}

._access-menu ul::-webkit-scrollbar-thumb:hover {
    background: #146c43 !important;
}

/* ========================================
   CHAT PAGE SPECIFIC POSITIONING
   Prevents overlap with send button
   ======================================== */

/* Hide floating accessibility button on chat page (moved to header) */
body.chat-page ._access-icon {
    display: none !important;
}

body.chat-page ._access-menu {
    display: none !important;
}