caimei365-www/src/main/resources/static/css/caimei-chat/chats.css

/*PC端**/
 @media screen and (min-width:768px) {
    html,body{
    height: 100%;
    background: #FFFFFF;
    }
    #globalHead{ width: 100%;height: auto;position: fixed;top: 0;left: 0;z-index: 1999;box-shadow: 3px 3px 5px rgba(0,0,0,.1);display: none;}
    #globalHead .baseHeadTop{ display: none; }
    #globalHead .baseTopNav{ display: none; }
    #globalHead .hotKey{ display: none; }
    #globalHead .search{ margin-top: 0; }
    #globalHead .wechat_qrcode{ margin-top:5px; display: none;}
    #globalHead .baseHeadCenter .wrap{ padding: 10px 0;height: auto; }
    #globalHead .baseHeadCenter .logo{ width: 140px;height: 44px;margin-right: 162px; }
    #caimei-chat-content{
    height: 100%;
    }
    /*采美AI助手弹窗样式*/
     .cm_ai_container_body{
         width: 100%;
         height: 100%;
         box-sizing: border-box;
         position: relative;
         display: flex;
     }
     .cm_ai_container_records{
         width: 300px;
         box-shadow: 1px 0 20px rgba(0,0,0,.02);
         display: flex;
         flex-direction: column;
         height: 100%;
         box-sizing: border-box;
         padding: 10px 24px;
         position: absolute;
         flex: 0 0 auto;
         background-image: linear-gradient(180deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
     }
     .cm_ai_container_records .cm_ai_records_btn{
         height: 48px;
         line-height: 16px;
         cursor: pointer;
         flex-shrink: 0;
         padding: 16px 0;
         box-sizing: border-box;
         margin-bottom: 12px;
         background-color: rgba(255, 91, 0, 0.05);
         text-align: center;
         border-radius: 8px;
         display: flex;
         justify-content: center;
         color: #ff5b00 !important;
         opacity: 1 ;
     }
     .cm_ai_container_records .cm_ai_records_btn.disabled{
         cursor: not-allowed;
         opacity: 0.7 ;
     }
     .cm_ai_container_records .cm_ai_records_btn.show:hover{
         background-color: rgba(255, 91, 0, 0.1);
     }
     .cm_ai_container_records .cm_ai_records_btn .cm_ai_add{
         width: 16px;
         height: 16px;
         display: flex;
         background: url("/img/base/icon-aiAdd@2x.png") no-repeat;
         background-size: cover;
         margin-right: 3px;
     }
     .cm_ai_container_records .cm_ai_records_list{
         flex: 1;
         display: flex;
         flex-direction: column;
         overflow: hidden;
     }
     .cm_ai_container_records .cm_ai_records_item{
         display: flex;
         align-items: flex-start;
         height: 62px;
         padding: 14px 10px;
         gap: 8px;
         box-sizing: border-box;
         flex-direction: column;
         justify-content: space-between;
         cursor: pointer;
     }
     .cm_ai_container_records .cm_ai_records_item:hover{
         border-radius: 9px;
         background: hsla(0, 0%, 100%, .5);
     }
     .cm_ai_container_records .cm_ai_records_item .content{
         font-size: 14px;
         font-weight: 500;
         line-height: 14px;
         color: #50525c;
         display: -webkit-box;
         text-overflow: ellipsis;
         overflow: hidden;
         word-break: break-all;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
     }
     .cm_ai_container_records .cm_ai_records_item .time{
         font-size: 12px;
         font-weight: 400;
         line-height: 12px;
         color: #848691;
     }
     .cm_ai_container_records .cm_ai_records_user{
         flex-shrink: 0;
         display: flex;
         align-items: center;
         height: 72px;
         padding: 0 22px;
         font-size: 14px;
         cursor: pointer;
         border-top: 1px solid hsla(210, 3%, 87%, .5);
     }
     .cm_ai_container_records .cm_ai_records_user .avatar{
         width: 24px;
         height: 24px;
         border-radius: 100%;
         overflow: hidden;
     }
     .cm_ai_container_records .cm_ai_records_user .name{
         margin-left: 8px;
     }
     .cm_ai_container_main{
         width: calc(100% - 300px);
         height: 100%;
         margin-left: 300px;
         background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);
     }
     .cm_ai_container{
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
         padding:0 15px;
         position: relative;
     }
     .cm_ai_mall_header{
         box-sizing: border-box;
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         height: 64px;
         width: 100%;
         padding: 0 24px;
         background-image: linear-gradient(360deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         z-index: 99;
     }
     .cm_ai_mall_header .cm_ai_logo{
         display: flex;
         align-items: center;
         flex: 0 0 auto;
     }
     .cm_ai_mall_header .cm_ai_logo .logo{
         width: 120px;
         height: auto;
     }
     .cm_ai_mall_header .cm_ai_extra{
         flex: none;
     }
     .cm_ai_mall_header .cm_ai_extra .index{
         color: #1e1f24;
         cursor: pointer;
     }
     .cm_ai_mall_header .cm_ai_extra .index:hover{
         color: #ff5b00;
     }
     .cm_ai_content{
         width: 850px;
         height: auto;
         background-color: #FFFFFF;
         box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
         border-radius: 8px;
         box-sizing: border-box;
         padding: 10px;
         margin:0px auto 20px;
         position: relative;
     }
    .cm_ai_header{ width: 100%;height: 24px;box-sizing: border-box;justify-content: left;align-items: center;display: inline-flex;}
    .cm_ai_header .cm_ai_icon{ width: 24px;height: 24px;box-sizing: border-box;margin-right: 5px }
    .cm_ai_header .cm_ai_icon img{ width: 24px;height: 24px;display: block; }
    .cm_ai_header .cm_ai_text{line-height: 24px;font-size: 14px;color: #ff5b00;font-weight: 600; }
    .cm_ai_content .cm_ai_input{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 60px;
        padding: 0 ;
        overflow: hidden;
        box-sizing: border-box;
    }
    .cm_ai_content .cm_ai_input textarea{
        width: 100%;
        max-height: 106px !important;
        min-height: 60px !important;
        font-size: 14px;
        line-height: 1.5715;
        background-color: transparent;
        border: none;
        box-shadow: none;
        overflow: auto;
        scrollbar-width:none;
        resize: none;
        box-sizing: border-box;
        padding-left: 4px;
    }
    .cm_ai_content .cm_ai_input textarea:focus {
        outline: none;
    }
     .cm_ai_content .cm_ai_button_main{
         position: relative;
         right: 0;
         bottom: 0;
         display: flex;
         flex-direction: row-reverse;
         justify-content: space-between;
         width: 100%;
         height: 32px;
         margin-top: 4px;
     }
     .cm_ai_content .cm_ai_button{
         width: 66px;
         height: 32px;
         border-radius: 4px;
         background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         transition: all .16s;
         cursor: pointer;
     }
     .cm_ai_content .cm_ai_button.none{
         opacity: 0.5;
         cursor: not-allowed;
     }
     .cm_ai_content .cm_ai_button .cm_ai_icon{
         transition: all .16s;
         color: #FFFFFF;
     }
    .cm_ai_content .cm_ai_button:hover{
        transform: scale(1.05);
    }
    .cm_ai_content .cm_ai_button:hover .cm_ai_icon{
        transform: scale(1.05);
    }
    .cm_ai_answer_main{
        width: 850px;
        min-height: 600px;
        margin: 0 auto 15px;
        overflow-y: auto;
        flex: 9;
        padding: 64px 0 0 0;
    }
    .cm_ai_answer_main::-webkit-scrollbar{
        display: none;
    }
    .cm_ai_answer{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        position: relative;
        display: flex;
    }
    .cm_ai_answer.info{
         padding-left:0;
         padding-right:0;
    }
    .cm_ai_answer.chat{
         padding-left:36px;
         justify-content: flex-start;
    }
    .cm_ai_answer.user{
         padding-left:0px;
         padding-right:36px;
         justify-content: flex-end;
    }
    .cm_ai_answer.user .cm_ai_html_icon{
        width: 32px;
        height: 32px;
        border-radius: 20px;
        background-color: #FFFFFF;
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        padding: 5px;
    }
    .cm_ai_answer.chat .cm_ai_html_icon{
        width: 32px;
        height: 32px;
        border-radius: 20px;
        background-color: #FFFFFF;
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        padding: 5px;
    }
    .cm_ai_answer .cm_ai_html_icon.user{
        background-color: rgba(255,91,0,0.1);
    }
    .cm_ai_answer .cm_ai_html_icon img{
        width: 22px;
        height: 22px;
        border-radius: 20px;
        display: block;
    }
    .cm_ai_answer .cm_ai_html{
         width: auto;
         min-height: 50px;
         border-radius: 0 16px 16px 16px;
         line-height: 1.5715;
         background-color: #FFFFFF;
         box-sizing: border-box;
         padding: 10px;
         font-size: 16px;
         color: #666666;
     }
     .cm_ai_answer .cm_ai_html.info{
         width: 100%;
         border-radius: 16px;
         padding: 14px;
     }
     .cm_ai_answer .cm_ai_html.info h1{
         font-size: 30px;
         font-weight: 600;
         color: #333333;
         line-height: 60px;
         letter-spacing:2px;
     }
     .cm_ai_answer .cm_ai_html.user{
         min-height: 50px;
         margin-bottom: 0;
         border-radius: 16px 16px 0 16px;
         background-color: rgba(255, 91, 0, 0.1);
         font-size: 16px;
         color: #333333;
     }
    .cm_ai_answer .cm_ai_html .cm_ai_html_loading{
        width: 60px;
    }
    .cm_ai_answer .cm_ai_link{
         width: 100%;
         min-height: 100px;
         border-radius: 8px;
         line-height: 1.5715;
         background-color: #FFFFFF;
         box-sizing: border-box;
         margin: 10px 0 0 0;
     }
     .cm_ai_answer .cm_ai_link .cm_ai_link_p{
         line-height: 22px;
         font-size: 14px;
         color: #666666;
     }
     .cm_ai_answer .cm_ai_link .cm_ai_link_a{
         width: 100%;
         line-height: 22px;
         font-size: 14px;
         color: #999999;
         display: inline-block;
         text-decoration: underline;
     }
     .cm_ai_answer .cm_ai_link .cm_ai_link_a:hover{
         text-decoration-color: #ff5b00;
         color: #ff5b00;
     }
    footer{display: none;}
    #scrollTop .item .phone{ display: none; }
    #scrollTop .item .Iphone{ display: none; }

}

/*移动端**/
 @media screen and (max-width:768px){
    html,body{
        height: 100%;
        background: #FFFFFF;
    }
     #globalHead{ display: none;}
    .baseHeadCenter{ height: 14vw;}
    .baseHeadCenter .searchBox{display: none;}
    /*采美AI助手弹窗样式*/
     #caimei-chat-content,.cm_ai_container_body,.cm_ai_container_main{
         width: 100%;
         height: 100%;
         position: relative;
     }
    .cm_ai_container_records{
         display: none;
    }
    .cm_ai_container{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding:0 3vw 0 3vw;
        background-image: radial-gradient(circle at 14% 85%,#e7ecf7 0,rgba(231,236,247,0) 37%),radial-gradient(circle at 3.4% 3.7%,rgba(245,237,241,.5) 0,rgba(245,237,241,0) 28%),radial-gradient(circle at 100% 18%,#e8ebea 0,hsla(160,7%,92%,0) 30%),linear-gradient(180deg,#f5f4f6,#e6ebf7);
        overflow: auto;
        position: relative;
    }
     .cm_ai_mall_header{
         box-sizing: border-box;
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         height: 14vw;
         width: 100%;
         padding: 0 3vw;
         background-image: linear-gradient(360deg,#f0edf7 .03%,#ebeaf5 32.19%,#e8e8f3 68.86%,#e4eaf7 99.12%);
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         z-index: 99;
     }
     .cm_ai_mall_header .cm_ai_logo{
         display: flex;
         align-items: center;
         flex: 0 0 auto;
     }
     .cm_ai_mall_header .cm_ai_logo .logo{
         width: 26vw;
         height: auto;
     }
     .cm_ai_mall_header .cm_ai_extra{
         flex: none;
     }
     .cm_ai_mall_header .cm_ai_extra .index{
         color: #1e1f24;
         cursor: pointer;
     }
    .cm_ai_content{
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        box-shadow: 0 16px 20px 0 rgba(174,167,223,.2);
        border-radius: 8px;
        box-sizing: border-box;
        padding: 10px;
        margin:15px 0;
        position: relative;
    }
    .cm_ai_header{ width: 100%;height: 24px;box-sizing: border-box;justify-content: left;align-items: center;display: inline-flex;}
    .cm_ai_header .cm_ai_icon{ width: 24px;height: 24px;box-sizing: border-box;margin-right: 5px }
    .cm_ai_header .cm_ai_icon img{ width: 24px;height: 24px;display: block; }
    .cm_ai_header .cm_ai_text{line-height: 24px;font-size: 14px;color: #ff5b00;font-weight: 600; }
    .cm_ai_content .cm_ai_input{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 60px;
        padding: 5px 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    .cm_ai_content .cm_ai_input textarea{
        width: 100%;
        max-height: 106px !important;
        min-height: 60px !important;
        font-size: 14px;
        line-height: 1.5715;
        background-color: transparent;
        border: none;
        box-shadow: none;
        overflow: auto;
        scrollbar-width:none;
        resize: none;
        box-sizing: border-box;
        padding-left: 4px;
    }
    .cm_ai_content .cm_ai_input textarea:focus {
        outline: none;
    }
    .cm_ai_content .cm_ai_button_main{
         position: relative;
         right: 0;
         bottom: 0;
         display: flex;
         flex-direction: row-reverse;
         justify-content: space-between;
         width: 100%;
         height: 32px;
         margin-top: 4px;
     }
     .cm_ai_content .cm_ai_button{
         width: 66px;
         height: 32px;
         border-radius: 4px;
         background-image: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         transition: all .16s;
         cursor: pointer;
     }
     .cm_ai_content .cm_ai_button.none{
         opacity: 0.5;
         cursor: not-allowed;
     }
     .cm_ai_content .cm_ai_button .cm_ai_icon{
         transition: all .16s;
         color: #FFFFFF;
     }
    .cm_ai_content .cm_ai_button:hover{
        transform: scale(1.05);
    }
    .cm_ai_content .cm_ai_button:hover .cm_ai_icon{
        transform: scale(1.05);
    }
    .cm_ai_answer_main{
        width: 100%;
        min-height: 100vw;
        overflow-y: auto;
        flex: 9;
        padding: 14vw 0 0 0;
    }
    .cm_ai_answer_main::-webkit-scrollbar{
        display: none;
    }
    .cm_ai_answer{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        position: relative;
        margin: 10px 0;
        display: flex;
    }
    .cm_ai_answer.info{
         padding-left:0;
         padding-right:0;
    }
    .cm_ai_answer.chat{
        justify-content: flex-start;
    }
    .cm_ai_answer.user{
        justify-content: flex-end;
    }
    .cm_ai_answer .cm_ai_html_icon{
        width: 32px;
        height: 32px;
        border-radius: 20px;
        background-color: #FFFFFF;
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        padding: 5px;
        display: none;
    }
    .cm_ai_answer .cm_ai_html_icon.user{
        background-color: rgba(255,91,0,0.1);
    }
    .cm_ai_answer .cm_ai_html_icon img{
        width: 22px;
        height: 22px;
        border-radius: 20px;
        display: block;
    }
    .cm_ai_answer .cm_ai_html{
        min-height: 50px;
        border-radius: 0 16px 16px 16px;
        line-height: 1.5715;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 10px;
    }
    .cm_ai_answer .cm_ai_html.info{
         width: 100%;
         border-radius: 16px;
         padding: 14px;
    }
    .cm_ai_answer .cm_ai_html.info h1{
        font-size: 6vw;
        font-weight: 600;
        color: #333333;
        line-height: 14vw;
        letter-spacing: 0.3vw;
     }
    .cm_ai_answer .cm_ai_html.user{
         min-height: 50px;
         border-radius: 16px 16px 0 16px;
         background-color: rgba(255, 91, 0, 0.1);
         font-size: 16px;
         color: #666666;
    }
    .cm_ai_answer .cm_ai_html .cm_ai_html_loading{
        width: 60px;
    }
    .cm_ai_answer .cm_ai_link{
        width: 100%;
        min-height: 100px;
        border-radius: 8px;
        line-height: 1.5715;
        background-color: #FFFFFF;
        box-sizing: border-box;
        margin: 10px 0 0 0;
    }
    .cm_ai_answer .cm_ai_link .cm_ai_link_p{
        line-height: 22px;
        font-size: 14px;
        color: #666666;
    }
    .cm_ai_answer .cm_ai_link .cm_ai_link_a{
        width: 100%;
        line-height: 22px;
        font-size: 14px;
        color: #999999;
        display: inline-block;
        text-decoration: underline;
    }
    .cm_ai_answer .cm_ai_link .cm_ai_link_a:hover{
         text-decoration-color: #666666;
         color: #666666;
    }

    footer{display: none;}
}