/*
 * DataNumen Plugin CSS Overrides
 *
 * Version: 1.2
 * Last Updated: 2026-11-03
 *
 * Description:
 *   CSS rules that override default styles of third-party WordPress plugins.
 *   Both the main site and the blog site use the same copy of this file.
 *
 * Version History:
 *   v1.2 (2026-11-03)
 *     - Position the collapsed AI Engine Chatbot 10px above the visible
 *       CookieYes banner using CSS Anchor Positioning where supported.
 *     - Use :has() to detect banner visibility independently of DOM order.
 *     - For browsers without Anchor Positioning, use fixed-position
 *       fallbacks (125px desktop / 205px plus safe area mobile).
 *     - Restore AI Engine default positioning when the banner is hidden
 *       or the chat window is opened; preserve existing CookieYes layout.
 *   v1.1 (2026-11-02)
 *     - Set CookieYes mobile horizontal button order to match desktop:
 *       Customise, Reject All, Accept All (left to right).
 *     - On screens up to 359px wide, stack buttons vertically using
 *       the original mobile order: Accept All, Customise, Reject All.
 *     - Kept all other CSS rules unchanged.
 *   v1.0 (2026-11-02)
 *     - Established the baseline from the original supplied CSS.
 *     - Includes BetterDocs, CookieYes, and AI Engine Chatbot overrides.
 */

/* ========================================
   BetterDocs
   ======================================== */

.betterdocs-search-form-wrap {
    margin-top: 10%;
}
.betterdocs-searchform {
    margin-bottom: 20px;
}
.docs-single-title .betterdocs-entry-title {
    text-transform: none !important;
}
body.single-docs .betterdocs-wrapper {
padding: 12.5em 0 8em !important;
}
.docs-sub-cat {
    height: 9.5em;
    overflow-y: scroll !important;
    overflow: hidden;
}
.docs-sub-cat::-webkit-scrollbar-thumb {
    background-color: #C4C4C4;
    outline: 0px solid #ffffff;
    border-radius: 10px;
}
.docs-sub-cat::-webkit-scrollbar {
    width: 0.3em;
    background: #F3F3F3;
    border-radius: 10px;
}

/* ========================================
   CookieYes
   ======================================== */
   
/*
 * 2026-11-02: Optimize CookieYes bottom banner
 * on mobile devices.
 */

@media (max-width: 760px) {

    /* Reduce banner padding. */
    .cky-consent-container.cky-banner-bottom
    .cky-consent-bar {
        padding: 12px 14px !important;
    }

    /* Reduce title size and spacing. */
    .cky-consent-container .cky-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 8px !important;
    }

    /* Reduce description spacing. */
    .cky-consent-container .cky-notice-des {
        margin: 0 0 12px !important;
    }

    .cky-consent-container .cky-notice-des p {
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }

    /* Display three buttons horizontally. */
    .cky-consent-container
    .cky-notice-btn-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Compact but touch-friendly buttons. */
    .cky-consent-container
    .cky-notice-btn-wrapper .cky-btn {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Horizontal order: Customise, Reject All, Accept All (same as desktop). */
    .cky-consent-container
    .cky-notice-btn-wrapper .cky-btn-customize {
        order: 1 !important;
    }

    .cky-consent-container
    .cky-notice-btn-wrapper .cky-btn-reject {
        order: 2 !important;
    }

    .cky-consent-container
    .cky-notice-btn-wrapper .cky-btn-accept {
        order: 3 !important;
    }
}

/* Narrow screens: Stack buttons in original mobile top-to-bottom order. */
@media (max-width: 359px) {

    .cky-consent-container
    .cky-notice-btn-wrapper {
        grid-template-columns: 1fr !important;
    }

    .cky-consent-container
    .cky-notice-btn-wrapper .cky-btn-accept {
        order: 1 !important;
    }

    .cky-consent-container
    .cky-notice-btn-wrapper .cky-btn-customize {
        order: 2 !important;
        grid-column: auto !important;
    }

    .cky-consent-container
    .cky-notice-btn-wrapper .cky-btn-reject {
        order: 3 !important;
    }
}
      
/* ========================================
   AI Engine Chatbot
   ======================================== */
   
/* 2025-06-01: AI Engine: Add an avatar and adjust the icon text for the chatbot */

/* Add photo above the text using CSS background */
.mwai-icon-text::before {
    content: "";
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    background-image: url('https://www.datanumen.com/images/avatars/lily.png') !important;
    background-size: cover !important; /* or 'contain' to fit entire image */
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 50% !important; /* Makes it circular */
    margin: 0 auto 12px auto !important;
    border: 3px solid white !important; /* Optional: white border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; /* Optional: shadow */
}

/* 2025-06-01: Adjust chatbot text */
.mwai-icon-text {
		font-size: 15px !important;
		max-width: 300px !important;
    padding: 15px 15px !important;
		border: 2px solid #007cba !important;
		/* 2026-02-07: After AI Engine upgrades, we have to add the following rules */
		background: #ffffff !important;
		color: #000000 !important;	
}

/*
 * 2026-11-03: Keep the collapsed AI Engine Chatbot above the visible
 * CookieYes banner. Prefer CSS Anchor Positioning (10px gap), with
 * fixed-position fallbacks for browsers without anchor() support.
 * When the banner is hidden or the chat is open, use AI Engine defaults.
 */

/* Desktop fallback: Only while the CookieYes banner is visible. */
@media (min-width: 761px) {
    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right:not(.mwai-open) {
        bottom: 125px !important;
    }
}

/* Mobile fallback: Only while the CookieYes banner is visible. */
@media (max-width: 760px) {
    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right:not(.mwai-open)
    > .mwai-trigger {
        bottom: calc(205px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Make the visible CookieYes banner the positioning anchor. */
.cky-consent-container.cky-banner-bottom:not(.cky-hide) {
    anchor-name: --dn-cookie-banner;
}

/* Modern browsers: Use the banner's actual top edge (plus 10px). */
@supports (bottom: anchor(top)) {
    @media (min-width: 761px) {
        body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
        .mwai-chat.mwai-window.mwai-bottom-right:not(.mwai-open) {
            position-anchor: --dn-cookie-banner;
            bottom: calc(anchor(top) + 10px) !important;
        }
    }

    @media (max-width: 760px) {
        body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
        .mwai-chat.mwai-window.mwai-bottom-right:not(.mwai-open)
        > .mwai-trigger {
            position-anchor: --dn-cookie-banner;
            bottom: calc(anchor(top) + 10px) !important;
        }
    }
}

/* 2026-11-01: Fix AI Engine outline SVG icons */
.mwai-chatbot-container svg[fill="none"],
.mwai-chatbot-container svg[fill="none"] * {
    fill: none !important;
}

/* 2026-11-02: Hide AI Engine welcome message on
   Online Repair CPT pages, but keep the Chat Icon. */
body.single-wponline .mwai-trigger .mwai-icon-text-container {
    display: none !important;
}

/*
 * 2026-11-02: Hide AI Engine automatic welcome messages
 * on all mobile pages for the following reasons:
 * 1. On mobile devices, the chat icon is about 1/6 of the device width, which is prominent enough for the user to find it.
 * 2. On mobile devices, auto welcome message will hide about 2/3 part of the page when it pop up, which will make the user experience worse.
 * Note: We will keep Chat Icon and normal chat functionality.
 */
@media (max-width: 760px) {
    .mwai-chat.mwai-window
    .mwai-trigger .mwai-icon-text-container {
        display: none !important;
    }
}