/* ==========================================================================
   1. FONTS & EXTERNAL ASSETS
   ========================================================================== */
@font-face {
    font-family: "PingLCG-Regular";
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url("https://cdn.helvia.io/hbf-webchat/projects/ppc/PingLCG-Regular.woff2") format("woff2");
}

/* ==========================================================================
   2. INFINITE DOUBLE-BOUNCE KEYFRAMES
   ========================================================================== */
/* A continuous loop: 
   0% to 40% (First 1.6s) = Sitting still
   40% to 70% = First bounce
   70% to 100% = Second bounce
*/
@keyframes infiniteDoubleBounce {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-10px);
    }

    40% {
        transform: translateY(0);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes infiniteDoubleBounce {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-10px);
    }

    40% {
        transform: translateY(0);
    }

    to {
        transform: translateY(0);
    }
}

/* ==========================================================================
   3. BOT BUTTON LAYOUT & INTERACTION
   ========================================================================== */
/* --- THE PARENT CONTAINER (#botButtonDiv) ---
   Changed duration to 4s for a natural pacing, repeating infinitely.
*/
#botButtonDiv {
    display: inline-block; 
    -webkit-animation: infiniteDoubleBounce 3s ease infinite;
    animation: infiniteDoubleBounce 3s ease infinite;
}

/* Freezes the bouncing in place immediately if the user hovers over it */
#botButtonDiv:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* Instantly kills the animation sequence if the chat window opens */
.hbf-bot-div.chat-is-visible ~ #botButtonDiv {
    animation: none;
    -webkit-animation: none;
}


/* --- THE CHILD ELEMENT (a.btn-sonar) --- */
#botButtonDiv .btn-chat.btn-sonar {
    border-radius: 50%;
    border: 4px solid transparent; 
    background-image: linear-gradient(white, white), 
                      linear-gradient(140deg, #FF2A00 50%, #00A5FF 50%);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    cursor: pointer;

    /* Perfectly smooth 0.3s zoom transition */
    transition: transform 0.3s ease-out; 
}

#botButtonDiv .btn-sonar {
    position: fixed;
    bottom: 50px;
}

@media screen and (max-width: 1024px) {
    .p-product #botButtonDiv .btn-sonar {
        bottom: 100px;
    }
}

/* Inner Avatar Image Setup */
#botButtonDiv .btn-sonar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease-out;
}


/* --- THE HOVER STATES --- */

/* 1. Scale the anchor tag seamlessly */
#botButtonDiv .btn-sonar:hover {
    transform: scale(1.12); 
}

/* 2. Scale the image inside tightly in tandem */
#botButtonDiv .btn-sonar:hover img {
    transform: scale(1.25); 
}


/* ==========================================================================
   4. CHAT INTERFACE & LAYOUT STYLING
   ========================================================================== */
.hbf-bot-div .hbf-webchat-pre-chat {
    background: #ffffff;
}

.bubble-widget-chat-container .chat-header.justify-start .left-content {
    margin-left: 12px;
}

.hbf-bot-div * {
    line-height: normal;
}

.hbf-bot-div .webchat__bubble ul {
    padding-left: 15px;
    list-style: disc;
}

.hbf-bot-div .webchat__bubble ul li {
    list-style: disc;
}

.hbf-bot-div.bubble-widget-chat-container {
    z-index: 1101;
}

.hbf-bot-div.bubble-widget-chat-container .chat-header .chat-header-title h2 {
    font-size: 20px;
}

.hbf-bot-div.bubble-widget-chat-container .chat-header .chat-header-title h3 {
    font-size: 14px;
}

.hbf-bot-div .hbf-webchat-pre-chat .webchat__stacked-layout__main .webchat__stacked-layout__avatar-gutter {
    display: none !important;
}

/* Suggested Actions Styling */
.hbf-bot-div div > div > div:nth-child(1) > div > div > div > button {
    min-height: 26px !important;
    font-weight: 400;
    line-height: 1;
    font-size: 12px;
}

.hbf-bot-div div>div>div:nth-child(1)>div>div>button:not([aria-label=left]):not([aria-label=right]),
.hbf-bot-div div > div > div:nth-child(1) > div > div > div > button {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    min-height: 26px !important;
}

/* --- THE GRADIENT BORDER ON SPOKEN ACTIVITY BUBBLE --- */
#botDiv .hbf-bot-div .webchat__bubble.hbf__tts-spoken-activity .webchat__bubble__content {
    border: 2px solid transparent !important;
    background-image: linear-gradient(#ededed, #ededed), 
                      linear-gradient(140deg, #FF2A00 0%, #00A5FF 100%) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}


/* Hide Notifications timestamps */
.webchat__notification__timestamp {
    display: none;
}
.webchat__notification__text-message {
    margin: 0 0 4px;
}