@layer messenger;
@import url("https://gov.hr/bulb/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;
}

.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-participant-name {
        display: none;
    }
}