#app {
                width: 100%;
                background: #f1f1f1;
            }

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

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

            .chat .chatBox .aiChat {
                position: absolute;
                left: -14px;
                top: -34px;
                width: 110px;
            }

            .chat .chatBox .text {
                margin-top: 88px;
                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;
                font-size:14px;
            }

            .chat .chatBox .glasses {
                position: absolute;
                width: 38px;
                top: -2px;
                left: 38px;
                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: 50px;
                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: 135px;
                padding: 20px 20px;
                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 p{
            	    flex-grow: 1;
            }
            .chat .infoBox .aiSearchBox input {
border: solid 1px #e3e3f7;
    border-right: 0px;
    outline: none;
    background: #fff;
    border-radius: 4px 0px 0px 4px;
    padding-top: 13px;
    padding: 13px 20px 14px 20px;
    width: calc(100% - 40px);
            }

            .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);
                }
            }