/* Container for our custom button */
#beacon-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    z-index: 9999 !important;
    display: block !important;
}

/* Custom button styling - LARGER SIZE */
#helpscout-placeholder {
    background-color: #E85D04;
    color: white;
    border: none;
    border-radius: 100px;
    padding: 12px 24px; /* Increased from 8px 16px */
    font-size: 16px; /* Increased from 14px */
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    margin: 0 !important;
    float: right !important;
    line-height: 1;
    animation: pulse 2s infinite; /* Add pulsating animation */
}

/* Pulsating animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(232, 93, 4, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 2px 16px rgba(232, 93, 4, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(232, 93, 4, 0.3);
    }
}

/* Stop pulsating on hover and add hover effect */
#helpscout-placeholder:hover {
    background-color: #14365D;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    animation: none; /* Stop pulsating on hover */
}

#helpscout-placeholder svg {
    width: 20px; /* Increased from 16px */
    height: 20px; /* Increased from 16px */
    margin-right: 8px; /* Increased from 6px */
}

/* Help Scout Beacon iframe positioning */
.BeaconContainer,
#beacon-container .BeaconFabButtonFrame {
    right: 20px !important;
    left: auto !important;
    position: fixed !important;
}

/* Ensure the message container is also properly positioned */
.BeaconMessengerFrameContainer {
    right: 20px !important;
    left: auto !important;
    position: fixed !important;
}