:root {
    /* colors taken from smarsh brand guidelines */
    --light-royal-blue: #5394ff!important;
    --royal-blue: #3f69d3!important;
    --turquoise: #3edded!important;
    --lavender: #9aa7ff!important;
    --strong-peach: #f7697b!important;
    --paris-green: #57d989!important;
    --heliotrope-purple: #a936ff!important;
    --electric-pink: #e42e8c!important;
    --light-gray: #f2f7ff!important;
    --mid-gray: #e0ebf8!important;
    --deep-blue: #121836!important;
    --gray-62: #9e9e9e!important;
    --gradient-1: linear-gradient(45deg, #5394ff 0%, #3edded 100%)!important;
    --gradient-2: linear-gradient(45deg, #3f69d3 0%, #9aa7ff 100%)!important;
    --gradient-3: linear-gradient(45deg, #57d989 0%, #3edded 0%, #5394ff 0%, #57d989 100%)!important;
    --gradient-4: linear-gradient(45deg, #3edded 0%, #a936ff 100%)!important;
    --gradient-5: linear-gradient(45deg, #3f69d3 0%, #e42e8c 0%, #f7697b 100%)!important;
    --gradient-6: linear-gradient(45deg, #009aff 0%, #871eee 100%)!important;
    /*--gradient-7: linear-gradient(45deg, #121836 30%, #121836 80%)!important; this one doesn't make sense */
}

/* CSS overrides for Smarsh Central - Intelligent Front Door */
.siteforceThemeLayoutStarter:has(.cCentralSingleColumnLayout){
    background: linear-gradient(359.7deg, rgba(252, 252, 252, 0) 16.26%, #E0EBFD 68.51%, #BDD5FF 132.37%);
    background-repeat: no-repeat;
    background-size: 100% 550px;
}

/*Embedded Chat button Archie */
.embeddedMessagingConversationButton:not(.embeddedMessagingConversationButtonLoaded):not(.embeddedMessagingConversationButtonLoading) {
    padding: 5px !important;
    width: 195px !important;
    height: 41px !important; 
    overflow: hidden !important;
    display: flex;
    align-items: center !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
    background-color: var(--royal-blue) !important;
}

.embeddedMessagingConversationButton:not(.embeddedMessagingConversationButtonLoaded):not(.embeddedMessagingConversationButtonLoading):hover {
    background-color: #2953bd !important;
}


.embeddedMessagingConversationButton:not(.embeddedMessagingConversationButtonLoaded):not(.embeddedMessagingConversationButtonLoading)::before {
    content: "Ask Archie";
    margin-left: 90px !important;
    white-space: nowrap !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    
    /* Start invisible and animate in */
    opacity: 0;
    transform: translateX(-10px);
    animation: slideInText 0.4s ease forwards;
    animation-delay: 0.15s; /* Short delay to let image settle */
}

@keyframes slideInText {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Ensure image loads smoothly too */
.embeddedMessagingConversationButton:not(.embeddedMessagingConversationButtonLoaded):not(.embeddedMessagingConversationButtonLoading) .embeddedMessagingIconChat {
    opacity: 0;
    animation: fadeInImage 0.3s ease forwards;
    animation-delay: 0.05s;
    position: fixed !important;
    bottom: var(--eswButtonBottom, 25px);
    height: 100px !important;
    right: 128px !important;
    width: 100px !important;
    border-radius: 0 !important;
}

@keyframes fadeInImage {
    to {
        opacity: 1;
    }
}

.minimizedButton{
    background-color: hsl(0, 0%, 90%) !important;
    width: 54px !important;
    height: 54px !important;
}

.minimizedButton:hover{
    background-color: hsl(0, 0%, 80%) !important;
}

.minimizedButtonIconContainer img {
    height: 63px !important;
    position: fixed !important;
    bottom: 3px !important;
}