@charset "utf-8";
/* CSS Document  v3-b12 */

.dialog_message_contents { font-size: 14px;}

.chat-box { display: block; float: right; margin: 0; position: fixed; z-index:1999; right: 40px;  bottom:10%}
.chat-box .chat-list { background: url(../images/dialog_bg.jpg) no-repeat 100% 50%; width: 218px; height: 500px; border-style: solid; border-width: 1px 1px 0 1px; border-color: #DEDEDE; display: none;}
.chat-box .chat-list-top { height: 79px; border-bottom: solid 1px #CCC;}
.chat-box .chat-list-top h1 { font: 600 18px/32px "microsoft yahei"; line-height: 32px; color: #FFF; height: 32px; float: left; margin: 10px;}
.chat-box .chat-list-top h1 i { background: url(../images/chat_bg.png) no-repeat 0 -20px; vertical-align: middle; display: inline-block; width: 32px; height: 32px; margin-right: 6px;}
.chat-box .chat-list-top .minimize-chat-list { background: url(../images/chat_bg.png) no-repeat -40px -60px; width: 16px; height: 16px; margin: 6px 6px auto auto; float: right; cursor: pointer;}
.chat-box .chat-list-top .minimize-chat-list:hover { background-position: -60px -60px;}
.chat-box .chat-list-content { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#E5FFFFFF', endColorstr='#E5FFFFFF');background:rgba(255,255,255,0.98); width: 100%; height: 420px; overflow: hidden; position: relative;}
.chat-list dl { width: 100%;}
.chat-list dt { line-height: 30px; background-color:#FAFAFA; height: 30px; padding: 0 10px; margin-top: -1px; border-style: solid; border-width: 1px 0; border-color: #EEE;}
.chat-list dt span { background: url(../images/chat_bg.png) no-repeat; width: 16px; height: 16px; float: right; margin: 7px 0;}
.chat-list dt span.show { background-position: -40px -40px; }
.chat-list dt:hover span.show { background-position: -60px -40px; }
.chat-list dt span.hide { background-position: -80px -40px; }
.chat-list dt:hover span.hide { background-position: -100px -40px; }
.chat-list dd { width: 150px; height: 24px; padding: 8px 0; border-bottom: solid 1px #FAFAFA; margin: 0 12px 0 40px;}
.chat-list dd .user-avatar { background: #CCC url(../images/chat_bg.png) no-repeat -80px -60px; width: 24px; height: 24px; float: left; margin-left: -32px; border-radius: 5px; position: relative; z-index: 1;}
.chat-list dd .user-avatar i { width: 6px; height: 6px; border-width: 1px; border-style: solid; border-radius: 2px; position: absolute; z-index: 9; bottom: 0; right: 0;}
.chat-list dd .user-avatar i.online { background-color: #00D800; border-color: #0EB800;}
.chat-list dd .user-avatar i.offline { background-color: #EEE; border-color: #777;}
.chat-list dd .user-avatar img { width: 24px; height: 24px; border-radius: 5px;}
.chat-list dd h5 { line-height: 24px; color: #555; width: 100px; float: left; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.chat-list dd a { background: url(../images/chat_bg.png) no-repeat -110px -60px; width: 16px; height: 16px; float: right; margin: 7px 3px 7px 0; visibility: hidden;}
.chat-list dd:hover a { visibility: visible;}
.chat-list dd:hover a:hover { background-position: -130px -60px;}
.chat-list dd a.msg { visibility: visible; background-position: -130px -60px;}
.chat-box .bottom-bar { background-color: #30A9FC; width: 160px; height: 24px; padding: 8px 10px;}
.chat-box .bottom-bar .ico { line-height: 999px; background: url(../images/ico_b.png) no-repeat 0 0; vertical-align: middle; display: inline-block; *display: inline/*IE7*/; width: 28px; height: 24px; margin-right: 12px; overflow: hidden; cursor: pointer; *zoom: 1;}
.chat-box .bottom-bar .ico2 { line-height: 999px; background: url(../images/ico_b.gif) no-repeat 0 0; vertical-align: middle; display: inline-block; *display: inline/*IE7*/; width: 28px; height: 24px; margin-right: 12px; overflow: hidden; cursor: pointer; *zoom: 1;}
.chat-box .bottom-bar a { font-size: 16px; font-weight: 600; line-height: 24px; color: #FFF; vertical-align: middle; display: inline-block; *display: inline/*IE7*/; text-shadow: 1px 1px 0 rgba(2,103,170,0.5); *zoom: 1;}
.chat-box .bottom-bar a i { background: url(../images/chat_bg.png) no-repeat -130px -20px; vertical-align: middle; display: inline-block; *display: inline/*IE7*/; width: 16px; height: 16px; margin-left: 12px; *zoom: 1;}

/*状态*/
.chat_online, .chat_offline { line-height: 999% !important; background: url(../images/chat_state_01.gif) no-repeat 0 0; vertical-align: middle; display: inline-block; *display: inline/*IE7*/; width: 42px; height: 21px; margin: 0 0 0 5px; overflow: hidden; *zoom: 1;}
.chat_offline { background-position: 0 -21px; }

.chat_online_02, .chat_offline_02 { line-height: 999% !important; background: url(../images/chat_state_02.gif) no-repeat 0 0; vertical-align: middle; display: inline-block; *display: inline/*IE7*/; width: 77px; height: 21px; margin: 0 0 0 5px; overflow: hidden; *zoom: 1;}
.chat_offline_02 { background-position: 0 -21px; }


/*对话框*/
.msg-windows {  z-index: 19980; position: fixed;  bottom: 10%; display: none; width: 968px; margin-left: 20%; padding: 0; filter:alpha(opacity=80);   
      -moz-opacity:0.98;   
      -khtml-opacity: 0.98;   
      opacity: 0.98;}
.msg-dialog { max-width: 642px; margin:0 auto; width:642px;position: relative; z-index: 1; margin: 0 auto;  }
.msg-dialog .dialog-body { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#BFFFFFFF', endColorstr='#BFFFFFFF');background:rgba(255,255,255,0.98); border: solid #DEDEDE; border-width:1px; width: 420px; float:left;}

.dialog-chat-right { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#59FFFFFF', endColorstr='#59FFFFFF'); z-index: 1990;background:rgba(255,255,255,0.98); width: 219px; height: 500px; float:left; border-style:solid; border-color: #DEDEDE; border-width: 1px 1px 1px 0px;}
.dialog-chat-right .dialog-close { background: url(../images/chat_bg.png) no-repeat -20px 0; width: 16px; height: 16px; margin: 6px 6px auto auto; float: right; position: relative; z-index: 2; cursor: pointer;}
.dialog-chat-right .dialog-close:hover { background-position: -40px 0;}
.dialog-chat-right .user-info { text-align: center; padding: 15px; position: relative; z-index: 1; }
.dialog-chat-right .user-info i { display: block; width: 12px; height: 12px; border-style: solid; border-width: 1px; border-radius: 100%; position: absolute; z-index: 1; top: 84px; right: 72px;}
.dialog-chat-right .user-info i.online { background-color: #00D800; border-color:#0EB800;}
.dialog-chat-right .user-info i.offline { background-color: #CCC; border-color: #555;}
.dialog-chat-right .user-avatar { display: inline-block; width: 90px; height: 90px; margin: 0 auto; border-radius: 100%;}
.dialog-chat-right .user-avatar img { max-width: 90px; max-height: 90px; border-radius: 100%;}
.dialog-chat-right .store-name,
.dialog-chat-right .user-name { font-size: 14px; color: #555; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; width: 100%; height: 20px; margin-top: 5px; overflow: hidden;}
.dialog-chat-right .store-name a { font-weight: 600; color: #000;}

.dialog-chat-right .goods-info { text-align: center; padding: 15px; border-top: solid 1px #DEDEDE;}
.dialog-chat-right .goods-pic { display: inline-block; width: 160px; height: 160px; margin: 0 auto; }
.dialog-chat-right .goods-pic img { max-width: 160px; max-height: 160px;}
.dialog-chat-right .goods-price { font-weight: 600; color: #F32613}
.dialog-chat-right .goods-name { font-size: 12px; line-height: 18px; width: 160px; margin: 0 auto;}
.dialog-chat-right .goods-buy { display: inline-block; margin: 10px auto;}
.dialog-chat-right .goods-buy a { font-size: 12px; line-height: 20px; color: #FFF; background-color: #F32613; padding: 4px 16px; border-radius: 5px;}
.dialog-chat-right .goods-buy a:hover { text-decoration: none; background-color: #B00;}

.dialog-chat-right .automsg-info {background: #FFF; text-align: center; padding: 5px; border-top: solid 1px #DEDEDE; position: absolute; float:left; width: 280px;height: 490px; overflow: scroll;  z-index: 5; top: 0px; left: 642px;}
.dialog-chat-right .automsg-info .msg-item { font-size: 12px; line-height: 20px; color: #FFF;background-color: #F32613;padding: 4px 16px; margin: 5px; border-radius: 5px; clear: both;}


.dialog-chat-right .goods-list { border-top: solid 1px #E6E6E6;}
.dialog-chat-right .goods-list .title { font-size: 12px; font-weight: 600; line-height: 20px; color: #333; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFFFFFF', endColorstr='#7FFFFFFF');background:rgba(255,255,255,0.5); height: 20px; padding: 4px 9px;}
.dialog-chat-right .goods-list .content { display: block;}
.dialog-chat-right .goods-list .content ul { font-size: 0; *word-spacing:-1px/*IE6、7*/; padding: 10px 9px 0 10px;}
.dialog-chat-right .goods-list .content ul li { vertical-align: top; letter-spacing: normal; word-spacing: normal; text-align: center; display: inline-block; width: 80px; padding: 5px 10px;}
.dialog-chat-right .goods-list .goods-pic { width: 60px; height: 60px; margin: 0 auot;}
.dialog-chat-right .goods-list .goods-pic a { width: 60px !important; height: 60px !important;}
.dialog-chat-right .goods-list .goods-pic img { max-width: 60px !important; max-height: 60px !important;}
.dialog_chat_log { background-color: #FFF; width: 219px; height: 500px; z-index: 1991; border: solid #DEDEDE; border-width: 1px 0 0 0; display: none; position: absolute; top: 0; right: 0; }
.dialog-chat-right .goods-list .goods-price { font-size: 12px; font-weight: 600; color: #F32613}

.chat-log-top { background-color: #FAFAFA; width: 100%; height: 78px; border-bottom: solid 1px #CCC;}
.chat-log-top h1 { font-size: 20px; line-height: 32px; color: #555; height: 32px; float: left; margin: 10px;}
.chat-log-top h1 i { background: url(../images/chat_bg.png) no-repeat 0 -60px; vertical-align: middle; display: inline-block; width: 32px; height: 32px; margin-right: 6px;}
.chat-log-top .close-chat-log { background: url(../images/chat_bg.png) no-repeat -20px 0; width: 16px; height: 16px; margin: 6px 6px auto auto; float: right; cursor: pointer;}
.chat-log-top .close-chat-log:hover { background-position: -40px 0;}

.chat_log_list { width: 218px; height: 390px; overflow: hidden; position: relative;}
.chat-log-msg { padding: 2px;}
.chat_msg { border: solid 1px #FFF;color: #000000; }
.chat_msg img { vertical-align: middle;}
.chat_msg:hover { background-color: #FAFAFA; border-color: #CCC;}
.chat_msg .user-log { font-size: 12px; line-height: 20px; color: #30A9FC; padding: 0 4px;}
.chat_msg .user-log .user-time { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; margin-left: 8px;}
.chat_user .user-log { color: #0FB700 !important;}
.chat_msg .user-msg { font-size: 12px; line-height: 16px; color: #777; padding: 0 4px 4px;}
.chat-log-bottom { color: #999; line-height: 30px; background-color: #F0F0F0; height: 30px; border-top: solid 1px #CCC;}
.chat_time_from { width: 150px; padding: 0 10px; float:left;}
.chat_time_from span { font-size: 13px; vertical-align: middle; display: inline-block; padding: 0 8px; cursor: pointer;}
.chat_time_from span.current { font-size: 16px; color: #30A9FC;}
.chat_log_first,
.chat_log_last { line-height: 28px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000', endColorstr='#7F000000');background:rgba(0,0,0,0.5); width: 218px; height: 28px; border-top: solid 1px #777777; position: absolute; z-index: 99; bottom: 30px; right: 0; display: none;}
.chat_log_first p,
.chat_log_last p { color: #FFF; text-align: center;}


.chat_log_page { width: 48px; float: right;}
.chat_log_page span { background: url(../images/chat_bg.png) no-repeat; display: block; width: 16px; height: 16px; float: left; margin: 7px 4px; cursor: pointer;}
.chat_log_page span.previous { background-position: -40px -20px;}
.chat_log_page span.previous:hover { background-position: -60px -20px;}
.chat_log_page span.next { background-position: -80px -20px;}
.chat_log_page span.next:hover { background-position: -100px -20px;}

.dialog_clear {clear:both;}
.user-tab-bar { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#19FFFFFF', endColorstr='#19FFFFFF');background:rgba(255,255,255,0.98); width: 162px; height: 499px; float: left; padding: 0; border:solid #DEDEDE; border-width: 1px 0px 1px 1px; position: relative; z-index: 1; display: none; overflow: hidden;}
.user-tab-bar .user-list {}
.user-tab-bar .user-list li { width: 162px; height: 38px; position: relative; }
.user-tab-bar .user-list li.select_user { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#BFFFFFFF', endColorstr='#BFFFFFFF');background:rgba(255,255,255,0.75);}
.user-tab-bar .user-list li.select_user:hover {}
.user-tab-bar .user-list li i { width: 6px; height: 6px; border-style: solid; border-width: 1px; border-radius: 4px; position: absolute; z-index: 1; top: 15px; left: 5px;}
.user-tab-bar .user-list li i.online { background-color: #00D800; border-color:#0EB800;}
.user-tab-bar .user-list li i.offline { background-color: #CCC; border-color: #555;}
.user-tab-bar .user-list li .user-avatar,
.user-tab-bar .user-list li.select_user .user-avatar { background-color: #CCC; width: 24px; height: 24px; padding: 1px; border-radius: 4px; position: absolute; z-index: 1; top: 6px; left: 20px;}
.user-tab-bar .user-list li.select_user .user-avatar { background-color: #FFF;}
.user-tab-bar .user-list li .user-avatar img,
.user-tab-bar .user-list li.select_user .user-avatar img  { width: 24px; height: 24px; border-radius: 3px;}
.user-tab-bar .user-list li .avatar-1 img { filter: none; -webkit-filter: none; -o-filter: none;}
.user-tab-bar .user-list li .avatar-0 img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")/*FF*/; -webkit-filter: grayscale(100%)/*Webkit*/; -o-filter: grayscale(100%); filter: gray;}

.user-tab-bar .user-list li .user-name { font-size: 12px; line-height: 16px; color: #333; text-overflow: ellipsis; white-space: nowrap; display: block; width: 65px; height: 16px; position: absolute; z-index: 1; top: 11px; left: 54px; overflow: hidden;}
.user-tab-bar .user-list li.select_user .user-name { color: #000; font-weight: 600; }
.user-tab-bar .user-list li em.unread { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; font-weight: 600; line-height: 16px; color: #FFF; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#3FFFFFFF', endColorstr='#3FFFFFFF');background:rgba(255,255,255,0.25); text-align: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; position: absolute; z-index: 1; top: 11px; right: 8px;}
.user-tab-bar .user-list li a.ac-ico { background: url(../images/chat_bg.png) no-repeat 0 0; display: none; width: 16px; height: 16px; position: absolute; z-index: 1; top: 11px; left: 3px; cursor: pointer;}
.user-tab-bar .user-list li:hover a.ac-ico { display: block;}

.msg-contnet { width: 420px; height: 373px; float: right; position: relative; overflow: hidden;}
.msg_list { width: 400px; margin: 10px auto;overflow: hidden;}

.from_msg { width: 70%; padding: 0 0 0 48px; margin: 10px 0; float: left; position: relative; z-index: 1;}
.from_msg .user-avatar { background-color: #FFF; width: 30px; height: 30px; padding: 1px; border: solid 1px #D8D8D8; box-shadow: 1px 1px 2px rgba(204,204,204,1); position: absolute; z-index: 1; bottom: 0; left: 0px;}
.from_msg .user-avatar img { width: 30px; height: 30px;}
.from_msg dl { background-color: #FFF; display: inline-block; float: left; border-radius: 5px; padding: 0 10px 10px 10px; position: relative; z-index: 1;}
.from_msg dl dt.from-msg-time { font-family: Tahoma, Geneva, sans-serif; font-size: 10px; color: #999; line-height: 20px; text-align: left;}
.from_msg dl dd.from-msg-text { display: inline-block; color: #333; line-height: 20px; max-width: 300px; word-wrap: break-word;}
.from_msg dl dd.from-msg-text img { vertical-align: middle; max-width: 280px;}
.from_msg dl dd.arrow { background: url(../images/chat_bg.png) no-repeat -40px -80px; width: 16px; height: 10px; position: absolute; z-index: 1; bottom: 0; left: -6px;}

.to_msg { width: 70%; padding: 0 48px 0 0; margin: 10px 0; float: right; position: relative; z-index: 1;}
.to_msg .user-avatar { background-color: #FFF; width: 30px; height: 30px; padding: 1px; border: solid 1px #D8D8D8; box-shadow: 1px 1px 2px rgba(204,204,204,1); position: absolute; z-index: 1; bottom:0; right: 0px;}
.to_msg .user-avatar img { width: 30px; height: 30px;}
.to_msg dl { background-color: #FFF; display: inline-block; float: right; border-radius: 5px; padding: 0 10px 10px 10px; position: relative; z-index: 1;}
.to_msg dl dt.to-msg-time { font-family: Tahoma, Geneva, sans-serif; font-size: 10px; color: #999; line-height: 20px; text-align: right;}
.to_msg dl dd.to-msg-text { display: inline-block; color: #333; line-height: 20px; max-width: 300px; word-wrap: break-word;}
.to_msg dl dd.to-msg-text img { vertical-align: middle;}
.to_msg dl dd.arrow { background: url(../images/chat_bg.png) no-repeat -60px -80px; width: 16px; height: 10px; position: absolute; z-index: 1; bottom:0; right: -6px;}

.msg_list .goods_info { background-color: #FFF; display: block; clear: both; padding: 4px; margin: 5px 0; border: solid 1px #CCC;}
.msg_list .goods_info .goods_pic { width: 60px; height: 60px;}
.msg_list .goods_info .goods_name { line-height: 16px; float: right; width: 205px; height: 32px; overflow: hidden;}
.msg_list .goods_info .goods_name a { font-weight: 600; color: #333;}
.msg_list .goods_info .goods_price { font-weight: 600; color: #F00; float: right; width: 205px; height: 20px; margin-top: 8px;}



.clear_msg { line-height: 20px; background-color: #F7F7F7; clear: both; display: block; width: 100%; height: 20px; padding: 6px 0; margin-top: 6px;  text-align: center; opacity: 0.25;}
.clear_msg:hover { opacity: 1;}


.msg-input-box { width: 420px; border-top: solid 1px #CCC; float: right; }
.msg-input-box .msg-input-title { line-height: 24px; color: #333; height: 24px; padding: 3px 10px; }
.msg-input-box .title { float:left; padding-left: 10px;}
.msg-input-box .smilies-module { background-color: #FFF; border: 1px solid #D5E5F5; display: none; height: 94px; width: 224px; padding: 6px; position: absolute; z-index: 999;}
.msg-input-box .chat_smiles { float:left; text-decoration: none; color: #06C; background: url(../images/smile.gif) no-repeat left center; display: inline-block; padding-left: 20px;}
.msg-input-box .chat-log-btn { line-height: 18px; height: 18px; float: right; margin: 3px 0 0 0; position: relative;}
.msg-input-box .chat-log-btn i { background: url(../images/chat_bg.png) no-repeat; vertical-align: middle; display: inline-block; width: 29px; height: 18px; margin-left: 6px; cursor: pointer;}
.msg-input-box .chat-log-btn.off i { background-position: -60px 0;}
.msg-input-box .chat-log-btn.on i { background-position: -100px 0;}

.msg-input-box .chat-ifcheck-btn { line-height: 18px; height: 18px; float: right; margin: 3px 0 0 0; position: relative;}
.msg-input-box .chat-ifcheck-btn i { background: url(../images/chat_bg.png) no-repeat; vertical-align: middle; display: inline-block; width: 29px; height: 18px; margin-left: 6px; cursor: pointer;}
.msg-input-box .chat-ifcheck-btn.off i { background-position: -60px 0; display: block; }
.msg-input-box .chat-ifcheck-btn.on i { background-position: -100px 0;}

.msg-input-box .textarea { line-height: 18px; width: 390px; height: 54px; padding: 4px !important; margin: 0 10px; border: none; border-radius: 8px;resize: none;}
.msg-bottom { height: 33px; position: relative; z-index: 1;}
.msg-input-box .msg-button { font-size: 14px; color: #333; font-weight: 600; line-height: 20px; text-shadow: 1px 1px 0 rgba(153,153,153,0.25); height: 20px; float: right; padding: 4px 12px; position: absolute; z-index: 1; right: 10px; top: 0; cursor: pointer;}
.msg-input-box .msg-button:hover { color: #D39600; text-decoration: none; text-shadow: none;}

.msg-input-box #msg_count { height: 20px; padding: 5px 0; position: absolute; z-index: 1; left: 8px; top: 0;}
.msg-input-box #msg_count .counter { font-size: 12px; color: #999; line-height: 20px; background-color: transparent; width: auto; margin: 0; padding: 0; border: 0 none; }
.msg-input-box #msg_count .counter em { font-family: Georgia,Arial; font-size: 16px; font-style: italic; font-weight: 600; color: #555; margin: 0 4px;}
.msg-input-box #msg_count .counter em.warning { background-color: transparent !important; color: #F90!important; border: none!important; padding: 0; width: auto !important;}
.msg-input-box #msg_count .counter em.exceeded { color: #F00 !important;}

.msg-input-box #msg_sounds { height: 20px; padding: 5px 0; position: absolute; z-index: 1; left: 3.6rem; top: 0;}

.msg-input-box #send_alert { font-size: 12px; line-height: 20px; color: #F90; position: absolute; z-index: 1; right: 90px; bottom: 10px;}


.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=98);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=98)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=98);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=98)}




.autoPlace{
	margin-top:0px;
	}
	
    #msg_sounds {
        position: absolute; top: 0.34rem; margin-top:2px; left: 2rem;width: 5rem; height: 1.2rem; font-size: 0.8rem; z-index:100001;  
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 0.54rem;
        display:block;
    }
    #msg_sounds1 {
        position: absolute; z-index: 1; top: 0.2rem; line-height: 1.6rem; left: 3.6rem;width: 5rem; height: 1.6rem; font-size: 0.8rem; z-index:100001;  
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 0.54rem;
        display:block;
    }
    #msg_sounds1:hover {
        animation: animate 8s linear infinite;
    }
        #msg_sounds:hover {
            animation: animate 8s linear infinite;
        }

        @keyframes animate {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: 400%;
            }
        }

        #msg_sounds::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 40px;
            opacity: 0;
            transition: 0.5s;
        }

        #msg_sounds:hover::before {
            filter: blur(20px);
            opacity: 1;
            animation: animate 8s linear infinite;
        }
		
		.msg-button {
			margin-top:2px;
            text-align: center;
            color: #fff;
            text-transform: uppercase;
            cursor: pointer;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 0.54rem;
        }
		.msg-button:hover {
            animation: animate 8s linear infinite;
        }
		.msg-button::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 40px;
            opacity: 0;
            transition: 0.5s;
        }
		.msg-button:hover::before{
            filter: blur(20px);
            opacity: 1;
            animation: animate 8s linear infinite;
        }

		
		#msgbox{ display:none; width:50%;height:20%; text-align:center; position:absolute; z-index:1000002; font-size:24px;  line-height:38px; color: #000;  top:92%; left:20%}
        :root {
            --primary: #00f0ff;
            --secondary: #ff00e6;
            --energy-blue: #00a8ff;
            --energy-pink: #ff00aa;
            --energy-green: #00ff88;
            --energy-purple: #aa00ff;
            --energy-gold: #ffcc00;
            --energy-red: #ff0033;
            --dark: #0a0a1a;
            --light: rgba(255,255,255,0.9);
            --glass: rgba(20,20,40,0.7);
            --quantum-blue: #00f0ff;
            --quantum-pink: #ff00e6;
            --quantum-glow: 0 0 20px;
            --bg-color: #000;
        }
        .lstouch-chat-bottom { 
            position: absolute;
            top: 83%;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            height: 50px;
            display: flex;
            flex-direction: column;}
        .chat-input-layout { position: relative; z-index: 1; display: block;             background: transparent;
            backdrop-filter: blur(3px);
            border-radius: var(--border-radius);
            padding: 0;
            transition: opacity 0.3s ease;}
        .chat-input-layout .open-smile { display: block; width: 1.5rem; height: 1.5rem; padding: 0.25rem;}
        .chat-input-layout .open-smile a { display: block; width: 1.5rem; height: 1.5rem; background-image: url(../images/smile_b.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 65%; opacity: 0.75;}
        .chat-input-layout .input-box { position: absolute; z-index: 1; top: 0.08rem; right: 0.4rem;  left: 8.6rem; background: transparent; border: solid 0.05rem #EEE; border-radius: 0.2rem;}
        .chat-input-layout .input-box input[type="text"] { background-color: transparent; border: none; width: 82%; height: 1.6rem; padding: 0.15rem 17% 0 1%; font-size: 0.6rem; line-height: 1.2rem; color: #fff;}
        .chat-input-layout .input-box .submit { position: absolute; z-index: 1; top: 0; right:0; display: block; width: 1.8rem; height: 1.76rem; background-color: #4B89DC;  background-repeat: no-repeat; background-position: 50% 50%; background-size: 55%; border: none; border-radius: 0.15rem; font-size: 12px; text-align: center; line-height: 1.76rem;}
        .chat-smile-layout { display: block; width: 100%; height: 4.2rem; position: absolute; bottom: 150px; z-index: 150; color: #fff;}
        .chat-smile-layout ul { font-size: 0;}
        .chat-smile-layout ul li { display: inline-block; width: 10%; height: 1rem; padding: 0.3rem 0 0 0; text-align: center;  vertical-align: middle;}
        .chat-smile-layout ul li img { display: inline-block; height: 100%; vertical-align: middle;}
        
        


        .stats-panel {
            position: fixed;
            display: none;
            top: 20px;
            right: 20px;
            background: var(--glass);
            padding: 5px;
            border-radius: 15px;
            border: 1px solid var(--energy-purple);
            box-shadow: 0 0 10px rgba(170,0,255,0.1);
            z-index: 1000;
            backdrop-filter: blur(5px);
        }
        
        .stat-item {
            margin: 5px 0;
            color: var(--light);
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }
        
        .stat-value {
            font-weight: bold;
            font-family: 'Courier New', monospace;
            color: var(--energy-green);
        }
        
        .quantum-element {
            transform: translate3d(0,0,0); /* 强制GPU加速 */
            position: fixed;
            pointer-events: none;
            z-index: 10;
            transform-style: preserve-3d;
            will-change: transform, opacity;
            transition: opacity 0.3s;
        }
        
        /* ============= 量子特效新增样式 ============= */
        .quantum-core {
            position: absolute;
            width: 120px;
            height: 120px;
            background: radial-gradient(
                circle at center,
                var(--primary) 0%,
                var(--secondary) 70%,
                transparent 100%
            );
            filter: 
                blur(40px)
                contrast(200%)
                drop-shadow(0 0 50px var(--primary));
            mix-blend-mode: screen;
            animation: 
                corePulse 1.5s infinite alternate,
                coreRotate 10s infinite linear;
            z-index: 999;
        }
        
        @keyframes corePulse {
            0% { transform: scale(0.8); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 1; }
        }
        
        @keyframes coreRotate {
            100% { transform: rotate(360deg); }
        }
        
        .tachyon-trail {
            position: absolute;
            width: 200px;
            height: 3px;
            transform-origin: left center;
            filter: drop-shadow(0 0 10px currentColor);
            will-change: transform, opacity;
        }
        
        .entanglement-string {
            position: absolute;
            height: 3px;
            background: linear-gradient(to right, 
                var(--primary),
                var(--secondary));
            transform-origin: left center;
            filter: 
                drop-shadow(0 0 10px var(--primary))
                url(#turbulence);
            animation: stringVibrate 0.8s infinite linear;
            z-index: 100;
        }
        
        @keyframes stringVibrate {
            0%, 100% { transform: rotate(0.5deg); }
            50% { transform: rotate(-0.5deg); }
        }
        
        .supernova-particle {
            position: absolute;
            border-radius: 50%;
            filter: drop-shadow(0 0 8px currentColor);
            will-change: transform, opacity;
        }
        
        .quantum-tunnel {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: grid;
            grid-template-columns: repeat(40, 1fr);
            grid-template-rows: repeat(30, 1fr);
            pointer-events: none;
            z-index: 9998;
        }
        
        .tunnel-cell {
            background: radial-gradient(
                circle at center,
                rgba(0, 240, 255, 0.15),
                transparent 80%
            );
            animation: tunnelFlow 3s infinite linear;
            animation-delay: calc(var(--x) * 0.2s + var(--y) * 0.1s);
        }
        
        @keyframes tunnelFlow {
            0% { opacity: 0; transform: scale(0.5); }
            20% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 0; transform: scale(0.3); }
        }
        
        .collider-beam {
            position: absolute;
            height: 4px;
            transform-origin: left center;
            mask-image: linear-gradient(
                90deg,
                transparent 0%,
                white 20%,
                white 80%,
                transparent 100%
            );
            filter: blur(5px);
            z-index: 100;
        }
        
        .superposition-wave {
            position: absolute;
            width: 300%;
            height: 300%;
            background: 
                repeating-conic-gradient(
                    from 0deg at 50% 50%,
                    var(--primary) 0deg 10deg,
                    var(--secondary) 10deg 20deg,
                    transparent 80%
                );
            mask-image: radial-gradient(
                circle at center,
                black 30%,
                transparent 90%
            );
            animation: 
                waveExpand 2s linear forwards,
                waveRotate 4s linear infinite;
            mix-blend-mode: overlay;
            z-index: 9997;
        }
        
        @keyframes waveExpand {
            from { transform: scale(0); opacity: 0.2; }
            to { transform: scale(3); opacity: 0; }
        }
        
        @keyframes waveRotate {
            to { transform: rotate(360deg); }
        }
        
        .quantum-element.annihilating {
            opacity: 0;
            transform: scale(0.5);
        }
        
        .sphere-container {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .sphere {
            position: relative;
            width: 80%;
            height: 80%;
            transform-style: preserve-3d;
            animation: rotateSphere 15s infinite linear;
        }
        
        .sphere-surface {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.8;
            box-shadow: 
                inset 0 0 50px rgba(255,255,255,0.2),
                0 0 30px currentColor;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
        }
        
        .emoji-3d {
            font-size: 24px;
            transform: translateZ(20px) scale(1.5);
            text-shadow: 
                0 2px 5px rgba(0,0,0,0.5),
                0 0 15px rgba(255,255,255,0.7);
            filter: drop-shadow(0 0 5px currentColor);
            animation: iconFloat 3s infinite ease-in-out;
            background: linear-gradient(135deg, 
                rgba(255,255,255,0.9) 0%, 
                rgba(255,255,255,0.5) 50%, 
                rgba(255,255,255,0.2) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-stroke: 1px rgba(255,255,255,0.9);
            -webkit-text-stroke: 1px rgba(255,255,255,0.9);
        }
        
        .hologram-glow {
            position: absolute;
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, currentColor 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(15px);
            opacity: 0.3;
            animation: glowPulse 3s infinite alternate;
            transform: translateZ(-10px);
        }
        
        .quantum-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: currentColor;
            border-radius: 50%;
            filter: drop-shadow(0 0 5px currentColor);
            transform-style: preserve-3d;
            animation: particleOrbit 3s infinite linear;
        }
        
        .collision-effect {
            position: absolute;
            pointer-events: none;
            transform-style: preserve-3d;
            animation: collisionGlow 0.8s ease-out;
            z-index: 20;
        }
        
        .relation-particle {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            filter: drop-shadow(0 0 5px currentColor);
            animation: relationParticle 1s ease-out forwards;
        }
        
        .resonance-ring {
            position: absolute;
            border-radius: 50%;
            border: 2px solid;
            animation: resonancePulse 1.5s forwards;
            z-index: 30;
            pointer-events: none;
        }
        
        .combo-name {
            position: absolute;
            background: linear-gradient(135deg, #ff00e6, #00f0ff);
            color: white;
            padding: 8px 16px;
            border-radius: 24px;
            font-size: 16px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            z-index: 100;
            white-space: nowrap;
            transform: translateX(-50%);
            animation: comboFloat 2.5s forwards;
        }
        
        .quantum-score {
            position: absolute;
            font-weight: bold;
            font-size: 18px;
            text-shadow: 0 0 10px currentColor;
            animation: scoreFloat 1.5s ease-out forwards;
            z-index: 50;
        }
        
        @keyframes rotateSphere {
            0% { transform: rotateY(0) rotateX(15deg); }
            100% { transform: rotateY(360deg) rotateX(15deg); }
        }
        
        @keyframes iconFloat {
            0%, 100% { transform: translateZ(20px) scale(1.5) rotate(0); }
            50% { transform: translateZ(20px) scale(1.5) rotate(5deg) translateY(-5px); }
        }
        
        @keyframes glowPulse {
            0% { opacity: 0.2; transform: scale(1); }
            100% { opacity: 0.4; transform: scale(1.1); }
        }
        
        @keyframes particleOrbit {
            0% { transform: rotateY(0) translateZ(0) translateX(30px) rotateY(0); }
            100% { transform: rotateY(360deg) translateZ(0) translateX(30px) rotateY(-360deg); }
        }
        
        @keyframes collisionGlow {
            0% { opacity: 1; transform: scale(0.5); }
            100% { opacity: 0; transform: scale(3); }
        }
        
        @keyframes relationParticle {
            0% { transform: translate(0,0) scale(1); opacity: 1; }
            100% { transform: translate(calc(cos(var(--angle))*100px), calc(sin(var(--angle))*100px)) scale(0); opacity: 0; }
        }
        
        @keyframes resonancePulse {
            0% { transform: scale(0.5); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 0.3; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        
        @keyframes comboFloat {
            0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
            20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
            100% { opacity: 0; transform: translate(-50%, -80px) scale(1); }
        }
        
        @keyframes scoreFloat {
            0% { opacity: 1; transform: translate(-50%, 0); }
            100% { opacity: 0; transform: translate(-50%, -50px); }
        }
        #main-stage{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
        }
        .video-placeholder {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 18px;
            color: rgba(255,255,255,0.7);
            pointer-events: none;
        }
        
        .video-placeholder div {
            margin-bottom: 10px;
        }
        #energyshow{
            display: none;
            position: absolute;
            z-index: 100;
            width: 100%;
            background: transparent;
            border-radius: var(--border-radius);
            padding: 0rem;
            transition: opacity 0.3s ease;
        }
        .game-controls {
            float: left;
            width: 43%;
            padding-left: 10px;
            padding-top:2px;
            padding-bottom:2px;
            font-size: 13px;
        }
        
        .game-timer {
            max-width: 75%;
            float: right;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .match-result {
            position: fixed;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--dark);
            padding: 30px;
            border-radius: 20px;
            border: 2px solid var(--energy-gold);
            max-width: 600px;
            overflow:scroll;
            height: 70%;
            width: 90%;
            z-index: 10000;
            display: none;
            box-shadow: 0 0 50px rgba(255, 204, 0, 0.5);
            backdrop-filter: blur(20px);
        }
        
        .match-result h2 {
            color: var(--energy-gold);
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
        }
        
        .match-result h3 {
            color: var(--primary);
            margin: 15px 0 10px;
        }
        
        .similarity-graph {
            width: 100%;
            height: 200px;
            background: rgba(255,255,255,0.1);
            margin: 15px 0;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }
        
        .similarity-wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, 
                rgba(0, 240, 255, 0.3), 
                rgba(255, 0, 230, 0.3));
            animation: waveAnimation 3s infinite ease-in-out;
            transform-origin: bottom;
        }
        
        .personality-vector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 15px 0;
        }
        
        .vector-item {
            background: rgba(0, 240, 255, 0.1);
            padding: 8px;
            border-radius: 5px;
            text-align: center;
            border: 1px solid var(--primary);
        }
        
        .vector-item .label {
            font-size: 12px;
            color: var(--energy-green);
        }
        
        .vector-item .value {
            font-weight: bold;
            font-size: 16px;
        }
        
        .match-btn {
            background: linear-gradient(135deg, var(--energy-pink), var(--energy-blue));
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: bold;
            margin-top: 20px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .match-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 240, 255, 0.3);
        }
        
        @keyframes waveAnimation {
            0%, 100% { transform: scaleY(0.7); }
            50% { transform: scaleY(1.2); }
        }
        
        .bottom-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            padding: 15px 20px;
            display: flex;
            justify-content: center;
            background: var(--glass);
            backdrop-filter: blur(15px);
            border-top: 1px solid rgba(0, 240, 255, 0.2);
            z-index: 100;
        }
        
        .tool-buttons {
            display: flex;
            gap: 15px;
        }
        
        .tool-btn {
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 50%;
            background: rgba(0, 240, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(0, 240, 255, 0.3);
            float: left;
        }
        
        .game-controls .tool-btn {float: right;}
        
        .tool-btn i {
            font-size: 24px;
            color: var(--light);
        }
        
        .tool-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 240, 255, 0.3);
        }
        
        .style-panel {
            position: absolute;
            width: 88%;
            z-index: 1100;
            bottom: 18%;
            left: 0;
            right: 0;
            padding: 10px;
            margin: 0 auto;
            align-items: center;
            z-index: 99;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
            transition: all 0.3s;
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            gap: 15px;
            max-height: 60vh;
        }
        
        .style-panel.show {
            opacity: 1;
            visibility: visible;
        }
        
        .style-option {
            float: left;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(0, 240, 255, 0.1);
            border: 1px solid rgba(0, 240, 255, 0.3);
        }
        
        .style-option.active {
            background: rgba(0, 240, 255, 0.3);
            border-color: var(--primary);
            box-shadow: 0 0 20px var(--primary);
            transform: translateY(-5px);
        }
        
        .style-option .preview {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 10px currentColor;
        }
        
        .score-board {
            margin-left: 5px;
            padding: 10px;
            padding-top: 2px;
            padding-bottom: 2px;
            float: left;
            max-width: 46%;
            font-size: 13px;
            border-radius: 5px;
        }
        
        .score-board.low {
            color: #ff0066;
            text-shadow: 0 0 10px #ff0066;
            animation: pulseWarning 0.5s infinite alternate;
        }
        
        .score-board.high {
            color: var(--energy-gold);
            text-shadow: 0 0 15px var(--energy-gold);
            animation: pulseGlow 1s infinite alternate;
        }
        
        .achievement-notice {
            position: absolute;
            bottom: 38%;
            left: 50%;
            color: #fff;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px solid var(--energy-gold);
            box-shadow: 0 0 10px var(--energy-gold);
            z-index: 10;
            font-size: 18px;
            opacity: 0;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 100%;
            text-align: center;
        }
        
        .achievement-notice.show {
            opacity: 1;
            bottom: 28%;
        }
        
        .achievement-notice i {
            color: var(--energy-gold);
            font-size: 18px;
        }
        
        .quantum-resonance {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 2px solid;
            animation: resonancePulse 1.5s infinite;
            z-index: 30;
            pointer-events: none;
        }
        
        @keyframes resonancePulse {
            0%, 100% { transform: scale(0.8); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 0.3; }
        }
        
        .quantum-tunnel {
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(10px);
            animation: tunnelEffect 1.5s forwards;
            z-index: 25;
        }
        
        @keyframes tunnelEffect {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }
        
        .quantum-field {
            float: left;
        }
        .combo-effect {
            background: radial-gradient(circle, 
                rgba(0,240,255,0.2) 0%, 
                rgba(255,0,230,0.2) 100%);
            border-color: var(--primary);
        }
        
        /* 共鸣特效 */
        .resonance-effect {
            background: radial-gradient(circle, 
                rgba(0,255,136,0.2) 0%, 
                rgba(170,0,255,0.2) 100%);
            border-color: var(--energy-green);
        }
        
        .annihilation-effect {
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, 
                rgba(255,255,255,0.8) 0%, 
                rgba(255,0,0,0.6) 50%, 
                transparent 70%);
            border-radius: 50%;
            filter: blur(10px);
            animation: annihilate 1s forwards;
            z-index: 50;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        
        @keyframes annihilate {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
        }
        
        .energy-wave {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 2px solid var(--energy-gold);
            border-radius: 50%;
            animation: energyPulse 1s forwards;
            z-index: 40;
            pointer-events: none;
        }
        
        @keyframes energyPulse {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(3); opacity: 0; }
        }
        
        .level-indicator {
            position: fixed;
            bottom: 120px;
            left: 20px;
            font-size: 14px;
            background: var(--glass);
            padding: 6px 10px;
            border-radius: 4px;
            border: 1px solid var(--energy-green);
            z-index: 101;
            opacity: 0.8;
        }
        
        .high-score-effect {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, 
                rgba(255, 215, 0, 0.3) 0%, 
                transparent 70%);
            z-index: 1000;
            pointer-events: none;
            animation: highScorePulse 2s infinite alternate;
        }
        
        @keyframes highScorePulse {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }
        
        /* 新增组合详情面板样式 */
        .combo-details-panel {
            position: absolute;
            background: rgba(10, 10, 30, 0.7);
            border: 1px solid var(--primary);
            border-radius: 15px;
            padding: 15px;
            width: 180px;
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
            backdrop-filter: blur(10px);
            transform: translate(-50%, -50%);
            z-index: 1000;
            pointer-events: none;
        }
        
        .combo-header {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
            text-shadow: 0 0 10px currentColor;
        }
        
        .combo-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .combo-stats div {
            background: rgba(0, 240, 255, 0.1);
            padding: 3px;
            border-radius: 5px;
            font-size: 12px;
        }
        
        .combo-stats strong {
            color: var(--energy-green);
            font-size: 14px;
        }
        
        .combo-categories {
            text-align: center;
            font-size: 12px;
            color: var(--energy-pink);
            margin-bottom: 10px;
            padding: 5px;
            background: rgba(255, 0, 230, 0.1);
            border-radius: 5px;
        }
        
        .combo-history {
            font-size: 11px;
            border-top: 1px solid rgba(255,255,255,0.2);
            padding-top: 8px;
        }
        
        .combo-history div {
            display: flex;
            justify-content: space-between;
            margin: 3px 0;
        }
        
        /* 游戏结束时的组合统计 */
        .combo-stats-section {
            margin-top: 20px;
            padding: 15px;
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            border: 1px solid var(--energy-purple);
        }
        
        .combo-chart {
            margin-top: 10px;
        }
        
        .combo-bar {
            margin: 8px 0;
        }
        
        .combo-label {
            font-size: 12px;
            margin-bottom: 3px;
            color: var(--light);
        }
        
        .combo-bar-container {
            display: flex;
            align-items: center;
        }
        
        .combo-bar-fill {
            height: 20px;
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .combo-count {
            margin-left: 10px;
            font-size: 11px;
            color: var(--light);
        }
        
        @keyframes pulseWarning {
            0% { opacity: 0.7; }
            100% { opacity: 1; }
        }
        
        @keyframes pulseGlow {
            0% { box-shadow: 0 0 10px var(--energy-gold); }
            100% { box-shadow: 0 0 30px var(--energy-gold); }
        }
        /* 新增统计样式 */
        .game-stats-section {
            margin: 20px 0;
            padding: 15px;
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            border: 1px solid var(--energy-purple);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        
        .stat-column {
            padding: 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 8px;
        }
        
        .stat-item {
            margin: 8px 0;
            display: flex;
            justify-content: space-between;
        }
        
        .stat-label {
            color: var(--energy-green);
            font-size: 14px;
        }
        
        .stat-value {
            position: absolute;
            float: right;
            font-weight: bold;
            font-family: 'Courier New', monospace;
        }
        .formula {
            font-size: 10px;
            color: rgba(255,255,255,0.6);
            margin-left: 5px;
            font-family: 'Courier New', monospace;
        }
            .formula-detail {
        font-size: 10px;
        color: rgba(255,255,255,0.6);
        display: block;
        margin-top: 2px;
        font-family: 'Courier New', monospace;
        white-space: pre-wrap;
        }
        .stat-item {
        flex-direction: column;
        align-items: flex-start;
        }
        .stat-value {
        align-self: flex-end;
        margin-top: 3px;
        }
        .relationship-line {
        position: absolute;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
        transform-origin: left center;
        filter: blur(1px);
        z-index: 5;
        animation: lineFade 1.5s forwards;
        }
        
        @keyframes lineFade {
        0% { opacity: 1; width: 0; }
        50% { opacity: 0.8; width: 100%; }
        100% { opacity: 0; width: 100%; }
        }
        .auto-element {
        opacity: 0.4;
        filter: grayscale(0.8);
        pointer-events: none;
        animation: auto-element-float 4s infinite ease-in-out;
        }
        
        @keyframes auto-element-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
        }
        
 /* 语音气泡 */
 .voice-message {
    float: left;
    display: block;
    min-width: 80px;
    height: 25px;
    line-height: 25px;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 1px 2px;
    margin-right: 5px;
    max-width: 39%;
    position: relative;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.message.right .voice-message {
    background: #95ec69;
}

/* 点击反馈 */
.voice-message:active {
    transform: scale(0.98);
}

/* 声波动画 */
.voice-wave {
    float: left;
    display: flex;
    align-items: center;
    height: 20px;
    margin: 0 5px;
}

.wave-bar {
    width: 3px;
    height: 15px;
    background: #666;
    margin: 0 2px;
    border-radius: 2px;
    animation: wave 1.2s ease-in-out infinite;
    transform-origin: bottom;
}

.message.right .wave-bar {
    background: #333;
}

@keyframes wave {
    0%, 40%, 100% { transform: scaleY(0.6); }
    20% { transform: scaleY(1.2); }
}

/* 时长显示 */
.duration {
    color: #666;
    font-size: 14px;
    min-width: 30px;
}

.message.right .duration {
    color: #333;
    order: -1;
}

/* 已读状态 */
.read-status {
    float: right;
    width: 8px;
    height: 8px;
    background: #f00;
    border-radius: 50%;
    margin-left: 5px;
    transition: background 0.3s ease;
}

.read-status.read {
    background: transparent;
    position: relative;
}

.read-status.read::after {
    content: "✓";
    color: #666;
    font-size: 12px;
    position: absolute;
    right: 0;
}
/* 浮动功能模块 */
.floating-panel {
    position: absolute;
    width: 100%;
    background: transparent;
    border-radius: var(--border-radius);
    padding: 0rem;
    transition: opacity 0.3s ease;
}
.floating-panel h3 {
    font-size: 0.7rem;
    margin: 0.2rem;
    float: left;
}
/* 数据面板 */
.data-panel {
    z-index: 1;
    bottom: 2rem;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    gap: 0.5rem; 
    margin-top: 0rem; 
}
#titleshow {
    display: none;
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
  }
  
  /* 动态光晕背景 */
  #titleshow::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    /* background: linear-gradient(
      90deg,
      rgba(0,255,255,0) 0%,
      rgba(0,255,255,0.1) 50%,
      rgba(0,255,255,0) 100%
    );
    animation: light-flow 6s linear infinite; */
  }
 /* 文字容器 */
 .marquee-inner {
    position: absolute;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    font-family: 'Orbitron', sans-serif; 
    font-weight: bold;
    text-transform: uppercase;
  }
  
  /* 文字渐变效果 */
  .marquee-text {
    background: linear-gradient(90deg, #00ffff, #00ff88, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 24px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    padding: 15px 0;
    display: inline-block;
  }
  
  /* 流动边框 */
  #titleshow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* background: linear-gradient(
      45deg,
      transparent 25%,
      rgba(0,255,255,0.2) 50%,
      transparent 75%
    );
    animation: border-flow 4s linear infinite; */
    transform: rotate(45deg);
  }
  
  @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
  
  @keyframes light-flow {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
  }
  
  @keyframes border-flow {
    0% { transform: rotate(45deg) translateX(-50%); }
    100% { transform: rotate(45deg) translateX(50%); }
  }

.metric-item {
    float: left;
    margin: 0.2rem;
}

.metric-label {
    font-size: 0.5rem;
    color: var(--primary-color);
}

.metric-value {
    font-size: 0.5rem;
    color: var(--primary-color);
    font-weight: bold;
}
.icon-button {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-button:hover {
    background: rgba(0, 247, 255, 0.1);
    box-shadow: var(--neon-shadow);
}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .msg-windows { background: none; background-size: cover;position: fixed;  bottom: 0;  display: none; margin:0 auto; width:98%;filter:alpha(opacity=98);   
      -moz-opacity:0.98;   
      -khtml-opacity: 0.98;   
      opacity: 0.98;}
    .style-panel {
        grid-template-columns: repeat(10, 1fr);
    }
	  
}


/* small mobile :320px. */
@media (max-width: 767px) {
    .style-panel {
        grid-template-columns: repeat(10, 1fr);
    }
    .dialog-chat-right .goods-info {background: #CCC; width: 50%; text-align: left; margin: 0px; padding: 0;  border-top: solid 0px #DEDEDE;position: absolute;z-index: 1999;  top:5%;right:48%}
    .dialog-chat-right .automsg-info {  text-align: center; padding: 5px; border-top: solid 1px #DEDEDE; position: absolute; float:left; width: 250px;height: 550px; overflow: scroll;  z-index: 5; top: 0px; left: 318px;}
    .chat-box { display: block; float: right; margin: 0; position: fixed; z-index:19990; right: 60px;  bottom:10%}
    .dialog-chat-right .dialog-close { background: url(../images/chat_bgs.png) no-repeat -40px 0; width: 32px; height: 32px; margin: 10px 0px auto auto; float: right; position: relative; z-index: 2; cursor: pointer;}
    .dialog-chat-right .dialog-close:hover { background-position: -80px 0;}
    .chat-box .chat-list-top .minimize-chat-list { background: url(../images/chat_bgs.png) no-repeat -80px -120px; width: 32px; height: 32px; margin: 10px 0px auto auto; float: right; cursor: pointer;}
    .chat-box .chat-list-top .minimize-chat-list:hover { background-position: -120px -120px;}
    .msg-windows { background: none; background-size: cover;position: fixed;  bottom: 0;  display: none; margin:0 auto; width:98%;filter:alpha(opacity=98);   
        -moz-opacity:0.98;   
        -khtml-opacity: 0.98;   
        opacity: 0.98;}
    .msg-contnet { width: 100%;height: 438px;float: left; position: relative; overflow: hidden;}
    .msg_list { width: 100%;   margin: 10px auto;overflow: hidden;}
    .dialog-chat-right { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#59FFFFFF', endColorstr='#59FFFFFF'); z-index: 1990;background:rgba(255,255,255,0.98); width: 50%;  height: 50px; clear:both;}
    .msg-dialog .dialog-body { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#BFFFFFFF', endColorstr='#BFFFFFFF');background:rgba(255,255,255,0.98); border: solid #DEDEDE; border-width: 1px; width: 50%;  float:left;}
    .chat-box .chat-list { background: url(../images/dialog_bg.jpg) no-repeat 50%; width: 100%; height: 420px; border-style: solid; border-width: 1px 1px 0 1px; border-color: #DEDEDE; display: none;}
    .chat-box .chat-list-content { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#E5FFFFFF', endColorstr='#E5FFFFFF');background:rgba(255,255,255,0.98); width: 100%;  height: 420px; overflow: hidden; position: relative;}
    .dialog-chat-right .user-avatar { display: inline-block; width: 30px; height: 30px; margin: 0 auto; border-radius: 10%; float:left}
    .dialog-chat-right .user-avatar img { max-width: 30px; max-height: 30px; border-radius: 10%;}
    .dialog-chat-right .store-name { float:left;width: 40%;}
    .dialog-chat-right .user-name { float:left;width: 40%;}
    .msg-input-box { width: 100%;  border-top: solid 1px #CCC; float: right; }
    .msg-input-box .smilies-module { background-color: #FFF; border: 1px solid #D5E5F5; display: none; height: 94px; width: 20%; padding: 6px; position: absolute; z-index: 999;}
    .msg-input-box .textarea { line-height: 18px; width: 90%; height: 24px; padding: 4px !important; margin: 0 10px; border: none; border-radius: 8px;resize: none;}
    .dialog-chat-right .user-name { float:left}
    .user-tab-bar { filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#19FFFFFF', endColorstr='#19FFFFFF');background:rgba(255,255,255,0.98); width: 45px; height: 350px; float: left; padding: 0;position: relative; z-index: 1; display: none; overflow: hidden;}
    .user-tab-bar .user-list li { width: 162px; height: 38px; float:left}
    .user-tab-bar .user-list li .user-name { font-size: 12px; line-height: 16px; color: #333; text-overflow: ellipsis; white-space: nowrap; display: block; width: 65px; height: 16px; position: relative;}
    .chat_log_list { width: 98%; height: 438px;top: 60px; overflow: hidden; position: relative;}
    .dialog_chat_log { background-color: #FFF; width: 50%; height: 438px; overflow:scroll; z-index: 1991; border: solid #DEDEDE; border-width: 1px 0 0 0; display: none; position: absolute; top: 0; left: 0; }
    .chat-log-top { background-color: #FAFAFA; width: 98%; height: 33px; border-bottom: solid 1px #CCC;}
    .chat-log-top h1 { font-size: 16px; line-height: 22px; color: #555; height: 31px; float: left; margin: 0px;}
    .chat-log-top h1 i { background: url(../images/chat_bg.png) no-repeat 0 -60px; vertical-align: middle; display: inline-block; width: 31px; height: 31px; margin-right: 6px;}
    .from_msg { width: 99%; padding: 0 0 0 48px; margin: 10px 0; float: left; position: relative; z-index: 1;}
    .from_msg .user-avatar { background-color: #FFF; width: 20px; height: 20px; padding: 1px; border: solid 1px #D8D8D8; box-shadow: 1px 1px 2px rgba(204,204,204,1); position: absolute; z-index: 1; bottom: 0; left: 0px;}
    .from_msg .user-avatar img { width: 20px; height: 20px;}
    .from_msg dl { background-color: #FFF; display: inline-block; float: left; border-radius: 5px; padding: 0 5px 5px 5px; position: relative; z-index: 1;}
    .from_msg dl dt.from-msg-time { font-family: Tahoma, Geneva, sans-serif; font-size: 10px; color: #999; line-height: 20px; text-align: left;}
    .from_msg dl dd.from-msg-text { display: inline-block; color: #333; line-height: 20px; max-width: 210px; word-wrap: break-word;}
    .from_msg dl dd.from-msg-text img { vertical-align: middle;}
    .from_msg dl dd.from-msg-text audio {max-width: 210px; }
    .from_msg dl dd.arrow { background: url(../images/chat_bg.png) no-repeat -40px -80px; width: 16px; height: 10px; position: absolute; z-index: 1; bottom: 0; left: -6px;}

    .to_msg { width: 99%; padding: 0 48px 0 0; margin: 10px 0; float: right; position: relative; z-index: 1;}
    .to_msg .user-avatar { background-color: #FFF; width: 30px; height: 30px; padding: 1px; border: solid 1px #D8D8D8; box-shadow: 1px 1px 2px rgba(204,204,204,1); position: absolute; z-index: 1; bottom:0; right: 0px;}
    .to_msg .user-avatar img { width: 30px; height: 30px;}
    .to_msg dl { background-color: #FFF; display: inline-block; float: right; border-radius: 5px; padding: 0 10px 10px 10px; position: relative; z-index: 1;}
    .to_msg dl dt.to-msg-time { font-family: Tahoma, Geneva, sans-serif; font-size: 10px; color: #999; line-height: 20px; text-align: right;}
    .to_msg dl dd.to-msg-text { display: inline-block; color: #333; line-height: 20px; max-width: 210px; word-wrap: break-word;}
    .to_msg dl dd.to-msg-text img { vertical-align: middle;}
    .to_msg dl dd.to-msg-text audio { max-width: 210px; }
    .to_msg dl dd.arrow { background: url(../images/chat_bg.png) no-repeat -60px -80px; width: 16px; height: 10px; position: absolute; z-index: 1; bottom:0; right: -6px;}
    .dialog-chat-right .goods-info {background: #CCC; width: 50%; text-align: left; margin: 0px; padding: 0;  border-top: solid 0px #DEDEDE;position: absolute;z-index: 1999;  top:5%;left:0%}
    .dialog-chat-right .goods-pic { display: inline-block;width: 60px; margin: 5px; height: 60px; float: left;}
    .dialog-chat-right .goods-pic img { max-width: 60px; max-height: 60px;}
    .dialog-chat-right .goods-price { font-weight: 600; color: #F32613;}
    .dialog-chat-right .goods-name { font-size: 12px; line-height: 18px; float:right; margin-right: 5px;}
    .dialog-chat-right .goods-name a { color: #000;}
    .dialog-chat-right .goods-buy { display: block; float: left; height: 25px; width: 80px; margin: 0; padding: 0; }
    .dialog-chat-right .goods-buy a { font-size: 12px; line-height: 20px; margin: 0; color: #FFF; background-color: #F32613; padding: 2px 8px; border-radius: 2px;}
    .dialog-chat-right .goods-buy a:hover { text-decoration: none; background-color: #B00;}
    .dialog-chat-right .goods-list { border-top:0;position: absolute;z-index: 1999;  top:0%;left:0%}
    .dialog-chat-right .goods-list .title { font-size: 12px; font-weight: 600; line-height: 20px; color: #333; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFFFFFF', endColorstr='#7FFFFFFF');background:rgba(255,255,255,0.5); height: 20px; padding: 4px 9px;}
    .dialog-chat-right .goods-list .content { display: block;}
    .dialog-chat-right .goods-list .content ul { font-size: 0; *word-spacing:-1px/*IE6、7*/; padding: 10px 9px 0 10px;}
    .dialog-chat-right .goods-list .content ul li { vertical-align: top; letter-spacing: normal; word-spacing: normal; text-align: center; display: inline-block; width: 80px; padding: 5px 10px;}
    .dialog-chat-right .goods-list .goods-pic { width: 60px; height: 60px; margin: 0 auot;}
    .dialog-chat-right .goods-list .goods-pic a { width: 60px !important; height: 60px !important;}
    .dialog-chat-right .goods-list .goods-pic img { max-width: 60px !important; max-height: 60px !important;}
    .dialog-chat-right .goods-list .goods-price { font-size: 12px; font-weight: 600; color: #F32613}
}

.db {
	display: block;
}


@-webkit-keyframes audio_playing {
	30% {
		background-position: 0px center;
	}
	31% {
		background-position: -18px center;
	}
	61% {
		background-position: -18px center;
	}
	61.5% {
		background-position: -36px center;
	}
	100% {
		background-position: -36px center;
	}
}