* {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
html {font: normal 16px "微软雅黑";-webkit-text-size-adjust: 100%}
body {padding: 0;margin: 0 auto;font-size: 14px;color: #000;background-color: #fff;font-family: "XiaoMingChaoPro";
    -webkit-text-size-adjust: none;
    /*取出点击出现半透明的灰色背景*/
    -webkit-tap-highlight: rgba(0,0,0,0); position: relative;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {-webkit-appearance: none;}
ul,ul li {list-style: none;}
table {border-collapse: collapse;border-spacing: 0}
table td {border-collapse: collapse;}
select, input, textarea {font-size: 14px;color: #333;border-radius: 0;-webkit-border-radius: 0;}
img{border: none;max-width: 100%;vertical-align: middle;}
.btn-icon{display: flex;height: 2.5rem;width: 2.5rem;align-items: center;justify-content: center;border-radius: 9999px;--tw-bg-opacity: 1;background-color: rgb(255 133 162 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1));transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 300ms;}
.message-bubble{animation: fadeIn 0.5s ease-in-out;border-radius: 1rem;padding-left: 1rem;padding-right: 1rem;padding-top: 0.5rem;padding-bottom: 0.5rem;margin-bottom: 1rem;max-width: 80%;}
.role-message{--tw-bg-opacity: 1;background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color: rgb(75 85 99 / var(--tw-text-opacity, 1));}
.item-num{justify-content: center;}

.contain{width: 100%;}
.content-box{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}
.content-left{width: 15%;background: #fec8c33d;padding: 2rem 2%;height: 100vh;}
.content-center{width: 65%;margin: 2% 2% 0;}
.content-right{width: 15%;padding: 2rem 2% 2rem 0;}
.title-box{border-bottom: 1px #fec8c3 solid;}
.nav-top{display: flex;flex-direction: column;align-items: center;border-bottom: 1px #fec8c3 solid;padding-bottom: 9%;}
.nav-top a{display: flex;align-items: center;justify-content: center;padding: 5% 0;margin-bottom: 5%;font-size: 1rem;color: #ff85a2;font-weight: 600;transition: all 0.3s ease;}
.nav-top a i{width:15%;margin-right: 2%;}
.nav-top a.active{color: #fff;background-color: #ff85a278;}
.nav-bot .li{display: none;}
.nav-bot .li.active{display: block;}

.welcome-word{font-size: 1.5rem;font-weight: 600;color: #484848;margin-bottom: 2%;}
.recommend-box{margin-bottom: 7%;}
.role-search{position: relative;}
.role-list{margin-top: 11%;}
.role-box{display: flex;align-items: center;position: relative;overflow: hidden;}
.role-box:after{content: "";position: absolute;width: 128%;height: 280%;background: url(../images/role-1.png) center center / 100% 100% no-repeat;z-index: -1;opacity: 0.15;left: 50%;transform: translate(-50%, -50%);top: 86%;}
.role-box-2:after{background: url(../images/role-2.png) center center / 100% 100% no-repeat;}
.role-box-3:after{background: url(../images/role-3.png) center center / 100% 100% no-repeat;}
.role-box-4:after{background: url(../images/role-4.png) center center / 100% 100% no-repeat;}
.role-box-5:after{background: url(../images/role-5.png) center center / 100% 100% no-repeat;}
.role-box-6:after{background: url(../images/role-6.png) center center / 100% 100% no-repeat;}
.role-box-7:after{background: url(../images/role-7.png) center center / 100% 100% no-repeat;}
.role-box-8:after{background: url(../images/role-8.png) center center / 100% 100% no-repeat;}
.role-pic{width: 35%;}
.role-word{width: 60%;}
.page-box{justify-content: flex-end;}

.content-bom{margin-top: 9%;display: flex;align-items: flex-end;position: fixed;width: 10%;bottom: 1%;}
.login p{display: flex;align-items: center;}
.login p span{width: 26%;background: #fff;border-radius: 50px;margin-right: 4%;}

.user-message{align-self: flex-end;--tw-bg-opacity: 1;background-color: rgb(255 133 162 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1));}

.chat-name{flex-direction: column;width: 70%;}
.chat-word{display: flex;flex-direction: column;align-items: center;}
.chat-word p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-overflow: ellipsis;}
.bgword{position: relative;transition: all 0.3s ease;}
.bgword:hover{color: #FF85A2;}

/* Tooltip 样式 */
.bgword-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    max-width: 400px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
    white-space: normal;
}

.bgword-tooltip.show {
    opacity: 1;
}

.bgword-tooltip::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, 0.9);
}

.suggest{margin: 3% 0 7%;}

.creat-box{width: 75%;margin: 3% auto 0;}
.rolepic{width: 5rem;height: 5rem;border-radius: 50%;margin: 0 auto 3%;background: linear-gradient(135deg, #ff83a1, #fec8c3);display: flex;align-items: center;justify-content: center;font-size: 3rem;color: #fff;font-weight: bold;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.rolebox{margin-bottom: 3%;}
.rolebg input{height: 13rem;}
.btn-create{display: flex;align-items: center;justify-content: center;padding: 1% 0;margin: 5% 0 0 80%;font-size: 1rem;color: #fff;font-weight: 600;transition: all 0.3s 
ease;background-color: #ff85a2c7;width: 20%;border-radius: 10px;}
.chat-messages{padding: 1.5rem 1.5rem 5rem;}
.chat-form{position: fixed;width: 100%;bottom: 0%;max-width: 56rem;}

@media(max-width:1600px){

}
@media(max-width:520px){

}