#amazon-connect-open-widget-button {
    position: fixed;
    bottom: 220px;
    right: 20px;
    border-radius: 28px;
    /* rounded rectangle */
    width: auto;
    /* allow width to fit content */
    min-width: 140px;
    /* optional: minimum width */
    height: 48px;
    /* fixed height */
    padding: 12px 24px;
    /* horizontal padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* background-color: #407EC9 !important; */
    background: #833AB4;
    background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    white-space: nowrap;
    gap: 3px;
    /* space between icon and text */

    /* fade-in animation */
    overflow: hidden;

    animation: shake 0.5s ease-out;
}

#amazon-connect-open-widget-button:hover {
    animation-name: glowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Hide default icon */
#amazon-connect-open-widget-button svg {
    display: none;
}

/* Custom icon */
#amazon-connect-open-widget-button::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223ZM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25ZM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z"/></svg>') no-repeat center center;
    background-size: contain;
}

/* Inject our label */
#amazon-connect-open-widget-button::after {
    content: "Chat with an Expert";
}

/* 2) Style the default “Close chat” button */
#amazon-connect-close-widget-button {
    width: auto;
    min-width: 140px;
    height: 48px;
    padding: 12px 24px;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #407EC9!important;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    white-space: nowrap;
    /* keep this one from wrapping too */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

#amazon-connect-close-widget-button svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    margin-right: 8px;
}

#amazon-connect-close-widget-button::after {
    content: "Minimized Chat";
}

/* 3) Frame styling */
#amazon-connect-widget-frame {
    /* position: fixed;
    bottom: 90px;
    right: 20px;
    width: 350px;
    height: 500px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index: 9998;
    transition: opacity 0.3s, transform 0.3s; */
    margin-bottom: 10px;
}

#amazon-connect-widget-frame.show {
    opacity: 1;
    transform: translateY(0);
}

#amazon-connect-widget-frame:not(.show) {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 6px 2px rgb(64, 126, 201, 0.5);
    }

    100% {
        box-shadow: 0 0 20px 6px rgb(64, 126, 201, 0.5);
    }
}