/* Pandy chat bubble. Moved here from Website > Custom Code (footer) on 1 Nov 2026. */

/* Pandy's size: smaller on phones, where 72px covered the cookie banner's buttons (6 Nov). */
:root {
    --ssu-pandy-size: 72px;
}
@media (max-width: 575px) {
    :root {
        --ssu-pandy-size: 56px;
    }
}

/* Round Pandy face instead of Dify's default button. Its distance from the bottom comes from
   --dify-chatbot-bubble-button-bottom, which bubble.js raises above the cookie banner. */
#dify-chatbot-bubble-button {
    width: var(--ssu-pandy-size) !important;
    height: var(--ssu-pandy-size) !important;
    border-radius: 50% !important;
    background: #fff url('/ssu_ai_knowledge/static/description/icon.png') center/cover no-repeat !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25) !important;
}
#dify-chatbot-bubble-button svg {
    opacity: 0 !important;
}

/* The window sits just above Pandy and stays put while the page scrolls. Since early Nov Dify's
   embed draws it position: absolute at Pandy's own height, so it covered Pandy and scrolled
   away with the page (6 Nov). The bottom 4rem is Dify's gray strip under the chat: it is clipped
   off, and the window is lowered by the same 4rem so no see-through gap is left above Pandy.
   Clicks on the clipped part reach Pandy underneath. */
#dify-chatbot-bubble-window {
    position: fixed !important;
    bottom: calc(var(--dify-chatbot-bubble-button-bottom, 1rem) + var(--ssu-pandy-size) + .75rem - 4rem) !important;
    width: 24rem !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100vh - var(--dify-chatbot-bubble-button-bottom, 1rem) - var(--ssu-pandy-size) + 2rem) !important;
    height: min(44rem, calc(100vh - var(--dify-chatbot-bubble-button-bottom, 1rem) - var(--ssu-pandy-size) + 2rem)) !important;
    min-height: 0 !important;
    clip-path: inset(0 0 4rem 0 round 1rem) !important;
}
#dify-chatbot-bubble-window[style*="48%"] {
    width: min(44rem, calc(100vw - 2rem)) !important;
    height: calc(100vh - var(--dify-chatbot-bubble-button-bottom, 1rem) - var(--ssu-pandy-size) + 2rem) !important;
}

/* Staff get Pandy on the left, clear of Odoo's own chat bubbles. */
html.ssu-staff #dify-chatbot-bubble-button,
html.ssu-staff #dify-chatbot-bubble-window {
    right: auto !important;
    left: 1rem !important;
}

/* "Ask Pandy!" label beside the bubble (Boon Bin, 29 Oct), level with Pandy's middle. */
#ssu-ask-pandy {
    position: fixed;
    bottom: calc(var(--dify-chatbot-bubble-button-bottom, 1rem) + var(--ssu-pandy-size) / 2 - 15px);
    right: calc(1rem + var(--ssu-pandy-size) + .6rem);
    z-index: 2147483639;
    display: none;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: #04308F;
    color: #fff;
    font: 600 14px/1.2 system-ui, sans-serif;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
    white-space: nowrap;
}
#ssu-ask-pandy:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border: 6px solid transparent;
    border-right: 0;
    border-left-color: #04308F;
}
html.ssu-staff #ssu-ask-pandy {
    right: auto;
    left: calc(1rem + var(--ssu-pandy-size) + .6rem);
}
html.ssu-staff #ssu-ask-pandy:after {
    right: auto;
    left: -6px;
    border-left: 0;
    border-right: 6px solid #04308F;
}
@media (max-width: 575px) {
    #ssu-ask-pandy {
        font-size: 13px;
        padding: .4rem .75rem;
    }
}