html {
  font-size: 16px;
  font-family: '微软雅黑'
}
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
a:hover {
  text-decoration: none;
}
button {
  cursor: pointer;
}
h1,h2,h3,h4,h5 {
  font-weight: 700;
  margin: 0;
}
p {
  margin: 0;
}
a{ text-decoration:none;}
* {
	padding:0px; margin:0px;
  box-sizing: border-box;
}
.clear {
  clear: both;
}
.clear::after {
  content: '';
  display: block;
  clear: both;
}
.container {
	width: 1600px;
	margin:0 auto;
	position: relative;
}
/* width */
@media screen and (max-width: 1920px) {
  section {
    zoom: 1;
  }
}
@media screen and (max-width: 1560px) {
  section {
    zoom: .8;
  }
}
@media screen and (max-width: 1440px) {
  section {
    zoom: .8;
  }
}
@media screen and (max-width: 1180px) {
 section {
    zoom: .8;
  }
}
@font-face{
  font-family: "pf";
  src: url("../img/pf.ttf")
}
/* @font-face{
  font-family: "pfs";
  src: url("../img/pfs.ttf")
} */
.chat-box{
    font-family: "pf" !important;
}
section{ display:flex;justify-content : center; flex-direction:column; width:100%;position:fixed; height:100%; background-image:url(../img/bg.jpg); background-position:center; background-size:cover;}
section .container{ height:98%; display:flex;justify-content : space-between;}
.chat-box{zoom:0.4; width:1080px; position:relative; overflow:hidden;  height:2340px; background-repeat:no-repeat;background-position:center; background-size:cover;}
.foot-chat{ position:absolute;width:100%; bottom:0px;z-index: 1000;}
.chat-lst{overflow:auto; height:98%;}
.chat-lst .r.rec p{
    width:190px;
    background-image: url(../img/rec2.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-left:40px;
}

.chat-lst .l.rec p{
    width:190px;
    background-image: url(../img/rec1.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-left:40px;
}

.chat-L{ width:340px; padding:20px; background:#fff; height:100%;}
h3{ font-size:20px; line-height:54px;}
textarea { width:96%; height:50px; border:1px solid #ccc; font-size:16px; font-family:"微软雅黑"; padding:2%;}
.Chat-J{ overflow:hidden; margin-bottom:5px;}
.user-img,.user-img2{width:60px; border-radius:50%; overflow:hidden; margin-top:10px;height:60px; border:1px solid #333;margin-right:20px;}
.user-img img,.user-img2 img{ width:100%; border-radius:50%; height:100%;}
.Chat-J input::-webkit-input-placeholder { /* WebKit browsers */
  color: #fff;
}


.bg-img,.bg-img-video,.pay-img{ width:60px;  overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:cover; height:100px; border:1px solid #333;}
.bg-img img,.pay-img img{ width:100%;  height:100%;}
.Chat-J input[type='text'],.Chat-J input[type='button']{width:80px; margin-top:6px;  margin-right:5px; float:left; height:35px;  text-align:center; background:#666; border:1px solid #ccc; color:#fff; line-height:35px;font-size:16px;  }
button{ float:left; width:60px;  height:35px;  text-align:center; background:#666; color:#fff; line-height:35px; font-size:16px; margin:6px auto;}
input[type='submit']{ float:left; width:70px; height:30px; text-align:center; background:#999; color:#fff; line-height:30px; border:90px; font-size:16px; margin:10px 15px;}
.lang-vi .Chat-J button,
.lang-vi .Chat-J input[type='button']{
  white-space: nowrap;
  width: auto !important;
  min-width: 94px;
  padding: 0 10px;
  font-size: 13px;
}
.lang-vi #darkModeBtn{
  min-width: 98px;
}
.lang-vi #langToggleBtn{
  min-width: 70px;
}
.lang-vi #statusControlRow,
.lang-vi #batteryControlRow{
  flex-wrap: nowrap;
  gap: 6px;
}
.lang-vi #statusControlRow > label,
.lang-vi #batteryControlRow > label{
  white-space: nowrap;
  margin-right: 0 !important;
  margin-left: 0 !important;
  gap: 4px !important;
  font-size: 12px;
}
.top-img{ position:relative;margin-bottom: 10px;height: 230px;}
.top-img h2 {
    font-weight: 500;
    font-size: 42px;
    width: 72px;
    line-height: 40px;
    position: absolute;
    right: 126px;
    top: 40px;
    text-align: center;
    color: #000;
}
.top-img .ios-time-wrap{
    position:absolute;
    left:80px;
    top:36px;
    display:flex;
    align-items:center;
    gap:4px;
}
.top-img h4{ position:static; font-size:42px; line-height:42px; font-weight: bold; color: #000;}
.top-img .hn-mute-icon{
    width:31px;
    height:35px;
    position:static;
    flex:0 0 auto;
}
.top-img h3{ font-weight:500; position:absolute; left:44px; top:61px; font-size:16px; line-height:16px; text-indent:2px;}
.top-img h3 span{ font-size:16px; margin-right:10px;}

.az-top{
    background-color: #fff;height:90px;position:absolute;top:0;left:0;right:0;
    padding:0 80px;display: flex;align-items: center;justify-content: space-between;color: #000;font-size: 42px;padding-top: 18px;
}
.az-top-right{display: flex;align-items: center;}
.az-top .az-time{font-weight: 500;color: #000;}
.az-top .az-time-wrap{display:flex;align-items:center;gap:10px;}
.az-top .hn-mute-icon{
    width:31px;
    height:35px;
    position:static;
}
.az-top .signal{position: inherit !important;}
.az-top .wifi{position: inherit !important;}
.signal-stack{
    position:absolute;
    right:200px;
    top:42px;
    width:50px;
    height:33px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:2px;
    overflow:hidden;
}
.signal-stack .signal{
    position:static !important;
    right:auto !important;
    top:auto !important;
    width:50px;
    height:auto;
}
.signal-stack .signal-dual{
    margin-left:0;
}
.signal-stack .signal-dual img{
    height:33px;
    width:100%;
    display:block;
    object-fit:fill;
}
.signal-stack .signal:not(.signal-dual) img{
    height:33px;
    width:100%;
    display:block;
    object-fit:fill;
}
.signal-stack.signal-stack--dual .signal{
    height:23px;
    overflow:hidden;
}
.signal-stack.signal-stack--dual .signal-dual{
    height:8px;
    overflow:visible;
}
.signal-stack.signal-stack--dual .signal:not(.signal-dual) img{
    height:23px;
    transform:none;
}
.signal-stack.signal-stack--dual .signal-dual img{
    height:33px;
    width:100%;
    object-fit:fill;
    transform:scaleY(0.2424);
    transform-origin:left top;
    display:block;
}
.az-top .signal-stack{
    position:relative;
    right:auto;
    top:auto;
    width:50px;
    height:33px;
    min-height:33px;
    gap:2px;
}
/* 安卓顶栏：双卡为横向，副卡在主卡左侧 */
.az-top .signal-stack.signal-stack-az{
    flex-direction: row;
    align-items: center;
    width: auto;
    min-width: 50px;
    gap: 6px;
}
.az-top .signal-stack .signal{
    position:static !important;
    width:50px;
}
.az-top .signal-stack.signal-stack-az .signal-dual{
    margin-left:0;
    margin-right:15px;
}
.az-top .signal-stack-az{
    margin-top:0;
}
/* 安卓顶栏电池：az_dl 自带外框，勿套 iOS 的灰底大圆角条（会盖住 PNG 边框）。电量在图下层，图叠在上面透出透明区域 */
.az-top .dc{
    position: relative !important;
    top: unset !important;
    right: unset !important;
    width: 70px;
    height: 33px;
    flex: 0 0 auto;
    overflow: visible;
}
.az-top .dc > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}
.az-top .dc .wrap {
    position: absolute;
    left: 10px;
    top: 2px;
    width: 47px;
    height: 29px;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: transparent;
    z-index: 2;
}
.az-top .dc .wrap div {
    width: 30%;
    height: 100%;
    border-radius: 2px;
    position: relative;
    z-index: 1;
}
.Chat-J { position:relative;}

.Chat-J img{ height:100%; }
.showimg{max-width:220px; padding:0px !important; width:60%; position:relative; background:none !important;}
.r .showimg{ margin-right:-10px;}
.showimg::after{ content:""; top:calc(100% / 2 - 30px) !important; left:auto !important; width:40px !important; height:40px !important; background-image:url(../img/ico9.png) !important;background-position:center center;   position:absolute; right:-54px !important;}
.l .showimg img{width:100%; float:left;}
.r .showimg img{width:100%; float:right;}

.dc {
    width: 70px;
    height: 33px;
    position: absolute;
    right: 54px;
    top: 42px;
    background-size:100% 100%;
}
.dc img{position:absolute;width:100%;height:100%;left:0;top:0;}
.dc .wrap{
    width:64px;
    height:33px;
    border-radius:8px;
    overflow:hidden;
}
.dc .wrap div{
    width:30%;
    height:100%;
    background-color:#000;
    border-radius:5px;
    position: relative;
    z-index: 4;
}
.dc .battery-percent-wrap {
    position: absolute;
    z-index: 6;
    left: 45%;
    top: 47%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}
.dc .battery-percent-wrap.battery-percent-wrap--icon-only {
    gap: 0;
}
.top-img > .dc .battery-percent-wrap.battery-percent-wrap--icon-only .battery-sd-icon {
    width: 28px;
    height: 28px;
}
.dc .battery-percent-value {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.dc .battery-sd-icon {
    position: static;
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}
.az-top .dc .battery-percent-wrap {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: 50%;
    /* az_dl 右侧有电极凸起，整格 flex 居中会显偏右，略左移对齐视觉中心 */
    transform: translateY(-50%) translateX(-1px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}
.az-top .dc .battery-percent-wrap.battery-percent-wrap--icon-only {
    gap: 0;
}
.az-top .dc .battery-percent-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.az-top .dc .battery-sd-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.wifi {
    width: 46px;
    position: absolute;
    right: 138px;
    z-index: 99;
    top: 42px;
}
.wifi img{ width:100%;}
.Chat-J input[type='checkbox']{ width:20px; height:20px;}
.Chat-J> label{ display:flex;align-items : center; }
.Chat-J> label input{ margin-left:5px;}
.Chat-J .tp{ overflow:hidden; display:none; width:100%; height:50px; position:absolute; top:55px; left:0px;}
.r .showimg::after{ left:-50px !important; right:auto !important;}
.signal{ width:50px; position:absolute; right:200px; top:42px;}
.signal img{ height:33px;}
/*滚动条样式*/
.chat-lst::-webkit-scrollbar {/*滚动条整体样式*/
        width:40px;/*高宽分别对应横竖滚动条的尺寸*/
        height:40px;
}
.chat-lst::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgb(255, 255, 255);
}
.chat-lst::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgb(255, 255, 255);
}

/* 深色模式：聊天列表滚动条为黑色 */
.chat-box.chat-dark-mode .chat-lst::-webkit-scrollbar-thumb {
        background: #000000;
}
.chat-box.chat-dark-mode .chat-lst::-webkit-scrollbar-track {
        background: #000000;
}
.chat-box.chat-dark-mode .chat-lst {
        scrollbar-color: #000000 #000000;
}

/* 深色模式：页面（根节点）滚动条为黑色 */
html.chat-page-dark-mode,
body.chat-page-dark-mode {
        scrollbar-color: #000000 #000000;
}
html.chat-page-dark-mode::-webkit-scrollbar-thumb,
body.chat-page-dark-mode::-webkit-scrollbar-thumb {
        background: #000000;
}
html.chat-page-dark-mode::-webkit-scrollbar-track,
body.chat-page-dark-mode::-webkit-scrollbar-track {
        background: #000000;
}

.faceWrap,.faceWrap2 {
    display: none;
    position: absolute;
    z-index: 9999;
    background-color: #FFF;
    height:480px;
    border: 1px solid #9FA0A0;
    padding: 20px;
    top: 30%;
    margin-bottom: 88px;
    overflow-y: scroll;
    left: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -o-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -webkit-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -ms-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
}
.faceWrap3 {
    display: none;
    position: absolute;
    z-index: 9999;
    background-color: #FFF;
    height:480px;
    border: 1px solid #9FA0A0;
    padding: 20px;
    top: 30%;
    margin-bottom: 88px;
    overflow-y: scroll;
    left: 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -o-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -webkit-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    -ms-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
}
.faceBox,.faceBox2 {
    position: relative;
    clear: both;
    width: 420px;
    overflow: hidden;
    cursor: pointer;
}
.faceBox3 {
    position: relative;
    clear: both;
    width: 350px;
    overflow: hidden;
    cursor: pointer;
}
.faceBox a,.faceBox2 a,.faceBox3 a {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    border-right: 1px solid #DFE6F6;
    border-bottom: 1px solid #dfe6f6;
    text-align: center;
    padding-top:5px;
}
.faceBox img,.faceBox2 img,.faceBox3 img{
  height: 40px;
}
.em{
    height:26px;
    vertical-align: -6px;
}

i{
    font-style:normal;
}

.hn-wrap{
    position: absolute;
    left:13%;
    top:63.8%;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.hn-avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.hn-avatar-wrap{
    position: relative;
    width: 100px;
    height: 100px;
}
.hn-online-dot{
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #319f3c;
    border: 6px solid #fff;
}
.hn-text-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 100px;
    justify-content: flex-start;
}
.hn-text-wrap.no-status{
    justify-content: center;
    gap: 0;
}
.hn-text-wrap.no-status .zs{
    display: none;
}
.hn{
    position: absolute;
    font-size: 48px;
    line-height: 48px;
    left:13%;
    top:74.8%;
    color: #000;
    font-weight: 600;
}
.hn-wrap .hn{
    position: static;
}
.zs{
    position: absolute;
    font-size: 36px;
    line-height: 33px;
    color: #666666;
}
.hn-wrap .zs{
    position: static;
}
.dt{
  display:inline-block;
  font-size: 38px;
  padding:0 20px;
  height:60px;
  line-height: 60px;
  text-align: center;
  color: #666;
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 20px;
}


.sr{
  width: 100%;
  /* overflow: hidden; */
}
.sr::after{
    content: "";
    clear: both;
    display: block;
}
.msg{
  position: relative;
  min-width: 200px;
  max-width: 776px;
  font-size: 46px;
  line-height: 56px;
  padding:26px;
  border-radius: 26px;
}
.left{
  float: left;
  background-color: #fff;
  margin-left: 130px;
  border:3px solid #d8d8d9;
}
.right{
  float: right;
  background-color: #d6effc;
  margin-right: 30px;
  border:3px solid #bccdd6;
}

/* Messenger-like text bubble tuning (text messages only) */
.left:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) {
  background-color: #f2f3f6;
  border: 0;
  border-radius: 40px;
  margin-left: 134px;
  min-width: 0;
  padding: 18px 30px;
}

.right:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) {
  background-color: #2e66f5;
  border: 0;
  border-radius: 40px;
  margin-right: 24px;
  min-width: 0;
  padding: 18px 30px;
}

.left:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) > p,
.right:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) > p {
  font-size: 40px;
  line-height: 50px;
}

.left:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) > p {
  color: #171717;
}

.right:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) > p {
  color: #ffffff;
}

