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

:root {
    /* Color overrides */
    --bui-primary-400: hsl(237, 38%, 39%);
    --bui-primary-500: hsl(239, 44%, 29%);
    --bui-gray-400: #E8E8EA;
    --bui-gray-600: #ADB1B3;

    /* These variables are moved to a higher scope since they are used to position the "Back to top" button */
    /* Otherwise, they should be defined with the other variables */
    --chat-i-upscale-factor: 1.6; 
    --chat-i-popup-panel-toggle-button-font-size: calc(var(--bui-fs-600) * var(--chat-i-upscale-factor));
    --chat-i-popup-panel-toggle-button-padding-block: calc(0.875rem * var(--chat-i-upscale-factor));
    --chat-i-popup-panel-toggle-button-margin-right: calc(1.75rem * var(--chat-i-upscale-factor));
    --chat-i-popup-panel-toggle-button-margin-bottom: calc(2.75rem * var(--chat-i-upscale-factor));
    --chat-i-popup-panel-toggle-button-height: calc(4.5rem * var(--chat-i-upscale-factor));

    /* Popup panel header icon */
    --chat-i-popup-panel-header-icon-url: url("../assets/glasai.svg");
}

.chat-i-messenger .messenger-popup-panel {   
    /* Root font size is usually 16px, but here it is 10px so we need to upscale by 1.6x */
    /* Upscale factor is 16px/10px (standard root font size / actual root font size) */
    --bui-upscale-factor: var(--chat-i-upscale-factor); 

    /* Popup Panel Toggle Button */
    --bui-popup-panel-toggle-button-margin-right: var(--chat-i-popup-panel-toggle-button-margin-right);
    --bui-popup-panel-toggle-button-margin-bottom: var(--chat-i-popup-panel-toggle-button-margin-bottom);
    --bui-popup-panel-toggle-button-color: var(--bui-primary-500);
    --bui-popup-panel-toggle-button-font-size: var(--chat-i-popup-panel-toggle-button-font-size);
    --bui-popup-panel-toggle-button-padding-block: var(--chat-i-popup-panel-toggle-button-padding-block);
    --bui-popup-panel-toggle-button-padding-inline: calc(1rem * var(--bui-upscale-factor));

    /* Popup Panel */
    --bui-popup-panel-header-background-color: var(--bui-primary-500);
    --bui-popup-panel-background-color: var(--bui-gray-400);

    /* 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-background: transparent;
    --bui-popup-panel-header-action-button-background-hover: hsl(0, 0%, 95%, 0.1);
    --bui-popup-panel-header-action-button-background-active: hsl(0, 0%, 95%, 0.2);
    --bui-popup-panel-header-action-button-color: var(--bui-surface-100);
    --bui-popup-panel-header-action-button-border-color: transparent;
    --bui-popup-panel-header-action-button-font-size: calc(1rem * var(--bui-upscale-factor));

    /* Popup panel header icon */
    --bui-popup-panel-header-icon-size: calc(3rem * var(--bui-upscale-factor));

    /* Messenger General */
    --chat-i-messenger-background: var(--bui-surface-100);
    --chat-i-messenger-border-radius: calc(0.5rem * var(--bui-upscale-factor));
    --chat-i-messenger-active-tab: #262d36;
    --chat-i-messenger-user-height: 4rem;
    --chat-i-messenger-tab-height: 3rem;
    
    /* 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));
    --chat-i-messenger-message-sent-background: transparent;
    --chat-i-messenger-message-sent-color: var(--bui-neutral-800);
    --chat-i-messenger-message-received-background: var(--bui-gray-400);
    --chat-i-messenger-message-received-color: var(--bui-neutral-800);
    
    /* Message Input */
    --chat-i-messenger-input-container-background: var(--bui-gray-400);
    --chat-i-messenger-input-background: var(--bui-surface-100);
    --chat-i-messenger-input-color: var(--bui-neutral-800);
    --chat-i-messenger-input-border-color: var(--bui-surface-500);
    --chat-i-messenger-input-outline-color: var(--bui-neutral-400);
    --chat-i-messenger-input-padding: calc(0.25rem * var(--bui-upscale-factor)) calc(0.375rem * var(--bui-upscale-factor));
    --chat-i-messenger-input-placeholder-color: var(--bui-gray-600);

    /* Send Button */
    --chat-i-messenger-send-button-background: var(--bui-success-500);
    --chat-i-messenger-send-button-color: var(--bui-primary-500);
    --chat-i-messenger-send-button-border-radius: calc(0.5rem * var(--bui-upscale-factor));
    --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));

    /* 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-background: calc(1.25rem * 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;

    /* 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));

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

    .popup-panel-toggle-button .bui-button {
        --bui-font-size: var(--bui-popup-panel-toggle-button-font-size);
        --bui-padding-block: var(--bui-popup-panel-toggle-button-padding-block);
        --bui-padding-inline: var(--bui-popup-panel-toggle-button-padding-inline);
    }

    .popup-panel {
        padding-block: 0;
    }

    .popup-panel-header {
        padding-block: 0;
        

        &:before {
            content: "";
            display: inline-block;
            width: var(--bui-popup-panel-header-icon-size);
            height: var(--bui-popup-panel-header-icon-size);
            background-image: var(--chat-i-popup-panel-header-icon-url);
            background-size: calc(var(--bui-popup-panel-header-icon-size) - 0.5rem);
            background-color: var(--bui-gray-400);
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 50rem;
            margin-inline: calc(0.25rem * var(--bui-upscale-factor));
        }
    }

    .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-button-background: var(--bui-popup-panel-header-action-button-background);
            --bui-button-background-hover: var(--bui-popup-panel-header-action-button-background-hover);
            --bui-button-background-active: var(--bui-popup-panel-header-action-button-background-active);
            --bui-svg-icon-color: var(--bui-popup-panel-header-action-button-color);
            --bui-svg-icon-size: var(--bui-popup-panel-header-action-button-font-size);
            --bui-button-border-color: var(--bui-popup-panel-header-action-border-color);
        }

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

    & .bui-messenger {
        --bui-messenger-background-color: var(--chat-i-messenger-input-container-background);
    }

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

        background-color: var(--chat-i-messenger-background);
    } 

    & .bui-message {
        --bui-message-padding-block: var(--chat-i-messenger-message-padding-block);
        --bui-message-padding-inline: var(--chat-i-messenger-message-padding-inline);
        --bui-message-sent-background: var(--chat-i-messenger-message-sent-background);
        --bui-message-sent-color: var(--chat-i-messenger-message-sent-color);
        --bui-message-received-background: var(--chat-i-messenger-message-received-background);
        --bui-message-received-color: var(--chat-i-messenger-message-received-color);

        /* Remove default paragraph margin inside messages */
        p {
            margin-block: 0; 
        }

        /* Chatbot message links overrides */
        a {
            color: var(--bui-primary-500);
            text-decoration: underline;
            text-underline-offset: 0.125rem;

            &:hover {
                color: var(--bui-primary-400);
            }
        }
    }

    /* Hide participant name */
    & bui-participant-name {
        display: none;
    }

    & bui-message-input {
        /* 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 {
            padding: var(--chat-i-messenger-input-padding);

            &:focus-within {
                outline: 2px solid var(--chat-i-messenger-input-outline-color) !important;
                outline-offset: -2px !important;
            }
        }

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

            height: var(--chat-i-messenger-send-button-size);
            width: var(--chat-i-messenger-send-button-size);
            outline-color: var(--bui-message-input-send-icon-color);
        }

        .bui-message-textarea::placeholder {
            color: var(--chat-i-messenger-input-placeholder-color);
        }
    }

    /* Close end conversation dialog overrides */
    .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 {
            border: 0;
        }

        .bui-messenger-dialog-header {
            /* Prevent site overrides */
            height: unset; 
            background: unset;
            padding-block: 0;
        }

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

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

                color: var(--bui-surface-100);

                .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 and remove the completion time due to missing locale information */
    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));
    }
}

.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(--bui-primary-500);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

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

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