p > code{
    background:#f4f4f4;
    border:1px solid #ccc;
    border-radius:3px;
    color:#c7254e;
    font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size:0.9em;
    padding:2px 4px;
}
/* 为 pre 标签内的 code 元素设置样式 */
pre > code{
    background:#2d2d2d;
    border-radius:4px;
    color:#ccc;
    display:block;
    font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size:0.9em;
    line-height:1.4;
    overflow-x:auto;
    padding:16px;
    tab-size:4;
    white-space:pre-line;
}
#chatBox{
    height:100vh;
    left:0;
    overflow-y:auto;
    position:fixed;
    width:100%;
}
.dpSidebar{
    border-right:2px solid #cccccc;
    display:block;
    flex-direction:column;
    height:100%;
    padding-top:110px;
    position:fixed;
    top:0;
    width:200px;
    z-index:1;
}
.dpSidebarTools{
    background:white;
    height:57px;
    left:4.5%;
    position:absolute;
    top:45px;
    width:190px;
    z-index:11;
}
.dpSidebarTools > button{
    background:#dbeafe;
    border:1px solid;
    border-radius:8px;
    color:#4d6bfe;
    cursor:pointer;
    font-size:16px;
    margin:10px 6px;
    padding:10px;
    vertical-align:middle;
}
.chatHistory{
    flex-grow:1;
    height:85%;
    overflow-y:auto;
}
.chatHistory > div{
    border-radius:5px;
    cursor:pointer;
    /* margin: 5px 0; */
    font-size:14px;
    padding:8px;
}
.chatContainer{
    display:block;
    left:10%;
    margin:0 auto;
    position:relative;
    /*flex-direction:column;*/
    width:55%;
}
.message{
    margin-bottom:10px;
    margin-top:10px;
    max-width:97%;
    padding:5px;
}
.user-message{
    text-align:right;
}
.user-message-div{
    align-content:stretch;
    align-items:flex-end;
    background:#e0e0e0;
    border-radius:8px;
    display:inline-block;
    justify-content:flex-end;
    min-width:25px;
    /* margin: 10px 0; */
    padding:10px;
    position:relative;
    text-align:left;
}
/*.bot-message{*/
/*    align-self:flex-start;*/
/*}*/
.send-btn, .stop-btn{
    background:#007bff;
    border:none;
    border-radius:24px;
    bottom:5px;
    color:white;
    cursor:pointer;
    font-size:13px;
    padding:6px 8px;
    position:absolute;
    right:10px;
    vertical-align:middle;
}
#toBottom{
    background:none;
    border:none;
    bottom:-10px;
    cursor:pointer;
    padding:0;
    position:absolute;
    right:50px;
    transform:scale(0.5);
}
.stop-btn{
    background:red;
}
footer{
    display:none !important;
}
.reasoning{
    border-left:2px solid #e5e5e5;
    color:#8b8b8b;
    display:none;
    font-size:14px;
    line-height:20px;
    margin:0;
    padding:0 0 0 5px;
    white-space:pre-wrap;
}
.content{
    font-size:17px;
    line-height:25px;
    margin:5px;
    overflow-wrap:break-word;
}
#DeepSeekTitle{
    font-size:40px;
    text-align:center;
}
#publicityDiv{
    margin-top:6%;
}
.DeepSeekPublicity{
    margin:10px;
    text-align:center;
}
.loading-spinner{
    animation:spin 3s linear infinite;
    border:4px solid #f3f3f3;
    border-radius:50%;
    border-top:4px solid #007bff;
    display:none;
    height:10px;
    margin:5px;
    vertical-align:top;
    width:10px;
}
.toggle-button{
    background:none;
    border:none;
    bottom:1px;
    margin:0;
    position:relative;
}
@keyframes spin{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
.thinking-text{
    display:inline-block;
    margin:5px;
}
#blankSpace{
    /*user-select:none;*/
    /*font-size:20px;*/
    /*padding-left:26%;*/
    /*width:68%;*/
    /*text-align:center;*/
    height:400px;
    padding-top:50px;
}
.bottom-left-buttons > button{
    background:none;
    border:none;
    color:cadetblue;
    cursor:pointer;
    display:inline-block;
    font-size:12px;
    margin:0 5px;
    padding:0;
}
.bottom-left-buttons > button.downDocx{
    background:#007bff;
    border:1px solid #cccccc;
    border-radius:13px;
    color:white;
    height:30px;
    line-height:30px;
    padding:0 10px;
}
.chatContainer pre code{
    background:#fafafa;
    color:black;
    font-size:15px;
    margin:0 !important;
    overflow:auto;
    padding:15px;
    padding-top:5px;
    white-space:pre;
    word-break:break-all;
}
.user-message-span{
    white-space:normal; /* 默认换行行为 */
    word-break:break-word; /* 遇到长单词时强制换行 */
    word-wrap:break-word; /* 自动换行 */
}
#tools{
    bottom:5px;
    height:50px;
    line-height:50px;
    padding-left:16px;
    position:absolute;
    width:98%;
    z-index:999999;
}
#select_role{
    border:1px solid #cccccc;
    font-size:15px;
    height:40px;
}
#select_role option{
    height:40px;
}
/* 新增样式：联网搜索按钮 */
#toolsBox > button{
    background:#ffffff;
    border:1px solid #cccccc;
    border-radius:24px;
    cursor:pointer;
    font-size:11px;
    margin:0 2px;
    padding:5px 7px;
    vertical-align:middle;
}
.chatHistory > div:hover{
    background:#ececec;
}
.chatHistory > .sessionActive{
    background:#c5c5c5 !important;
}
#toolsBox > button.deepSeekBtnSelected{
    background:#DBEAFE;
    color:#4D6BFE;
}
#userProfile > input, #userProfile > textarea{
    display:block;
    font-size:18px;
    margin:5px;
    padding:10px;
    width:80%;
}
#userProfile > #preferences, #userProfile > #remark{
    display:none;
}
#dpSettingBoxMasking{
    background:rgb(0 0 0 / 70%);
    display:none;
    height:100%;
    position:fixed;
    width:100%;
    z-index:103;
}
#dpSettingBox{
    background:#f0f0f0;
    border-radius:10px;
    height:90%;
    margin:0 auto;
    overflow:auto;
    position:relative;
    top:5%;
    width:90%;
}
.dpSettingBoxSpan{
    display:inline-block;
    margin:10px;
}
#userProfileTitle{
    display:block;
    font-size:18px;
}
#userProfileTitle > a{
    color:#0677ec;
}
.bot-message .bottom-left-buttons{
    /*margin-top:-15px;*/
}
/* 样式化工具提示容器 */
.tooltip{
    background:#333;
    border-radius:5px;
    color:#fff;
    font-size:12px;
    opacity:0;
    padding:5px;
    pointer-events:none;
    position:absolute;
    transition:opacity 0.3s ease;
    z-index:1000;
}
/* 鼠标悬停时显示提示框 */
.toolsBoxBtn:hover + .tooltip{
    opacity:1;
}
.chatContainer p{
    margin:0;
}
#roleDefaultHint{
    color:red;
}
#sessionHeaderTitle{
    font-size:16px;
    font-weight:600;
    height:50px;
    left:50%;
    line-height:50px;
    position:absolute;
    text-align:center;
    text-overflow:ellipsis;
    transform:translateX(-50%);
    white-space:nowrap;
    width:300px;
    z-index:103;
}
.hideSidebarPar{
    background:none !important;
    background:white;
    border-right:1px solid #cccccc;
    height:100%;
    left:0;
    position:fixed;
    top:50px;
    width:40px;
    z-index:11;
}
.hideSidebarBtn{
    background:none !important;
    border:none !important;
}
.message a{
    color:blue;
}
/* 给所有带 language- 前缀的 <pre> 都加一个标签 */
pre[class*="language-"], pre{
    margin:10px 0;
    overflow:auto;
    padding:0;
    padding-top:28px;
    position:relative;
}
pre[class*="language-"]::before, pre::before{
    border-radius:0 0 4px 0;
    content:attr(class);
    font-size:0.75em;
    left:13px;
    line-height:1;
    padding:2px 6px;
    position:absolute;
    top:22px;
    transform:translateY(-100%);
}
:not(pre) > code, pre{
    background:#f5f2f0;
}
.codeTitle{
    background:#f5f2f0;
    background:none;
    height:30px;
    position:absolute;
    text-align:right;
    top:0;
    width:100%;
    z-index:0;
}
.copy-btn{
    background:none;
    border:none;
    cursor:pointer;
    display:inline-block;
    position:relative;
}
.codeTitle.floating{
    background:#f5f2f0;
    position:fixed;
    top:51px;
}
.session-item{
    cursor:pointer;
    padding:8px 12px;
    position:relative;
}
.session-item:hover .menu-btn{
    display:inline;
}
.menu-btn{
    border-radius:5px;
    cursor:pointer;
    display:none;
    font-size:18px;
    font-weight:600;
    height:15px;
    /* background: #bbb6b6; */
    line-height:15px;
    padding:0 5px;
    position:absolute;
    right:3px;
    top:10px;
    user-select:none;
}
.menu-dropdown{
    background:white;
    border:1px solid #ccc;
    border-radius:4px;
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.15);
    position:absolute;
    right:0;
    top:35px;
    z-index:100;
}
.menu-item{
    cursor:pointer;
    padding:6px 12px;
    white-space:nowrap;
}
.menu-item:hover{
    background:#f0f0f0;
}
.rename-input{
    border:1px solid #ccc;
    font-size:inherit;
    outline:none;
    padding:2px 4px;
    width:80%;
}
#inputContainer{
    background:white;
    bottom:0;
    left:31%;
    margin:10px 0;
    position:fixed;
    width:56%;
}
.fullWidth{
    left:0;
    margin:0 auto;
    padding-left:0;
    width:75%;
}
#startTitle.fullWidth{
    padding-left:0;
    width:75%;
}
#inputContainer.fullWidth{
    left:12%;
    width:74%;
}
#deepSeekInput{
    background:none;
    border:none;
    border-radius:24px;
    box-shadow:none;
    box-sizing:inherit;
    font-size:17px;
    line-height:1.5;
    max-height:300px;
    min-height:50px;
    outline:none;
    overflow:auto;
    padding:10px;
    resize:none;
    width:100%;
}
#deepSeekBox{
    background:#f3f4f6;
    border:1px solid #ccc;
    border-radius:24px;
    box-sizing:border-box;
    padding:5px 5px 43px 5px;
    width:100%;
}
code[data-hide="true"]{
    display:none; /* 隐藏含有 data-hide="true" 的 <code> 标签 */
}
.toggle-code-btn{
    border:1px solid #ccc;
    border-radius:4px;
    color:#333;
    cursor:pointer;
    display:inline-block;
    font-size:14px;
    line-height:1.5;
    margin:5px 0;
    padding:4px 6px;
}
.toggle-code-btn:hover{
    background:#e9e9e9;
    border-color:#b3b3b3;
}
.toggle-code-btn.active{
    background:#007bff;
    border-color:#007bff;
    color:#fff;
}
#engineSelect{
    padding:10px;
    vertical-align:middle;
}
/*****************/
@media (max-width:768px){
    #inputContainer{
        background:white;
        bottom:0;
        padding:0;
        position:fixed;
    }
    .fullWidth{
        width:85%;
    }
    #inputContainer.fullWidth{
        left:0;
        width:100%;
    }
    #deepSeekBox{
        margin:0 auto;
        width:90%;
    }
    .dpSidebar{
        background:rgba(0, 0, 0, 0.61);
        display:none;
        height:94%;
        left:0;
        padding:0;
        position:fixed;
        top:50px;
        width:100%;
        z-index:15;
    }
    .chatHistory{
        background:white;
        border-right:1px solid #cccccc;
        height:98%;
        width:71%;
    }
    .send-btn, .stop-btn{
        background:none;
        border-radius:9px;
        bottom:24px;
        color:black;
        font-size:15px;
        position:fixed;
        right:7%;
    }
    .stop-btn{
        color:red;
    }
    #deepSeekInput{
        min-height:50px;
        padding-right:26px;
    }
    #toBottom{
        bottom:108px;
        position:fixed;
        right:10px;
        transform:scale(0.5);
    }
    #blankSpace{
        height:380px;
        left:0;
        margin:0 auto;
        padding:0;
        padding-top:30px;
        position:relative;
    }
    #publicityDiv{
        margin-top:15%;
    }
    #tools{
        margin-left:12px;
        overflow-x:auto;
        text-align:left;
        white-space:nowrap;
        /* background: blanchedalmond; */
        width:93%;
    }
    #select_role{
        border:1px solid #cccccc;
        font-size:13px;
        height:30px;
        width:78px;
    }
    #toolsBox > button{
        border-radius:24px;
        margin:0;
        padding:6px 7px;
    }
    .dpSidebarTools{
        background:none;
        height:50px;
        left:0;
        position:fixed;
        top:0;
        width:130px;
        z-index:10;
    }
    .dpSidebarTools > button{
        background:none;
        border:none;
        color:black;
        font-size:20px;
        height:35px;
        line-height:35px;
        margin:7px 8px;
        padding:0 !important;
        /*display:none;*/
    }
    .chatHistory > div{
        border-radius:5px;
        cursor:pointer;
        font-size:14px;
        margin:5px 5px;
        padding:8px;
    }
    .newChatBtn{
        /*color:transparent !important;*/
        position:relative;
        /*left:26%;*/
    }
    .newChatBtn::after{
        color:black;
        content:url("/static/image/newChat.png");
        font-size:11px;
        height:0;
        left:-22px;
        position:absolute;
        top:-1px;
        transform:scale(0.17);
        white-space:nowrap;
        width:0;
    }
    #dpSidebarToggleSidebar{
        color:transparent !important;
        position:relative;
    }
    #dpSidebarToggleSidebar::after{
        color:black;
        content:url("/static/image/icons/menu.png");
        font-size:11px;
        height:0;
        left:7px;
        position:absolute;
        top:5px;
        transform:scale(0.35);
        white-space:nowrap;
        width:0;
    }
    #sessionHeaderTitle{
        font-size:13px;
        font-weight:600;
        height:20px;
        line-height:20px;
        top:14px;
        width:46%;
        z-index:10;
        overflow:hidden;
    }
    .hideSidebarPar{
        background:none !important;
        border-right:none;
        left:0;
        position:fixed;
        white-space:nowrap;
        z-index:16;
    }
    .DeepSeekPublicity{
        font-size:15px;
        margin:10px 0 0 0;
    }
    #startTitle.fullWidth{
        width:100%;
    }
    body .custom-select{
        font-size:12px;
        margin:30px auto 0;
        position:relative;
        user-select:none;
        width:70%;
    }
    .profile-table{
        font-size:13px;
    }
    body .action-button{
        font-size:12px;
        padding:6px;
    }
    body .user-collect-modal-content{
        height:80%;
        width:75%;
    }
    body .user-collect-input{
        height:80%;
        width:100%;
    }
    .copy-btn.floating{
        right:5%;
    }
}