.chat-button-float{
    width: 40px;height: 40px;
    position: fixed;bottom: 30px;right: 40px;z-index: 10;
    background-color: var(--color--primary);
    border: none;
    border-radius: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;align-items: center;

    i{
        color: white;
    }

    &::before{
        content: "Chatea con nuestro agente";
        width: 40px;height: 40px;
        padding-left: 20px;
        position: absolute;
        right: 0px;
        background-color: rgb(70, 70, 70);
        border-radius: 40px;
        display: flex;
        align-items: center;
        overflow: hidden;
        opacity: 0;
        color: white;
        transition: all ease-in-out 0.2s;
        
            width: 180px;
            right: calc(100% + 10px);
            opacity: 1;
    }

    &:hover{
        &::after{
            content: "";
            width: 260px;height: 40px;
            position: absolute;right: 0px;
        }
    }
}
.widget-chat{
    width: 0px;max-width: calc(100% - 20px);
    height: 0px;max-height: calc(100% - 20px);
    position: fixed;bottom: 10px;
    right: 10px;
    z-index: 100000;
    background-color: white;
    color: black;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: #333 0px 0px 2px;
    opacity: 0;
    transition: all ease-in-out 0.2s;

    &.active{
        width: 400px;height: 600px;
        opacity: 1;
    }

    *{
        margin: 0px;padding: 0px;
        width: max-content;
        height: max-content;
    }

    header{
        width: 100%;height: 60px;
        padding: 0px 20px;
        padding-right: 10px;
        display: flex;flex-wrap: wrap;
        align-items: center;
        /* border-bottom: solid 1px #333; */
        position: sticky; left: 0px; top: 0px;z-index: 1;
        background-color: white;
        box-shadow: #333 0px 0px 1px;
        
        img{
            width: max-content;height: 30px;
            margin-right: 10px;
            display: block;
        }
        h2{
            width: max-content;
            margin-right: auto;
            color: black;
            font-size: 16px;
        }
        button{
            width: 40px;height: 40px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            &:hover{
                transform: none;
            }

            i{
                font-size: 18px;
                color: black;
            }
        }
    }
    main{
        width: 100%;height: calc(100% - 60px - 70px);
        padding: 20px;
        padding-bottom: 100px;
        overflow: auto;
        display: block;

        .message{
            width: max-content;max-width: 60%;
            height: max-content;
            padding: 10px 20px;
            margin-bottom: 10px;
            background-color: #62b7be;
            color: black;
            position: relative;
            border-radius: 20px;

            &.bot{
                background-color: #95b6b9;
            }
            &.me{
                margin-left: auto;
                background-color: #62b7be;
            }
        }
    }
    footer{
        width: 100%;height: max-content;
        padding: 10px;
        display: block;

        form{
            width: 100%; height: max-content;
            display: block;
            position: relative;
            background-color: transparent;
            border: none;

            .sugerincias{
                width: 100%;height: 40px;
                position: absolute;left: 0px;top: -50px;
                display: flex;
                align-items: center;
                overflow: hidden;

                .btn{
                    width: 40px;height: 40px;
                    display: flex;
                    justify-content: center;align-items: center;
                    cursor: pointer;
                }
                .bar{
                    width: calc(100% - 80px);height: 40px;
                    display: flex;
                    align-items: center;
                    overflow: scroll;
                    overflow-y: hidden;
                    &::-webkit-scrollbar{
                        height: 0px;
                    }

                    ul{
                        width: max-content;height: 30px;
                        display: flex; gap: 10px;
                        align-items: center;

                        span{
                            width: max-content;height: 100%;
                            padding: 0px 10px;
                            display: flex;
                            align-items: center;
                            background-color: var(--color--secundary);
                            border-radius: 20px;
                            cursor: pointer;
                            border: solid 2px transparent;
                            &:hover{
                                border-color: var(--color--primary);
                            }
                        }
                    }
                }
            }

            textarea{
                width: 100%;height: 50px;
                padding: 10px;
                padding-left: 30px;
                padding-right: 100px;
                background-color: #333;
                border: none;
                border-radius: 30px;
                outline: none;
                color: white;

                font-size: 18px;
                line-height: 1.5;
                resize: none;
                box-shadow: #333 0px 0px 2px;

                &::placeholder{
                    color: rgb(219, 219, 219);
                }
            }
            button{
                width: 40px;height: 40px;
                position: absolute;right: 5px;bottom: 9px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
                border-radius: 50%;
                background-color: var(--color--primary);
                cursor: pointer;
                color: white;
                font-size: 14px;
            }
        }
    }
}