* {
                margin: 0;
                padding: 0;}

            #app {
                width: 100%;
                /*height: 100vh;*/
                background: #f1f1f1;}

            .chat {
                position: fixed;
                left: 36px;
                bottom: 100px;
                z-index: 999;}

            .chat .chatBox {
                width: 140px;
                height: 138px;
                background: #fff;
                border-radius: 50%;
                position: relative;
                z-index: 999;
                border: solid 5px #6c53f3;
                }

            .chat .chatBox .aiChat {
                position: absolute;
                left: -30px;
                top: -30px;
                width: 140px;
                }

            .chat .chatBox .text {
                margin-top: 96px;
                display: block;
                text-align: center;
                background-clip: text;
                -ms-background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(to right, #c084fc, #218bff);
                font-weight: 600;
                cursor: pointer;
                }

            .chat .chatBox .glasses {
                position: absolute;
                width: 45px;
                top: 12px;
                left: 42px;
                animation: blink 8s infinite;
                -webkit-animation: blink 8s infinite;
                }

            @-webkit-keyframes blink {
                0%, 10% {
                    transform: scaleY(1);}

                5%, 15% {
                    transform: scaleY(0.5);}

                30%, 40% {
                    transform: scaleY(1);}

                35%, 45% {
                    transform: scaleY(0.5);}

                60%, 70% {
                    transform: scaleY(1);}

                65%, 75% {
                    transform: scaleY(0.5);}

                85%, 95% {
                    transform: scaleY(0.5);}

                80%, 100% {
                    transform: scaleY(1);}
            }

            @keyframes blink {
                0%, 10% {
                    transform: scaleY(1);}

                5%, 15% {
                    transform: scaleY(0.5);}

                30%, 40% {
                    transform: scaleY(1);}

                35%, 45% {
                    transform: scaleY(0.5);}

                60%, 70% {
                    transform: scaleY(1);}

                65%, 75% {
                    transform: scaleY(0.5);}

                85%, 95% {
                    transform: scaleY(0.5);}

                80%, 100% {
                    transform: scaleY(1);}
            }

            @-webkit-keyframes tada {
                0% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}

                10%, 20% {
                    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
                    transform: scale3d(.9, .9, .9) rotate(-3deg);}

                30%, 50%, 70%, 90% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);}

                40%, 60%, 80% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);}

                to {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}
            }

            @keyframes tada {
                0% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}

                10%, 20% {
                    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
                    transform: scale3d(.9, .9, .9) rotate(-3deg);}

                30%, 50%, 70%, 90% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);}

                40%, 60%, 80% {
                    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
                    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);}

                to {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);}
            }

            .chat .chatBox .idea {
                position: absolute;
                width: 40px;
                top: -30px;
                left: -30px;
                }

            .chat .chatBox .closeChatBox {
                display: none;}

            .chat .chatBox:hover .idea {
                animation: tada 1s;
                -webkit-animation: tada 1s;}

            .chat .chatBox:hover .text {
                animation: tada 1s;
                -webkit-animation: tada 1s;}

            .chat .infoBox {
                position: absolute;
                top: 50%;
                background: #fefafc;
                border-radius: 8px;
                left: 170px;
                padding: 15px 10px;
                border: solid 10px rgba(255, 255, 255, 1);
                transform: scale(0) translateY(-50%);
                transform-origin: left top;
                transition: all 0.5s;
                box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
                }

            .chat .showInfoBox {
                transform: scale(1) translateY(-50%);
                transition: all 0.5s;
                transform-origin: center center;}

            .chat .infoBox p {
                line-height: 28px;
                font-size: 16px;
                color: #5c5c5c;
                margin-bottom: 20px;}

            .chat .infoBox p span {
                background-clip: text;
                -ms-background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(to right, #c084fc, #218bff);
                font-weight: 600;}

            .chat .infoBox .aiSearchBox {
                display: flex;
                width: 750px;
                height: 48px;}

            .chat .infoBox .aiSearchBox input {
                flex-grow: 1;
                border: solid 1px #e3e3f7;
                border-right: 0px;
                outline: none;
                padding-left: 20px;
                background: #fff;
                border-radius: 4px 0px 0px 4px;}

            .chat .infoBox .aiSearchBox .aiSearchBtn {
                width: 120px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                background: linear-gradient(to right, #c084fc, #218bff);
                border-radius: 0px 4px 4px 0px;
                font-size: 16px;
                font-weight: 600;
                color: #fff;
                cursor: pointer;}

            .chat .infoBox .closeBox {
                position: absolute;
                top: -18px;
                right: -18px;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                background: linear-gradient(to right, #c084fc, #218bff);
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0px 0px 10px 0px rgba(225, 225, 225, 0.2);}

            .chat .infoBox .closeBox img {
                width: 14px;
                height: 14px;
                animation: rotate0 0.5s;
                -webkit-animation: rotate0 0.5s;}

            .chat .infoBox .closeBox:hover img {
                animation: rotate360 0.5s;
                -webkit-animation: rotate360 0.5s;}

            @keyframes rotate0 {
                from {
                    transform: rotate(180deg);}

                to {
                    transform: rotate(0deg);}
            }

            @-webkit-keyframes rotate0 {
                from {
                    transform: rotate(180deg);}

                to {
                    transform: rotate(0deg);}
            }

            @keyframes rotate360 {
                from {
                    transform: rotate(0deg);}

                to {
                    transform: rotate(180deg);}
            }

            @-webkit-keyframes rotate360 {
                from {
                    transform: rotate(0deg);}

                to {
                    transform: rotate(180deg);}
            }