/* 深色模式：对方纯文字气泡 */
.chat-box.chat-dark-mode {
  background-color: #000000 !important;
}

/* 深色模式：安卓顶栏 az-top（信号图仍由 JS getSignalIconSrc 使用 black 目录，不改动点击逻辑） */
.chat-box.chat-dark-mode .top-img .az-top {
  background-color: #000000;
}

.chat-box.chat-dark-mode .top-img .az-top .az-time {
  color: #ffffff;
}

.chat-box.chat-dark-mode .chat-lst .left:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) {
  background-color: #333334;
}

.chat-box.chat-dark-mode .chat-lst .left:not(.voice):not(.ld):not(.mp):not(.dp):not(.ym):not(.ht):not(.ct) > p {
  color: #e2e5e9;
}

/* 深色模式：左侧整条语音消息气泡 */
.chat-box.chat-dark-mode .chat-lst .left.voice {
  background-color: #333334 !important;
}

/* 深色模式：表情评论条 */
.chat-box.chat-dark-mode .chat-lst .msg-emj-left {
  background-color: #333334;
  border-color: #000000;
}

.chat-box.chat-dark-mode .chat-lst .msg-emj-right {
  background-color: #333334;
  border-color: #000000;
}

/* 深色模式：表情评论数量文字（如双表情时的 2） */
.chat-box.chat-dark-mode .chat-lst .msg-emj-right > span[contenteditable="true"] {
  color: #ffffff;
}

