.robot { width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: #fff;}
.hide{ display: none !important; }
.robot .scrollCont { height: 100%; overflow-y: scroll; overflow-y: overlay; position: relative; /*padding-bottom: 108px;*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.robot .scrollCont::-webkit-scrollbar { width: 0; height: 10px; position: fixed; right: -8px; margin-right: -8px
}

.robot .showBar.scrollCont::-webkit-scrollbar { width: 8px; opacity: 1; position: fixed; right: -8px; opacity: 0
}

.robot .topBox { width: 100%; position: relative; background: linear-gradient(200deg,#d4e1ff 3.08%,#fff 74.71%); padding-top: 56px
}

.robot .topBox .tool-bar { position: fixed; width: 100%; height: 56px; padding: 0 19px; top: 0; display: flex; justify-content: space-between; align-items: center; z-index: 11
}

.robot .topBox .tool-bar .pre-icon { margin-right: 18px
}

.robot .topBox .tool-bar .icon { cursor: pointer; width: 24px
}

.robot .topBox .tool-bar .close-icon { width: 23px; margin-left: 16px
}

.robot .topBox .tool-bar .blockBtwn { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-right: 16px
}

.robot .topBox .imges {     height: 306px;
    overflow-y: auto;padding: 8px 16px 16px 16px; /*display: flex; */justify-content: space-between; align-items: center; /*white-space: nowrap*/
}

.robot .topBox .imges .imges-l { width: 56px; display: flex; flex-direction: column
}

.robot .topBox .imges .imges-l .img1 { width: 56px
}

.robot .topBox .imges .imges-l .img2 { margin-top: 10px; margin-left: 5px
}

.robot .topBox .imges .imges-r .p1 { font-size: 14px; color: #595959; line-height: 22px
}


.robot .topBox .imges .imges-r .p2 { font-weight: 400; font-size: 15px; line-height: 24px; text-align: left; margin-top: 4px; color: linear-gradient(270deg,#5a5a5a,#141414 57%); background: linear-gradient(0deg,#5a5a5a,#141414 57.41%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0,0,0,0)
}

.robot .topBox .nav-bar.top-nav { padding: 12px 16px 0 16px; display: flex; justify-content: space-between; align-items: center
}

.robot .topBox .nav-bar.top-nav .nav-i { width: 80px; height: 76px; padding: 12px 0; font-size: 12px; color: #141414; line-height: 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 12px; border: 1px solid hsla(0,0%,100%,.58); background: #fff; backdrop-filter: blur(12px); cursor: pointer; font-weight: 400
}

.robot .topBox .nav-bar.top-nav .nav-i .icon { font-size: 28px
}

.robot .topBox .nav-bar.top-nav .nav-iborder { border-radius: 12px
}

.robot .topBox .nav-bar.top-nav .nav-inoborder { width: 80px
}

.robot .topBox .nav-bar.top-nav .nav-inoborder .nav-i { width: 100%
}

.robot .topBox .nav-bar.top-nav .nav-i:hover,.robot .topBox .nav-bar.top-nav .nav-inoborder:hover { background: #f8faff; border-color: #f8faff
}


.robot .userOperat { position: fixed; bottom: 0; display: flex; width: calc(100% - 1px); padding: 8px 16px 16px 12px; align-items: center; gap: 10px; justify-content: space-between; background: #fff; backdrop-filter: blur(2px)
}

.robot .userOperat .sendType { padding: 3px; position: relative; background-clip: padding-box,border-box; background-origin: padding-box,border-box; background-image: linear-gradient(180deg,#fff,#f5f8ff); border-radius: 50%; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center
}

.robot .userOperat .sendType .icon { font-size: 40px
}

.robot .userOperat .sendContent { position: relative; background-clip: padding-box,border-box; animation: borderLine-flow-7041c3e0 4s linear infinite; background-origin: padding-box,border-box; width: calc(100% - 42px); min-height: 40px; padding: 1px; border-radius: 100px
}

.robot .userOperat .sendContent .sendBox { display: flex; padding: 8px 11px 8px 15px; align-items: center; justify-content: space-between; gap: 4px; flex: 1 0 0; border-radius: 100px; background: #fff; width: 100%
}

.robot .userOperat .sendContent .sendBox .van-cell { width: calc(100% - 32px); border: none; padding: 0; line-height: 22px!important
}

.robot .userOperat .sendContent .sendBox .van-cell .van-field__label { display: none
}

.robot .userOperat .sendContent .sendBox .van-cell .van-field__control { color: #333; height: 22px
}

.robot .userOperat .sendContent .sendBox .van-cell:after { border: none
}

.robot .userOperat .sendContent .sendBox .sendicon { font-size: 24px
}


.robotIn { display: flex; align-items: center; justify-content: space-between; position: fixed; bottom: 0; padding: 8px 16px 16px 12px; width: inherit
}

.robotIn .sendType { padding: 3px; position: relative; background-clip: padding-box,border-box; background-origin: padding-box,border-box; background-image: linear-gradient(90deg,rgba(187,226,255,.8),rgba(220,242,255,.8),rgba(203,203,255,.8)); border-radius: 50%; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center
}

.robotIn .sendType .icon { font-size: 40px
}

.robotIn .sendType .mikeIcon { position: absolute; font-size: 10px; right: 8px; bottom: 10px; font-size: 12px
}

.robotIn .sendContent { position: relative; background-clip: padding-box,border-box; background-origin: padding-box,border-box; animation: border-flow 4s linear infinite; width: calc(100% - 52px); padding: 2px; border-radius: 100px
}

.robotIn .sendContent .sendBox { display: flex; padding: 6px 12px 6px 16px; align-items: center; justify-content: space-between; gap: 4px; flex: 1 0 0; border-radius: 100px; background: #fff; width: 100%; cursor: pointer
}

.robotIn .sendContent .sendBox .van-cell { width: calc(100% - 20px); border: none; padding: 0; line-height: 22px!important
}

.robotIn .sendContent .sendBox .van-cell .van-field__label { display: none
}

.robotIn .sendContent .sendBox .van-cell .van-field__control { color: #141414
}

.robotIn .sendContent .sendBox .van-cell:after { border: none
}

.robotIn .sendContent .sendBox .sendicon { font-size: 24px
}

.robotIn .sendContent .sendBox .recordBox { color: #8c8c8c; font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; display: flex; align-items: center; justify-content: center; width: 100%
}

.robotIn .sendContent .sendBox .recordBox .recordindIcon { font-size: 22px; margin-right: 6px
}


.robotIn.oneSreen { display: flex; align-items: center; justify-content: space-between; padding: 8pt 16pt 28pt 12pt; z-index: 1
}

.robotIn.oneSreen .sendType { padding: 1pt; position: relative; background-clip: padding-box,border-box; background-origin: padding-box,border-box; background-image: linear-gradient(90deg,rgba(187,226,255,.8),rgba(220,242,255,.8),rgba(203,203,255,.8)); border-radius: 50%; width: 40pt; height: 40pt
}

.robotIn.oneSreen .sendType .icon { font-size: 38pt
}

.robotIn.oneSreen .sendType .mikeIcon { position: absolute; font-size: 10pt; right: 8pt; bottom: 10pt; font-size: 12pt
}

.robotIn.oneSreen .sendContent { position: relative; background-clip: padding-box,border-box; background-origin: padding-box,border-box; animation: borderLine-flow-7041c3e0 4s linear infinite; width: calc(100% - 36pt); min-height: 38pt; padding: 1pt; border-radius: 100pt; margin-left: 8pt
}

.robotIn.oneSreen .sendContent .sendBox { display: flex; padding: 6pt 12pt 6pt 16pt; align-items: center; justify-content: space-between; gap: 4pt; flex: 1 0 0; border-radius: 100pt; background: #fff; width: 100%
}

.robotIn.oneSreen .sendContent .sendBox .van-cell { width: calc(100% - 20pt); border: none; padding: 0; font-size: 12pt; line-height: 22pt
}

.robotIn.oneSreen .sendContent .sendBox .van-cell .van-field__label { display: none
}

.robotIn.oneSreen .sendContent .sendBox .van-cell .van-field__control { color: #141414
}

.robotIn.oneSreen .sendContent .sendBox .van-cell:after { border: none
}

.robotIn.oneSreen .sendContent .sendBox .sendicon { font-size: 24pt
}

.robotIn.oneSreen .sendContent .sendBox .recordBox { color: #8c8c8c; font-size: 14pt; font-style: normal; font-weight: 400; line-height: 22pt; display: flex; align-items: center; justify-content: center; width: 100%
}

.robotIn.oneSreen .sendContent .sendBox .recordBox .recordindIcon { font-size: 22pt; margin-right: 6pt
}
.robotIn .sendContent { position: relative; background-clip: padding-box,border-box; background-origin: padding-box,border-box; animation: borderLine-flow-7041c3e0 4s linear infinite; width: calc(100% - 36pt); min-height: 28pt; padding: 1pt; border-radius: 100pt; margin-left: 8pt
}
@keyframes borderLine-flow-7041c3e0 {
    0% {
        background-image: linear-gradient(0deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    20% {
        background-image: linear-gradient(40deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    30% {
        background-image: linear-gradient(80deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    40% {
        background-image: linear-gradient(120deg,rgba(203,203,255,.95),rgba(2,81,255,.95),rgba(220,242,255,.95),rgba(169,206,255,.95))
    }

    50% {
        background-image: linear-gradient(210deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    60% {
        background-image: linear-gradient(240deg,rgba(203,203,255,.95),rgba(2,81,255,.95),rgba(220,242,255,.95),rgba(169,206,255,.95))
    }

    70% {
        background-image: linear-gradient(270deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    80% {
        background-image: linear-gradient(300deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    to {
        background-image: linear-gradient(1turn,rgba(203,203,255,.95),rgba(2,81,255,.95),rgba(220,242,255,.95),rgba(169,206,255,.95))
    }
}

@keyframes borderLine-flow-7041c3e0 {
    0% {
        background-image: linear-gradient(0deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    20% {
        background-image: linear-gradient(40deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    30% {
        background-image: linear-gradient(80deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    40% {
        background-image: linear-gradient(120deg,rgba(203,203,255,.95),rgba(2,81,255,.95),rgba(220,242,255,.95),rgba(169,206,255,.95))
    }

    50% {
        background-image: linear-gradient(210deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    60% {
        background-image: linear-gradient(240deg,rgba(203,203,255,.95),rgba(2,81,255,.95),rgba(220,242,255,.95),rgba(169,206,255,.95))
    }

    70% {
        background-image: linear-gradient(270deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    80% {
        background-image: linear-gradient(300deg,#ccf,#0553ff,#5a8dff,#dcf2ff)
    }

    to {
        background-image: linear-gradient(1turn,rgba(203,203,255,.95),rgba(2,81,255,.95),rgba(220,242,255,.95),rgba(169,206,255,.95))
    }
}

.aiContent { max-width: 546px; height: 476px; border-radius: 24px; display: flex; align-items: end
}

.cont { width: 272px; height: 100%; background: #fff; border-radius: 24px
}

.cont .videoBox { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 261px; height: 464px; overflow: hidden; border-radius: 20px
}

.cont .videoBox .video { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; overflow: hidden
}

.cont .videoBox .video.contHide { pointer-events: none; width: 0; height: 0; display: none
}

.cont .videoBox .volume { position: absolute; top: 8px; right: 6.5px; font-size: 8px
}

.cont .videoBox .volume.muted:after { content: ""; position: absolute; top: 0; left: 40%; width: 2px; height: 100%; -webkit-transform: skew(45deg); -ms-transform: skew(45deg); transform: skew(45deg); background: #f1f1f1; border-radius: 50%
}

.cont .videoBox .small-icon { position: absolute; top: 8px; right: 8px; width: 16px; z-index: 22;
}

.cont .videoBox:hover .barFirstCome.isMobile.p-box.autoplay,.cont .videoBox:hover .p-box.nobarFirstCome { display: flex; animation-duration: 1s; opacity: 1
}

.cont .p-box.barFirstCome { display: flex
}

.cont .tool-bar { position: absolute; width: 100%; z-index: 2; padding: 16px 8px; top: 0; display: flex; justify-content: space-between; align-items: center
}

.cont .tool-bar .pre-icon { margin-right: 18px
}

.cont .tool-bar .icon { cursor: pointer; width: 24px
}

.van-field__control { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; color: var(--van-field-input-text-color); line-height: inherit; text-align: left; background-color: rgba(0,0,0,0); border: 0; resize: none; -webkit-user-select: auto; user-select: auto
}

.van-field__control::-webkit-input-placeholder { color: var(--van-field-placeholder-text-color)
}

.van-field__control::placeholder { color: var(--van-field-placeholder-text-color)
}
.van-image { position: relative; display: inline-block;
}

.van-icon__image{ display: block; width: 1em; height: 1em; object-fit: contain; max-width: none; }

.cont .tool-bar .close-icon { width: 23px
}

.cont .tool-bar .blockBtwn { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-right: 16px
}

.cont .p-box { position: absolute; bottom: 56px; left: 0; width: 100%; height: fit-content; display: flex; flex-direction: column; padding: 8px; justify-content: end; display: none
}

.cont .p-box .ibar { cursor: pointer; font-weight: 400; width: fit-content; margin-top: 8px; border-radius: 16px; overflow: hidden; background: linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.9)),linear-gradient(90deg,rgba(0,160,228,.8) 4.49%,rgba(2,81,255,.8) 50.06%,rgba(210,44,255,.8)); background: rgba(0,0,0,0); position: relative
}

.cont .p-box .ibar div { padding: 6px 8px; font-size: 14px; background: linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.9)),linear-gradient(90deg,rgba(0,160,228,.8) 4.49%,rgba(2,81,255,.8) 50.06%,rgba(210,44,255,.8)); width: fit-content; border-radius: 16px; padding-right: 9px; border: 1px solid rgba(0,0,0,0); opacity: .85
}

.cont .p-box .ibar div span:first-of-type { font-size: 12px; width: 22px; height: 22px; background: #0251ff; border-radius: 50%; display: inline-block; color: #fff; text-align: center; line-height: 22px; margin-right: 4px
}

.cont .p-box .ibar div span:last-of-type { font-size: 14px
}

.cont .p-box .ibar div:first-of-type span { opacity: 0
}

.cont .p-box .ibar div:last-of-type { position: absolute; left: 0; top: 0; background: rgba(0,0,0,0); opacity: 1
}

.cont .p-box .ibar.ing { padding: 1px; opacity: 1; background-clip: padding-box; background: linear-gradient(90deg,rgba(0,160,228,.8) 4.49%,rgba(2,81,255,.8) 50.06%,rgba(210,44,255,.8))
}

.cont .p-box .ibar.ing div { padding: 5px 7px; font-weight: 600; backdrop-filter: blur(4px); background: #fff; position: relative; padding-right: 9px
}

.cont .p-box .ibar.ing div span:first-of-type { background: #0251ff
}

.cont .p-box .ibar.ing div:first-of-type { display: none
}

.cont .p-box .ibar.ing:hover { background: linear-gradient(90deg,rgba(0,160,228,.8) 4.49%,rgba(2,81,255,.8) 50.06%,rgba(210,44,255,.8))
}

.cont .p-box .ibar:hover { opacity: 1; border: 0; background: hsla(0,0%,100%,.95)
}

.cont .p-box .ibar:hover div { background: hsla(0,0%,100%,.95); opacity: 1
}

.cont .close { position: absolute; top: 306px; left: 168px; font-size: 24px; background: #fff; border-radius: 100%; width: fit-content
}

.cont .formBox.hide { display: none
}

.formBox { width: 100%; height: 100%; position: absolute; top: 0; right: 0; display: flex; border-radius: 24px; z-index: 2; background: #fff
}

.formBox .wechatLink { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%
}

.formBox .wechatLink .van-image { width: 124px; height: 124px
}

.formBox .wechatLink p { width: 100%; text-align: center; margin-top: 24px; font-size: 16px
}

.formBox .formLink { width: 100%; height: 100%; padding: 16px;
}

.formBox .formLink .process { height: 4px; border-radius: 4px; animation: bgFlow 4s linear infinite
}

.formBox .formLink .title { font-size: 14px; margin: 68px 0 8px 24px
}

.formBox.contOnlyForm { padding-top: 56px; width: 100%
}

.cont.formShow { background-color: #fff; border: none;
}

.cont.formShow .videoBox { left: 6px; right: unset
}

.cont.formShow .videoBox .video { border-top-right-radius: 0; border-bottom-right-radius: 0
}

.cont.formShow .p-box { bottom: 56px; left: 0; margin: auto; right: 0
}

.cont.formShow .close { top: 306px; left: 346px
}

.cont.isSmall { width: 140px; height: 188px; border-radius: 24px; position: absolute; bottom: 0; right: 0; cursor: pointer; border: 6px solid #fff;}

.cont.isSmall .videoBox { width: 128px; height: 100%
}

.cont.isSmall .videoBox .video { width: 128px; height: 100%; bottom: 0; top: unset
}

.cont.isSmall .popBg { background: linear-gradient(180deg,hsla(0,0%,100%,0) 62.33%,#fff 87.61%); width: 100%; height: 100%; border-radius: 12px; position: absolute; bottom: 0; right: 0; z-index: 0
}

.cont.isSmall .hello { position: absolute; bottom: 15px; right: 0; left: 0; margin: auto; width: 99px; height: 40px; border-radius: 20px; z-index: 1; background-image: linear-gradient(90deg,#bbe2ff,#dcf2ff,#cbcbff); background-clip: padding-box,border-box; background-origin: padding-box,border-box; animation: border-flow 2s linear infinite
}

.cont.isSmall .hello .box { width: 93px; height: 34px; background: #fff 80%; border-radius: 20px; font-size: 14px; line-height: 36px; text-align: center; border-radius: 18px; margin: 3px
}

.cont.formShow.isSmall .close,.cont.formShow.isSmall .volume { display: none
}

.cont.formShow.isSmall .videoBox { right: 0; left: unset
}

.cont.formShow.isSmall .videoBox .video { border-radius: 24px; width: 72px; height: 128px; bottom: 0; top: unset
}


@keyframes slide-top {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}



.slide-midleft {
    animation-name: slide-midleft;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
}

.oneSreen .slide-midleft {
    animation-duration: 0.6s;
}

@keyframes slide-midleft {
    0% {
        transform: translateX(30%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes trans-opactity {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

/* 小变大的动画 */
.slide-maxHeightUp {
    animation: slide-maxHeightUp 0.8s forwards;
}

@keyframes slide-maxHeightUp {
    0% {
        height: 188px;
    }
    100% {
        height: 476px;
    }
}

.slide-videoUp {
    animation: slide-videoUp 0.8s forwards;
}
.oneSreen .slide-videoUp {
    animation: slide-videoUp-oneSreen 0.8s forwards;
}

@keyframes slide-videoUp {
    0% {
        height: 176px;
    }
    100% {
        height: 464px;
    }
}
@keyframes slide-videoUp-oneSreen {
    0% {
        height: 50%;
    }
    100% {
        height: 100%;
    }
}

.slide-minHeight {
    animation: slide-minHeight 1s forwards;
}

@keyframes slide-minHeight {
    0% {
        height: 464px;
        width: 200px;
    }
    100% {
        height: 188px;
        width: 140px;
    }
}

.slide-videoMin {
    animation: slide-videoMin 1s forwards;
}

@keyframes slide-videoMin {
    0% {
        height: 464px;
        transform: translateX(-40%);
    }

    100% {
        height: 176px;
        /* width: 128px; */
    }
}

.slide-maxWidth {
    animation: slide-maxWidth 1s forwards;
}
.oneSreen.slide-maxWidth {
    animation: slide-maxWidth-oneSreen 1s forwards;
}
@keyframes slide-maxWidth {
    0% {
        width: 272px;
    }
    100% {
        width: 529px;
    }
}
@keyframes slide-maxWidth-oneSreen {
    0% {
        width: 50%;
    }
    100% {
        width: 100%;
    }
}
.process{ height: 4px; margin-top: 55px; background: linear-gradient(90deg, #0251ff, #0bf0f0); border-radius: 4px; }
.oneSreen h4{ font-weight: normal; margin: 9px 0 8px 0; font-size: 11pt; }
.fcoc_info{ overflow: hidden; }
.fcoc_info li{width: 100%; margin-bottom: 6px; position: relative; overflow: hidden;}
.fcoc_info input,.fcoc_info textarea{ border:none; border-radius: 5px; width: 100%; resize: none;  background:#f1f5f8; color: #000; font-size: 12px; padding: 10px 12px; }
.fcoc_info textarea{ height:114px; }
.fcoc_info input::-webkit-input-placeholder,.fcoc_info textarea::-webkit-input-placeholder { color: #666;}
.fcoc_info input:-moz-placeholder,.fcoc_info textarea:-moz-placeholder {color: #666;}
.fcoc_info button{ cursor: pointer; transition: all 0.3s; width: 100%; height: 38px; line-height: 38px; border-radius: 5px; border: none; background: #1473e6; font-size: 14px; color: #fff;  }
.fcoc_info button:hover{ opacity: 0.85; }

#message-list{/*padding: 0 15px;height: 258px;overflow-y: auto;*/display: flex;flex-direction: column;margin-top: 6px;}
.message-left{align-self: end;width: fit-content;max-width: 100%;padding: 8px 12px;margin-bottom: 8px;/* margin-top: 4px; */border-radius: 12px 0 12px 12px;background: #e6f2ff;backdrop-filter: blur(1px);color: #141414;font-size: 13px;font-style: normal;font-weight: 400;line-height: 20px;letter-spacing: .28px;}
.message-right{border-radius: 0 12px 12px 12px;background: #f7f7f7;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 6px;align-self: start;backdrop-filter: blur(1px);color: #141414;font-size: 13px;font-style: normal;font-weight: 400;line-height: 20px;letter-spacing: .28px;width: fit-content;max-width: 100%;padding: 8px 12px;margin-bottom: 8px;}
.message_us{display: inline-block;background: #1473e6;color: #fff;border-radius: 60px;padding: 1px 12px;font-size: 15px;}
.message_us:hover{ transform: translateX(10px); color: #fff; }
.stopClose { display: none;align-items: center;position: fixed;bottom: 67px;border: 1px solid #ff1b2d; border-radius: 5px; padding: 6px 14px;font-size: 13px;color: #ff1b2d;    left: 50%;transform: translateX(-50%);
.stopClose .van-icon__image{float: left;}
.stopClose span{float: left; padding-left: 5px;}