/* Sidebar */
#toar-chatbot-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    width: min(30rem, 90vw);
    max-width: 100vw;

    box-shadow: -0.3rem 0 1rem rgba(0, 0, 0, 0.25);

    transform: translateX(100%);
    transition: transform 0.3s ease;

    overflow: hidden;
    z-index: 1000;

    display: flex;
    flex-direction: row;
    border-radius: 5px 0 0 5px;
}

#toar-chatbot-offcanvas.active {
    transform: translateX(0);
}

/* Resize Handle */
#toar-chatbot-resize-handle {
    width: .5em;
    min-width: .5em;
    cursor: ew-resize;
    background: var(--bs-tertiary);
    opacity: 0.4;
    transition: opacity 0.2s;
    border-radius: 5px 0 0 5px;
}

#toar-chatbot-resize-handle:hover,
#toar-chatbot-resize-handle.dragging {
    opacity: 1;
}


/* Mobile */
@media (max-width: 48rem) {
    #toar-chatbot-offcanvas {
        width: 100vw;
    }
}