:root {
	--chat-image: none;
}
.chatfax {position: absolute;color:#333;    background: #f3f3f3;height:100%;width:100%;font-size:14px;font-family:Arial,sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

.chatfax{
	background-image: var(--chat-image);  /* 使用变量 */
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.chatfax td{border:1px solid #e5e5e5;position:relative}
.chatfax td svg{height:24px;color:#333;padding:5px 5px}
.chatfax form{font-family:Arial,sans-serif}
.chatfax textarea,.chatfax input{width:100%;vertical-align:middle;height:100%;border:none;margin:0px;padding:0px;font-family:Arial,sans-serif;box-sizing:border-box}
.chatfax input.dou{display:inline-block;border:1px solid #eee;width:60px;width:80px;padding:6px}
.chatfax textarea{padding:5px}

.chatfax .left {width: 40px;}
.chatfax .left a{height: 100%;display: inline-block;}
.chatfax .right {flex: 1;flex-shrink: 0;}
.chatfax .uset-intro {font-size:12px;margin:0px 10px;}
.chatfax .uset-intro span{display: inline-block;margin-right:3px;vertical-align: middle;line-height: 20px;}
.chatfax .uset-intro .name {max-width: 140px;font-weight: bold;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chatfax .list {height: 100%; position: absolute;    top: 0px;    bottom: 0px;    left: 0;    right: 0;    overflow-y: auto;  overflow-x: hidden;  display: flex;    flex-direction: column-reverse;}
.chatfax .list li{display: flex;justify-content: space-between;padding:6px;margin-bottom:12px;word-break:break-all;word-wrap:break-word}
.chatfax .list li i{display:block;width: 40px;flex-shrink: 0;position:relative;font-size:12px;font-weight:bold}
.chatfax .list li a.mention {color:#5c9bf3}
.chatfax .list li .left img{width:36px;height:36px;vertical-align:top;border-radius:4px;margin-right:10px;cursor:pointer;}
.chatfax .list li p{min-width: 0;position:relative;display:inline-block;margin:0px 50px 0px 10px;padding:10px;text-align:left;border-radius:4px;white-space: pre-wrap;-webkit-line-clamp: 2;background:#ffffffb5;word-break:break-all;word-wrap:break-word}
.chatfax .list li .offbeat{margin-left:46px;margin-top:5px;font-size:10px;font-weight:normal}
.chatfax .list li p b{vertical-align: middle;font-size: 24px;}
.chatfax .list li.cahtuser {text-align:right}
.chatfax .list li.cahtuser a{text-decoration:none}
.chatfax .list li.cahtuser p{position:relative;margin-right:10px;margin-left: 50px;background:#9AEA6F}
.chatfax .list li p img.face{height:28px;vertical-align:middle}
.chatfax .list li p img.game{height:48px;vertical-align:middle}
.chatfax .list li p.nobg{background:none;padding: 0px;}
.chatfax .list li p.normal{white-space: nowrap;}
.chatfax .list li p.emoji {font-size:48px;left: -10px;}

.chatfax .list li p span{position:absolute;background-color:rgba(0,0,0,0.6);width:100%;height:100%;right:0;top:0;font-size:18px;text-align:center;color:#fff;text-shadow:0 1px 0 #000}
.chatfax .list li.time{text-align:center;display: block;font-size:10px;color:#a7a7a7;margin-bottom:0px}

.chat-image {display: block;max-width:200px;max-height:120px;vertical-align:middle}
.chat-video {display: block;max-width:250px;max-height:150px;vertical-align:middle}

audio {max-width: 240px;}

.chatfax .intro {text-align: center;margin: 0px 20px;}
.chatfax .intro span{font-size:12px;padding: 10px 20px;display: inline-block;background: #fff;word-break: break-all;word-wrap: break-word;border-radius:4px;}
.chatfax .upload{position:absolute;width:100%;height:100%;right:0;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer}

.post-panel, .title-panel, .face-panel, .more-panel {background: #ffffff75;}

.chat-title {display:flex;justify-content: space-between;align-items: center;height:100%;}

.chat-tips{color:#a7a7a7;font-size:12px;transition:opacity 1s ease-out;max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chat-close {width: 40px;  height: 40px;  line-height: 40px;  text-align: center;cursor:pointer}
.chat-name{display:inline-block;font-weight: bold;margin-right:10px;padding:0px;font-size:14px;max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.line-num{cursor:pointer;color: #8383839c;font-size: 12px;margin-right:10px;}
.input-status {color: #8383839c;font-size: 12px;}
.chatfax .dropbtn {padding:0px 15px;}
.chatfax .dropdown-content {left: 0px;}
.chatfax .dropdown-content a{padding:0px}
.chatfax .dropdown-content li {cursor:pointer}

.chatfax .gold {display:inline-block;padding:15px;width:160px;border-radius:4px;background:#eb9519;white-space: nowrap;position: relative;}
.chatfax .gold s{text-decoration: none;display: inline-block;}
.chatfax .gold .icon{color:#fff;font-size:20px;line-height:36px;width:36px;height:36px;border:2px solid #fff;border-radius:100%;text-align:center}
.chatfax .gold .num , .gold .txt{color:#fff;position:absolute;left:80px;width:100px;height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chatfax .gold .num{font-size:14px;font-weight:bold}
.chatfax .gold .txt{top:36px;font-size:12px;font-weight:normal}

.title-left{display:flex;align-items: baseline;gap:0px;}
.title-right{display:flex;	align-items: baseline;	margin-left:auto;	gap:6px;}

.face-panel {display:none;padding:10px;bottom:0px}

.face-close i{color:#fff}
.face-menu{margin:10px;padding-bottom:10px;border-bottom:1px solid #e5e5e5;display: flex;    gap: 5px;    align-items: center;justify-content: space-between;}

.face-menu span{background:#64a2f7;color:#fff;display:inline-block;padding:5px 10px;border-radius:4px}
.face-list {display: flex; flex-wrap: wrap; justify-content: space-evenly;height:200px;overflow-y:scroll}
.face-list img{height:32px;margin:2px}

.doutu-list {display: none; flex-wrap: wrap; justify-content: space-evenly;align-content: flex-start;height:200px;overflow-y:scroll}
.doutu-list img{height:60px;width:60px;margin:2px}

.face-search {display: flex;    align-items: center;flex: 1; }
.face-search input {flex: 1;     margin: 0px 5px;    border: 1px solid #ccc;padding: 0px 10px;    height: 30px;}
.image-list {display: none; flex-wrap: wrap; justify-content: space-evenly;align-content: flex-start;height:200px;overflow-y:scroll}
.image-list img{height:60px;width:60px;margin:2px}
.image-list span{display:inline-block;position:relative;}
.face-manage {position:absolute;display:none;bottom: 5px; right: 15px;font-size:12px;background: #64a2f7;color:#fff;padding:5px 10px;border-radius:5px;}
.face-del {position:absolute;   display:none; font-size: 24px;        text-align: right; right: 0px;    top: 0px;    width: 100%;    height: 100%;}

.chat-boxs {display:none; position:absolute; z-index: 99999;border-radius: 12px;	top: 50%;	right: 30px;	left: 30px; transform: translateY(-50%);max-height: calc(100% - 130px);background:#fff;flex-direction: column;box-shadow:	0 8px 24px rgba(0, 0, 0, 0.12),0 2px 8px rgba(0, 0, 0, 0.08);}
.chat-boxs-title {display: flex;justify-content: space-between;background: #ccc;    padding: 10px;border-radius: 12px 12px 0px 0px;}
.chat-boxs-title .name {flex:1}
.chat-boxs-body {flex: 1;overflow-y: auto; overflow-x: hidden;padding: 10px;}

.chat-user-list {position: relative;list-style: none;display: flex;flex-wrap: wrap;  justify-content: space-between;gap: 5px;}
.chat-user-list img {width:60px;height:60px;border-radius: 100%;}
.chat-user-list li{	position: relative;	font-size: 12px;text-align: center; width: 70px;cursor: pointer;transition: all 0.2s;}

.invite-call {position: fixed;z-index: 99999;background:#000000b5;color:#fff;font-size:14px;bottom:80px;left: 50%; transform: translateX(-50%);width:230px;text-align: center;padding:20px;border-radius:10px;}
.invite-call img {width:160px;height:160px;border-radius:50%}
.invite-call p {margin:5px 0px;}
.invite-call button {padding:7px 20px;color:#fff;border:0px;border-radius:4px;margin:5px;background:#ffa6009a;}
.invite-call .but1 {background: #f44336;}
.invite-call .but2 {background: #00c853;}

.call-box-0{position:fixed;top: 50%; left: 50%;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;border-radius: 10px;z-index: 99999;transform: translate(-50%, -50%);}
.call-box-0 iframe{width:100%;height:100%;border:none;display:block;border-radius: 10px;}

.call-box-1{position:fixed;top: 50%; left: 50%;width:320px;height:360px;background:#000;display:flex;align-items:center;justify-content:center;border-radius: 10px;z-index: 99999;transform: translate(-50%, -50%);}
.call-box-1 iframe{width:100%;height:100%;border:none;display:block;border-radius: 10px;}

.view{position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);width:100%;height:100%;z-index:99999;text-align:center;display:table}
.view img{box-shadow:-2px 0px 20px #000;max-width: 95vw;max-height: 95vh;width: auto;height: auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff}
.view video{box-shadow:-2px 0px 20px #000;	max-width: 90vw;max-height: 90vh;width: auto;height: auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}


.minichat,.chat-box{position:fixed;visibility:hidden;width:1px;height:1px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);will-change: transform;background: rgb(255, 255, 255);opacity: 0; transform: scale(0.98); transition: opacity .25s ease, transform .25s ease; pointer-events: none;}
.minichat .drag{display:none;position:absolute;touch-action: none;z-index:9999;height:46px;right:45px;left:45px;cursor:move;user-select:none;background:rgb(255 255 255 / 0%)}
.minichat .drag.show{background: rgb(0 0 0 / 30%);left: 0px;width: 100%;}
.minichat.show{visibility:visible;top:0px;left:0px;height: calc(var(--vh, 1vh) * 100);width:100%;z-index:999;	opacity: 1;	transform: translateY(0);	pointer-events: auto;}
.minichat .resize{display:none;z-index:9999;touch-action: none;}


@media screen and (min-width:800px){
.minichat.show{transform:none;visibility:visible;top: auto;bottom:80px;left:140px;width:360px;height:500px}
.minichat .drag{display:block;}
.minichat .resize{display:block;position:absolute;right:5px;bottom:5px;width:12px;height:12px;border-right:2px solid #666;border-bottom:2px solid #666;cursor:nwse-resize;opacity:.7;}
}


@media (min-width: 361px) {
  .call-box-0 {
      width: 360px;
      left: 50%;
  }
}

@media (min-height: 641px) {
  .call-box-0 {
      height: 640px;
      top: 50%;
  }
}


.chatfax .line-user {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}


.loader {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0,0,0,0.2);
	border-top-color: #000;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.loader-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	pointer-events: none;
}

.button{background:#1E9FFF;text-align:center;color:#fff;padding:10px 20px;font-size:14px;line-height:20px;border-radius:10px}

.chat-video::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAABHcEwAAAAAAAA5OTkAAAB/f3/19fXOzs6ysrLk5OT///8P0uRtAAAAEXRSTlOAEgE0SXhnAB5VkECq9dfF52B47JgAAAE+SURBVEjHpZbhkoMgDITXEGiitcr7v+wpc9eRQihy+0/bb2JISBaPT5E41uABH5SdUPEHfDzLEpApLNJERD0Kec1DXRFhGGKpIuQCTAVHJTIxmuLpE5kUX6QTXRH6TpzMFekh3kxCiNElpjfi0Cn3h0joRYL8IoxucUJIfD8CSVH0BgE9kVtB4OVAluL1a24wy4GUxxXj1jg0gqCCxPVpHwBcFYlxtyAHNpAYjZQYaiJxraakCDZSTynAt5AjpeLrqmWMmV49Fc6RHR1xrsD6nAugmX7c5kr6jUOuV0YbpdytUloNs9oNY7Tl1mhLqja/fWPC2BUbuMgD4+JWGH8stGOO0Z3RRykK3RmwNDzGR5bFwErqY/LFR9SzXv+/xEesQjIkRh94w5AkX2XYHtspEdXNFVHLj53fl1m48vcfDEsZ4mf/bygAAAAASUVORK5CYII=) no-repeat 50% 50%}


.ico{font-size:22px;color:#666}
.chat-record-btn{display:inline-block;margin:10px;padding:10px 15px;color:#fff;background: #81818191;cursor:pointer;border-radius:4px;font-size:12px}

.cta,.ctb,.ctr,.ctg,.ctc{text-align:center;color:blue;margin:5px;padding: 10px 20px;font-size: 12px;}
.ctb{color:blue}
.ctr{color:red}
.ctg{color:green}
.ctc{color:#666;font-size:12px;margin:5px}
.cti{text-align:center;}

.quote-td{font-size:12px;text-align:center}
.quote-close{position:absolute;right:10px;top:10px;color:#ffff00;font-size:14px;z-index:2}
.quote-close i.icon{font-size:20px}
.quote-text img{max-height:20px;    vertical-align: middle;}
.quote-panel td{padding:10px 5px;height:10px;background-color:#666;color:#fff}
.quote-panel,.chat_camera{display:none}
.quote {display:block;box-sizing:border-box;margin-bottom: 10px;padding:10px;font-size:12px;background-color:#ededed;padding:5px}

.voice-panel{display:none;position:relative}
.voice-panel td{position:relative}
.recordBtn{position:absolute;top:0px;height:100%;width:100%; text-align: center; padding: 10px;cursor:pointer;user-select:none;display:none}
.controls{display:none;text-align:center;padding:10px 0px}
.controls button{margin:0 10px;padding:8px 16px;border:none;border-radius:6px;font-size:14px}
.playBtn{background:#007aff;color:white}
.sendBtn{background:#34c759;color:white}
.cancelBtn{background:#ff3b30;color:white}
.waveform{width:100%;height:60px;display:none;background:#f2f2f2;border-radius:8px}
.audioPlayer{display:none;width:100%}
.voice-block{display:inline-block}
.voice-btn{display:inline-block;background-color:#9eea6a;color:#000;padding:10px 20px;border-radius:20px;font-size:14px;cursor:pointer;user-select:none;position:relative;margin:10px 0}
.voice-btn.playing::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:red;animation:blink 1s infinite}
.chat-loading {display:none;position:absolute;width:100%;height:100%;border-radius:10px;line-height:30px;padding-top:20px;left:0px;top:0px;z-index:99999;text-shadow:0 1px 0 #fff;background-color:rgba(0,0,0,0.1);text-align:center;box-sizing:border-box}

.chat-keyboard-btn{display:none}

.voicem {display:inline-flex;align-items:center;min-width:40px;user-select:none;}
.voicem s{font-weight:normal;font-size:18px;margin-right:10px;text-decoration:none;width:18px}

.icon-volume{font-family:"FontAwesome" !important;display:inline-block;font-weight:normal;font-size:18px;text-decoration:none;animation:changeIcon 1s steps(1) infinite}
@keyframes changeIcon{0%{content:"\f026"}
33%{content:"\f027"}
66%{content:"\f028"}
100%{content:"\f026"}
}
.icon-volume::before{content:"\f001";animation:changeIcon 1s steps(1) infinite}
.icon-volume::before{font-family:"FontAwesome";display:inline-block;font-size:18px;content:"\f026"}
.icon-step-1::before{content:"\f026"}
.icon-step-2::before{content:"\f027"}
.icon-step-3::before{content:"\f028"}

.more-panel{display:none;}
.more {display: flex;justify-content: space-around;}
.more input {cursor:pointer;}
.more li{cursor:pointer;user-select:none;position:relative;text-align: center;}
.more li span{display: inline-block;font-size: 12px;margin-left:6px;}

.show{opacity:1 !important;visibility:visible !important}

.ctc.stop::after {
    content: '' !important;           /* 清空三个点 */
    animation: none !important;
}