:root {
    --fade-in-duration: 1.75s;
    --grow-duration: 1.75s;
    --shake-speed: 1.25s;
    --dot-cycle-duration: 1.5s; /* Total time for one complete cycle of all dots */
    --dots-shake-type: shake-dots;
    --shake-intensity: 1; /* Base intensity (1 = normal, 2 = double, 0.5 = half, etc.) */
    --shake-intensity-dots: 1;



    /* Number of dots-- do not change this unless you add/remove dots */
    --dots-total: 3;
    --bubble-animation-duration: calc((var(--fade-in-duration)*var(--dots-total)) + var(--grow-duration));
    --dot-delay-interval: calc(var(--dot-cycle-duration) / var(--dots-total));
    
    --small-dot-delay: calc(var(--dot-delay-interval) * 0);
    --medium-dot-delay: calc(var(--dot-delay-interval) * 1);
    --large-dot-delay: calc(var(--dot-delay-interval) * 2);

    /* now we calculate the delay for the bubble growing animation */
    --chat-bubble-grow-delay: calc(var(--dot-delay-interval) * 1.82);

    /* --shake-delay: calc(var(--chat-bubble-grow-delay)); */
    --shake-delay: 0s;

    /* --chat-bubble-shrink-delay: calc(calc(var(--bubble-animation-duration) - var(--grow-duration)) + 10); */

    --final-cycle-duration: 1s;
    --farewell-stagger: 1s;
}

/* Keyframes */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes chatboxGrow {
    0% { width: 0%; min-height: 0rem; padding: 0; transform: scale(1); opacity: 0; }
    50% { width: 5%; min-height: 4.5rem; padding: 0px 25px 0px 25px; opacity: .85; }
    70% { width: 100%; min-height: 5rem; padding: 15px 25px 15px 25px;}
    85% { min-height: 5.2rem; transform: scaleX(1.015); }
    95% { min-height: 4.9rem; transform: scaleX(0.98); }
    100% { width: 100%; min-height: 5rem; padding: 15px 25px 15px 25px; transform: scale(1);
            opacity: 1; }
}

