@layer messenger;
@import url("/resources/messenger/styles.css") layer(messenger);

:root {
    /* Overrides primarily set for conversation closed divider color */
    --bui-surface-500: var(--neutral-500);
    --bui-neutral-600: var(--neutral-600);
}

.floating-buttons {
    /* Bring the floating buttons up in order to place the chat popup button underneath them */
    bottom: 4.5rem;
}

#chatbot-toggle-button {
    /* Remove jkc chat button since chat is in popup mode */
    display: none;
}

bui-button.popup-panel-toggle-button .bui-button[data-shape=circle] { 
    /* This is set to shrink bui-button to the size of jkc buttons */
    --bui-font-size: 1.125rem;
}

.search .search-field {
    /* Jkc search field overlaps chat panek so z-index is reduced from 550 */
    z-index: 100;
}

.popup-panel {
    margin-right: 1.125rem;
    z-index: 1000;
}

.a11y-panel.chatbot-panel {
    top: unset;
    bottom: var(--space-16);
    height: 50vh;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    
    &[data-state="expanded"] {
        right: 4.5rem;
    }

    & .chatbot-panel-content {
        flex: 1;
        height: 100%;
        overflow: auto;
        overscroll-behavior: contain;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        background-color: #fff;
    }
}

chat-i-messenger-element.jkc-messenger-element {
    & .bui-messenger bui-message-list {
        /* Disable viewport scroll when scrolling within chat messages */
        overscroll-behavior: contain;
    } 

    & .bui-message a {
        /* Override link color in chat messages */
        color: var(--red-400);
    }

    /* Align items within header */
    & .bui-messenger-dialog-header {
        align-items: center;
        gap: 0.75rem;
        
        & .bui-messenger-dialog-close-button {
            display: flex;
        }
    }

    /* Style overrides for new Messenger version */
    & bui-participant-name {
        display: none;
    }

    /* Scrollbar */
    @supports (scrollbar-color: red blue) {
        * {
          scrollbar-color: var(--red-400) var(--neutral-200);
          scrollbar-width: thin;
        }
    }
}