/* 深色模式：消息旁「引用」 */
.chat-box.chat-dark-mode .chat-lst .ref {
  color: #ffffff;
}

/* 深色模式：发送的链接卡片 */
.chat-box.chat-dark-mode .chat-lst .right.link-card-msg {
  background-color: #333334 !important;
}

.chat-box.chat-dark-mode .chat-lst .right.link-card-msg .link-card-title {
  color: #e2e5e9;
}

/* 深色模式：对方发送的链接卡片 */
.chat-box.chat-dark-mode .chat-lst .left.link-card-msg {
  background-color: #333334 !important;
}

.chat-box.chat-dark-mode .chat-lst .left.link-card-msg .link-card-title {
  color: #e2e5e9;
}

/* 深色模式：引用回复里对方消息预览（灰条） */
.chat-box.chat-dark-mode .chat-lst .msg.right.ym .ym-quote {
  background-color: #333334;
  color: #e2e5e9;
}

.chat-box.chat-dark-mode .chat-lst .msg.right.ym .ym-quote.ym-quote-image {
  background-color: transparent;
}

.chat-box.chat-dark-mode .chat-lst .msg.right.ym .ym-quote-text {
  color: #e2e5e9;
}

/* 深色模式：语音/视频通话记录卡片（.msg.ld） */
.chat-box.chat-dark-mode .chat-lst .msg.ld {
  background-color: #333335 !important;
}

