/*Responsive Design*/

.chat-iframe {
    position:fixed !important;
    bottom: 4rem;
    right:0;
    width:90vw !important;
    height:90vh !important;
    max-width:500px !important;
    max-height:600px !important;
    z-index:8888 !important;
    visibility: hidden;
    border:none;
    opacity:0;
    transition:opacity .3s ease,visibility .3s ease;
    padding: .5rem;
}

.chat-container {
    position: fixed !important;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    align-items: center !important;
    gap: 1rem !important;
}

.chat-bubble {
    position: relative !important;
    background-color: #fff;
    color: #1f2937;
    border-radius: .50rem;
    padding: .5rem .50rem;
    font-size: .75rem;
    width: 15rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    margin-top: -1rem;
    margin-right: -0.25rem;
    z-index: 9999 !important;
}

.chat-bubble .arrow {
    position: absolute !important;
    top: 1rem;
    right: -5px;
    width: .50rem;
    height: .50rem;
    background-color: #fff;
    transform: rotate(45deg);
    box-shadow: none;
    z-index: 9000 !important;
}

.chat-button {
    position: relative !important;
    width: 3rem;
    height: 3rem;
    border: 2px solid #93c5fd;
    border-radius: 9999px !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    cursor: pointer;
    animation: pulse 2s infinite
}

.chat-button svg {
    width: 1.75rem;
    height: 1.75rem;
}

.chat-badge-container {
    position: absolute !important;
    top: -.25rem;
    right: -.25rem;
    display: flex
}

.chat-badge-ping {
    position: absolute !important;
    width: 100%;
    height: 100%;
    background-color: #f87171;
    border-radius: 9999px;
    opacity: .75;
    animation: ping 1.5s cubic-bezier(0, 0, .2, 1) infinite
}

.chat-badge {
    position: relative !important;
    background-color: #ef4444;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 1000px) {
    .chat-iframe {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 10rem;
        width: 100dvw !important;
        height: 70dvh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .chat-container {
        position: fixed !important;
        bottom:  5rem !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: end;
        pointer-events: auto;
        padding: 0.5rem !important;
    }

    .chat-bubble {
        padding: .5rem .75rem;
        width: 15rem;
        z-index: 9999 !important;
    }

    .chat-bubble .arrow {
        right: -4px;
        z-index: 9000 !important;

    }

    .chat-button {
        width: 4rem;
        height: 4rem;
    }

    .chat-badge {
        width: 1.40rem;
        height: 1.40rem;
    }

    .chat-button svg {
        width: 2.25rem;
        height: 2.25rem
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: .6
    }
}