/*
 * Docked Animati Chat (POC).
 *
 * The Chatwoot SDK injects the widget straight into <body>, outside Blazor's tree —
 * which is why these rules are global and not component-isolated CSS. When <body>
 * gets .animati-chat-docked, the floating bubble becomes a panel pinned to the
 * right, and the page content makes room for it.
 */

:root {
    --animati-chat-panel-width: 340px;
}

body.animati-chat-docked .woot-widget-holder {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--animati-chat-panel-width) !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: none !important;
}

/* The bubble goes away: the "Falar com a clínica" button opens and closes the panel. */
body.animati-chat-docked .woot--bubble-holder {
    display: none !important;
}

/* Applied to the page container that must not sit underneath the panel. */
body.animati-chat-docked .animati-chat-dock-offset {
    padding-right: var(--animati-chat-panel-width);
}

/* On narrow screens the panel takes over — there is no width left to split. */
@media (max-width: 768px) {
    body.animati-chat-docked .woot-widget-holder {
        width: 100% !important;
        border-left: none !important;
    }

    body.animati-chat-docked .animati-chat-dock-offset {
        padding-right: 0;
    }
}