@layer messenger;
@import url("/resources/bulb-chat-v1.2.0/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);

    --gov-color-primary: var(--red, #ca1720);
    --bui-font-family: inherit;
    --bui-upscale-factor: 1;
}

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: 1rem;
}

.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;
}

chat-i-messenger-element.bulb-messenger-element {
    --bui-popup-panel-toggle-button-color: #ab1717;
    --bui-popup-panel-header-background-color: #ab1717;
    --bui-message-input-send-icon-color: #ab1717;
    --bui-message-input-voice-icon-color: #ab1717;
    --bui-message-received-background: #ffffff;
    --bui-message-received-color: #22262a;
    --bui-message-sent-background: #9d9b9b;
    --bui-message-sent-color: #ffffff;

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

    /* Vertically center send button within the message input */
    .bui-message-input-send-button {
        align-self: center;
    }

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

.bulb-consent-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: var(--bui-popup-panel-background-color, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: inherit;
    overflow-y: auto;
}

.bulb-consent-text {
    font-size: 1rem;
    margin: 0;

    > p {
        margin-block: 0.375em;
    }
}

.bulb-consent-button {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    background-color: var(--gov-color-primary);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.bulb-consent-button:hover {
    opacity: 0.9;
}

.bulb-consent-link {
    color: var(--gov-color-primary);
    text-decoration: underline;
}

.bulb-footer-links {
    display: flex;
    gap: 1rem;
    padding: 0 0.75rem 0.375rem 0.75rem;
    
}

.bulb-footer-link {
    color: var(--gov-color-primary);
    text-decoration: underline;
}

/* Style overrides for new Messenger version */
.bulb-messenger-element {
    --bui-popup-panel-toggle-button-margin-right: 1rem;

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

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

    & bui-participant-name {
        display: none;
    }
}


/* a11y: Size */
.bulb-consent-overlay {
    gap: calc(1.25rem * var(--bui-upscale-factor));
    padding: calc(1.5rem * var(--bui-upscale-factor));
}

.bulb-consent-text {
    font-size: calc(1rem * var(--bui-upscale-factor));

    > p {
        margin-block: calc(0.375em * var(--bui-upscale-factor));
    }
}

.bulb-consent-button {
    padding: calc(0.5rem * var(--bui-upscale-factor)) calc(1.5rem * var(--bui-upscale-factor));
    font-size: calc(1rem * var(--bui-upscale-factor));
}

.chat-i-messenger .messenger-popup-panel {
    /* Variables: Popup Panel Header */
    --bui-popup-panel-header-height: calc(4rem * var(--bui-upscale-factor));
    --bui-popup-panel-header-title-font-size: calc(1.25rem * var(--bui-upscale-factor));
    --bui-popup-panel-header-padding-inline: calc(0.375rem * var(--bui-upscale-factor));
    --bui-popup-panel-header-action-button-font-size: calc(var(--bui-fs-300) * var(--bui-upscale-factor));
    --bui-popup-panel-header-action-button-padding-block: calc(0.375rem * var(--bui-upscale-factor));
    --bui-popup-panel-header-action-button-padding-inline: calc(0.5rem * var(--bui-upscale-factor));
    --bui-popup-panel-header-action-button-font-size: calc(1rem * var(--bui-upscale-factor));

    /* Variables: Messages */
    --chat-i-messenger-message-padding-block: calc(0.5rem * var(--bui-upscale-factor));
    --chat-i-messenger-message-padding-inline: calc(0.875rem * var(--bui-upscale-factor));

    /* Variables: Message Input */
    --chat-i-messenger-input-padding: calc(0.25rem * var(--bui-upscale-factor)) calc(0.375rem * var(--bui-upscale-factor));

    /* Variables: Send Button */
    --chat-i-messenger-send-button-size: calc(2rem * var(--bui-upscale-factor));
    --chat-i-messenger-send-button-icon-size: calc(1.25rem * var(--bui-upscale-factor));

    /* Variables: Close Conversation Dialog */
    --chat-i-messenger-close-dialog-header-title-font-size: calc(1.25rem * var(--bui-upscale-factor));
    --chat-i-messenger-close-dialog-close-button-icon-size: calc(1.125rem * var(--bui-upscale-factor));
    --chat-i-messenger-close-dialog-container-padding: calc(1rem * var(--bui-upscale-factor));
    --chat-i-messenger-close-dialog-message-margin: calc(1rem * var(--bui-upscale-factor)) 0 calc(1.5rem * var(--bui-upscale-factor)) 0;

    /* Variables: Close Dialog Action Buttons */
    --chat-i-messenger-close-dialog-action-button-font-size: calc(1rem * var(--bui-upscale-factor));
    --chat-i-messenger-close-dialog-action-button-padding-block: calc(0.625rem * var(--bui-upscale-factor));
    --chat-i-messenger-close-dialog-action-button-padding-inline: calc(0.75rem * var(--bui-upscale-factor));

    /* Variables: Conversation Completed Message */
    --chat-i-messenger-conversation-completed-message-font-size: calc(0.875rem * var(--bui-upscale-factor));


    /* Popup Panel Header */
    .popup-panel-header-title {
        font-size: var(--bui-popup-panel-header-title-font-size);
        padding-inline: var(--bui-popup-panel-header-padding-inline);
    }

    .popup-panel-header-actions {
        .bui-popup-panel-action-button .bui-button {
            --bui-font-size: var(--bui-popup-panel-header-action-button-font-size);
            --bui-padding-block: var(--bui-popup-panel-header-action-button-padding-block);
            --bui-padding-inline: var(--bui-popup-panel-header-action-button-padding-inline);
            --bui-svg-icon-size: var(--bui-popup-panel-header-action-button-font-size);
        }

        .bui-icon.bui-icon-connection {
            --bui-icon-size: var(--bui-popup-panel-header-action-button-font-size);
        }
    }

    /* Messages */
    .bui-message {
        --bui-message-padding-block: var(--chat-i-messenger-message-padding-block);
        --bui-message-padding-inline: var(--chat-i-messenger-message-padding-inline);

        font-size: calc(1rem * var(--bui-upscale-factor));
    }

    /* Message Input */
    bui-message-input {
        & .bui-message-input {
            padding: var(--chat-i-messenger-input-padding);
        }

        .bui-message-textarea {
            font-size: calc(1rem * var(--bui-upscale-factor));
        }

        .bui-message-input-button .bui-button {
            --bui-svg-icon-size: var(--chat-i-messenger-send-button-icon-size);

            height: var(--chat-i-messenger-send-button-size);
            width: var(--chat-i-messenger-send-button-size);
        }
    }

    /* Footer Links */
    .bulb-footer-links {
        font-size: calc(0.875rem * var(--bui-upscale-factor));
    }

    /* Close Conversation Dialog */
    .bui-messenger-dialog-non-modal .bui-messenger-dialog-container {
        padding: var(--chat-i-messenger-close-dialog-container-padding);
    }

    .bui-messenger-close-conversation-dialog {
        .bui-messenger-dialog-header-title {
            font-size: var(--chat-i-messenger-close-dialog-header-title-font-size);
        }

        .bui-messenger-dialog-close-button {
            --bui-svg-icon-size: var(--chat-i-messenger-close-dialog-close-button-icon-size);
            display: flex;
            align-items: center;
        }

        .bui-messenger-close-conversation-dialog-message {
            margin: var(--chat-i-messenger-close-dialog-message-margin);
            font-size: calc(1rem * var(--bui-upscale-factor))
        }

        .bui-messenger-close-conversation-dialog-actions {
            .bui-message-input-button .bui-button {
                --bui-padding-block: var(--chat-i-messenger-close-dialog-action-button-padding-block);
                --bui-padding-inline: var(--chat-i-messenger-close-dialog-action-button-padding-inline);

                .bui-button-content {
                    font-size: var(--chat-i-messenger-close-dialog-action-button-font-size);
                }
            }

            .bui-button-content {
                gap: 0.5rem;
            }
        }
    }

    /* Display only the completed message text */
    bui-completed-message {
        display: flex;

        .separator, .bui-conversation-completed-message {
            display: none;
        }

        &::after {
            content: var(--bui-conversation-completed-message-text, "Conversation completed on");
            margin-inline: auto;
            padding-block: var(--bui-message-padding-block, .5rem);
            padding-inline: var(--bui-message-padding-inline, 1rem);
            border-radius: var(--bui-message-border-radius, 1rem);
            background-color: var(--chat-i-messenger-message-received-background, var(--bui-surface-100));
            color: var( --chat-i-messenger-message-received-color, var(--bui-neutral-700));
            font-size: var(--chat-i-messenger-conversation-completed-message-font-size);
        }
    }

    /* Typing Message */
    .typing-dots {
        height: calc(2.5 * 0.5rem * var(--bui-upscale-factor));
    }
}