/**
 * DOSJE chatbot (Samajik Sahayak) embed. Markup and behaviour:
 * custom-functions/chatbot-integration.php and assets/js/chatbot.js.
 *
 * The chatbot app runs in an iframe anchored to the bottom-right corner and
 * clipped to its own 69x69 launcher until the user opens it.
 */

/* Keep Elementor icon SVG hidden even after zoom wipe removes its inline display:none */
svg.e-font-icon-svg-symbols { display: none !important; }

/* The container carries .uwaw so the UX4G text-size sweep
   ("body > *:not(.uwaw)") does not zoom it. Undo the panel styles that
   .uwaw brings; the children are fixed to the viewport themselves. */
#dosje-cb.uwaw {
    position: static;
    width: auto;
    min-height: 0;
    max-width: none;
    max-height: none;
    background: none;
    border-radius: 0;
    filter: none;
    transition: none;
    overflow: visible;
    z-index: auto;
}

#dosje-cb-wrap {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 117px;
    height: 117px;
    z-index: 1003; /* above Important Links (1002), below the cookie banner (1050) */
    opacity: 0;
    transition: opacity .2s ease;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .25));
    /* Only the visible (clipped) part of the iframe takes clicks */
    pointer-events: none;
}

#dosje-cb-wrap.dosje-ready { opacity: 1; }
#dosje-cb-wrap.dosje-open { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .22)); }
#dosje-cb-wrap.dosje-hidden { visibility: hidden; }
/* While the app switches from launcher to panel, keep the iframe invisible
   so its half-drawn panel in the small collapsed box is never seen */
#dosje-cb-wrap.dosje-opening { opacity: 0; transition: none; }

#dosje-chatbot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    /* Not clickable until the app has loaded (see script) */
    pointer-events: none;
    /* Collapsed: show only the chatbot's own 69x69 launcher button */
    clip-path: inset(24px round 35px);
}

#dosje-cb-wrap.dosje-ready #dosje-chatbot { pointer-events: auto; }

/* Our Minimise / Close buttons, laid over the chat panel header */
#dosje-cb-controls {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 104px;
    height: 61px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    z-index: 1004;
    background-image: linear-gradient(145.804deg, #153A5E, #2B79C7 98.822%);
    background-position: right top;
    background-repeat: no-repeat;
}

#dosje-cb-controls.dosje-show { display: flex; }
/* Hidden until the chat panel is revealed, then fades in with it */
#dosje-cb-controls { transition: opacity .2s ease; }
#dosje-cb-controls.dosje-opening { opacity: 0; transition: none; }

#dosje-cb-controls button,
#dosje-cb-launcher {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
}

#dosje-cb-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #fff;
    transition: opacity .2s;
}

#dosje-cb-controls button:hover { opacity: .7; }
#dosje-cb-controls svg { width: 20px; height: 20px; fill: currentColor; }

#dosje-cb-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 69px;
    height: 69px;
    display: none;
    z-index: 1003;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .25);
    transition: transform .2s;
}

#dosje-cb-launcher.dosje-show { display: block; }
/* Stand-in for the app's launcher while opening; must not steal the mouse-up */
#dosje-cb-launcher.dosje-placeholder { display: block; pointer-events: none; }
#dosje-cb-launcher:hover { transform: scale(1.05); }

#dosje-cb-launcher img {
    display: block;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    object-fit: cover;
}

/* GIGW 8.22: visible focus on the controls we own */
#dosje-cb-launcher:focus-visible,
#dosje-cb-controls button:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}
#dosje-cb-launcher:focus-visible {
    outline-color: #014B92;
    outline-offset: 3px;
}