.sun .sider-draw-info{
    background-color: #fff !important;
}
.sider-draw-info {
    width: 100%;
    background-color: #1E1F22;
    border-radius: 10px;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw-message-item {
    display: flex;
}

.draw-message-item .flex-align {
    display: flex;
    align-items: center;
}

.draw-image-item img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.draw-message-item .draw-m-time {
    color: #707070; font-size: 12px;
}
.draw-message-item .draw-m-consume {
    color: #707070; font-size: 12px;margin-left:15px;
}
.draw-message-item .draw-m-queue {
    color: #e6a23c; font-size: 12px;margin-left:15px;display: none;
}
.draw-message-item .draw-m-queue.visible {
    display: flex;align-items: center;gap: 2px;
}
.draw-message-item .draw-m-queue .queue_count {
    color: var(--primary-color);
}

.draw-message-item .draw-m-model {
    border-radius: 4px;
    height: 24px;
    line-height: 24px;
    --un-bg-opacity: .5;
    background-color: #1980FA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: #fff;
}
.sun .draw-message-item-answer{
    background-color: #fff !important;
}
.draw-message-item-answer {
    --un-bg-opacity: 1;
    background-color: rgba(64,61,56,var(--un-bg-opacity));
}

.draw-msg-btn-del,.draw-msg-btn-copy {
    cursor: pointer;
}

.box-desc {
    white-space: normal;
}

.d3_config_radio ul li{
    width: 72px;height: 40px; line-height: 40px; padding: 5px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    float: left;
    cursor: pointer;
}
.d3_config_radio ul li:hover, .d3_config_radio ul li.selected{
    border: 1px solid #1980FA;
}
.d3_config h1{ font-weight: bold}
.d3_config .layui-input{ border-radius: 10px}
.setting-size-bg{ background-color: #E5E7EB;}
.setting-size-value{ float: left; margin-top: 2px;}
.setting-size-value div{ float: left;}
.config-set ul li{ width: 72px; height: 40px; line-height: 40px;padding: 5px; text-align: center; font-size: 12px; border: 1px solid #ccc; border-radius: 5px; float: left; cursor: pointer;}
.clear{
    clear: both;
}

.dialog-show-image .dialog-tip-content {
    position: relative;
}

.dialog-tip-content .control-bar {
    width: 300px;
    height: 30px;
    line-height: 30px;
    background: rgba(255, 255, 255, .4);
    border-radius: 15px;
    position: absolute;
    bottom: 15px;
    left: calc(50% - 150px);
}
.dialog-tip-content .control-bar i {
    font-size: 20px !important;
    cursor: pointer;
}

.draw-msg-btn-copy {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
    margin-top:-2px;
}
#layui-layer-photos .icon-download {
    font-size: 18px;
}

.draw-image-item img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto; border-radius: 6px;
}
.sun .select-1-inner{
    background-color: #1980FA !important; color: #fff;
}
.select-1-inner {
    width: 100%;
    padding-right: 4%;
    height: 40px;
    line-height: 40px;
    background-color: #303033;
    border-radius: 3px;
}

.sun .select-1{background-color: #1980FA !important;}
.select-1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #303033;
    padding: 5px 30px 5px 5px;
    border-radius: 3px;
}
.sun .draw-image-item{ background-color: #ffffff !important;}
.draw-image-item {
    width: 250px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    background-color: #303033;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px 15px 0;
}

.draw-image-item .generating {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.draw-image-item .generating .gen_tip {
    position: absolute;
    bottom: 15px;
    color: #7e7b7b;
}

.draw-message-item .content {
    padding: 8px 0;
}
.sun .input-bg{
    background-color: #1980FA !important; padding: 0 5px !important;
}
.input-bg{
    background-color: #303033; padding: 0 5px
}
.sun #create-wanxiang-seed{
    background-color: #1980FA;
}
#create-wanxiang-seed{
    padding: 10px; border-radius: 5px; background-color: #18181c;
}

.sun .draw-header{
    background-color: #fff;
}
.draw-right{ border-left: 1px solid #ebebeb;}

.flex-center{
    display: flex;
    align-items: center;
    justify-content: center
}
.p-12{ font-size: 12px}
.sun .w-216{
    background-color:#FFF;
}
.w-216{ width: 216px; height: 216px; background-color:#1E1F22;border-radius:10px;flex-direction:column; display: flex;
    align-items: center;justify-content: center; box-sizing:border-box}
.el-image {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.el-image-64{width: 64px; height: 64px; margin-bottom: 10px;}
.mj-title{margin-bottom:5px;color: #333;display: flex;align-items: center; font-weight: bold}
.mj-title-icon{border-radius:3px; font-size: 12px;width: 28px; height: 16px; margin-left: 5px; color: #FFF; background-color: #1980FA; display: flex;
    align-items: center;justify-content: center}
.mj-desc{ color: #7D8289;flex-direction:column;}
.mj-desc-doc{word-break: break-all;white-space: normal; font-size: 12px; line-height: 15px; padding: 0px 10px 0px 10px; text-align: center}
.modal-list{
    padding-left: 8px;padding-right: 8px; overflow: hidden; flex: 1 1 0%;
}
.py-6{
    padding-top: 6px;padding-bottom: 6px;display: flex;align-items: center
}
.py-6 .el-image{
    display: block !important;
}
.modal-gc{ color: #333; margin-left: 5px; font-weight: 700;}
.modal-xj{border-radius:2px; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; margin-bottom: 10px; color: #949BA4;    display: flex;align-items: center;}
.mr-10{ margin-right: 10px;}
.h10{ height: 10px;}
.modal-desc{gap: 5px;justify-content:space-between; flex-direction:column;flex:1 1 0%; display:flex; height: 100%}
.modal-desc-title{ font-size: 13px; color: #333; display: flex; text-align: center;}
.modal-desc-d{ word-break: break-all;white-space: normal; font-size: 12px; line-height: 15px; color: #949BA4;}
.mj-mx{
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    margin: 0 8px;
    background-color: #1980FA;
    border-radius: 4px;
    white-space:normal;
    font-size: 12px;
    color: #fff;
}
.mj-time{ color: #333; font-size: 12px; white-space:pre-wrap; font-weight: normal}
.draw-m-model{ padding: 8px 0;}
.sun .mj-list{ background-color: #fff;}
.mj-list{ background-color: #403D38;  }
.sun .mj-m-model{ color: #333;}
.mj-m-model{    word-break: break-all;white-space: normal; color: #FFF; padding: 8px 0; font-size: 12px}
.mj-images{ width: 340px; padding: 10px 0;}
.mj-config-title{ line-height: 32px; margin-right: 15px; float: left;}
.sun .mj-config-span{ background-color: #DDDFEE !important; }
.mj-config-span{
    float: left;
    border-radius: 3px;
    font-size: 13px;
    height: 32px;
    margin-right: 8px;
    background-color: #4E5058;
    cursor: pointer;
    padding: 0 10px;
}
.sun .mj-config-span:hover{ background-color:#DDDFEE !important; }
.mj-config-span:hover{ background-color: #6e717c;}
.clear{ clear:both;}
.mj-draw-list{ margin-top: 10px;}
.draw-message-item{/*margin-top: 10px*/}

.generate-description {
    width: 100%;
    padding: 15px 1rem;
    margin: 0 auto;
}
.sun .generate-description .generate-description-body{
    background-color: #fff !important;
}
.generate-description .generate-description-body {
    position: relative;
    width: 100%;
    border-radius: 8px;
    background-color: #37393f;
    display: flex;
    color: #b4b9bf;
    z-index: 10;
    height: 100px;
    padding: 10px;
}
.sun .generate-description .generate-description-body .el-textarea__inner{
    color: #333;
}
.generate-description .generate-description-body .el-textarea__inner {
    background-color: transparent;
    box-shadow: none;
    color: #fff;
    padding-left: 0;
    padding-right: 0;
    resize: none; width: calc(100% - 200px); float: left;
}

.generate-description .generate-description-body .el-textarea__inner::-webkit-scrollbar {
    display: none!important
}

.generate-description .generate-description-body .guidance {
    position: absolute;
    top: 0;
    transform: translate(100px) translateY(calc(-100% + 30px))
}

.generate-description .generate-description-body .guidance-content {
    animation: scale-breathe 2s infinite linear
}

.generate-description .generate-description-body .mobile-guidance {
    transform: translate(-10px) translateY(calc(-100% + 30px))!important
}
.generate-description .mj-ov{
    overflow: hidden;  flex-direction:column; flex: 1 1 0%; width: 100%; height: 100%;
}
.mj-full{ width: 100%;  }
.fiex-1{ flex: 1 1 0%;}
.relative{ position: relative;}
.absolute{ position: absolute}
.z-5{ z-index: 5;}
.hidden{ display: none}

.primary-button {
    cursor: pointer;
    background-color: #5865f2;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    user-select: none; width: 78px; height: 36px; line-height: 36px; float: right;
}

.primary-button:hover {
    background-color: rgba(88,101,242,.867)
}

.primary-button:active {
    background-color: #5865f2
}

.primary-button.disabled {
    background-color: rgba(88,101,242,.533);
    cursor: not-allowed
}

.primary-button.disabled_black {
    cursor: not-allowed;
    background-color: #393b3f;
    user-select: none;
    color: #999
}
.btn-config{ margin-top: 5px; }
.sun .kuaisu{
    background-color: #1980FA; color: #fff;
}
.kuaisu{
    width: 89px;
    height: 28px;
    border-radius: 4px;
    background-color: #17181a;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #6d6f78;
    position: relative;
    cursor: pointer; float: left; margin-right: 10px;
}
.sun .kuaisu .select-2{ background-color: #1980FA; color: #fff;}
.kuaisu .select-2{ background: #17181a}

.layui-layer{ background: #1d2027 !important;}
.layui-layer-title{ color: #B4B9BF !important;}
.layui-layer-setwin span{ color: #B4B9BF !important;}
.sun .canshu_main{
    background: #EDF5FF; color: #333;
}
.canshu_main{ width: calc(100% - 20px); height: 100%; overflow-y: scroll; background: #1d2027; padding: 10px; color: #fff; padding-bottom: 120px;}
.sun .cs-title{
    color: #333;
}
.cs-title{width: 100%; height: 30px; line-height: 30px;  color: #fff; border-left: 5px solid #1980FA; border-radius: 5px; }
.cs-title h1{ margin-left: 10px}
.cs-title a{ height: 30px; display: inline-block;  color: #1980FA; padding: 0 5px; border-radius: 10px; border: 1px solid #1980FA; margin-right: 10px; float: right}
.sun .mj-item-block{
    color: #333;
}
.mj-item-block{ width: 500px; height: 35px; line-height: 35px; font-size: 12px; border-radius: 4px!important; color: #CBCBCB;  margin: 10px 0; display: flex; align-items:center; padding: 0 15px;}
.mj-item-right select{width: 200px;height: 30px;line-height: 30px;border-radius: 5px;background: #1980FA;color: #fff; margin-left: 80px; }
.cs-zy{ width: 450px; height: 100px; border: 1px solid #393c43; border-radius: 8px; margin: 10px 0; padding: 10px 0;     display: flex;flex-direction: column;justify-content: space-between; }
.mj-cs-bl{ display: flex; align-items: center; margin-top: 10px;}
.sun .mj-cs-bl ul li{ color: #333;}
.mj-cs-bl ul li{ width: 70px; height: 100px; margin: 0px 10px 10px 0; border-radius: 4px; border: 1px solid #393C43; text-align: center; float: left; color: #8E9093; padding-top: 10px; font-size: 12px;}
.mj-cs-bl ul li img{ width: 36px; height: 40px; margin-left: 15px;}
.modal-select, .modal-xj:hover {
    cursor: pointer;
    --un-gradient-shape: to right;
    --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops);
    background-image: linear-gradient(var(--un-gradient)); color: #fff;
}

.modal-select, .modal-xj:hover {
    --un-gradient-to-position: 100%;
    --un-gradient-to: rgba(68,103,235,var(--un-to-opacity, 1)) var(--un-gradient-to-position);
}
.modal-select, .modal-xj:hover {
    --un-gradient-from-position: 0%;
    --un-gradient-from: rgba(27,99,231,var(--un-from-opacity, 1)) var(--un-gradient-from-position);
    --un-gradient-to-position: 100%;
    --un-gradient-to: rgba(48,85,67,0) var(--un-gradient-to-position);
    --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);
}
.modal-select .modal-desc-title, .modal-xj:hover .modal-desc-title{
    color: #fff;
}
.modal-select .modal-desc-d, .modal-xj:hover .modal-desc-d{
    color: #fff;
}

.mj-ar-selected {
    border: 1px solid #5865F2 !important;
}
.sun #canshu_config{
    background: #EDF5FF; color: #333;
}
#canshu_config {
    width: 850px;
    height: 660px;
    position: absolute;
    left: 1rem;
    z-index: 1000;
    bottom: 120px;
    border-radius: 5px;
    overflow: hidden;
    background: #1d2027;
    display: none;
}

#canshu_config .n-card-header {
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
}

#canshu_config .n-card-header__main {
    width: calc(100% - 38px);
    padding: 10px; color: #1980FA;
}

.mj-img-item {
    width: 150px;
    height: 150px;
    margin: 10px 10px 10px 0;
    border: 2px #5E6166 dashed;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mj-upload-btn {
    margin-top: 56px;
    text-align: center;
}

.mj-img-item img {
    width: 100%;
    height: 100%;
}

.mj-img-item .layui-icon-close {
    position: absolute;
    right: 0;
    top: 0;
    background: #403d38;
    border-radius: 2px;
}

.range-input {
    width: 15% !important;
    padding: 5px;
}

.range-input-bar {
    position: relative;
    top: -2px;
    background-size: 34.6939% 100%;
}
.draw-shuoming{
    font-size: 12px; padding: 5px 0;
}

.draw-item-del-confirm {
    border: 1px solid var(--primary-color);
}

.SceneReplicationPanel{
    width: 100%; padding: 0 16px 0px;
}
.SceneReplicationPanel .upload_img{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.SceneReplicationPanel .upload_img .u_title{
    font-size: 14px;
    font-weight: 700;
    line-height: 20px; color: #1c1d1f;
}
.SceneReplicationPanel .upload_img .box_2{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 248px;
    padding: 8px;
    margin-top: 8px;
    border-radius: 8px; border: 1px dashed #d0d2d6; position: relative;
}
.SceneReplicationPanel .block_bx3{
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 8px 8px;
}
.SceneReplicationPanel .button_EO7FD{
    display: flex;
    min-width: 122px;
    height: 32px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D0D2D6;
    background: #FFF;
    color: #1C1D1F;
    cursor: pointer;
}
.SceneReplicationPanel .button_EO7FD span{
    font-size: 14px;
    margin-left: 4px;
}
.SceneReplicationPanel .desc_pVcxD{
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    text-align: center; color: #939599;
}

.footer_OrZg6{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 66px;
    padding: 16px;
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}
.xdesign-meidou-info-btn{
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color:#fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 8px;
    background: #38f;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.img_positio{
    width: 100%; height: 35px; line-height: 35px; position: absolute; right: 0; top: 0;
}
.img_positio_btn{ width: 35px; height: 35px;  line-height: 35px; text-align: center; margin-right: 10px; border-radius: 5px; background-color: #333; color: #fff; cursor: pointer}
.img_positio_btn:hover{ background-color: #1980fa}
.img_positio_btn_list{ display: flex; justify-content: flex-end;}

.kuozhan{ font-size: 12px; }
.kuozhan span{ margin-left: 5px}


/********新增 by hzj********/
.menu_son_list{margin-bottom: 0;}
/*弹窗*/
.mask_box{display:none;position: fixed;top: 0;left: 0;transition: left 0.5s ease;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.3);z-index: 999;align-items: center;justify-content: center;/*padding: 0 15px;*/}
.mask_box .box{display:none;position: relative;width:460px;background-color: #fff;border-radius: 12px;padding:30px 28px;box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.1)}
.mask_box .box .close::before,
.mask_box .box .close::after {cursor: pointer;content: '';position: absolute;top: -5px;right: -20px;width: 15px;height: 1px;background-color: #b5b5b5;transform: translate(-50%, -50%);}
.mask_box .box .close::before {transform: translate(-50%, -50%) rotate(45deg);}
.mask_box .box .close::after {transform: translate(-50%, -50%) rotate(-45deg);}
.mask_box .ref_edit_box .close::before,
.mask_box .ref_edit_box .close::after{top:25px;right: 8px;}
.mask_box .ref_edit_box{padding:0;width: 720px;}
.mask_box .ref_edit_box .header{padding:15px;border-bottom: 1px solid #f0f0f0;}
.mask_box .ref_edit_box .content_box{padding:15px;}
.mask_box .ref_edit_box .content_box .sub_top{border-radius: 10px;background-color: #17191d;position: relative;}
.mask_box .ref_edit_box .content_box .ref_img{max-height: 100%;max-width: 450px;}
.mask_box .ref_edit_box .content_box .cs_box{display: flex;justify-content: center;align-items: center;
    background-image: linear-gradient(45deg, #393c40 25%, transparent 0, transparent 75%, #393c40 0), linear-gradient(45deg, #393c40 25%, transparent 0, transparent 75%, #393c40 0);
    background-position: 0 0, 8px 8px;background-size: 16px 16px;
}
.mask_box .ref_edit_box .content_box .img_box {
    height: 338px; display: flex; justify-content: center;align-items: center;
    /*background-image: linear-gradient(45deg, #393c40 25%, transparent 0, transparent 75%, #393c40 0), linear-gradient(45deg, #393c40 25%, transparent 0, transparent 75%, #393c40 0);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;*/
    transition: all .3s ease-in-out;
}
.mask_box .ref_edit_box .content_box .ref_config{position: absolute;bottom:10px;left:10px;z-index: 1;}
.mask_box .ref_edit_box .content_box .ref_config .sub{padding:5px 10px;font-size:12px;background-color: #ccc;border-radius: 5px;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.mask_box .ref_edit_box .content_box .ref_config .rc_box{display:none;width:215px;position: absolute;top:-110px;z-index: 1;background-color: #fff;padding:8px;border-radius: 10px;}
.mask_box .ref_edit_box .content_box .ref_config .rc_box#autoDim{top:-43px;}
.mask_box .ref_edit_box .content_box .ref_config .rc_btn.active{background-color: #fff;}
.mask_box .ref_edit_box .content_box .ref_config input[type=range]{height: 20px;}
.mask_box .ref_edit_box .content_box .config_box{margin-top:15px;}
.mask_box .ref_edit_box .content_box .config_box .choose_label{color:#707070;}
.mask_box .ref_edit_box .content_box .config_box .dim_box{margin-top:10px;display: flex;align-items: center;gap: 20px;}
.mask_box .ref_edit_box .content_box .config_box .l_box{border-right: 1px solid #f0f0f0;padding-right: 20px;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio {position:relative;background-color:#f0f0f0;display: flex;align-items: center;justify-content:center;cursor: pointer;position: relative;padding: 8px 10px 8px 35px;border-radius: 8px;user-select: none;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.mask_box .ref_edit_box .content_box .config_box .radio-button {position: absolute;top: 9px;left: 10px;height: 20px;width: 20px;background-color: #fff;border: 2px solid #ccc;border-radius: 50%;transition: all 0.3s;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio input:checked ~ .radio-button {border-color: var(--primary-color);background-color: #fff;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio input:checked ~ .radio-text{color: #333;}
.mask_box .ref_edit_box .content_box .config_box .radio-button:after {content: "";position: absolute;display: none;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;border-radius: 50%;background: var(--primary-color);}
.mask_box .ref_edit_box .content_box .config_box .custom-radio input:checked ~ .radio-button:after {display: block;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio input:checked ~ .radio-button:after {display: block;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio .radio-text{color: #707070;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio .tips_box{display:none;position: absolute;padding: 10px;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);border-radius: 12px;width: 300px;background-color: #fff;z-index: 2;top: -242px;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio .tips_box video{border-radius: 12px;width: 100%;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio .tips_box .tip{margin:5px auto 10px;}
.mask_box .ref_edit_box .content_box .config_box .custom-radio[data-target="roleDim"] .tips_box{top: -185px;}
.mask_box .ref_edit_box .btn_box{display: flex;justify-content: right;align-items: center;padding:0 15px 15px;}
.mask_box .ref_edit_box .btn_box button{border-radius:5px;padding:8px 15px;color: #fff;min-width: 95px;}
.mask_box .ref_edit_box .btn_box button.save_btn{background-color: #1890FF;}
#message-wrapper-scroll .image-list{display: flex;align-items: center;width: calc(100% - 10px);gap: 1px;margin:0 auto;}
#message-wrapper-scroll .draw-message-item .item_top{padding:5px;}
#message-wrapper-scroll .draw-message-item .content{display: flex;align-items: center;position: relative;padding:6px;border-radius: 5px;}
#message-wrapper-scroll .draw-message-item .content .use_prompt{display: none;margin-left:6px;}
#message-wrapper-scroll .draw-message-item .content .use_prompt:hover{color: var(--primary-color);}
#message-wrapper-scroll .draw-message-item .content.hover{background-color: #f4f6fb;}
#message-wrapper-scroll .draw-message-item .content.hover .use_prompt{display: inline-block;cursor: pointer;}
#message-wrapper-scroll .draw-message-item .content.hover .config_box{display: none;}
#message-wrapper-scroll .draw-message-item .content.hover{position:absolute;left: auto;top: 28px;z-index: 10;/*width: 100%;*/}
#message-wrapper-scroll .draw-message-item .content.hover .draw-msg-content{display: block;-webkit-line-clamp: unset;-webkit-box-orient: unset;max-height: 300px;overflow-y: auto;}
#message-wrapper-scroll .draw-message-item:has(.content.hover) .image-list{/*padding-top:54px;*/}
#message-wrapper-scroll .draw-message-item .use_prompt{padding:0 5px;}
#message-wrapper-scroll .draw-message-item .summary_box{display: flex;position: relative;width: 100%;}
#message-wrapper-scroll .draw-message-item .summary_box .summary_sub{width: 100%;}
#message-wrapper-scroll .draw-message-item .summary_box.has_ref{display: grid;grid-template-columns: 60px auto;}
#message-wrapper-scroll .draw-message-item .ref_config{/*position:absolute;bottom:10px;left:0;*/display: flex;align-items: center;cursor: pointer;margin: auto 12px auto 10px;}
#message-wrapper-scroll .draw-message-item .ref_config .img_box{position: relative;display: grid;grid-template-areas: "overlap";bottom: 5px;left: 0;transform-origin: center bottom;transition: transform 0.3s ease;}
#message-wrapper-scroll .draw-message-item .ref_config .img_box .item{grid-area: overlap;transform: rotate(-9deg);}
#message-wrapper-scroll .draw-message-item .ref_config .r_img{height: 55px;width:55px;/*width: 100%;height: 100%;*/object-fit: cover;}
#message-wrapper-scroll .draw-message-item .ref_config .img_box .item.audio-item{width:45px;height:55px;}
#message-wrapper-scroll .draw-message-item .ref_config .img_box .item .ref_file_icon{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background-color:#f0f2f6;overflow:hidden;}
#message-wrapper-scroll .draw-message-item .ref_config .img_box .item .ref_file_icon i{font-size:20px;color:#1980FA;}
#message-wrapper-scroll .draw-message-item .ref_config .img_box .item .ref_file_icon span{font-size:10px;color:#666;}
#message-wrapper-scroll .draw-message-item .ref_config .quote_icon{width: 20px;height: 20px;border-radius: 100px;background-color: #00000060;display: flex;justify-content: center;align-items: center;position: absolute;top: 45px;left: 5px;z-index:10;color: #fff;}
#message-wrapper-scroll .draw-message-item .ref_config:hover{transform: scale(1.16) perspective(1000px) rotate(0deg);}
#message-wrapper-scroll .draw-message-item .ref_config:hover .quote_icon{display: none;}
#message-wrapper-scroll .draw-message-item .config_box{display: inline-flex;margin-left:15px;/*min-width: 185px;*/position: absolute;right: 0;bottom: 7px;background-color: #fff;color: #666;}
#message-wrapper-scroll .draw-message-item .config_box .sub{border-right:1px solid rgba(0, 0, 0, 0.1);padding: 0 5px;border-radius: 3px;display: inline-block;}
#message-wrapper-scroll .draw-message-item .config_box .sub:last-child{border-right:none;}
/* 图片编辑结果：左侧来源关联 + 功能名标签 */
#message-wrapper-scroll .draw-message-item .edit-prompt{display:inline-block;font-size:14px;line-height:20px;color:#333;vertical-align:middle;}
#message-wrapper-scroll .draw-message-item .edit-prompt:hover{color:#333;}
#message-wrapper-scroll .draw-message-item .edit-source{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border:1px solid rgba(0,0,0,0.08);border-radius:4px;cursor:pointer;color:#666;font-size:12px;vertical-align:middle;}
#message-wrapper-scroll .draw-message-item .edit-source:hover{color:#666;border-color:rgba(0,0,0,0.08);}
#message-wrapper-scroll .draw-message-item .edit-source .edit-from-img{width:18px;height:18px;object-fit:cover;border-radius:3px;}
#message-wrapper-scroll .draw-message-item .edit-source .edit-from-prompt{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;}
/* 点击"编辑自"跳转后目标记录高亮提醒 */
#message-wrapper-scroll .draw-message-item.edit-from-highlight{background-color:#f8f9fb !important;border-radius:6px;transition:background-color 0.6s ease;}
#message-wrapper-scroll .draw-message-item .config_box:before {background: linear-gradient(270deg, #fff, rgba(255, 255, 255, .99) 6.67%, rgba(255, 255, 255, .96) 13.33%, rgba(255, 255, 255, .92) 20%, rgba(255, 255, 255, .85) 26.67%, rgba(255, 255, 255, .77) 33.33%, rgba(255, 255, 255, .67) 40%, rgba(255, 255, 255, .56) 46.67%, rgba(255, 255, 255, .44) 53.33%, rgba(255, 255, 255, .33) 60%, rgba(255, 255, 255, .23) 66.67%, rgba(255, 255, 255, .15) 73.33%, rgba(255, 255, 255, .08) 80%, rgba(255, 255, 255, .04) 86.67%, rgba(255, 255, 255, .01) 93.33%, rgba(255, 255, 255, 0));content: "";height: 100%;left: -36px;position: absolute;width: 36px;}
#message-wrapper-scroll .draw-message-item .bottom_box{display: flex;justify-content: space-between;align-items: center;padding:0 5px;}
#message-wrapper-scroll .draw-message-item .bottom_box .icon_box{display: flex;justify-content: center;align-items: center;gap: 5px;margin-left: auto;}
#message-wrapper-scroll .draw-message-item .bottom_box .icon_box img{height: 20px;}
#message-wrapper-scroll .draw-message-item .bottom_box .icon_box span{font-size: 12px;color: var(--primary-color);margin-top:3px;}
#message-wrapper-scroll .draw-message-item .operate_box{display: flex;gap: 10px;margin-top:10px;}
#message-wrapper-scroll .draw-message-item .operate_box ._btn{position:relative;cursor: pointer;padding: 6px 10px;border-radius: 6px;background-color: #f4f6fb;display: flex;justify-content: center;align-items: center;gap: 3px;}
#message-wrapper-scroll .draw-message-item .operate_box ._btn:hover{background-color: #f0f2f6;}
#message-wrapper-scroll .draw-message-item .operate_box .more_btn{display:none;position: absolute;left: 40px;top: auto;width: 180px;border-radius: 15px;padding:1px;border: 1px solid #e9e9e9;}
#message-wrapper-scroll .draw-message-item .operate_box .more_btn ._btn{padding: 12px;border-radius: 13px;justify-content: left;gap:8px;}
#message-wrapper-scroll .draw-message-item .draw-image-item{position: relative;height: auto;overflow: unset;margin:unset;}
#message-wrapper-scroll .draw-message-item .draw-image-item img{border-radius: 0;}
#message-wrapper-scroll .draw-message-item .draw-image-item:first-child img{border-radius: 10px 0 0 10px;}
#message-wrapper-scroll .draw-message-item .draw-image-item:last-child img{border-radius: 0 10px 10px 0;}
#message-wrapper-scroll .draw-message-item .draw-image-item .loading_draw{height: 250px;padding:40px;}
#message-wrapper-scroll .draw-message-item .img_operate_box{display:none;position: absolute;top:10px;right: 10px;background-color: #00000080;border-radius: 6px;}
#message-wrapper-scroll .draw-message-item .img_operate_box .btn_group{display: flex;justify-content: center;align-items: center;gap: 3px;}
#message-wrapper-scroll .draw-message-item .img_operate_box .btn_group .btn{display:flex;justify-content: center;align-items:center;color: #fff;width: 30px;height: 30px;}
#message-wrapper-scroll .draw-message-item .img_operate_box .btn_group .btn:hover{background-color: #00000020;}
#message-wrapper-scroll .draw-message-item .handle_group{display:none;background-color: #00000080;position: absolute;bottom: 10px;left: auto;justify-content: center;align-items: center;gap: 3px;border-radius: 6px;}
#message-wrapper-scroll .draw-message-item .handle_group .btn{display:flex;justify-content: center;align-items:center;color: #fff;width: 35px;height: 30px;}
#message-wrapper-scroll .draw-message-item .handle_group .btn:hover{background-color: #00000020;}
#message-wrapper-scroll .draw-message-item .handle_group .more_list_popup{display:none;position:absolute;left:100%;top:0;background-color:#fff;border-radius:6px;flex-direction:column;padding:4px;margin-left:10px;white-space:nowrap;z-index:10;box-shadow:0 2px 12px rgba(0,0,0,0.15);}
#message-wrapper-scroll .draw-message-item .handle_group .more_list_popup .popup_arrow{position:absolute;left:-6px;top:12px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #fff;}
#message-wrapper-scroll .draw-message-item .handle_group .more_list_popup .popup_item{display:flex;align-items:center;gap:6px;color:#333;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px;}
#message-wrapper-scroll .draw-message-item .handle_group .more_list_popup .popup_item:hover{background-color:#f5f5f5;}
#message-wrapper-scroll .draw-message-item .handle_group .more_list_popup .popup_item i{color:#666;}
#message-wrapper-scroll .date_group{display: flex;justify-content: left;font-size: 1.5rem;font-weight: bold;padding: 0 1.8rem;}
#message-wrapper-scroll.default{scrollbar-width:none;}
#message-wrapper-scroll.default #message-wrapper{visibility:hidden;}

#message-wrapper-scroll .loading_skeleton{padding:10px 20px 30px;position: sticky;bottom: 0;top:20px;left: auto;z-index: 99;width: 100%;max-width: 1010px;margin: 60px auto 0;display: flex;flex-direction: column;gap: 25px;}
#message-wrapper-scroll .loading_skeleton .skeleton-header {height: 30px;width: 240px;background: linear-gradient(90deg, #f5f5f5 0%, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%, #f5f5f5 100%);
    background-size: 400% 100%;border-radius: 8px;margin-bottom: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);animation: smoothShimmer 8s ease-in-out infinite;
}
#message-wrapper-scroll .loading_skeleton .skeleton-list {display: grid;grid-template-columns: repeat(4,1fr);gap: 12px;}
#message-wrapper-scroll .loading_skeleton .skeleton-item {height: 230px;background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%, #f8f9fa 100%);
    background-size: 400% 100%;border-radius: 8px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);animation: smoothShimmer 8s ease-in-out infinite;
}
#message-wrapper-scroll .loading_skeleton .skeleton-item:nth-child(1) {animation-delay: 0s;}
#message-wrapper-scroll .loading_skeleton .skeleton-item:nth-child(2) {animation-delay: 0.1s;}
#message-wrapper-scroll .loading_skeleton .skeleton-item:nth-child(3) {animation-delay: 0.2s;}
#message-wrapper-scroll .loading_skeleton .skeleton-item:nth-child(4) {animation-delay: 0.3s;}
@keyframes smoothShimmer {
    0% {background-position: -400% 0;}
    100% {background-position: 400% 0;}
}

.layui-icon-star-fill{color:#ffa21e !important;;}
#message-wrapper-scroll #message-wrapper{width: 100%;text-align: center;}
#message-wrapper-scroll .draw-message-item .draw-msg-content{text-align:left;max-width: 100%;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
/* 历史消息中的参考标签（主体/上传参考项） */
#message-wrapper-scroll .draw-message-item .draw-msg-content .reference-tag{display: inline-flex;align-items: center;gap: 4px;padding: 1px 4px;border-radius: 6px;border: 1px solid #e5e7eb;background-color: #f8f9fa;margin: 0 2px;vertical-align: middle;color: #1980FA;font-size: 12px;line-height: 1.4;white-space: nowrap;}
#message-wrapper-scroll .draw-message-item .draw-msg-content .reference-tag .reference-tag-icon{width: 16px;height: 16px;display: flex;align-items: center;justify-content: center;background: #f0f2f6;border-radius: 3px;flex-shrink: 0;}
#message-wrapper-scroll .draw-message-item .draw-msg-content .reference-tag .reference-tag-icon i{font-size: 12px;color: #1980FA;}
#message-wrapper-scroll .draw-message-item .draw-msg-content .reference-tag .reference-tag-icon img{width: 100%;height: 100%;object-fit: cover;border-radius: 3px;}
#message-wrapper-scroll .draw-message-item .draw-msg-content .reference-tag .reference-tag-text{font-size: 12px;color: #666;white-space: nowrap;max-width: 80px;overflow: hidden;text-overflow: ellipsis;}
/* hover 展开时适配 */
#message-wrapper-scroll .draw-message-item .content.hover .draw-msg-content .reference-tag{white-space: nowrap;}
#message-wrapper-scroll .draw-message-item .content.hover .draw-msg-content .reference-tag .reference-tag-text{max-width: 100px;}
/* 历史消息标签悬停预览弹窗（fixed 定位，挂载到 body） */
.history-tag-preview{position:fixed;width:200px;height:200px;background:white;border-radius:8px;box-shadow:0 2px 15px rgba(0,0,0,0.1);z-index:10001;padding:0;overflow:hidden;}
.history-tag-preview .preview-image{width:100%;height:100%;object-fit:cover;}
.history-tag-preview .preview-title{position:absolute;top:0;left:0;right:0;font-size:14px;font-weight:bold;color:white;background:linear-gradient(to bottom,rgba(0,0,0,0.7),transparent);height:30px;line-height:30px;padding:0 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:8px 8px 0 0;}
.history-tag-preview.reference-audio{border-radius:10px;padding:6px;height:auto;width:auto;}
.history-tag-preview.reference-audio .preview-title{position:relative;color:#333;font-weight:normal;background:unset;height:auto;line-height:normal;border-radius:0;}
.history-tag-preview.reference-audio .preview-audio-player{height:auto;min-height:60px;}
.history-tag-preview.reference-video{background-color:#000;}
.history-tag-preview .preview-video-player,.history-tag-preview .preview-audio-player{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
/* 多图预览布局 */
.history-tag-preview .preview-multi-grid{display:flex;width:100%;height:100%;}
.history-tag-preview .preview-main{flex:3;height:100%;overflow:hidden;}
.history-tag-preview .preview-main .preview-image{width:100%;height:100%;object-fit:cover;}
.history-tag-preview .preview-side{flex:2;display:flex;flex-direction:column;}
.history-tag-preview .preview-side-item{flex:1;overflow:hidden;}
.history-tag-preview .preview-side-item .preview-image{width:100%;height:100%;object-fit:cover;}
/* 编辑来源缩略图悬停预览：弹窗宽高跟随图片实际比例 */
.history-tag-preview.edit-from-img-preview{width:auto;height:auto;max-width:240px;max-height:240px;background:#f5f6f8;}
.history-tag-preview.edit-from-img-preview .preview-image{display:block;width:auto;height:auto;max-width:240px;max-height:240px;}
/* 筛选Toolbar */
.draw-toolbar{display:flex;align-items:center;gap:8px;font-size:12px;flex-shrink:0;}
/* 搜索框（在按钮组内部展开） */
.toolbar-search-input-wrap{overflow:hidden;width:0;transition:width 0.25s ease;flex-shrink:0;display:flex;align-items:center;}
.toolbar-search-input-wrap.expanded{width:180px;}
.toolbar-search-input-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;color:#999;font-size:13px;}
.toolbar-search-input{flex:1;height:28px;border:none;outline:none;font-size:12px;padding:0 4px;box-sizing:border-box;background:transparent;min-width:0;}
.toolbar-search-input::placeholder{color:#bbb;}
.toolbar-search-clear{display:none;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;cursor:pointer;color:#999;font-size:13px;transition:color 0.15s;}
.toolbar-search-clear:hover{color:#333;}
.toolbar-search-clear.visible{display:flex;}
/* 搜索按钮（在按钮组内） */
.toolbar-search-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border:none;border-radius:6px;background:#fff;cursor:pointer;color:#666;transition:all 0.2s;font-size:14px;padding:0;}
.toolbar-search-btn:hover{color:#666;background:#f5f5f5;}
.toolbar-search-btn.hidden{display:none;}
/* 按钮组首尾圆角 */
.toolbar-btn-first{border-radius:6px !important;}
.toolbar-btn-last{border-radius:6px !important;}
/* 按钮组 */
.toolbar-btn-group{display:flex;align-items:center;border:1px solid #f5f5f5;border-radius:6px;padding:2px;}
.toolbar-btn-group .toolbar-dropdown{position:relative;}
.toolbar-btn-group .toolbar-dropdown-btn{display:flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:none;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#333;white-space:nowrap;transition:background 0.2s;}
.toolbar-btn-group .toolbar-dropdown-btn:hover{background:#f5f5f5;}
.toolbar-btn-group .toolbar-dropdown-btn .toolbar-dropdown-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.toolbar-btn-group .toolbar-dropdown-btn svg{transition:transform 0.2s ease;}
.toolbar-btn-group .toolbar-dropdown.open .toolbar-dropdown-btn svg{transform:rotate(180deg);}
/* 按钮组分隔线 */
.toolbar-divider{display:block;width:1px;height:16px;background:#f5f5f5;flex-shrink:0;}
/* 下拉面板 */
.toolbar-dropdown-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:100px;background:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:100;padding:6px;}
.toolbar-dropdown-panel-wide{min-width:180px;}
.toolbar-dropdown-panel-narrow{width:260px;min-width:260px;}
.toolbar-dropdown.open .toolbar-dropdown-panel{display:block;}
/* 面板头部 */
.toolbar-panel-header{padding:4px 12px;font-size:12px;color:#999;display:flex;justify-content:space-between;align-items:center;}
.toolbar-panel-clear{display:none;cursor:pointer;color:#999;font-size:12px;}
.toolbar-panel-clear:hover{color:#333;}
.toolbar-dropdown-panel.has-selection .toolbar-panel-header:hover .toolbar-panel-clear{display:inline;}
/* 面板选项 */
.toolbar-dropdown-item{padding:6px 12px;cursor:pointer;color:#333;white-space:nowrap;transition:background 0.15s,color 0.15s;display:flex;align-items:center;gap:8px;border-radius:6px;}
.toolbar-dropdown-item:hover{background:#f5f5f5;color:#333;}
.toolbar-dropdown-item.active{color:#333;font-weight:500;}
.toolbar-dropdown-check{display:none;margin-left:auto;flex-shrink:0;width:14px;height:14px;border-radius:3px;border:1px solid #ccc;background:transparent;color:#333;align-items:center;justify-content:center;}
.toolbar-dropdown-item:hover .toolbar-dropdown-check{display:flex;border-color:#333;}
.toolbar-dropdown-item.active .toolbar-dropdown-check{display:flex;border-color:#333;color:#333;}
.toolbar-dropdown-check svg{display:none;}
.toolbar-dropdown-item.active .toolbar-dropdown-check svg{display:block;}
/* 日期范围 */
.toolbar-date-range{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;}
.toolbar-date-input-wrap{flex:1;display:flex;align-items:center;position:relative;min-width:0;}
.toolbar-date-input{flex:1;height:35px;border:none;border-radius:6px;padding:0 26px 0 26px;font-size:11px;color:#333;outline:none;min-width:0;box-sizing:border-box;background:#f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='14' height='14'%3E%3Cpath fill='%23999' d='M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32z m-40 656H184V460h656v380zM184 332V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v76H184z'/%3E%3C/svg%3E") no-repeat;background-position:left 8px center;}
.toolbar-date-clear{display:none;position:absolute;right:4px;top:50%;transform:translateY(-50%);align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;color:#999;font-size:12px;transition:color 0.15s;background:transparent;}
.toolbar-date-clear:hover{color:#333;background:#eee;}
.toolbar-date-clear.visible{display:flex;}
.toolbar-date-sep{color:#999;font-size:11px;flex-shrink:0;}
/* laydate 自定义样式 */
.layui-laydate{border-radius:6px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.12);border:none;}
.layui-laydate .layui-laydate-header{border-radius:6px 6px 0 0;border-bottom:none;}
.layui-laydate .layui-laydate-footer{border-radius:0 0 6px 6px;display:none;}
.layui-laydate .layui-laydate-main td.layui-this{background-color:#333!important;border-radius:50%;}
.layui-laydate .layui-laydate-main td.layui-this div{background-color:#333!important;border-radius:50%;}
.layui-laydate .layui-laydate-main td.layui-this:hover{background-color:#333!important;}
.layui-laydate .layui-laydate-main td.layui-this:hover div{background-color:#333!important;}
.layui-laydate .layui-laydate-main td:hover{border-radius:50%;}
.layui-laydate .layui-laydate-main td:hover div{border-radius:50%;}
.layui-laydate td.laydate-day-prev:hover,
.layui-laydate td.laydate-day-next:hover{background-color:#f5f5f5;border-radius:50%;}
.layui-laydate td.laydate-day-now{background-color:#f5f5f5;border-radius:50%;}
/* 快捷列表 */
.toolbar-quick-list{padding:4px 0;}
.toolbar-quick-item{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;cursor:pointer;color:#333;font-size:12px;transition:background 0.15s;border-radius:6px;}
.toolbar-quick-item:hover{background:#f5f5f5;}
.toolbar-quick-item.active{color:#333;}
/* 筛选提示条 */
#toolbarFilterHint{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 0;margin-top:10px;width:100%;}
.toolbar-filter-hint-text{font-size:13px;color:#999;white-space:nowrap;}
.toolbar-filter-sep-inline{color:#eee;font-size:13px;}
.toolbar-filter-clear-btn{border:none;background:none;color:#666;font-size:13px;cursor:pointer;padding:0;}
.toolbar-filter-clear-btn:hover{color:#333;}
.toolbar-quick-check{display:none;color:#333;flex-shrink:0;}
.toolbar-quick-item.active .toolbar-quick-check{display:block;}
/*图片预览弹窗*/
/*.mask_box .img_preview_box{width: 100%;height: 100vh;border-radius: 0;padding:20px 6%;}*/
.mask_box .img_preview_box{width: 100% !important;height: 100vh;border-radius: 0;padding:20px 6% !important;}
.mask_box .img_preview_box .content_box{display: grid;grid-template-columns: 50px auto;}
.mask_box .img_preview_box .content_box .close{cursor:pointer;width: 36px;height: 36px;border-radius: 5px;display: flex;justify-content: center;align-items: center;background-color: #E5E7EB90;}
.mask_box .img_preview_box .content_box .close:hover{background-color: #E5E7EB60;}
.mask_box .img_preview_box .content_box .c_right{padding:16px;display: grid;grid-template-columns: 70% calc(30% - 21px);gap: 20px;border-radius: 15px;background-color: #fff;height: calc(100vh - 40px);}
.mask_box .img_preview_box .content_box .c_right .sub_left{display: flex;flex-direction: column;height: 100%;}
.mask_box .img_preview_box .content_box .c_right .sub_left .sub{display: flex;justify-content: center;align-items: center;}
.mask_box .img_preview_box .content_box .c_right .sub_left .sub_top{height:40px;display: flex;justify-content: right;align-items: center;gap: 10px;}
.mask_box .img_preview_box .content_box .c_right .sub_left .sub_top .btn{cursor:pointer;width: 36px;height: 36px;border-radius: 3px;background-color: #E5E7EB90;color:#333;display: flex;justify-content: center;align-items: center;}
.mask_box .img_preview_box .content_box .c_right .sub_left .sub_top .btn:hover{background-color: #E5E7EB60;}
.mask_box .img_preview_box .content_box .c_right .sub_left .img_box{
    flex:auto;padding:30px 0;display: flex;justify-content: center;align-items: center;
    background-image: radial-gradient(circle, #999 1px, transparent 1px);
    background-size: 20px 20px;background-repeat: repeat;
}
.mask_box .img_preview_box .content_box .c_right .sub_left .img_box img{max-width:100%;max-height: 700px;border-radius: 8px;}
.mask_box .img_preview_box .content_box .c_right .sub_left .img_box img:hover{cursor: zoom-in;}
.mask_box .img_preview_box .content_box .c_right .sub_left .switch_box{height: 40px;line-height:40px;display: flex;align-items: center;gap: 5px;}
.mask_box .img_preview_box .content_box .c_right .sub_left .switch_box .slide{cursor: pointer;}
.mask_box .img_preview_box .content_box .c_right .sub_right{position: relative;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_top .sub_box{margin-top:10px;border-radius: 6px;padding:12px;background-color: #F3F5F9;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_top .img_list{display: grid;grid-template-columns:repeat(4,1fr);align-items: center;gap: 2px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_top .img_item{cursor: pointer;border-radius: 3px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_top .img_item img{border-radius: 0;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_top .img_item:first-child img{border-radius: 5px 0 0 5px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_top .img_item:last-child img{border-radius: 0 5px 5px 0;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_top .detail_box{margin-top:8px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .detail_box .content{margin-top:5px;padding-bottom:10px;display: flex;align-items: center;font-size: 14px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .detail_box .prompt_val{max-height: 300px;overflow: auto;color: #333}
/* 图片预览弹窗中的主体/参考标签样式 */
.mask_box .img_preview_box .prompt_val .reference-tag{display: inline-flex;align-items: center;gap: 4px;padding: 1px 4px;border-radius: 6px;border: 1px solid #e5e7eb;background-color: #f8f9fa;margin: 0 2px;vertical-align: middle;color: #1980FA;font-size: 12px;line-height: 1.4;white-space: nowrap;cursor: default;}
.mask_box .img_preview_box .prompt_val .reference-tag .reference-tag-icon{width: 16px;height: 16px;display: flex;align-items: center;justify-content: center;background: #f0f2f6;border-radius: 3px;flex-shrink: 0;}
.mask_box .img_preview_box .prompt_val .reference-tag .reference-tag-icon i{font-size: 12px;color: #1980FA;}
.mask_box .img_preview_box .prompt_val .reference-tag .reference-tag-icon img{width: 100%;height: 100%;object-fit: cover;border-radius: 3px;}
.mask_box .img_preview_box .prompt_val .reference-tag .reference-tag-text{font-size: 12px;color: #666;white-space: nowrap;max-width: 120px;overflow: hidden;text-overflow: ellipsis;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box{position:relative;display: none;align-items: center;gap:5px;border-radius: 2px;cursor: pointer;margin-right: 5px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .r_img{max-width: 20px;height: 20px;border-radius: 2px 0 0 2px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .label{min-width:55px;color: #333;font-size: 12px;line-height: 20px;border-radius: 0 2px 2px 0;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .img_box{display:none;position: absolute;top: 25px;left: -13px;width: 165px;background-color: #fff;border-radius: 15px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .img_box img{border-radius: 15px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .img_box .operate{position: absolute;top: 0;left: 0;z-index: 2;width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 6px 12px;color:#fff;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .img_box .operate .label{color: #fff;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .img_box .image_mask{
    border-radius: 15px;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 25%);pointer-events: none;
}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .img_box .operate_r{background-color: #00000030;border-radius: 5px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .ref_box .img_box .slide{padding:5px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .info{margin-top:10px;display: grid;grid-template-columns: repeat(4, 1fr);justify-content: center;align-items: center;font-size: 12px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .info .sub{display: flex;justify-content: center;padding:0 5px;border-right: 1px solid #E5E7EB;}
.mask_box .img_preview_box .content_box .c_right .sub_right .info .sub:last-child{border-right:none;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_bottom{position: absolute;bottom: 0;left: 0;width: 100%;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_bottom .btn_group{margin-top:5px;display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_bottom .btn{width: 100%;padding:8px 12px;border-radius: 5px;background-color: #F3F5F9;color: #333;cursor: pointer;display: flex;align-items: center;gap: 5px;}
.mask_box .img_preview_box .content_box .c_right .sub_right .sr_bottom .btn:hover{background-color: #edf0f5;}
.pulse_animation {animation: pulse 1s infinite;opacity: 0.5;}
@keyframes pulse {
    0% {opacity: 0.5;}
    50% {opacity: 0.8;}
    100% {opacity: 0.5;}
}

/* 视频预览样式 */
.video_generating_container {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.video_generating_animation {
    width: 80px;
    height: 80px;
    border: 4px solid #333;
    border-top: 4px solid #1890ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.video_preview_container {
    width: 100%;
    position: relative;
    border-radius: 8px;
    background-color: #1a1a1a;
}

.video_preview {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: contain;
    border-radius: 8px;
}

.video_preview_controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    border-radius: 5px;
}

.video_preview_container:hover .video_preview_controls {
    opacity: 1;
}

.video_control_btn {
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.video_control_btn:first-child {
    border-radius: 5px 0 0 5px;
}

.video_control_btn.download {
    border-radius: 5px;
}

.video_control_btn:last-child {
    border-radius: 0 5px 5px 0;
}

.video_preview_container:hover .video_control_btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/*提示词输入框*/
#inputAreaBox{position: sticky;bottom: 0;left: auto;z-index:99;width: 100%;max-width: 900px;margin: 60px auto 0;padding-bottom: 30px;}
.input_area .content_box {display: flex;flex-direction: column;gap: 30px;position: relative;padding: 15px 20px;border-radius: 15px;background-color: #fff;border: 1px solid #e9e9e9;box-shadow: 0 2px 15px #00000020;}
.input_area .content_top{display: grid;grid-template-columns: 70px auto;gap:15px;}
.input_area .content_top .c_top_l{padding:5px;position: relative;}
.input_area .content_top .c_top_r{width: 100%;position: relative;}

/* 视频模式圆形按钮组 */
.input_area .content_top .c_top_l .video_circle_buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* 圆形按钮分割线 */
.input_area .content_top .c_top_l .video_circle_separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
}

.input_area .content_top .c_top_l .video_circle_separator.arrow {
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
}
.input_area .content_top .c_top_l .video_circle_separator.arrow:hover {
    color: #666;
}

.input_area .content_top .c_top_l .video_circle_separator.line {
    width: 1px;
    height: 20px;
    background-color: #e0e0e0;
}
.input_area .content_top .c_top_l .video_circle_btn {
    width: 60px;
    height: 84px;
    border: 1px solid #f0f2f6;
    background-color: #f0f2f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #666;
    padding: 12px;
}
.input_area.scroll .content_top .c_top_l .video_circle_btn {
    width: 42px;
    height: 56px;
}

.input_area .content_top .c_top_l .video_circle_btn.first_frame_btn {
    transform: rotate(-9deg);
}

.input_area .content_top .c_top_l .video_circle_btn.last_frame_btn {
    transform: rotate(9deg);
}

.input_area .content_top .c_top_l .video_circle_btn:hover {
    background-color: #f2f4f8;
    transform: scale(1.16) perspective(1000px) rotate(-9deg);
}

.input_area .content_top .c_top_l .video_circle_btn.last_frame_btn:hover {
    transform: scale(1.16) perspective(1000px) rotate(9deg);
}

.input_area .content_top .c_top_l .video_circle_btn i {
    font-size: 12px;
}

.input_area .content_top .c_top_l .video_circle_btn span {
    font-size: 12px;
}
.input_area.scroll .content_top .c_top_l .video_circle_btn span {
    font-size: 8px;
}
.input_area .content_top .c_top_l .video_circle_btn.has-image {
    background-color: #f0f2f6;
    position: relative;
}
.input_area .content_top .c_top_l .video_circle_btn.has-image .btn-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.input_area .content_top .c_top_l .video_circle_btn.has-image .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.input_area .content_top .c_top_l .video_circle_btn.has-image:hover .image-overlay {
    opacity: 1;
}
.input_area .content_top .c_top_l .video_circle_btn.has-image .image-overlay i {
    color: white;
    font-size: 20px;
    margin-bottom: 4px;
}
.input_area .content_top .c_top_l .video_circle_btn.has-image .image-overlay span {
    color: white;
    font-size: 12px;
}

.input_area .content_top .c_top_l .video_circle_btn .del_btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.input_area .content_top .c_top_l .video_circle_btn:hover .del_btn {
    opacity: 1;
    visibility: visible;
}
.input_area .content_top .c_top_l .video_circle_btn .del_btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.input_area .content_top #content .at-button {color: #1980FA;cursor: pointer;font-weight: bold;padding: 2px 4px;border-radius: 6px;border: 1px solid #f0f0f0;margin: 0 3px;}
/* 参考项标签样式 */
.input_area .content_top #content .reference-tag {max-height:30px;color: #1980FA;cursor: pointer;position: relative;display: inline-flex;align-items: center;gap: 5px;padding: 2px 4px;border-radius: 6px;border: 1px solid #f0f2f6;background-color: #f8f9fa;margin: 0 2px;vertical-align: middle;}
.input_area .content_top #content .reference-tag .reference-tag-icon {
    width: 18px;height: 18px;display: flex;align-items: center;justify-content: center;background: #f0f2f6;border-radius: 4px;flex-shrink: 0;
}
.input_area .content_top #content .reference-tag .reference-tag-icon img {width: 100%;height: 100%;object-fit: cover;border-radius: 4px;}
.input_area .content_top #content .reference-tag .reference-tag-icon i {font-size: 16px;color: #1980FA;}
.input_area .content_top #content .reference-tag .reference-tag-text {font-size: 12px;color:#666;white-space: nowrap;max-width: 100px;overflow: hidden;text-overflow: ellipsis;}
/* 参考项标签预览样式 */
.input_area .reference-tag-preview.reference-image {}
.input_area .reference-tag-preview.reference-audio {border-radius:10px;padding:6px;top:-106px;height:auto;width:auto;}
.input_area .reference-tag-preview.reference-audio .preview-title {position: relative;color: #333;font-weight: normal;background: unset;height: auto;line-height: normal;border-radius: 0;}
.input_area .reference-tag-preview.reference-video {background-color: #000}
.input_area .reference-tag-preview {
    position: absolute;top: -220px;left: 0;width: 200px;height: 200px;background: white;
    border-radius: 8px;box-shadow: 0 2px 15px rgba(0,0,0,0.1);z-index: 1001;padding: 0;overflow: hidden;
}
.input_area .reference-tag-preview .preview-image {width: 100%;height: 100%;object-fit: cover;}
.input_area .reference-tag-preview .preview-video,
.input_area .reference-tag-preview .preview-audio {width: 100%;height: 100%;background: #f0f2f6;
    display: flex;align-items: center;justify-content: center;
}
.input_area .reference-tag-preview .preview-video i,
.input_area .reference-tag-preview .preview-audio i {font-size: 40px;color: #1980FA;}
.input_area .reference-tag-preview .preview-title {position: absolute;top: 0;left: 0;right: 0;font-size: 14px;font-weight: bold;color: white;background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);height: 30px;line-height: 30px;padding: 0 10px;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;border-radius: 8px 8px 0 0;}
.input_area .reference-tag-preview .preview-edit-btn {position: absolute;top: 5px;right: 5px;font-size: 14px;color: white;cursor: pointer;z-index: 10;opacity: 0.8;transition: opacity 0.2s;}
.input_area .reference-tag-preview .preview-edit-btn:hover {opacity: 1;}
/* 多图预览布局 */
.input_area .reference-tag-preview .preview-multi-grid {display: flex;width: 100%;height: 100%;}
.input_area .reference-tag-preview .preview-main {flex: 3;height: 100%;overflow: hidden;}
.input_area .reference-tag-preview .preview-main .preview-image {width: 100%;height: 100%;object-fit: cover;}
.input_area .reference-tag-preview .preview-side {flex: 2;display: flex;flex-direction: column;}
.input_area .reference-tag-preview .preview-side-item {flex: 1;overflow: hidden;}
.input_area .reference-tag-preview .preview-side-item .preview-image {width: 100%;height: 100%;object-fit: cover;}
/* 参考项弹窗样式 */
.input_area .reference-popup {position: absolute;left: 0;bottom: 100%;width: 34%;background: white;border: 1px solid #e9e9e9;border-radius: 8px;box-shadow: 0 2px 15px rgba(0,0,0,0.1);z-index: 1000;padding: 6px;overflow: visible;display: flex;flex-direction: column;max-height: 350px;}
.input_area .reference-popup .popup-scroll-wrap {flex: 1 1 auto;overflow-y: auto;overflow-x: hidden;min-height: 0;}
.input_area .reference-popup .popup-header {color: #888;padding: 6px;flex-shrink: 0;}
.input_area .reference-popup .reference-list{display: grid;grid-template-columns: 1fr;gap: 4px;}
.input_area .reference-popup .reference-item {display: flex;align-items: center;cursor: pointer;padding:6px 8px;border-radius: 8px;transition: background-color 0.2s;box-sizing: border-box;min-width: 0;}
.input_area .reference-popup .reference-item:hover {background-color: #f5f5f5;}
.input_area .reference-popup .reference-item-icon {margin-right: 6px;width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;background: #f0f2f6;border-radius: 6px;flex-shrink: 0;}
.input_area .reference-popup .reference-item-icon img {width: 100%;height: 100%;object-fit: cover;border-radius: 6px;}
.input_area .reference-popup .reference-item-icon .video-icon-container {position: relative;width: 100%;height: 100%;}
.input_area .reference-popup .reference-item-icon .video-frame-icon {width: 100%;height: 100%;object-fit: cover;border-radius: 6px;}
.input_area .reference-popup .reference-item-icon i {font-size: 20px;color: #1980FA;}
.input_area .reference-popup .reference-item-title {font-size: 14px;flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ref-title-tooltip {background: rgba(0,0,0,0.8);color: #fff;padding: 5px 10px;border-radius: 6px;font-size: 12px;white-space: nowrap;pointer-events: none;}
.input_area .reference-popup .reference-empty-tip {padding: 16px;text-align: center;color: #999;font-size: 13px;}
.input_area .reference-popup .reference-item .video-frame-container {position: relative;width: 100%;height: 100%;}
.input_area .reference-popup .reference-item .video-duration-overlay {position: absolute;bottom: 0;left: 0;right: 0;color: white;font-size: 10px;padding: 1px;text-align: center;}

.input_area .content_top #content {background-color:transparent;resize: none;position: relative;z-index: 1;width: 100%;height: 80px;outline: unset;}
.input_area .content_top #uploadRefBtn,
/*.input_area .content_top #moreUploadBtn,*/
.input_area .content_top .editRefBtn{cursor:pointer;position:absolute;left:auto;top:auto;z-index:30;transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);transform: rotate(-9deg);border:1px solid #f0f2f6;display: flex;justify-content: center;align-items: center;width: 100%;height:84px;background-color: #f0f2f6;}
.input_area .content_top #uploadRefBtn i{font-size: 20px;}
.input_area .content_top #uploadRefBtn:hover,
/*.input_area .content_top #moreUploadBtn:hover,*/
.input_area .content_top .editRefBtn:hover{transform: scale(1.16) perspective(1000px) rotate(-9deg);background-color: #f2f4f8;}
.input_area .content_top .editRefBtn .ref_img{width: 100%;height: 100%;object-fit: cover;}/* 视频预览图像样式 */
.input_area .content_top .editRefBtn.video-btn .ref_img {object-fit: cover;}
.input_area .content_top .editRefBtn.video-btn .video-duration {
    position: absolute;bottom: 4px;left: 4px;background: rgba(0, 0, 0, 0.7);color: white;font-size: 12px;padding: 2px 4px;border-radius: 2px;
}
.input_area .content_top .editRefBtn .del_btn{position: absolute;top: -8px;right: -6px;background-color: #00000080;border-radius: 100px;width: 20px;height: 20px;cursor:pointer;font-size: 12px;color: #fff;display: flex;justify-content: center;align-items: center;border:1px solid #fff;}
.input_area .content_top .editRefBtn .del_btn:hover{background-color: #00000050;}
.input_area .content_top .ref_img_box{position: absolute;display: flex;left: auto;top: auto;width: 100%;height: 100%;}
.input_area .content_top .ref_img_box .editRefBtn .del_btn{display: none;}
.input_area .content_top .ref_img_box .editRefBtn .ref_file_icon {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 3px;}
.input_area .content_top .ref_img_box .editRefBtn .ref_file_icon i {font-size: 24px;color: #1980FA;}
.input_area.scroll .content_top .ref_img_box .editRefBtn .ref_file_icon i{font-size: 14px;margin-bottom: 0;}
.input_area.scroll .content_top .ref_img_box .editRefBtn .ref_file_icon span{font-size: 10px;}
.input_area .content_top .ref_img_box .editRefBtn .ref_file_icon span {font-size: 12px;color: #666;max-width: 64px;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;}
.input_area.scroll .content_top .ref_img_box .editRefBtn .ref_file_icon span {max-width: 50px;}
.input_area .content_top .ref_img_box.active .editRefBtn:hover .del_btn{display:flex;}
.input_area .content_top .ref_img_box.active .editRefBtn{position: relative;min-width: 70px;height: 84px;}
.input_area .content_top .ref_img_box.active .editRefBtn:hover{margin-top:-15px;/*transform: translateY(-10px);*/}

.input_area .content_top .ref_img_box.active #moreUploadBtn{position:relative;top:0;right:0;min-width: 70px;height: 84px;background-color: #f0f2f6;color:#333;transform: rotate(-2deg);border-radius: unset;display: flex;justify-content: center;align-items: center;}
.input_area .content_top .ref_img_box.active #moreUploadBtn svg{width: 1.5em;height: 1.5em;}
.input_area .content_top .ref_img_box.active #moreUploadBtn:hover{margin-top:-15px;}
.input_area .content_top #moreUploadBtn{cursor:pointer;padding:6px;border-radius: 100px;background-color: #00000080;color: #fff;position: absolute;top: 70px;right: -10px;z-index: 31;}
.input_area .content_top .moxie-shim{display: none !important;}
.input_area .content_bottom{position:relative;display: flex;align-items: center;justify-content: space-between;}
.input_area .content_bottom .btn{height:34px;position:relative;display: flex;justify-content:center;align-items:center;gap:2px;padding:5px 12px;border-radius: 6px;cursor:pointer;background-color: #f1f2f5;font-size: 12px;}
.input_area .content_bottom .btn.at_btn{font-size:16px;font-weight:bold;}
.input_area .content_bottom .btn.at_btn:hover{background-color:#e5e7eb;}
.input_area .content_bottom .btn.curr_gen_type{padding:5px 28px 5px 12px;background-color: #1980FA10;}
.input_area .content_bottom .btn.curr_gen_type .curr_box::before {content: "";position: absolute;top: 16px;right: 13px;transform: rotate(180deg);border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #333639 transparent;transition: transform 0.3s ease;}
.input_area .content_bottom .btn.curr_gen_type .curr_box::after {content: "";position: absolute;top: 14px;right: 13px;transform: rotate(180deg);border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #e5e7eb transparent;transition: transform 0.3s ease;}

/* 比例选择按钮样式 */
.input_area .content_bottom .btn.curr_ratio {padding: 5px 12px;}
.input_area .content_bottom .btn.curr_ratio .curr_box {position: relative;display: flex;align-items: center;gap: 5px;}
/*.input_area .content_bottom .btn.curr_ratio .curr_box::before {
    content: "";position: absolute;top: 10px;right: -16px;transform: rotate(180deg);border-style: solid;
    border-width: 0 6px 6px 6px;border-color: transparent transparent #333639 transparent;transition: transform 0.3s ease;
}
.input_area .content_bottom .btn.curr_ratio .curr_box::after {
    content: "";position: absolute;top: 8px;right: -16px;transform: rotate(180deg);border-style: solid;
    border-width: 0 6px 6px 6px;border-color: transparent transparent #e5e7eb transparent;transition: transform 0.3s ease;
}*/
.input_area .content_bottom .btn.curr_ratio .curr_box.open::before,
.input_area .content_bottom .btn.curr_ratio .curr_box.open::after{transform: rotate(0deg);}
.input_area .content_bottom .btn.curr_ratio .curr_box.open::before {top: 8px;}
.input_area .content_bottom .btn.curr_ratio .curr_box.open::after {top: 10px;}
.input_area .content_bottom .btn.curr_gen_type .curr_box.active{color: var(--primary-color);}
.input_area .content_bottom .btn.curr_gen_type .curr_box.active::before{border-color: transparent transparent #1980FA transparent;}
.input_area .content_bottom .btn.curr_gen_type .curr_box.active::after{border-color: transparent transparent #f1f7ff transparent;}
.input_area .content_bottom .btn.curr_gen_type .curr_box.open::before,
.input_area .content_bottom .btn.curr_gen_type .curr_box.open::after {
    transform: rotate(0deg);
}
.input_area .content_bottom .btn.curr_gen_type .curr_box.open::before {
    top: 16px;
}
.input_area .content_bottom .btn.curr_gen_type .curr_box.open::after {
    top: 18px;
}
/* 生成类型下拉列表样式 */
.input_area .content_bottom .btn.curr_gen_type{position: relative;}
.input_area .content_bottom .btn.curr_gen_type .gen_type_list{
    position: absolute;
    bottom: 100%; /* 在上方弹窗 */
    left: 0;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 180px;
    display: none;
    margin-bottom: 5px;
    padding: 5px;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.input_area .content_bottom .btn.curr_gen_type .gen_type_list ._title {
    padding: 8px 12px 10px;
    color: #999
}
.input_area .content_bottom .btn.curr_gen_type .gen_type_item{
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 8px;
    position: relative;
    border-radius: 6px;
}
.input_area .content_bottom .btn.curr_gen_type .gen_type_item .selected-icon{
    display: none;
}
.input_area .content_bottom .btn.curr_gen_type .gen_type_item:hover{
    background-color: #f5f5f5;
}
.input_area .content_bottom .btn.curr_gen_type .gen_type_item.active{
    background-color: #1980FA10;
    color: #1890ff;
}
.input_area .content_bottom .btn.curr_gen_type .gen_type_item.active .selected-icon{
    display: block !important;
    position: absolute;
    right: 12px;
    color: #1890ff;
}

.input_area .content_bottom .btn.curr_gen_type .gen_type_item .li_right{
    display: none;
    margin-left: auto;
}

.input_area .content_bottom .btn.curr_gen_type .gen_type_item.active .li_right{
    display: flex;
    align-items: center;
}

.input_area .content_bottom .btn.curr_gen_type .gen_type_item .li_right svg{
    color: #1890ff;
}
.input_area .content_bottom .btn.disabled{cursor: not-allowed;border-color: #d9d9d9;color: rgba(0, 0, 0, 0.25);background: rgba(0, 0, 0, 0.04);box-shadow: none;background-image: none !important;}
.input_area .content_bottom .video_btn_group .btn.disabled, .input_area .content_top .c_top_l .video_circle_btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}
.input_area .content_bottom .btn_group{display: flex;justify-content: center;align-items: center;gap: 3px}
.input_area .content_bottom .btn.curr_size .ratio{display: flex;justify-content: center;align-items: center;gap:3px;}
.input_area .content_bottom .btn .split{border-radius: .5px;height: 10px;margin: 0 8px;width: 1px;background-color: #ccc;}
.input_area .content_bottom .btn.gen_num_btn {background-color: #ebedf270;}
.input_area .content_bottom .btn.gen_num_btn .curr_val {padding-right: 18px;}
.input_area .shape{border-radius: 3px;border:1px solid #ccc;margin: 0 auto;background-color: rgba(0, 0, 0, 0.05);}
.input_area .shape.shape_auto{border:none;margin-top:2px;}
.input_area .shape.shape_21_9{width: 21px; height: 8.5px;}
.input_area .shape.shape_16_9{width: 21px; height: 11px;}
.input_area .shape.shape_3_2{width: 21px; height: 13px;}
.input_area .shape.shape_4_3{width: 21px; height: 15px;}
.input_area .shape.shape_1_1{width:17px; height: 17px;}
.input_area .shape.shape_3_4{width:15px; height: 21px;}
.input_area .shape.shape_2_3{width: 13px; height: 21px;}
.input_area .shape.shape_9_16{width: 11px; height: 21px;}
.input_area .content_bottom .sub_box{display: flex;justify-content: center;align-items: center;gap:10px;}
.input_area .content_bottom .sub_box .consume{display: none;justify-content: center;align-items: center;gap: 1px;color: #ccc;font-size: 12px;}
.input_area .content_bottom .sub_box .consume.available{display: flex;}
.input_area .content_bottom .sub_box .consume .label{margin-left: 2px;}
.input_area .content_bottom .sub_box .icon_suanli{display: inline-block;width: 13px;height: 13px;background: url(/static/images/icon/icon_suanli.png) center no-repeat;background-size: cover;}
.input_area .content_bottom .sub_box #generateBtn{cursor:pointer;position:relative;display: flex;justify-content: center;align-items: center;height: 34px;width: 34px;border-radius: 100px;background-color: var(--primary-color);color:#fff;}
.input_area .content_bottom .sub_box #generateBtn.disabled{background-color: #1980FA80;cursor: not-allowed;}
/* 生成张数按钮样式 */
.input_area .sub_box .gen_num_btn {position: relative;padding: 5px 12px;background-color: #f5f5f5;cursor: pointer;display: flex;align-items: center;gap: 3px;}
.input_area .sub_box .gen_num_btn::before {
    content: "";position: absolute;top: 16px;right: 13px;transform: rotate(180deg);border-style: solid;
    border-width: 0 6px 6px 6px;border-color: transparent transparent #333639 transparent;transition: transform 0.3s ease;
}
.input_area .sub_box .gen_num_btn::after {
    content: "";position: absolute;top: 14px;right: 13px;transform: rotate(180deg);border-style: solid;
    border-width: 0 6px 6px 6px;border-color: transparent transparent #f6f7f9 transparent;transition: transform 0.3s ease;
}
.input_area .sub_box .gen_num_btn.open::before,
.input_area .sub_box .gen_num_btn.open::after {transform: rotate(0deg);}
.input_area .sub_box .gen_num_btn.open::before {top: 15px;}
.input_area .sub_box .gen_num_btn.open::after {top: 17px;}
.input_area .sub_box .gen_num_btn.disabled {background-color: #f0f0f0;color: #999;cursor: not-allowed;}
.input_area .sub_box .gen_num_btn.disabled::before {
    border-color: transparent transparent #ccc transparent;
}
.input_area .sub_box .gen_num_btn.disabled::after {
    border-color: transparent transparent #f0f0f0 transparent;
}
/* 生成张数列表样式 */
.input_area .sub_box .gen_num_list {
    position: absolute;bottom: 100%;left: 0;background: white;border: 1px solid #e8e8e8;
    border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);z-index: 1000;min-width: 120px;
    display: none;margin-bottom: 5px;padding: 5px;animation: slideUp 0.3s ease-out;
}
.input_area .sub_box .gen_num_item {display: flex;align-items: center;padding: 8px 12px;cursor: pointer;gap: 8px;position: relative;border-radius: 6px;}
.input_area .sub_box .gen_num_item:hover {background-color: #f5f5f5;}
.input_area .sub_box .gen_num_item.active {background-color: #1980FA10;color: #1890ff;}
.input_area .sub_box .gen_num_item .li_right {display: none;margin-left: auto;}
.input_area .sub_box .gen_num_item.active .li_right {display: flex;align-items: center;}
.input_area .sub_box .gen_num_item .li_right svg {color: #1890ff;}
/* 生成张数列表项样式 */

.input_area.scroll{max-width: 85%;margin: 0 auto;}
.input_area.scroll .content_box{display: grid;grid-template-columns: auto 34px;align-items: center;flex-direction: unset;padding:10px 20px;}

/* Placeholder styles for contenteditable div */
.input_area .rich-placeholder-widget {color: #999 !important;}
.input_area.scroll .content_top{grid-template-columns: 40px auto;}
.input_area.scroll .content_top #content{height:55px !important;line-height:55px;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;overflow-y: hidden !important;text-overflow: ellipsis;caret-color: transparent;}
/* 滚动模式下 @ 按钮的 data-tooltip 被 #content 的 overflow:hidden 裁剪，悬停时临时解除裁剪并保持单行，避免影响其他场景 */
.input_area.scroll .content_top #content:has(.at-button:hover){overflow: visible !important;white-space: nowrap;}
/* 滚动模式下 #content 的 line-height:55px 会被 tooltip 继承导致高度异常，这里恢复正常行高 */
.input_area.scroll .content_top #content .at-button[data-tooltip]:hover::after{line-height: normal;}
.input_area.scroll .content_bottom .btn_group{display: none;}
.input_area.scroll .content_bottom .sub_box .consume{display: none;}
.input_area.scroll .content_bottom #modelSelect,.input_area.scroll .content_bottom #videoModelSelect{display: none !important;}
.input_area.scroll .content_bottom #ratioSelect{display: none !important;}
.input_area.scroll .content_bottom #ratioSettingsPopup{display: none !important;}
.input_area.scroll .content_bottom #wordsSelect{display: none !important;}
.input_area.scroll .content_top .c_top_l{padding:0;}
.input_area.scroll .content_top #uploadRefBtn,
.input_area.scroll .content_top .editRefBtn{height: 100%;top:0;}
.input_area.scroll .content_top #moreUploadBtn{padding:3px;top:40px;right:-10px;}
.input_area.scroll .content_top .ref_img_box{position: absolute;display: flex;left: auto;top: auto;width: 100%;height: 100%;}
.input_area.scroll .content_top .ref_img_box .editRefBtn .del_btn{display: none;}
.input_area.scroll .content_top .ref_img_box.active .editRefBtn:hover .del_btn{display:flex;}
.input_area.scroll .content_top .ref_img_box.active .editRefBtn{position: relative;min-width: 43px;height: 100%;}
.input_area.scroll .content_top .ref_img_box.active .editRefBtn:hover{margin-top:-6px;}
.input_area.scroll .content_top .ref_img_box.active #moreUploadBtn{position:relative;bottom:0;right:0;min-width: 43px;height: 100%;background-color: #f0f2f6;color:#333;transform: rotate(-2deg);border-radius: unset;display: flex;justify-content: center;align-items: center;}
.input_area.scroll .content_top .ref_img_box.active #moreUploadBtn svg{width: 1em;height: 1em;}
.input_area.scroll .content_top .ref_img_box.active #moreUploadBtn:hover{margin-top:-6px;}
.input_area.scroll .gen_num_btn{display: none !important;}

.input_area .content_bottom #modelSelect,.input_area .content_bottom #videoModelSelect{display:none;width:450px;padding:12px 5px;border-radius: 10px;box-shadow: 0 4px 4px #00000020;position: absolute;background-color: #fff;bottom: 42px;z-index: 10;}
.input_area .content_bottom #modelSelect{left: 110px;}
.input_area .content_bottom #videoModelSelect{left: 0;}

/* 历史记录弹窗样式 */
#videoHistoryPopup .history_image_grid {
    max-height: 260px;
    overflow-y: auto;
}
#videoHistoryPopup .history_image_grid.no_data {
    display: flex;
    align-items: center;
    justify-content: center;
}
.no-history-images {
    text-align: center;
    color: #999;
    padding: 20px 0;
}
.input_area .content_bottom #modelSelect .title,.input_area .content_bottom #videoModelSelect .title{padding: 0 10px;font-size:12px;}
.input_area .content_bottom #modelSelect ul,.input_area .content_bottom #videoModelSelect ul{margin-top:10px;display: grid;gap: 2px;}
.input_area .content_bottom #modelSelect li,.input_area .content_bottom #videoModelSelect li{display: flex;align-items: center;gap: 10px;padding:12px 10px;border-radius: 10px;cursor: pointer;}
.input_area .content_bottom #modelSelect li:hover,.input_area .content_bottom #videoModelSelect li:hover{background-color: #f0f2f6;}
.input_area .content_bottom #modelSelect li.selected,.input_area .content_bottom #videoModelSelect li.selected{background-color: #f0f2f6;}
.input_area .content_bottom #modelSelect li.disabled,.input_area .content_bottom #videoModelSelect li.disabled{cursor: not-allowed;border-color: #d9d9d9;color: rgba(0, 0, 0, 0.25);background: rgba(0, 0, 0, 0.04);box-shadow: none;background-image: none !important;}
.input_area .content_bottom #modelSelect li .m_icon,.input_area .content_bottom #videoModelSelect li .m_icon{max-width: 45px;max-height: 45px;border-radius: 10px;}
.input_area .content_bottom #modelSelect li .name,.input_area .content_bottom #videoModelSelect li .name{font-size: 16px;}
.input_area .content_bottom #modelSelect li .desc,.input_area .content_bottom #videoModelSelect li .desc{color: #666;font-size: 12px;}
.input_area .content_bottom #modelSelect li .li_middle,.input_area .content_bottom #videoModelSelect li .li_middle{min-width: 340px;}
.input_area .content_bottom #modelSelect li .li_right svg,.input_area .content_bottom #videoModelSelect li .li_right svg{display: none;}
.input_area .content_bottom #modelSelect li.selected .li_right svg,.input_area .content_bottom #videoModelSelect li.selected .li_right svg{display: flex;}
.input_area .content_bottom #modelSelect .close::before,.input_area .content_bottom #modelSelect .close::after,.input_area .content_bottom #videoModelSelect .close::before,.input_area .content_bottom #videoModelSelect .close::after {cursor: pointer;content: '';position: absolute;top: 18px;right: 0;width: 15px;height: 1px;background-color: #b5b5b5;transform: translate(-50%, -50%);}
.input_area .content_bottom #modelSelect .close::before,.input_area .content_bottom #videoModelSelect .close::before {transform: translate(-50%, -50%) rotate(45deg);}
.input_area .content_bottom #modelSelect .close::after,.input_area .content_bottom #videoModelSelect .close::after {transform: translate(-50%, -50%) rotate(-45deg);}

.input_area .content_bottom #ratioSelect{display:none;flex-direction:column;gap: 15px;width:450px;padding:15px;border-radius: 10px;box-shadow: 0 2px 10px #00000020;position: absolute;background-color: #fff;left: 196px;bottom: 42px;z-index: 10;}
.input_area .content_bottom #ratioSelect #ratio_list{display: flex;justify-content: center;align-items: flex-end;margin-top: 10px;background-color: rgba(0, 0, 0, 0.05);border-radius: 12px;padding:2px;}
.input_area .content_bottom #ratioSelect #ratio_list li{padding:5px;width: 100%;height:100%;min-height:60px;cursor:pointer;border:1px solid transparent;display: grid;justify-content: center;align-items: center;border-radius: 12px;/*background: rgba(0, 0, 0, 0.05);*/}
.input_area .content_bottom #ratioSelect #ratio_list li.selected{border:1px solid #1980fa;background-color:#fff;}
.input_area .content_bottom #ratioSelect #ratio_list li:hover{background-color: #fff;}
.input_area .content_bottom #ratioSelect #ratio_list li .ratio_val{height: 18px; line-height: 18px;}
.input_area .content_bottom #ratioSelect .size_set{margin-top:8px;display: grid;grid-template-columns: 40% 10% 40% 10%;justify-content: center;align-items: center;}
.input_area .content_bottom #ratioSelect .size_set .size_sub{display: flex;justify-content: center;}
.input_area .content_bottom #ratioSelect .size_set .sub{display:grid;grid-template-columns:50% 50%;justify-content:center;align-items:center;border-radius: 5px;height: 40px;background-color: #e5e7eb80;}
.input_area .content_bottom #ratioSelect .size_set .sub input{width: 100%;border-radius: 0 5px 5px 0;height:inherit;line-height: inherit;text-align: center;background-color: transparent}
.input_area .content_bottom #ratioSelect .size_set .sub .s_label{text-align: center;border-radius: 5px 0 0 5px;height: 38px;line-height: 38px;}
.input_area .content_bottom #ratioSelect .quality_box{/*margin-top:15px;*/}
.input_area .content_bottom #ratioSelect .quality_box .quality_sub{margin-top:6px;display: grid;grid-template-columns:repeat(2, 1fr);align-items: center;gap: 2px;background-color: rgba(0, 0, 0, 0.05);padding: 2px;border-radius: 8px;}
.input_area .content_bottom #ratioSelect .quality_box .sub{border-radius: 8px;text-align: center;padding:8px;cursor: pointer;}
.input_area .content_bottom #ratioSelect .quality_box .sub.disabled{cursor: not-allowed;}
.input_area .content_bottom #ratioSelect .quality_box .sub.active{background-color: #1980fa;color: #fff;cursor: default;}
.input_area .content_bottom #ratioSelect .size_box{/*margin-top:15px;*/}

.input_area .content_bottom #wordsSelect{display:none;position:absolute;left: 368px;bottom: 42px;z-index:2;width: 480px;padding:10px;background-color: #fff;border-radius: 10px;border:1px solid #e0e0e6;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);}
.input_area .content_bottom #wordsSelect .top{display: flex;justify-content: space-between;align-items: center;color: #9e9e9e;font-size: 12px;}
.input_area .content_bottom #wordsSelect .top .set_btn{cursor: pointer;}
.input_area .content_bottom #wordsSelect .items_box{display: flex;flex-direction:column;gap: 5px;margin-top:10px;max-height: 320px;overflow-y: auto;}
.input_area .content_bottom #wordsSelect .items_box .item{display: grid;grid-template-columns: max-content auto;align-items: center;gap: 10px;padding:6px;border-radius: 8px;cursor: pointer;}
.input_area .content_bottom #wordsSelect .items_box .item.active{background-color: #00000008;}
.input_area .content_bottom #wordsSelect .items_box .item:hover{background-color: #00000008;}
.input_area .content_bottom #wordsSelect .items_box .item:first-child{background-color: #00000008;}
.input_area .content_bottom #wordsSelect .items_box .item .label{display: flex;align-items: center;gap: 5px;background-color: #0000000d;color:#000000e6;padding: 2px 8px;border-radius: 5px;}
.input_area .content_bottom #wordsSelect .items_box .item .label img{border-radius: 100px;max-height: 20px;max-width: 20px;}
.input_area .content_bottom #wordsSelect .items_box .item .content{color:#0009;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
/*常用语弹窗start*/
.mask_box .common_words_box{width:720px;position: relative;background-color: #fff;border-radius: 12px;padding:15px 30px 30px;box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.1);}
.mask_box .common_words_box .header{padding:0;text-align: center;}
.mask_box .common_words_box .close::before, .mask_box .common_words_box .close::after{top:25px;right:10px;}
.mask_box .common_words_box .content_box .top{margin-top:20px;display: flex;justify-content: space-between;align-items: center;}
.mask_box .common_words_box .content_box .top .search_box{border:1px solid #9e9e9e60;border-radius: 8px;padding:6px 10px;min-width: 240px;}
.mask_box .common_words_box .content_box .top .add_btn{background-color: #00000008;padding: 6px 10px;border-radius: 6px;cursor: pointer;}
.mask_box .common_words_box .content_box .top .add_btn:hover{background-color: #00000010;}
.mask_box .common_words_box .content_box .sub_box{min-height: 400px;margin-top:20px;padding: 25px 15px;border:1px solid #9e9e9e60;border-radius: 10px;}
.mask_box .common_words_box .content_box .head{display: grid;align-items: center;gap:15px;grid-template-columns: 30% 70%;color:#0009;margin-bottom: 15px;padding: 0 8px;}
.mask_box .common_words_box .content_box .items_box{max-height: 400px;overflow: auto;}
.mask_box .common_words_box .content_box .item{display: grid;align-items: center;gap:15px;grid-template-columns: 30% 70%;position: relative;padding: 12px 8px;}
.mask_box .common_words_box .content_box .item.active{background-color: #00000008;}
.mask_box .common_words_box .content_box .item:hover{background-color: #00000008;cursor: pointer;border-radius: 6px;}
.mask_box .common_words_box .content_box .item .word{max-width: 85%;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.mask_box .common_words_box .content_box .item .label{display: flex;align-items: center;gap:5px;max-width:75%;background-color: #0000000d;color:#000000e6;padding: 2px 8px;border-radius: 5px;}
.mask_box .common_words_box .content_box .item .label img{border-radius: 100px;max-height: 20px;max-width: 20px;}
.mask_box .common_words_box .content_box .item .content{width:95%;color:#0009;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.mask_box .common_words_box .content_box .item .operate{display:none;position: absolute;right: 0;top:auto;justify-content: center;align-items: center;gap:8px;}
.mask_box .common_words_box .content_box .item .op_btn{cursor: pointer;padding:5px 8px;border-radius: 6px;}
.mask_box .common_words_box .content_box .item .op_btn:hover{background-color: #00000010;}
.mask_box .common_words_box .content_box .item .op_btn.del_btn{color: red;}
.mask_box .common_words_box .content_box .item:hover .operate{display: flex;}
.mask_box .common_words_box .content_box .item:hover .content{max-width: 80%;}
.mask_box .operate_words_box{padding:20px 28px;border-radius: 12px;}
.mask_box .operate_words_box .header{padding:0;display: flex;justify-content: space-between;align-items: center;}
.mask_box .operate_words_box .close::before, .mask_box .operate_words_box .close::after{top:25px;right:10px;}
.mask_box .operate_words_box .content_box .top{margin-top:10px;display: flex;justify-content: space-between;align-items: center;gap:10px;}
.mask_box .operate_words_box .content_box .tip{color: #00000073;}
.mask_box .operate_words_box .content_box .random_btn{padding:6px 10px;border-radius:6px;display: flex;justify-content: center;align-items: center;gap:2px;background-color:var(--primary-color);color:#fff;cursor: pointer;}
.mask_box .operate_words_box .content_box .sub_box{margin-top:15px;border-radius: 6px;border:1px solid #0000000d;}
.mask_box .operate_words_box .content_box .content_input{min-height:312px;border:none;width: 100%;height: 100%;border-radius: 6px;padding:8px;}
.mask_box .operate_words_box .content_box .custom_box{cursor: pointer;padding: 10px;display:flex;justify-content:space-between;align-items:center;background-color: #0000000d;}
.mask_box .operate_words_box .content_box .custom_sub{width: 85%;display: flex;align-items: center;}
.mask_box .operate_words_box .content_box .custom_box ._btn{color: var(--primary-color);}
.mask_box .operate_words_box .content_box .custom_box input{width: 100%;background-color:transparent;}
.mask_box .operate_words_box .content_box .custom_box em{max-width: 50%;font-style: normal;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.mask_box .operate_words_box .content_box .operate_box{margin-top:25px;display: flex;justify-content: flex-end;align-items: center;gap:8px;}
.mask_box .operate_words_box .content_box .operate_box .op_btn{cursor:pointer;padding:6px 25px;border-radius: 6px;background-color:#0000000d;color: #00000099;}
.mask_box .operate_words_box .content_box .operate_box .create_btn{background-color: var(--primary-color);color: #fff;}
.mask_box .operate_words_box .content_box .operate_box .create_btn.disabled{opacity: .5;cursor: not-allowed;}
/*常用语弹窗end*/

/* 视频生成模式按钮组样式 */
.input_area .content_bottom .video_btn_group {display: flex;align-items: center;gap: 6px;position: relative;}
.input_area .content_top .video_btn_separator {display: flex;align-items: center;justify-content: center;color: #ccc;font-size: 12px;cursor: pointer;padding: 0 5px;}
.input_area .content_top .video_btn_separator:hover {color: #1890ff;}
.input_area .content_bottom .video_btn_split {width: 1px;height: 14px;background-color: #ccc;}

/* 音频驱动按钮样式 */
/* 音频按钮选中状态样式 */
.input_area .content_bottom .video_audio_btn.audio-selected {
    position: relative;background-color: rgba(24, 144, 255, 0.1);border-color: #1890ff;
    background-image: url(/static/images/draw/yh_draw/audio_animation.gif);
    background-size: cover;background-position: center;background-repeat: no-repeat;color: white;
}
.input_area .content_bottom .video_audio_btn.audio-selected {position: relative;background-color: rgba(24, 144, 255, 0.1);border-color: #1890ff;}
.input_area .content_bottom .video_audio_btn.audio-selected .audio-indicator {
    position: absolute;top: 4px;right: 4px;width: 8px;height: 8px;
    background-color: #52c41a;border-radius: 50%;border: 1px solid white;
}
/* 音频按钮遮罩层样式 */
.input_area .content_bottom .video_audio_btn.audio-selected {position: relative;overflow: hidden;}
.input_area .content_bottom .video_audio_btn.audio-selected .audio-overlay {
    position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);
    display: none;align-items: center;justify-content: center;color: white;border-radius: 6px;cursor: pointer;z-index: 10;
}
.input_area .content_bottom .video_audio_btn.audio-selected:hover .audio-overlay {display: flex;}
.input_area .content_bottom .video_audio_btn.audio-selected .audio-overlay i {font-size: 16px;color: white;}
/* 视频设置按钮组样式 */
.input_area .content_bottom .video_settings_group {
    display: flex;
    align-items: center;
    background-color: #ebedf2;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    z-index: 10;
    position: relative;
}
.input_area .content_bottom .video_setting_item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #333;
    padding: 0 5px;
}
.input_area .content_bottom .video_settings_group .video_duration_icon i {
    font-size: 12px;
}
.input_area .content_bottom .video_setting_separator {
    width: 1px;
    height: 16px;
    background-color: #e0e0e0;
}
.input_area .content_bottom .video_settings_btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}
.input_area .content_bottom .video_settings_group:hover {
    background-color: #e8e8e8;
}

/* 智能多镜按钮样式 */
.input_area .content_bottom .video_smart_multi_camera_btn {
    background-color: #ebedf2;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.input_area .content_bottom .video_smart_multi_camera_btn:hover {
    background-color: #e0e2e8;
}

.input_area .content_bottom .video_smart_multi_camera_btn.selected {
    background-color: #1980fa10;
    color: #1980fa;
}

/* 视频设置弹窗样式 */
#videoSettingsPopup {
    position: absolute;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    box-shadow: 0 4px 4px #00000020;
    z-index: 1005;
    width: 300px;
    padding: 16px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}
#videoSettingsPopup .video_settings_header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #333;
}
#videoSettingsPopup .video_settings_section {
    margin-bottom: 15px;
}

.video_settings_section_title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.curr_ratio .resolution_label {
    font-size: 12px;
    color: #333;
}
#videoSettingsPopup .video_settings_label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 提示词优化行布局 */
#videoSettingsPopup .video_settings_prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#videoSettingsPopup .video_settings_label_with_tooltip {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 12px;
    color: #666;
}
#videoSettingsPopup .video_settings_tooltip {
    position: relative;
    margin-left: 8px;
    cursor: help;
}
#videoSettingsPopup .video_settings_tooltip i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #666;
    font-size: 12px;
}
#videoSettingsPopup .video_settings_tooltip_content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}
#videoSettingsPopup .video_settings_tooltip_content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
#videoSettingsPopup .video_settings_tooltip:hover .video_settings_tooltip_content {
    opacity: 1;
    visibility: visible;
}



.input_area .content_bottom #ratioSettingsPopup {
    display:none;
    flex-direction:column;
    gap: 15px;
    width:450px;
    padding:15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px #00000020;
    position: absolute;
    background-color: #fff;
    left: 218px;
    bottom: 42px;
    z-index: 10;
}

.input_area .content_bottom #ratioSettingsPopup .video_settings_header {
    font-size:12px;
    color: #333;
}

.input_area .content_bottom #ratioSettingsPopup .video_settings_content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input_area .content_bottom #ratioSettingsPopup .video_settings_section {
    display: flex;
    flex-direction: column;
}

.input_area .content_bottom #ratioSettingsPopup .video_ratio_options_wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding:2px;
}

.input_area .content_bottom #ratioSettingsPopup .video_ratio_option {
    padding:5px;
    width: 100%;
    height:100%;
    min-height:60px;
    cursor:pointer;
    border:1px solid transparent;
    display: grid;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.input_area .content_bottom #ratioSettingsPopup .video_ratio_option:hover {
    background-color: #fff;
}

.input_area .content_bottom #ratioSettingsPopup .video_ratio_option.active {
    border:1px solid #1980fa;
    background-color:#fff;
}

.input_area .content_bottom #ratioSettingsPopup .video_resolution_options_wrapper {
    margin-top:6px;
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    align-items: center;
    gap: 2px;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px;
    border-radius: 8px;
}

.input_area .content_bottom #ratioSettingsPopup .video_resolution_option {
    border-radius: 8px;
    text-align: center;
    padding:8px;
    cursor: pointer;
}

.input_area .content_bottom #ratioSettingsPopup .video_resolution_option:hover {
    background-color: #fff;
}

.input_area .content_bottom #ratioSettingsPopup .video_resolution_option.active {
    background-color: #1980fa;
    color: #fff;
    cursor: default;
}

/* 视频时长滑块 */
#videoSettingsPopup .video_duration_slider {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 22px;
}
#videoSettingsPopup .video_duration_slider input[type="range"] {
    flex: 1;
    height: 14px;
    border-radius: 7px;
    background: #e8e8e8;
    outline: none;
    -webkit-appearance: none;
    position: relative;
}
/* WebKit 浏览器 */
#videoSettingsPopup .video_duration_slider input[type="range"]::-webkit-slider-runnable-track {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(to right, #1890ff 0%, #1890ff var(--progress), #e8e8e8 var(--progress), #e8e8e8 100%);
}
/* Firefox 浏览器 */
#videoSettingsPopup .video_duration_slider input[type="range"]::-moz-range-progress {
    height: 14px;
    border-radius: 7px;
    background: #1890ff;
}
#videoSettingsPopup .video_duration_slider input[type="range"]::-moz-range-track {
    height: 14px;
    border-radius: 7px;
    background: #e8e8e8;
}
#videoSettingsPopup .video_duration_slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid #1890ff;
    margin-top: -4px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}
/* Firefox 浏览器 */
#videoSettingsPopup .video_duration_slider input[type="range"]::-moz-range-track {
    height: 14px;
    border-radius: 7px;
    background: #e8e8e8;
}
#videoSettingsPopup .video_duration_slider input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 2px solid #1890ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 禁用状态的滑块样式 */
#videoSettingsPopup .video_duration_slider input[type="range"]:disabled,
#videoSettingsPopup .video_duration_slider input[type="range"].disabled {
    cursor: not-allowed;
}

#videoSettingsPopup .video_duration_slider input[type="range"]:disabled::-webkit-slider-runnable-track,
#videoSettingsPopup .video_duration_slider input[type="range"].disabled::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #ccc 0%, #ccc var(--progress), #e8e8e8 var(--progress), #e8e8e8 100%);
}

#videoSettingsPopup .video_duration_slider input[type="range"]:disabled::-moz-range-progress,
#videoSettingsPopup .video_duration_slider input[type="range"].disabled::-moz-range-progress {
    background: #ccc;
}

#videoSettingsPopup .video_duration_slider input[type="range"]:disabled::-webkit-slider-thumb,
#videoSettingsPopup .video_duration_slider input[type="range"].disabled::-webkit-slider-thumb {
    background: #f0f0f0;
    border-color: #ccc;
    cursor: not-allowed;
}

#videoSettingsPopup .video_duration_slider input[type="range"]:disabled::-moz-range-thumb,
#videoSettingsPopup .video_duration_slider input[type="range"].disabled::-moz-range-thumb {
    background: #f0f0f0;
    border-color: #ccc;
    cursor: not-allowed;
}

/* 禁用状态的时长显示 */
.video_duration_display.disabled {
    color: #999;
    cursor: not-allowed;
}
#videoSettingsPopup .video_duration_value {
    font-size: 12px;
    color: #666;
    min-width: 30px;
    text-align: center;
    z-index: 3;
    position: absolute;
    transform: translateX(-50%);
    pointer-events: none;
    background-color: white;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    top: -30px;
}

#videoSettingsPopup .video_duration_value::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* 开关样式 */
#videoSettingsPopup .video_settings_switch {
    display: flex;
    align-items: center;
}
#videoSettingsPopup .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
#videoSettingsPopup .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
#videoSettingsPopup .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
#videoSettingsPopup .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
#videoSettingsPopup input:checked + .slider {
    background-color: #1890ff;
}
#videoSettingsPopup input:checked + .slider:before {
    transform: translateX(20px);
}

/* 音频片段选择弹窗样式 */
#audioSegmentPopup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#audioSegmentPopup .audio_segment_mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

#audioSegmentPopup .audio_segment_box {
    position: relative;
    background-color: #333;
    border-radius: 12px;
    width: 680px;
    max-width: 90vw;
    padding: 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#audioSegmentPopup .audio_segment_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#audioSegmentPopup .audio_segment_title {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

#audioSegmentPopup .audio_segment_close {
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s ease;
}

#audioSegmentPopup .audio_segment_close:hover {
    color: white;
}

#audioSegmentPopup .audio_segment_tip {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
}

#audioSegmentPopup .audio_segment_editor {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#audioSegmentPopup .audio_segment_player {
    display: flex;
    align-items: center;
    min-width: 120px;
    padding: 5px 10px 5px 5px;
    background-color: #00000030;
    border-radius: 100px;
}

#audioSegmentPopup .audio_play_button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 15px;
    transition: background-color 0.3s ease;
}

#audioSegmentPopup .audio_play_button:hover {
    background-color: #40a9ff;
}

#audioSegmentPopup .audio_play_button i {
    font-size: 14px;
    color: white;
}

#audioSegmentPopup .audio_time_display {
    font-size: 14px;
    color: white;
    font-family: monospace;
}

#audioSegmentPopup .audio_segment_timeline {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    flex: 1;
}

#audioSegmentPopup .audio_full_timeline {
    flex: 1;
    height: 36px;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

#audioSegmentPopup .audio_waveform {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

#audioSegmentPopup .audio_waveform_bar {
    flex: 1;
    height: 60%;
    background-color: #ccc;
    margin: 0 1px;
    border-radius: 2px;
}

#audioSegmentPopup .audio_selected_segment {
    position: absolute;
    height: 100%;
    background-color: rgba(24, 144, 255, 0.2);
    border: 2px solid #1890ff;
    border-radius: 6px;
    left: 20%;
    right: 50%;
    cursor: move;
    z-index: 5;
}

#audioSegmentPopup .audio_segment_handle_left,
#audioSegmentPopup .audio_segment_handle_right {
    position: absolute;
    top: 0;
    width: 12px;
    height: 100%;
    background-color: #1890ff;
    border-radius: 4px;
    cursor: ew-resize;
    z-index: 10;
    transform: translateX(-50%);
}

#audioSegmentPopup .audio_segment_handle_left {
    left: 0;
}

#audioSegmentPopup .audio_segment_handle_right {
    right: 0;
    transform: translateX(50%);
}

#audioSegmentPopup .audio_play_line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #ff4d4f;
    cursor: ew-resize;
    z-index: 15;
}

#audioSegmentPopup .audio_play_line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #ff4d4f;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#audioSegmentPopup .audio_segment_handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: #1890ff;
    border-radius: 50%;
    cursor: ew-resize;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: auto;
}



#audioSegmentPopup .audio_segment_buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#audioSegmentPopup .audio_segment_cancel,
#audioSegmentPopup .audio_segment_confirm {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#audioSegmentPopup .audio_segment_cancel {
    background-color: #555;
    color: white;
}

#audioSegmentPopup .audio_segment_cancel:hover {
    background-color: #666;
}

#audioSegmentPopup .audio_segment_confirm {
    background-color: #1890ff;
    color: white;
}

#audioSegmentPopup .audio_segment_confirm:hover {
    background-color: #40a9ff;
}

.input_area .content_top .video_img_btn.has-image {
    padding: 0;
    /* 移除overflow: hidden，允许预览图显示在按钮外部 */
}
.input_area .content_top .video_img_btn.has-image .btn-image {
    width: 74px;
    height: 34px;
    object-fit: cover;
}
.input_area .content_top .video_img_btn.has-image .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 6px;
}
.input_area .content_top .video_img_btn.has-image:hover .image-overlay {
    display: flex;
}
.input_area .content_top .video_img_btn.has-image .image-preview {
    display: none;
}

/* 音频按钮选中状态样式 */
.input_area .content_top .video_audio_btn.audio-selected {
    position: relative;
    background-color: rgba(24, 144, 255, 0.1);
    border-color: #1890ff;
}

.input_area .content_top .video_audio_btn.audio-selected .audio-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: #52c41a;
    border-radius: 50%;
    border: 1px solid white;
}

.input_area .content_top .video_circle_btn.video_audio_btn.audio-selected {
    background-color: rgba(24, 144, 255, 0.2);
    border-color: #1890ff;
}

.input_area .content_top .video_circle_btn.video_audio_btn.audio-selected .audio-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: #52c41a;
    border-radius: 50%;
    border: 1px solid white;
}

/* 音频按钮遮罩层样式 */
.input_area .content_top .video_audio_btn.audio-selected {
    position: relative;
    overflow: hidden;
}

.input_area .content_top .video_audio_btn.audio-selected .audio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    z-index: 10;
}

.input_area .content_top .video_circle_btn.video_audio_btn.audio-selected .audio-overlay {
    border-radius: 50%;
}

.input_area .content_top .video_audio_btn.audio-selected:hover .audio-overlay {
    display: flex;
}

.input_area .content_top .video_audio_btn.audio-selected .audio-overlay i {
    font-size: 16px;
    color: white;
}

/* 操作弹窗标题样式 */
.operate_popup_header {
    padding: 8px 16px;
    border-bottom: 1px solid #e8e8e8;
}

.operate_popup_title {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}

/* 音频操作弹窗样式 */
.audio_operate_popup {
    position: absolute;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    box-shadow: 0 4px 4px #00000020;
    z-index: 1001;
    min-width: 120px;
    width: 120px;
}

.audio_operate_popup .audio_operate_list {
    padding: 8px 0;
}

.audio_operate_list {
    display: flex;
    flex-direction: column;
}

.audio_operate_item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
}

.audio_operate_item:hover {
    background-color: #f0f2f6;
}

.audio_operate_item.select_segment_option {
    color: #1890ff;
}

.audio_operate_item.delete_option {
    color: #ff4d4f;
}

/* 视频上传弹窗样式 */
#videoUploadPopup {
    position: absolute;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    box-shadow: 0 4px 4px #00000020;
    z-index: 1002;
    padding: 12px 12px;
    min-width: 120px;
    width: 120px;
}
#videoUploadPopup .video_upload_options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#videoUploadPopup .video_upload_option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    cursor: pointer;
    border-radius: 10px;
    font-size: 12px;
}
#videoUploadPopup .video_upload_option:hover {
    background-color: #f0f2f6;
}

/* 视频历史记录弹窗样式 */
#videoHistoryPopup {
    position: absolute;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    box-shadow: 0 4px 4px #00000020;
    z-index: 1004;
    width: calc(100% - 30px);
    padding: 0;
    bottom: 100%;
    display: block;
}
#videoHistoryPopup .header {
    padding: 15px 20px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}
#videoHistoryPopup .header i {
    cursor: pointer;
}
#videoHistoryPopup .header .close {
    cursor: pointer;
    font-size: 16px;
}
#videoHistoryPopup .history_box {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}
#videoHistoryPopup .history_image_grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}
#videoHistoryPopup .history_image_item {
    width: 77px;
    height: 77px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
}
#videoHistoryPopup .history_image_item:hover {
    border-color: #1890ff;
}
#videoHistoryPopup .history_image_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图像操作列表弹窗样式 */
#imageOperatePopup {
    position: absolute;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    box-shadow: 0 4px 4px #00000020;
    z-index: 1003;
    min-width: 120px;
    width: 120px;
}

#imageOperatePopup .image_operate_list {
    padding: 8px 0;
}
#imageOperatePopup .image_operate_list {
    display: flex;
    flex-direction: column;
}
#imageOperatePopup .image_operate_item {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#imageOperatePopup .image_operate_item:hover {
    background-color: #f0f2f6;
}

/* 弹窗CSS定位 */
#imageOperatePopup.first-frame {
    left: 110px;
    bottom: 42px;
    transform: translateX(0);
}
#imageOperatePopup.last-frame {
    left: 220px;
    bottom: 42px;
    transform: translateX(0);
}
/* 上传选项弹窗默认位置（在按钮上方） */
#videoUploadPopup.first-frame {
    left: 110px;
    bottom: 42px;
    transform: translateX(0);
}
#videoUploadPopup.last-frame {
    left: 220px;
    bottom: 42px;
    transform: translateX(0);
}
/* 上传选项弹窗在更换按钮悬停时的位置（在操作列表弹窗右侧） */
#videoUploadPopup.change-position.first-frame {
    left: 230px; /* 110px + 120px (操作列表宽度) */
}
#videoUploadPopup.change-position.last-frame {
    left: 340px; /* 220px + 120px */
}

/* 音频按钮选中状态样式 */
.input_area .content_top .video_audio_btn.audio-selected {
    position: relative;
    background-color: rgba(24, 144, 255, 0.1);
    border-color: #1890ff;
    background-image: url('/static/images/draw/yh_draw/audio_animation.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

.input_area .content_top .video_audio_btn.audio-selected i {
    color: white;
}

.input_area .content_top .c_top_l .video_circle_btn.video_audio_btn.audio-selected {
    background-color: rgba(24, 144, 255, 0.2);
    border-color: #1890ff;
    background-image: url('/static/images/draw/yh_draw/audio_animation.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

.input_area .content_top .c_top_l .video_circle_btn.video_audio_btn.audio-selected i {
    color: white;
}

.input_area .content_top .c_top_l .video_circle_btn.video_audio_btn:not(.audio-selected) {
    background-image: none;
}

/* 音频按钮默认状态样式 */
.input_area .content_top .video_audio_btn:not(.audio-selected) {
    background-image: none;
}

/* 生成模式按钮样式 */
.input_area .content_bottom .video_btn_group .curr_gen_mode {
    padding: 5px 28px 5px 12px;
    /*background-color: #ebedf2;*/
    cursor: pointer;
    position: relative;
}

.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box {
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
}

.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box::before {
    content: "";
    position: absolute;
    top: 10px;
    right: -16px;
    transform: rotate(180deg);
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #333639 transparent;
    transition: transform 0.3s ease;
}

.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box::after {
    content: "";
    position: absolute;
    top: 8px;
    right: -16px;
    transform: rotate(180deg);
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #e5e7eb transparent;
    transition: transform 0.3s ease;
}

.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box.active::before {
    border-color: transparent transparent #333639 transparent;
}

.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box.active::after {
    border-color: transparent transparent #ebedf2 transparent;
}

.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box.open::before,
.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box.open::after {
    transform: rotate(0deg);
}
.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box.open::before {
    top: 10px;
}
.input_area .content_bottom .video_btn_group .curr_gen_mode .curr_box.open::after {
    top: 12px;
}

/* 生成模式下拉列表样式 */
.input_area .content_bottom .video_btn_group .gen_mode_list {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 180px;
    display: none;
    margin-bottom: 5px;
    padding: 5px;
    animation: slideUp 0.3s ease-out;
}

.input_area .content_bottom .video_btn_group .gen_mode_list ._title {
    padding: 8px 12px 10px;
    color: #999
}

.input_area .content_bottom .video_btn_group .gen_mode_item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    border-radius: 6px;
    gap: 5px;
}

.input_area .content_bottom .video_btn_group .gen_mode_item:hover {
    background-color: #f5f5f5;
}

.input_area .content_bottom .video_btn_group .gen_mode_item.active {
    background-color: #1980FA10;
    color: #1890ff;
}

.input_area .content_bottom .video_btn_group .gen_mode_item .li_right {
    display: none;
    margin-left: auto;
}

.input_area .content_bottom .video_btn_group .gen_mode_item.active .li_right {
    display: flex;
    align-items: center;
}

.input_area .content_bottom .video_btn_group .gen_mode_item .li_right svg {
    color: #1890ff;
}

/* ==================== 参考弹窗 - 创建主体按钮 ==================== */
.reference-popup .popup_body {position: relative;}
.reference-popup .create-subject-btn {display: flex;align-items: center;cursor: pointer;padding:6px 8px;border-radius: 8px;transition: background-color 0.2s;flex-shrink: 0;}
.reference-popup .create-subject-btn:hover {background-color: #f5f5f5;}
.reference-popup .create-subject-btn .create-subject-icon {width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;margin-right: 6px;}
.reference-popup .create-subject-btn .create-subject-icon .iconfont {font-size: 20px;color: #333;margin-top:4px;}
.reference-popup .create-subject-btn span {font-size: 14px;color: #333;}
/* ==================== 参考弹窗 - 空状态 ==================== */
.reference-popup .reference-empty {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 30px 0;}
.reference-popup .reference-empty .icon-nodata {font-size: 48px;color: #ccc;margin-bottom: 12px;}
.reference-popup .reference-empty .reference-empty-tip {color: #999;font-size: 13px;}
/* ==================== 参考弹窗 - 分隔区域 ==================== */
.reference-popup .reference-section-title {font-size: 12px;color: #999;padding: 8px 6px 4px;border-top: 1px solid #eee;margin-top: 4px;}
/* ==================== 参考弹窗 - 主体项操作 ==================== */
.reference-popup .subject-more-btn {display: none;position: absolute;right: 6px;top: 50%;transform: translateY(-50%);cursor: pointer;width: 24px;height: 24px;border-radius: 4px;align-items: center;justify-content: center;color: #666;}
.reference-popup .subject-more-btn:hover {background-color: #eee;}
.reference-popup .reference-item {position: relative;}
.reference-popup .reference-item:hover .subject-more-btn {display: flex;}
/* 置灰不可选 */
.reference-popup .reference-item.subject-disabled {cursor: not-allowed;}
.reference-popup .reference-item.subject-disabled .reference-item-icon,
.reference-popup .reference-item.subject-disabled .reference-item-title {opacity: 0.45;}
.reference-popup .reference-item.subject-disabled:hover {background-color: transparent;}
/* ==================== 主体操作弹窗 ==================== */
.subject-action-popup {position: fixed;background: #fff;border-radius: 8px;box-shadow: 0 4px 20px rgba(0,0,0,0.15);z-index: 9999;min-width: 120px;padding: 5px;display: flex;flex-direction: column;gap: 2px;}
.subject-action-popup .sa-item {padding: 6px 16px;cursor: pointer;font-size: 14px;color: #333;transition: background-color 0.2s;display: flex;align-items: center;gap: 6px;border-radius: 6px;}
.subject-action-popup .sa-item:hover {background-color: #f5f5f5;}
/* ==================== 创建主体菜单 ==================== */
.create-subject-menu {position: absolute;background: #fff;border-radius: 8px;box-shadow: 0 4px 20px rgba(0,0,0,0.15);z-index: 1001;min-width: 140px;overflow: hidden;padding: 5px;}
.create-subject-menu .cs-menu-item {padding: 10px 16px;cursor: pointer;font-size: 14px;color: #333;transition: background-color 0.2s;display: flex;align-items: center;gap: 8px;border-radius: 6px;}
.create-subject-menu .cs-menu-item:hover {background-color: #f5f5f5;}
.create-subject-menu .cs-menu-item .iconfont {font-size: 16px;}
/* ==================== 资产列表弹窗 ==================== */
.asset-list-popup {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9990;display: flex;align-items: center;justify-content: center;}
.asset-list-popup .alp-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);}
.asset-list-popup .alp-dialog {position: relative;background: #fff;border-radius: 12px;width: 840px;max-height: 80vh;display: flex;flex-direction: column;overflow: hidden;}
.asset-list-popup .alp-close {position: absolute;top: 16px;right: 16px;z-index: 2;cursor: pointer;font-size: 18px;color: #999;}
.asset-list-popup .alp-close:hover {color: #333;}
.asset-list-popup .alp-header {padding: 16px 20px 0;}
.asset-list-popup .alp-title {font-size: 16px;font-weight: 500;color: #333;padding-bottom: 12px;}
.asset-list-popup .alp-type-tabs {display: flex;gap: 0;}
.asset-list-popup .alp-type-tab {padding: 8px 20px;cursor: pointer;font-size: 16px;color: #999;transition: all 0.2s;}
.asset-list-popup .alp-type-tab.active {color: #333;font-weight: 500;}
.asset-list-popup .alp-filter-tabs {display: flex;gap: 8px;padding: 12px 20px;}
.asset-list-popup .alp-filter-tab {padding: 8px 18px;cursor: pointer;font-size: 13px;color: #666;border-radius: 8px;transition: all 0.2s;}
.asset-list-popup .alp-filter-tab.active {color: #333;background: #0000000d;}
.asset-list-popup .alp-list-wrapper {position: relative;height: 450px;}
.asset-list-popup .alp-list {overflow-y: auto;padding: 0 20px;display: grid;grid-template-columns: repeat(5, 1fr);gap: 5px;height: 450px;max-height: none;-ms-overflow-style: none;scrollbar-width: none;}
.asset-list-popup .alp-list::-webkit-scrollbar {display: none;}
.asset-list-popup .alp-item {position: relative;aspect-ratio: 1;cursor: pointer;border-radius: 4px;overflow: hidden;border: 2px solid transparent;transition: border-color 0.2s;height: 100%;width: 100%;min-width: 150px;min-height: 150px;}
.asset-list-popup .alp-item.alp-item-img {}
.asset-list-popup .alp-item.alp-item-img.selected {border-color: #1980FA;}
.asset-list-popup .alp-item.alp-item-vid {border: none;background: #0000000d;}
.asset-list-popup .alp-item.alp-item-vid::before {content: '';position: absolute;top: 50%;left: 50%;width: 24px;height: 24px;margin-left: -12px;margin-top: -12px;border: 2px solid rgba(0,0,0,0.1);border-top-color: rgba(0,0,0,0.35);border-radius: 50%;animation: alpSpin 0.8s linear infinite;z-index: 1;pointer-events: none;}
.asset-list-popup .alp-item.alp-item-vid.loaded::before {display: none;}
@keyframes alpSpin {to {transform: rotate(360deg);}}
.asset-list-popup .alp-item img {width: 100%;height: 100%;object-fit: cover;}
.asset-list-popup .alp-item video {width: 100%;height: 100%;object-fit: contain;}
.asset-list-popup .alp-check {position: absolute;top: 4px;left: 4px;width: 16px;height: 16px;z-index: 3;cursor: pointer;pointer-events: none;accent-color: #1980FA;}
.asset-list-popup .alp-skeleton {display: none;grid-template-columns: repeat(5, 1fr);gap: 5px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding: 0 20px;background: #fff;z-index: 1;align-content: start;overflow: hidden;}
.asset-list-popup .alp-skeleton.show {display: grid;}
.asset-list-popup .alp-skeleton-item {aspect-ratio: 1;height: 100%;width: 100%;min-width: 150px;min-height: 150px;border-radius: 4px;background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size: 200% 100%;animation: alp-shimmer 1.5s infinite;}
@keyframes alp-shimmer {0% {background-position: 200% 0;}100% {background-position: -200% 0;}}
.asset-list-popup .alp-footer {display: flex;align-items: center;justify-content: space-between;padding: 12px 20px;}
.asset-list-popup .alp-selected-count {font-size: 14px;color: #666;}
.asset-list-popup .alp-confirm-btn {padding: 8px 28px;border-radius: 6px;border: none;cursor: pointer;font-size: 14px;color: #fff;background: #1980FA;transition: opacity 0.2s;}
.asset-list-popup .alp-confirm-btn:disabled {background: #ccc;cursor: not-allowed;}
.asset-list-popup .alp-empty {display: none;flex-direction: column;align-items: center;justify-content: center;height: 450px;color: #999;font-size: 14px;}
.asset-list-popup .alp-empty i {font-size: 48px;margin-bottom: 12px;color: #ccc;}
.asset-list-popup .alp-empty p {margin: 0;}
.asset-list-popup .alp-finished-tip {grid-column: 1 / -1;text-align: center;color: #999;font-size: 12px;padding: 12px 0;}
.asset-list-popup .alp-video-duration {position: absolute;bottom: 4px;left: 4px;background: rgba(0,0,0,0.5);color: #fff;font-size: 11px;padding: 1px 5px;border-radius: 3px;display: none;z-index: 2;}
/* ==================== 音频裁剪弹窗 ==================== */
.audio-clip-popup {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9995;display: flex;align-items: center;justify-content: center;}
.audio-clip-popup .audio-clip-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);}
.audio-clip-popup .audio-clip-dialog {position: relative;background: #fff;border-radius: 12px;width: 520px;max-height: 85vh;display: flex;flex-direction: column;overflow: hidden;}
.audio-clip-popup .audio-clip-header {display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;}
.audio-clip-popup .audio-clip-title {font-size: 16px;font-weight: 600;color: #333;}
.audio-clip-popup .audio-clip-close {cursor: pointer;font-size: 18px;color: #999;}
.audio-clip-popup .audio-clip-close:hover {color: #333;}
.audio-clip-popup .audio-clip-body {padding: 0 20px 20px;}
/* 描述 */
.audio-clip-popup .audio-clip-desc {font-size: 14px;color: #999;margin-bottom: 16px;}
/* 编辑器区域 */
.audio-clip-popup .audio-clip-editor {margin-bottom: 20px;display: flex;align-items: center;gap: 10px;}
.audio-clip-popup .audio-clip-player-wrap {display: flex;align-items: center;min-width: 120px;padding: 5px 10px 5px 5px;background-color: #00000030;border-radius: 100px;}
.audio-clip-popup .audio-clip-play-btn {width: 32px;height: 32px;border-radius: 50%;background-color: #1890ff;display: flex;align-items: center;justify-content: center;cursor: pointer;margin-right: 15px;transition: background-color 0.3s ease;}
.audio-clip-popup .audio-clip-play-btn:hover {background-color: #40a9ff;}
.audio-clip-popup .audio-clip-play-btn i {font-size: 14px;color: white;}
.audio-clip-popup .audio-clip-time-display {font-size: 14px;color: white;font-family: monospace;}
/* 时间轴 */
.audio-clip-popup .audio-clip-timeline {position: relative;height: 30px;display: flex;align-items: center;flex: 1;}
.audio-clip-popup .audio-clip-full-timeline {flex: 1;height: 36px;background-color: #f0f0f0;border: 2px solid #ccc;border-radius: 8px;position: relative;cursor: pointer;overflow: hidden;}
.audio-clip-popup .audio-clip-waveform {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(to bottom, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);display: flex;align-items: center;padding: 0 8px;}
.audio-clip-popup .audio-clip-waveform-bar {flex: 1;height: 60%;background-color: #ccc;margin: 0 1px;border-radius: 2px;}
/* 选中段 */
.audio-clip-popup .audio-clip-selected-segment {position: absolute;height: 100%;background-color: rgba(24, 144, 255, 0.2);border: 2px solid #1890ff;border-radius: 6px;left: 0;right: 0;cursor: move;z-index: 5;}
.audio-clip-popup .audio-clip-handle-left,.audio-clip-popup .audio-clip-handle-right {position: absolute;top: 0;width: 12px;height: 100%;background-color: #1890ff;border-radius: 4px;cursor: ew-resize;z-index: 10;transform: translateX(-50%);}
.audio-clip-popup .audio-clip-handle-left {left: 0;}
.audio-clip-popup .audio-clip-handle-right {right: 0;transform: translateX(50%);}
.audio-clip-popup .audio-clip-play-line {position: absolute;top: 0;width: 2px;height: 100%;background-color: #ff4d4f;cursor: ew-resize;z-index: 15;}
.audio-clip-popup .audio-clip-play-line::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background-color: #ff4d4f;border-radius: 50%;border: 2px solid white;box-shadow: 0 2px 4px rgba(0,0,0,0.3);}
/* 按钮 */
.audio-clip-popup .audio-clip-btns {display: flex;justify-content: flex-end;gap: 12px;}
.audio-clip-popup .audio-clip-btn {padding: 8px 24px;border-radius: 6px;font-size: 14px;cursor: pointer;border: none;transition: all 0.2s;}
.audio-clip-popup .audio-clip-btn-cancel {background: #f5f5f5;color: #666;}
.audio-clip-popup .audio-clip-btn-cancel:hover {background: #e8e8e8;}
.audio-clip-popup .audio-clip-btn-confirm {background: #4f46e5;color: #fff;}
.audio-clip-popup .audio-clip-btn-confirm:hover {background: #4338ca;}
.audio-clip-popup .audio-clip-btn-confirm:disabled,.audio-clip-popup .audio-clip-btn-disabled {background: #9ca3af;cursor: not-allowed;}
/* ==================== 设置主体弹窗 ==================== */
.subject-settings-popup {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9990;display: flex;align-items: center;justify-content: center;}
.subject-settings-popup .ssp-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);}
.subject-settings-popup .ssp-dialog {position: relative;background: #fff;border-radius: 12px;width: 540px;max-height: 85vh;display: flex;flex-direction: column;overflow: visible;}
.subject-settings-popup .ssp-header {display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;}
.subject-settings-popup .ssp-title {font-size: 16px;font-weight: 600;color: #333;}
.subject-settings-popup .ssp-title-tip {display: inline-flex;align-items: center;margin-left: 6px;font-size: 14px;color: #999;cursor: pointer;vertical-align: middle;}
.subject-settings-popup .ssp-close {cursor: pointer;font-size: 18px;color: #999;transition: color 0.2s;}
.subject-settings-popup .ssp-close:hover {color: #333;}
.subject-settings-popup .ssp-body {flex: 1;overflow-y: auto;padding: 5px 20px;}
.subject-settings-popup .ssp-section-title {font-size: 14px;color: #333;margin-bottom: 8px;font-weight: 500;}
.subject-settings-popup .ssp-required {color: #e74c3c;margin-left: 2px;}
.subject-settings-popup .ssp-upload-area {border: none;border-radius: 8px;min-height: 150px;position: relative;overflow: visible;}
.subject-settings-popup .ssp-upload-empty {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 244px;background: #0000000d;}
.subject-settings-popup .ssp-image-layout > .ssp-upload-empty {flex: 0 0 80%;height: auto;}
.subject-settings-popup .ssp-upload-empty .ssp-upload-icon {font-size: 40px;color: #ccc;margin-bottom: 8px;}
.subject-settings-popup .ssp-upload-empty p {font-size: 13px;color: #999;margin-bottom: 16px;}
.subject-settings-popup .ssp-upload-btns {display: flex;gap: 12px;}
.subject-settings-popup .ssp-upload-btns button {padding: 8px 20px;border: none;border-radius: 6px;cursor: pointer;font-size: 13px;color: #333;background: #0000000d;display: flex;align-items: center;gap: 6px;transition: all 0.2s;}
.subject-settings-popup .ssp-upload-btns button:hover {opacity: 0.8;}
.subject-settings-popup .ssp-upload-btns button .iconfont {font-size: 14px;}
/* 视频预览 */
.subject-settings-popup .ssp-video-preview {position: relative;width: 100%;height: 244px;display: flex;align-items: center;justify-content: center;background: #f5f5f5;}
.subject-settings-popup .ssp-video-preview video {width: 100%;max-height: 100%;}
.subject-settings-popup .ssp-video-preview .ssp-delete {position: absolute;top: 8px;right: 8px;cursor: pointer;font-size: 16px;color: #fff;background: rgba(0,0,0,0.5);border-radius: 50%;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;}
.subject-settings-popup .ssp-video-preview .ssp-delete:hover {background: rgba(0,0,0,0.7);}
/* 音频预览 */
.subject-settings-popup .ssp-audio-preview {position: relative;width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;background: #f5f5f5;border-radius: 4px;}
.subject-settings-popup .ssp-audio-preview audio {width: 90%;}
.subject-settings-popup .ssp-audio-preview .ssp-delete {position: absolute;top: 8px;right: 8px;cursor: pointer;font-size: 16px;color: #fff;background: rgba(0,0,0,0.5);border-radius: 50%;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;}
.subject-settings-popup .ssp-audio-preview .ssp-delete:hover {background: rgba(0,0,0,0.7);}
/* 图片布局 */
.subject-settings-popup .ssp-image-layout {display: flex;gap: 3px;height: 244px;}
.subject-settings-popup .ssp-main-image {flex: 0 0 80%;position: relative;overflow: hidden;border-radius: 4px 0 0 4px;background: #5b5b3e52;display: flex;align-items: center;justify-content: center;}
.subject-settings-popup .ssp-main-image img {max-width: 100%;max-height: 100%;object-fit: contain;}
.subject-settings-popup .ssp-main-image .ssp-delete {position: absolute;top: 8px;right: 8px;cursor: pointer;font-size: 14px;color: #fff;background: rgba(0,0,0,0.5);border-radius: 50%;width: 22px;height: 22px;display: none;align-items: center;justify-content: center;}
.subject-settings-popup .ssp-main-image:hover .ssp-delete {display: flex;}
.subject-settings-popup .ssp-side-images {flex: 0 0 20%;display: flex;flex-direction: column;background: #0000000d;border-radius: 0 4px 4px 0;}
.subject-settings-popup .ssp-side-item {position: relative;flex: 1;overflow: hidden;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.subject-settings-popup .ssp-side-item img {width: 100%;height: 100%;object-fit: cover;}
.subject-settings-popup .ssp-side-item .ssp-delete {position: absolute;top: 2px;right: 5px;cursor: pointer;font-size: 12px;color: #fff;background: rgba(0,0,0,0.5);border-radius: 50%;width: 18px;height: 18px;display: none;align-items: center;justify-content: center;}
.subject-settings-popup .ssp-side-item:hover .ssp-delete {display: flex;}
.subject-settings-popup .ssp-side-item.ssp-add-more {border: none;color: #333;overflow: visible;}
.subject-settings-popup .ssp-side-item.ssp-add-more .iconfont {font-size: 20px;}
/* 侧图添加菜单 */
.ssp-side-menu {position: fixed;z-index: 10001;background: #fff;border-radius: 8px;box-shadow: 0 4px 16px rgba(0,0,0,0.12);padding: 5px;min-width: 130px;}
.ssp-side-menu .ssp-side-menu-item {padding: 8px 12px;border-radius: 6px;cursor: pointer;font-size: 13px;color: #333;display: flex;align-items: center;gap: 6px;white-space: nowrap;}
.ssp-side-menu .ssp-side-menu-item:hover {background: #f5f5f5;}
.ssp-side-menu .ssp-side-menu-item .iconfont {font-size: 14px;}
/* 字段 */
.subject-settings-popup .ssp-field {margin-top: 16px;}
.subject-settings-popup .ssp-field label {display: block;font-size: 14px;color: #333;margin-bottom: 6px;font-weight: 500;}
.subject-settings-popup .ssp-field .ssp-name {width: 100%;padding: 8px 50px 8px 12px;border: none;border-radius: 6px;font-size: 14px;outline: none;box-sizing: border-box;background: #0000000d;}
.subject-settings-popup .ssp-field .ssp-name:focus {outline: none;}
.subject-settings-popup .ssp-field .ssp-name-wrap {position: relative;}
.subject-settings-popup .ssp-field .ssp-name-count {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);font-size: 12px;color: #999;pointer-events: none;}
.subject-settings-popup .ssp-field .ssp-desc {width: 100%;padding: 8px 12px;border: none;border-radius: 6px;font-size: 14px;outline: none;resize: none;height: 80px;box-sizing: border-box;background: #0000000d;}
.subject-settings-popup .ssp-field .ssp-desc:focus {outline: none;}
/* 底部 */
.subject-settings-popup .ssp-footer {padding: 12px 20px;display: flex;justify-content: flex-end;}
.subject-settings-popup .ssp-save-btn {padding: 8px 32px;border-radius: 6px;border: none;cursor: pointer;font-size: 14px;color: #fff;background: #1980FA;transition: opacity 0.2s;}
.subject-settings-popup .ssp-save-btn:hover {opacity: 0.9;}
.subject-settings-popup .ssp-save-btn.ssp-disabled {background: #ccc;cursor: not-allowed;opacity: 1;}
.subject-settings-popup .ssp-save-btn.ssp-disabled:hover {opacity: 1;}
/* ==================== 参考弹窗 - 区域分隔 ==================== */
.reference-popup .popup-divider {display: flex;align-items: center;padding: 8px 6px 4px;margin-top: 4px;border-top: 1px solid #eee;}
.reference-popup .popup-divider span {font-size: 12px;color: #999;}
.reference-popup .popup-divider:first-of-type {border-top: none;margin-top: 0;}
/* 区域分隔线 */
.reference-popup .popup-section-divider {margin: 6px 0;border-top: 1px solid #f0f0f0;}
/* 返回底部按钮：定位在输入框卡片右上角外，紧贴卡片 */
#backToBottom{
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 8px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: #333;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 888;
}
#backToBottom i{font-size: 10px;color: #333;line-height: 1;}