.chat-box.chat-dark-mode .chat-lst .msg.ld .ld-title {
  color: #e5e5e7;
}

.chat-box.chat-dark-mode .chat-lst .msg.ld .ck {
  background-color: #5c5c5c;
  color: #e0e0e2;
}

.left.link-card-msg,
.right.link-card-msg {
  border: 0;
  border-radius: 30px !important;
  padding: 30px 28px !important;
  min-width: 0;
  max-width: 620px;
}

.left.link-card-msg {
  background-color: #f2f3f6 !important;
  margin-left: 134px;
  padding-right: 40px !important;
}

.right.link-card-msg {
  background-color: #f2f3f6 !important;
  margin-right: 24px;
  padding-right: 40px !important;
  
}

.link-card-main {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.link-card-title {
  font-size: 36px;
  line-height: 52px;
  font-weight: 700;
  word-break: break-word;
}

.left.link-card-msg .link-card-title {
  color: #171717;
}

.right.link-card-msg .link-card-title {
  color: #171717;
}

.link-card-url {
  margin-top: 6px;
  font-size: 30px;
  line-height: 38px;
  word-break: break-all;
}

.left.link-card-msg .link-card-url {
  color: #8a8d93;
}

.right.link-card-msg .link-card-url {
  color: #8a8d93;
}

.left.link-card-msg .tj {
  right: -112px;
}

.right.link-card-msg .tj {
  left: -112px;
}

/* 语音气泡：与 Messenger 一致；高度 ≥ 单行文字气泡的 3 倍（文字：18+18 padding + 62 line-height） */
.left.voice {
  background-color: #f2f3f6;
  border: 0;
  border-radius: 50px;
  margin-left: 134px;
  min-width: 0;
  max-width: 620px;
  width: auto;
  min-height: calc((18px + 18px + 62px) * 1.2);
  padding: 28px 35px 28px 45px;
}
.right.voice {
  background-color: #2e66f5;
  border: 0;
  border-radius: 40px;
  margin-right: 24px;
  min-width: 0;
  max-width: 620px;
  width: auto;
  min-height: calc((18px + 18px + 62px) * 1.2);
  padding: 28px 35px 28px 45px;
}
.left.voice .voice-duration {
  color: #171717;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
}
.right.voice .voice-duration {
  color: #ffffff;
  font-size:32px;
  line-height: 1.1;
  font-weight: 600;
}

.pinlun_msg .msg.selected{
    border: 3px solid rgb(10, 74, 252);
}
.pinlun_msg{
    overflow: unset;
}
.pinlun_msg .msg.voice {
    overflow: visible;
}
/* 表情评论：贴在消息气泡右下角，背景 #f2f3f6 + 2px 白边；左侧条默认隐藏，多表情时由 JS 设为 flex */
.msg-emj-left{
    display: none;
    padding: 0 10px;
    min-height: 52px;
    height: auto;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background-color: #f2f3f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -10px;
    right: 64px;
    z-index: 2;
}
/* .pinlun_msg .left .msg-emj-left{
    left: 110px;flex-direction: row-reverse;
}
.pinlun_msg .right .msg-emj-left{
    right: 110px;
} */
.msg-emj-left img{
    height: 40px;
}
.msg-emj-left span{
    font-size: 30px; padding-left: 10px;
}
/* .pinlun_msg .left .msg-emj-left span{
    padding-right: 10px;
}
.pinlun_msg .right .msg-emj-left span{
    padding-left: 10px;
}
.pinlun_msg .left .msg-emj-left img~img{
    padding-right: 10px;
} */
.pinlun_msg  .msg-emj-left img~img{
    padding-left: 10px;
}
.msg-emj-right{
  min-width: 80px;
    height:70px;
    border-radius: 35px;
    border: 6px solid #ffffff;
    position: absolute;
    bottom: -45px;
    right: 0;
    background-color: #f2f3f6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-sizing: border-box;
    padding: 0 8px;
}
.msg-emj-right.multi{
    width: auto;
    min-width: 122px;
    padding: 0 12px;
    gap: 6px;
}
/* .pinlun_msg .left .msg-emj-right{
    left: 3px;
}
.pinlun_msg .right .msg-emj-right{
    right: 3px;
} */
.msg-emj-right img{
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.msg-emj-right .reaction-item{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.reaction-del{
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    line-height: 24px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    background: rgba(0,0,0,.6);
    display: none;
}
.chat-lst .sr:hover .msg-emj-right .reaction-del{
    display: block;
}
.msg-emj-right > span[contenteditable="true"]{
    font-size: 30px;
    padding-left: 4px;
    padding-right: 4px;
    line-height: 1;
}

/* 消息外侧相对时间（如 10h），距气泡约 30px；删除钮叠在时间文字右上角，避免与「引用」重叠 */
.msg-side-time {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    white-space: nowrap;
}
.msg.left .msg-side-time {
    left: 100%;
    margin-left: 30px;
}
.msg.right .msg-side-time {
    right: 100%;
    margin-right: 20px;
}

/* 含 tj 箭头（链接、单图、多图等）时，时间整体外移，避免与 .tj 重叠（与 .tj 的 right/left 偏移一致） */
.msg.left:has(> img.tj) .msg-side-time {
    margin-left: 128px;
}
.msg.right:has(> img.tj) .msg-side-time {
    margin-right: 128px;
}
.msg.left.dp:has(> img.tj) .msg-side-time {
    margin-left: 98px;
}
.msg.right.dp:has(> img.tj) .msg-side-time {
    margin-right: 98px;
}
.msg.left.photo-stack-msg:has(> img.tj) .msg-side-time {
    margin-left: 188px;
}
.msg.right.photo-stack-msg:has(> img.tj) .msg-side-time {
    margin-right: 188px;
}

.msg-side-time-inner {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.msg-side-time-text {
    font-size: 36px;
    line-height: 1.2;
    color: #666;
    outline: none;
    cursor: text;
    padding-right: 16px;
    padding-top: 2px;
}
.msg-side-time-del {
    position: absolute;
    top: -10px;
    right: -5px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    line-height: 24px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    z-index: 1;
}
.chat-lst .msg-side-time:hover .msg-side-time-del {
    display: block;
}

.mb{
  margin-bottom: 25px;
}
.mb2{
  margin-bottom: 56px;
}
.mb3{
  margin-bottom: 82px;
}
.mb4{
  margin-bottom: 146px;
}
.mt{
  font-size: 30px;
  line-height: 30px;
  color: #9b9b9b;
  margin-top: 26px;
}
.xin{
  display: block;
  position: absolute;
  width: 80px;
  right: 0;
  bottom: -50px;
}
.tx-wrap{
  position: absolute;
  left: -104px;
  bottom: 0;
  width: 70px;
  height: 70px;
}
.tx{
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.tx-del{
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  line-height: 24px;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  background: rgba(0,0,0,.6);
  display: none;
}
.chat-lst .sr:hover .tx-del{
  display: block;
}
.right .tx,
.right .tx-wrap{
  display: none;
}
.mp{
  width: 516px;
  height: 294px;
  padding:0;
  width: 730px;height: 466px;border-radius: 26px;
  border: 0;
}
.mp .pt{
  display: block;
  width: 120px;
  height: 120px;
  float: left;
  margin-left: 36px;
  margin-top: 36px;
  border-radius: 60px;
}
.mp .pn{
  float: left;
  font-size: 48px;
  line-height: 48px;
  margin-left: 38px;
  margin-top: 72px;
}

.mp .mp-top{
    height: 346px;background-color: #2a68df;position: relative;border-top-left-radius: 26px;border-top-right-radius: 26px;
}
.mp .mp-top::before{
    content: '';
    width: 187px;
    height: 187px;
    border-radius: 50px;
    background: linear-gradient(to right, rgba(53, 119, 241, 0), rgba(53, 119, 241, 0.4));
    position: absolute;
    top: 10px;
    left: 170px;
    z-index: 0;
    transform: rotate(45deg);
}
.mp .mp-top::after{
    content: '';
    width: 187px;
    height: 187px;
    border-radius: 50px;
    background: linear-gradient(to left, rgba(53, 119, 241, 0), rgba(53, 119, 241, 0.4));
    position: absolute;
    top: 90px;
    left: 320px;
    z-index: 0;
    transform: rotate(45deg);
}
.mp .mp-content{
    position: absolute;left: 0;top: 0;width: 730px;height: 346px;z-index: 10;padding:34px 32px 34px 40px;
}
.mp .mp-content .header-box{display: flex;align-items: center;z-index: 10;}
.mp .mp-content .header-box .header{width: 94px;height: 94px;border-radius: 94px;border: 8px solid #FFFFFF;box-sizing: border-box;margin-right: 34px;}
.mp .mp-content .header-box .header img{width: 100%;height: 100%;margin: 0;}
.mp .qr-img{position: absolute;right: 32px;bottom: 34px;z-index: 10;}
.mp .qr-img>img{width: 152px;height: 152px;border-radius: 10px;}
.mp .mp-bottom{
    height: 120px;background-color: #fff;display: flex;align-items: center;justify-content: center;gap: 110px;font-size: 37px;font-weight: 600;border-bottom-left-radius: 26px;border-bottom-right-radius: 26px;border: 3px solid #bccdd6;border-top: 0;
}
.mp .mp-bottom-left{color: #202020;}
.mp .mp-bottom-space{width: 2px;height:65px;background-color: #e0e0e0;}
.mp .mp-bottom-right{color: #1b5bda;}

.ms{
  position: absolute;
  width:258px;
  height:98px;
  border-top:1px solid #dee3e5;
  border-right:1px solid #dee3e5;
  left: -3px;
  bottom: 0px;
  font-size: 42px;
  color: #52a2f8;
  font-weight: bold;
  text-align: center;
  line-height: 98px;
}
.ms2{
  position: absolute;
  width:258px;
  height:98px;
  border-top:1px solid #dee3e5;
  right: -3px;
  bottom: 0px;
  font-size: 42px;
  color: #52a2f8;
  font-weight: bold;
  text-align: center;
  line-height: 98px;
}
.ht{
  max-width: 346px;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.img{
  display: block;
  max-width: 346px;
  width: auto;
  height: auto;
  border-radius: 26px;
  object-fit: contain;
}
.video-img{
  display: block;
  max-width: 346px;
  width: auto;
  height: auto;
  border-radius: 26px;
  object-fit: contain;
  filter: none;
}
.video-wrap{
  position: relative;
  display: inline-block;
}
.video-play-mask{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 99px;
  height: 99px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}
.video-play-icon{
  display: block;
  width: 38px;
  height: 52px;
  object-fit: contain;
  margin-left: 8px;
}
.video-duration{
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 14px;
  border-radius:30px;
  font-size: 30px;
  line-height: 40px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.photo-stack-msg{
  max-width: 356px;
  min-width: 0;
  padding: 0 !important;
  border: 0;
  background: transparent;
}
.left.photo-stack-msg,
.right.photo-stack-msg{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
}
.photo-stack-card{
  width: 346px;
  position: relative;
  padding-top: 0;
  height: auto;
  line-height: 0;
}
.photo-stack-count{
  position: relative;
  display: block;
  margin: 30px 0 40px 4px;
  font-size: 30px;
  line-height: 1;
  color: #4d4d4d;
  z-index: 2;
}
.photo-stack-stage{
  position: relative;
  width: 450px;
  height: 390px;
}
.photo-stack{
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 26px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  transform-origin: center center;
}
.photo-stack img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.photo-stack.layer-1{
  left: 12px;
  top: 72px;
  z-index: 3;
  transform: rotate(-2deg);
}
.photo-stack.layer-2{
  left: 0;
  top: 38px;
  z-index: 2;
  transform: rotate(3deg);
}
.photo-stack.layer-3{
  left: 26px;
  top: 4px;
  z-index: 1;
  transform: rotate(-3deg);
}
.left.photo-stack-msg .photo-stack-card{
  margin-right: 18px;
}
.right.photo-stack-msg .photo-stack-card{
  margin-left: 18px;
}
.tt{
  width: 96px;
  height: 42px;
  background-color: #b9c0c7;
  border-radius: 21px;
  font-size: 28px;
  color: #fff;
  line-height: 42px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -52px;
}
.ct{
  max-width: 346px;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.hd{
  position: absolute;
  display: block;
  width: 58px;
  left: 18px;
  top: 18px;
}
.tj{
  position: absolute;
  display: block;
  width: 84px;
  top:50%;
  margin-top: -42px;
}
.left .tj{
  right:-112px;
}
.right .tj{
  left:-112px;
}
.dp{
  max-width: none;
  border:0;
  padding:0;
  width: 600px;
  height: 800px;
  background-color: transparent;
  position: relative;
}
.dp .lt{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
}
.dp .rt{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
}
.dp.hk .lt,.dp.hk .rt,
.dp.ck .lt,.dp.ck .rt{
  width: 100%;
  height: 100%;
}
.hk .lt,.hk .rt{
  height: 306px;
}
.ck .lt,.ck .rt{
  height: 722px;
}
.rec{
  position: absolute;
  display: block;
  width: 172px;
  height: 42px;
  right:0;
}
.rb{
  bottom: -62px;
}
.rb2{
  bottom: -116px;
}
.wl{
  position: absolute;
  width: 430px;
  height: 430px;
  top: 0;
  left: 0;
  z-index: 2;
}
.wr{
  position: absolute;
  width: 430px;
  height: 430px;
  top: 370px;
  left: 170px;
  z-index: 1;
}
.left.dp .wl{
  left: 140px;
}
.left.dp .wr{
  left: 0;
}
.right.dp .wl{
  left: 30px;
}
.right.dp .wr{
  left: 170px;
}
.dp .tj{
  top: 390px;
  margin-top: -42px;
}
.left.dp .tj{
  right: -82px;
}
.right.dp .tj{
  left: -82px;
}
.left.photo-stack-msg .tj{
  right: -172px;
}
.right.photo-stack-msg .tj{
  left: -172px;
}

.rj{
  display: none;
  position: absolute;
  width: 108px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 266px;
}
.msg-right-meta{
  clear: both;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding-right: 24px;
}
.msg-right-avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.msg-right-delivered{
  min-width: 130px;
  font-size: 32px;
  line-height: 1;
  color: #8d8d8d;
  padding-right: 30px;
  text-align: right;
}
p{word-wrap:break-word;}
.fp{
  width: 300px;
  height: 66px;
  margin-bottom: 10px;
}
.fp li{
  float: left;
  width: 66px;
  height: 66px;
  margin-left: 12px;
}
.fp li img{
  display: block;
  width: 66px;
  height: 66px;
  cursor: pointer;
}
.em{
    height:46px;
    vertical-align: -6px;
}
.voice {
  display: flex;
  align-items: center;
  gap: 20px;
  width: auto;
  min-width: 280px;
  max-width: 620px;
  padding-left: 0;
  padding-right: 0;
}
.voice > .voice-row {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: hidden;
}
.voice-play {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
}
.voice-wave {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  margin-right: 20px;
  overflow-x: hidden;
}
.voice-bar {
  flex: 0 0 7px;
  width: 7px;
  min-width: 7px;
  max-width: 7px;
  border-radius: 999px;
}
.left.voice .voice-bar {
  background: #000000;
}
.right.voice .voice-bar {
  background: #ffffff;
}

/* 深色模式：仅左侧语音条 — 波形白、时长白（右侧不变） */
.chat-box.chat-dark-mode .chat-lst .left.voice .voice-bar {
  background: #e2e4e8;
}
.chat-box.chat-dark-mode .chat-lst .left.voice .voice-duration {
  color: #e2e4e8;
}
.voice .voice-duration {
  height: auto;
  line-height: 1.1;
  font-size: 32px;
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}
.yr{
  position: absolute;
  width: 60px;
  display: block;
  right: -78px;
  top:25px;
}
.cxx{
  position: absolute;
  width: 88px;
  height:48px;
  background:url(../img/xin3.png);
  bottom:-32px;
  right:102px;
}
.cxx p{
  float: right;
  margin-right: 14px;
  font-size: 30px;
  line-height: 48px;
}
/* 通话记录卡片：浅灰圆角容器 + 左图标 + 标题/副标题 + 底栏「Gọi lại」；双方同壳，图标 PNG 可替换 */
.msg.ld {
  width: 520px;
  max-width: 86%;
  min-width: 280px;
  height: auto;
  min-height: 30px;
  padding: 0;
  font-size: 30px;
  line-height: 1.2;
  border-radius: 22px;
  overflow: visible;
  box-sizing: border-box;
  background-color: #f2f3f6 !important;
  border: 0 !important;
}
.msg.ld.ld--video {
  border-radius: 40px;
}
.msg.ld.ld--connected {
  width: 420px;
  min-width: 0;
}
.left.ld {
  margin-left: 134px;
}
.right.ld {
  float: right;
  margin-right: 24px;
}
.ld-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 26px 30px 26px 30px;
}
.ld-icon-img {
  flex: 0 0 auto;
  display: block;
  float: none;
  width: 88px;
  height: 88px;
  margin: 0;
  object-fit: contain;
}
.ld-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  margin-right: 0;
}
.ld-title {
  padding: 0;
  font-size: 36px;
  line-height: 1.25;
  font-weight: 700;
  color: #050505;
}
.ld-sub {
  margin: 0;
  padding: 0;
  font-size: 32px;
  line-height: 1.25;
  color: #65676b;
}
.ld .ck {
  position: relative;
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  margin: 0 30px 26px 30px;
  padding: 24px 16px;
  border-top: 0;
  border-radius: 32px;
  left: auto;
  bottom: auto;
  background-color: #fbfcfc;
  font-size: 38px;
  font-weight: 600;
  color: #050505;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
}
.left.ld .tx {
  left: -104px;
  bottom: 0;
  top: auto;
}
/* 旧版导入数据若仍含 .p1/.p2，做兜底 */
.ld .p1 {
  margin-left: 30px;
  padding-top: 40px;
  line-height: 32px;
  font-weight: bold;
}
.ld .p2 {
  margin-left: 30px;
  color: #7c798a;
  margin-top: 22px;
  min-height: 38px;
  line-height: 38px;
}
.ld .p2 img {
  display: block;
  float: left;
  margin-right: 24px;
}
.db{
  display: block;
  width: 140px;
  height: 140px;
  max-width: 140px;
  object-fit: contain;
}
.msg.left .db{
  margin-left: 20px;
}
.ref{
  display: none;
  position: absolute;
  font-size: 40px;
  right: -180px;
  top:30%;
  cursor: pointer;
}
/* 引用回复：顶栏「回复了昵称」+ 对方样式引用条 + 自己蓝色气泡 */
.msg.right.ym {
  float: right;
  margin-right: 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  max-width: 776px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.msg.right.ym .ym-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  max-width: 720px;
}
.msg.right.ym .ym-reply-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding-right: 2px;
  margin-right: 30px;
  font-size: 34px;
  line-height: 40px;
  color: #666666;
  box-sizing: border-box;
}
.msg.right.ym .ym-reply-back {
  width: 40px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.msg.right.ym .ym-reply-label {
  color: #666666;
}
.msg.right.ym .ym-bubble {
  width: 100%;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.msg.right.ym .ym-quote {
  background-color: #fbfbfd;
  color: #666666;
  border-radius: 40px;
  padding: 22px 26px 34px;
  margin-bottom: 0;
  width: auto;
  align-self: flex-end;
  font-size: 45px;
  line-height: 56px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  box-sizing: border-box;
}
.msg.right.ym .ym-quote.ym-quote-image {
  background-color: transparent;
  justify-content: flex-end;
  padding: 0;
}
.msg.right.ym .ym-quote.ym-quote-image .yi {
  margin-left: auto;
}
.msg.right.ym .ym-quote .yi {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 12px;
  margin: 0;
}
.msg.right.ym .ym-quote .yi img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msg.right.ym .ym-quote .yi.yi-video {
  position: relative;
}
.msg.right.ym .ym-quote .yi.yi-video .yi-video-play-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.msg.right.ym .ym-quote .yi.yi-video .yi-video-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 19px;
  object-fit: contain;
  margin-left: 2px;
}
.msg.right.ym .ym-quote-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  color: #666666;
}
.msg.right.ym .ym-reply-text {
  position: relative;
  align-self: flex-end;
  margin-top: -34px;
  margin-bottom: 0;
  padding: 14px 30px;
  max-width: calc(100% - 58px);
  background-color: #2e66f5;
  border-radius: 999px;
  font-size: 44px;
  line-height: 62px;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 0;
  word-break: break-word;
  z-index: 1;
}
.msg.right.ym .ym-reply-text.ym-reply-text-image {
  margin-top: -34px;
}
.hd-wrap{
    position: absolute;
    top: 25px;
    right: 25px;
}
.hd-position{
    display: block;
    background: rgba(255, 255, 255, 0.6);
    color: #999;
    border-radius:5px;
    padding: 0px 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    /* zoom: 0.8; */
}
.hd-del{
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    line-height: 24px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    background: rgba(0,0,0,.6);
    display: none;
}
.hd-add-restore{
    position: absolute;
    top: 25px;
    right: 25px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    line-height: 24px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    background: rgba(22, 163, 74, .85);
    display: none;
    z-index: 3;
}
.chat-lst .sr:hover .hd-del{
    display: block;
}
.chat-lst .sr:hover .hd-add-restore{
    display: block;
}

.user-name-header{
    display: flex;
    align-content: center;
}
.header-user-info{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-gap: 20px;
}
#imgs5{
    width: 60px;
    height: 60px;
    border-radius: 100px;
}
#userName{
    width: 60%;
    font-size: 20px;
    padding:5px;
    margin-top: 10px;
}
#userContentText{
    width: 80%;
    font-size: 20px;
    padding:5px;
    margin-top: 10px;
}

/** 弹窗对话窗口 **/
.dialog-window{
    position: absolute;
    width: calc(100% - 60px);
    left: 30px;
    top: 120px;
    height: 220px;
    background: #b6dded75;
    z-index: 99;
    border-radius: 35px;
    box-shadow: 0px 0px 30px #9b9b9ba8;
    /*background-color: rgba(255, 255, 255, 0.2); !* 半透明背景 *!*/
    backdrop-filter: blur(50px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(50px); /* 兼容老版本 Safari */
    display: flex;
    align-items: center;
    padding-left: 40px;
}
.dialog-window-headerImage{
    width: 150px;
    height: 150px;
    border-radius: 100px;
}
.dialog-window-name{
    font-size:45px;
    font-weight: bold;
}

.dialog-window-content{
    font-size:42px;
    margin-top: 15px;
}