/*
 * DataNumen Plugin CSS Overrides
 *
 * Version: 1.3
 * Last Updated: 2026-11-04
 *
 * 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.3 (2026-11-04)
 *     - Keep the expanded AI Engine chat window 10px above the visible
 *       CookieYes banner, not just the collapsed Chat Icon.
 *     - Override AI Engine's inline top inset while the banner is visible.
 *     - On mobile, fit the expanded window between the viewport top (10px)
 *       and the banner; keep chat messages scrollable and input accessible.
 *     - Extend 125px/205px fallback positioning to expanded chat windows.
 *     - Restore AI Engine defaults when CookieYes is hidden, and leave
 *       fullscreen mode outside the expanded-window overrides.
 *   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-04: Keep both collapsed and expanded AI Engine Chatbot
 * above the visible CookieYes bottom banner with a 10px gap.
 * CSS Anchor Positioning follows the banner's actual height; older
 * browsers use fixed-bottom fallbacks. Restore AI Engine defaults
 * whenever the CookieYes banner is hidden.
 */

/* Desktop fallback: Chat Icon and expanded chat window. */
@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;
    }

    /* Override AI Engine's inline top inset when chat opens. */
    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen) {
        top: auto !important;
        bottom: 125px !important;
    }
}

/* Mobile fallback, plus height management for expanded chat. */
@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;
    }

    /* Both top and bottom insets constrain height to the space available. */
    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen) {
        top: 10px !important;
        bottom: calc(205px + env(safe-area-inset-bottom, 0px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen)
    > .mwai-window-box {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
    }

    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen)
    .mwai-body {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen)
    .mwai-conversation {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
    }

    body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
    .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen)
    .mwai-input {
        flex-shrink: 0 !important;
    }
}

/* Anchor is active only while CookieYes displays its bottom banner. */
.cky-consent-container.cky-banner-bottom:not(.cky-hide) {
    anchor-name: --dn-cookie-banner;
}

/* Modern browsers: Follow the banner's real top edge (10px above). */
@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;
        }

        body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
        .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen) {
            position-anchor: --dn-cookie-banner;
            top: auto !important;
            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;
        }

        body:has(.cky-consent-container.cky-banner-bottom:not(.cky-hide))
        .mwai-chat.mwai-window.mwai-bottom-right.mwai-open:not(.mwai-fullscreen) {
            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;
    }
}