@keyframes shake {
    0% { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
    10% { transform: var(--base-transform) translate(calc(-0.5px * var(--shake-intensity)), calc(-0.5px * var(--shake-intensity))) rotate(calc(-0.2deg * var(--shake-intensity))); }
    20% { transform: var(--base-transform) translate(calc(-1px * var(--shake-intensity)), calc(0px * var(--shake-intensity))) rotate(calc(0.3deg * var(--shake-intensity))); }
    30% { transform: var(--base-transform) translate(calc(1px * var(--shake-intensity)), calc(0.5px * var(--shake-intensity))) rotate(calc(0deg * var(--shake-intensity))); }
    40% { transform: var(--base-transform) translate(calc(0.5px * var(--shake-intensity)), calc(-0.5px * var(--shake-intensity))) rotate(calc(0.2deg * var(--shake-intensity))); }
    50% { transform: var(--base-transform) translate(calc(-0.5px * var(--shake-intensity)), calc(1px * var(--shake-intensity))) rotate(calc(-0.3deg * var(--shake-intensity))); }
    60% { transform: var(--base-transform) translate(calc(-1px * var(--shake-intensity)), calc(0.5px * var(--shake-intensity))) rotate(calc(0deg * var(--shake-intensity))); }
    70% { transform: var(--base-transform) translate(calc(1px * var(--shake-intensity)), calc(0.5px * var(--shake-intensity))) rotate(calc(-0.2deg * var(--shake-intensity))); }
    80% { transform: var(--base-transform) translate(calc(-0.5px * var(--shake-intensity)), calc(-0.5px * var(--shake-intensity))) rotate(calc(0.2deg * var(--shake-intensity))); }
    90% { transform: var(--base-transform) translate(calc(0.5px * var(--shake-intensity)), calc(1px * var(--shake-intensity))) rotate(calc(0deg * var(--shake-intensity))); }
    100% { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
}

@keyframes shake-dots {
    0% { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
    10% { transform: var(--base-transform) translate(calc(-2px * var(--shake-intensity-dots)), calc(-2px * var(--shake-intensity-dots))) rotate(calc(-0.8deg * var(--shake-intensity-dots))); }
    20% { transform: var(--base-transform) translate(calc(-3px * var(--shake-intensity-dots)), calc(0px * var(--shake-intensity-dots))) rotate(calc(1.2deg * var(--shake-intensity-dots))); }
    30% { transform: var(--base-transform) translate(calc(3px * var(--shake-intensity-dots)), calc(2px * var(--shake-intensity-dots))) rotate(calc(0deg * var(--shake-intensity-dots))); }
    40% { transform: var(--base-transform) translate(calc(2px * var(--shake-intensity-dots)), calc(-2px * var(--shake-intensity-dots))) rotate(calc(0.8deg * var(--shake-intensity-dots))); }
    50% { transform: var(--base-transform) translate(calc(-2px * var(--shake-intensity-dots)), calc(3px * var(--shake-intensity-dots))) rotate(calc(-1.2deg * var(--shake-intensity-dots))); }
    60% { transform: var(--base-transform) translate(calc(-3px * var(--shake-intensity-dots)), calc(2px * var(--shake-intensity-dots))) rotate(calc(0deg * var(--shake-intensity-dots))); }
    70% { transform: var(--base-transform) translate(calc(3px * var(--shake-intensity-dots)), calc(2px * var(--shake-intensity-dots))) rotate(calc(-0.8deg * var(--shake-intensity-dots))); }
    80% { transform: var(--base-transform) translate(calc(-2px * var(--shake-intensity-dots)), calc(-2px * var(--shake-intensity-dots))) rotate(calc(0.8deg * var(--shake-intensity-dots))); }
    90% { transform: var(--base-transform) translate(calc(2px * var(--shake-intensity-dots)), calc(3px * var(--shake-intensity-dots))) rotate(calc(0deg * var(--shake-intensity-dots))); }
    100% { transform: var(--base-transform) translate(0, 0) rotate(0deg); }
}

@keyframes fadenInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}


/* Animation styles */

.chat-bubble-grow {
    animation: chatboxGrow var(--grow-duration) ease-in-out forwards;
    animation-fill-mode: forwards;
    animation-delay: var(--chat-bubble-grow-delay);
}
.chat-bubble-shrink {
    animation: chatboxGrow var(--grow-duration) ease-in-out reverse;
    animation-fill-mode: backwards;
}

.chat-bubble-container-shake {
    animation: shake var(--shake-speed) ease-in-out infinite;
    animation-delay: var(--shake-delay);
}


.shake{
    animation: shake var(--shake-speed) ease-in-out infinite;
    animation-delay: var(--shake-delay);
}
.fade-n-shake {
    animation: fadenInOut var(--fade-in-duration) infinite, var(--dots-shake-type) var(--shake-speed) ease-in-out infinite;
    animation-delay: var(--fade-delay), calc(var(--fade-delay) + var(--shake-delay));
}

.fade-out-content {
    animation: fadeOut 0.5s ease-in-out forwards;
}



.final-fade-cycle {
    animation: finalFadeOut var(--final-cycle-duration) ease-in-out forwards, shake var(--shake-speed), ease-in-out infinite;
}

.farewell-large {
    animation-delay: 0s, calc(var(--fade-delay) + var(--shake-delay));
}

.farewell-medium {
    animation-delay: var(--farewell-stagger), calc(var(--fade-delay) + var(--shake-delay));
}

.farewell-small {
    animation-delay: calc(var(--farewell-stagger) * 2), calc(var(--fade-delay) + var(--shake-delay));
}

@keyframes finalFadeOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}