/* Modification needed: styles which should be modified per-page basis  */

/* Accessibility button and panel which need to be moved above Bulb Messenger button */
button[title="Open accessibility tools"],
.djacc__panel.djacc__panel--active {
    bottom: 3rem !important;
}

/* Messenger styles are placed in "messenger" layer on top of this file 
 * which causes the styles not to leak into other parts of the web page.
 *
 * Since Bootstrap styles are not in a layer, they override the Bulb Messenger styles 
 * which is why the following overrides are needed to bring styles back to the default state.
 */
.bulb-messenger-element {
    --bui-popup-panel-toggle-button-margin-right: 0.625rem;

    /* Create a round toggle button */
    & .popup-panel-toggle-button button {
       border-radius: 50rem;
    }

    /* Remove default message margins */
    & .bui-message-content p {
        margin-block: 0;
    }

    & bui-message-input {
        --bui-message-input-border-color: lightgray;

        /* Textarea receives accessibility outline when focused so we make it not visible */
        & .bui-message-textarea:focus-visible {
            outline: transparent !important
        }

        /* Set accessibility outline on entire message input element when textarea is focused within it */
        & .bui-message-input:focus-within {
            outline: 2px solid #e0600b !important;
            outline-offset: -2px !important;
        }
    }

    /* Remove max-width which makes svg icons too small */
    & bui-svg-icon {
        & svg {
            max-width: unset;
        }
    }

    /* Align items within header */
    & .bui-messenger-dialog-header {
        /* Bring back border-radius which Bootstrap removed from buttons in close conversation dialog */
        & button {
            border-radius: 50rem;

            /* Remove focus ring style. Focus-visible outline remains displayed. */
            &:focus {
                outline: transparent;
            }
        }
    }
    
    /* Bring back border-radius which Bootstrap removed from buttons in close conversation dialog */
    & .bui-messenger-close-conversation-dialog-actions {
        & button {
            border-radius: .6875rem;
        }
    }
}