/* Chat widget slot. The host (this theme) owns the box; the mounted panel is position:static. */
/* >450px: floating top-right card, sitting 16px clear of the 40px contact banner
   (the banner is position:sticky at >=768px and in normal flow at the top below that). */
#gembah-chat-slot {
    position: fixed;
    top: 56px; /* 40px banner + 16px gap */
    right: 16px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 72px); /* 56px top + 16px bottom */
    /* Card chrome — only while floating; dropped again in the fullscreen block below.
       overflow:clip so the panel's corners are cut to the radius. */
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%), 0 8px 24px rgb(0 0 0 / 10%);
    border-radius: 10px;
    overflow: clip;
}
/* <=450px: the chat fills the viewport. dvh (with a vh fallback) so a mobile browser's
   URL bar doesn't clip the bottom of the panel; width:100% (not 100vw) avoids a
   scrollbar-gutter horizontal sliver. */
@media screen and (max-width: 450px) {
    #gembah-chat-slot {
        top: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        /* Edge-to-edge: no shadow to cast and no corners to round. */
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }
}
/* Collapse when closed — otherwise it blocks clicks across the page. */
#gembah-chat-slot:not([data-gembah-open]) {
    display: none;
}
/* The chat-bubble icon prepended to the CTA when chat takes over the banner
   button (an inline SVG built by addCtaIcon in chat-widget.js). Sized like an
   FA icon: 1em square, slightly dropped to sit on the text baseline. */
#contact_us_target .gembah-chat-cta-icon {
    margin-right: 6px;
}
#contact_us_target .gembah-chat-cta-icon svg {
    height: 1em;
    width: 1em;
    vertical-align: -0.125em;
}