body /*, #cloud-gaming-container */
{
    background: url(../image/web/bg.png) no-repeat center center !important;
    /* 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */
    background-size: cover;
}
/* 问题容器 */
.question-container {
    position: fixed;
    left: 70px;
    top: 30px;
    bottom: 30px;
    width: 210px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
/* 热门问题 */
.hot-container { 
    margin-bottom: 10px;
    /* max-height: calc( 50% - 10px - 54px ); */
    max-height: 275px;
    overflow: hidden;
}
/* 推荐问题 */
.recommend-container { 
    /* max-height: calc( 50% - 10px - 54px ); */
    max-height: 275px;
    overflow: hidden;
}
.question-container hr,
.hot-container hr,
.recommend-container hr {
    color: white;
    height: 1px;
    border: none;  /* 注意 */
}
p.hot-head {
    height: 54px;
    line-height: 54px;
    padding: 0px 20px;
    font-size: 22px;
    color: #fdf1b5ff;
    background-color: rgba(3, 3, 3, 0.2);
}
p.recommend-head {
    margin-top: 10px; /* 比hot-head多了margin-top这个属性 */
    height: 54px;
    line-height: 54px;
    padding: 0px 20px;
    font-size: 22px;
    color: #fdf1b5ff;
    background-color: rgba(3, 3, 3, 0.2);
}
p.real-content {
    height: 45px;
    line-height: 45px;
    padding: 0px 20px;
    color: white;
    white-space: nowrap;     /* 设置不换行 */
    overflow: hidden;        /* 裁剪多余内容 */
    text-overflow: ellipsis; /* 设置多余文本以省略号的形式出现 */
    background-color: rgba(3, 3, 3, 0.1);
    
    cursor: pointer;
}


p.real-content .number {
    margin-right: 15px;
}
p.more {    
    height: 45px;
    line-height: 38px;
    padding: 0px 20px;
    color: white;
    text-align: center;
    background-color: rgba(3, 3, 3, 0.1);
}
/* 鼠标移入显示滚动条 */
.hot-container:hover,
.recommend-container:hover {
    overflow-y: auto;
}

/* UserID */
.desc-container {
    position: fixed;
    right: 30px;
    top: 10px;
    color: white;
}

/* 销毁房间ID */
.destroy-roomid-container {
    position: fixed;
    right: 30px;
    top: 83px;
    color: white;
    visibility: hidden;
    cursor: pointer;
}


/* 联系我们 */
.connect-container {
    position: fixed;
    right: 30px;
    top: 40px;
}
.connect-wx-img {
    width: 39px; 
    height: 27px; 
    cursor: pointer;
}
.connect-phone-img {
    width: 100px; 
    height: 27px; 
    cursor: pointer;
}

/* 切换摄像机视角 */
.change-camera-container {
    position: fixed;
    right: 30px;
    top: 120px;
}
.change-camera-img {
    width: 45px; 
    height: 45px; 
    border-radius: 50%;
    border: 1px solid transparent;
    display: inline-block;
    cursor: pointer;
}

/* 转人工 */
.change-manual-container {
    position:fixed;
    right:30px;
    bottom: 111px;
    visibility: hidden;
    display:flex;
    align-items:center;
    justify-content: center;
    padding: 4px 10px;
    background: rgba(3, 3, 3, 0.2);

    box-sizing: border-box;
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 15px;
    cursor: pointer;
}
.change-manual-img {
    width: 16px; 
    height: 16px; 
    /* 有圆角时Android会有点击出现背景色问题 */
}
.change-manual-container:disabled {
    background: rgba(100, 100, 100, 0.2);
}

.ai-tip {
    position: fixed;
    right: 30px;
    bottom: 0px;
    width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
p.tip {
    height: 25px;
    line-height: 25px;
    padding: 0px 20px;
    color: rgb(255,255,255,0.25);
    white-space: nowrap;     /* 设置不换行 */
    overflow: hidden;        /* 裁剪多余内容 */
    text-overflow: ellipsis; /* 设置多余文本以省略号的形式出现 */
    background-color: rgba(3, 3, 3, 0);
    
    font-size: 12px;
    cursor: pointer;
}

/* 输入管理 */
.input-container {
    position: fixed;
    right: 30px;
    bottom: 25px;
    width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.input-mic-container {
    display: flex;
    align-items: center;
    justify-content:center;
    width: 40px;
    height: 80px;
    margin-left: 10px;
    border-radius: 3px;
    border: 1px solid transparent;
    background: rgba(3, 3, 3, 0.2);
    cursor: pointer;
    
    box-sizing: border-box;
}
.input-mic-img {
    width: 20px; 
    height: 23.8px; 
    border-radius: 50%;
    border: 1px solid transparent;
    display: inline-block;
}
/* 文本框 */
.input-result-containter {
    flex: 1;
    height: 80px;
}
#area-container {
	/* height:auto !important; */
    align-self: center;
	/* min-height:40px; 假定最低高度 */
    position: relative;
}
.area-discuss {
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 16.5px;
    left: 10px;
    top: 9px;
}
#textarea_id {
    resize: none;
    outline: none;
    width: 100%;
    height:80px;
    padding: 6px;
    /* font-size: 7px; */
    color: #ffffffff;
    background: rgba(3, 3, 3, 0.2);
    border-radius: 3px;
    border: 1px solid transparent;
    caret-color:white;    
    cursor: context-menu;
    
    text-indent: 30px;
    box-sizing: border-box;
}

#textarea_id:disabled {
    background: rgba(100, 100, 100, 0.2);
}
/* 
#textarea_id:focus-within {
	border: none;
    color: #eb2424;
} */

/* 聊天页面 */
.chat-container {
    position: fixed;
    right: 80px;
    bottom:142px;
    width: 370px;
    max-height: 480px;
}
.chat-content {
    width: 100%;
    max-height: 480px;
    display: block;
    overflow: hidden;

    box-sizing: border-box;
}
.chat-content:hover {
    /* overlay  行为与 auto 相同，但滚动条绘制在内容之上而不是占用空间。 
    仅在基于 WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。 */
    overflow-y: overlay; 
    /* overflow-y: auto; */
}
#chat-content-id:first-child {
    padding-top: 22px;
}
/* 左右对话UI */
.chat-left {
    display: flex;
    align-self: flex-start;
    margin-top: 3px;
    margin-bottom: 3px;
    position: relative;
}
.chat-right {
    display: flex;
    flex-direction: row-reverse;
    align-self: flex-end;
    margin-top: 3px;
    margin-bottom: 3px;
    position: relative;
}
.avatar-me {
    margin: -12px 10px 0px 10px;
    width: 30px; 
    height: 34px; 
    display: inline-block;
    position: absolute;
}
.avatar-4u {
    margin: -23px 10px 0px 10px;
    width: 40px; 
    height: 45px; 
    display: inline-block;
    position: absolute;
}
.span-container-left {
    max-width: calc(100% - 100px);
    padding: 5px 10px 5px 55px;
    border-radius: 7px;
    border: 1px solid transparent;
    overflow-wrap: break-word;
    color: #ffffffff;
    background:rgba(3, 3, 3, 0.2);
}
.span-container-right {
    max-width: calc(100% - 100px);
    padding: 5px 45px 5px 10px;;
    border-radius: 7px;
    border: 1px solid transparent;
    overflow-wrap: break-word;
    color: #ffffffff;
    background:rgba(3, 3, 3, 0.2);
}
.chatmsg {
    color: #ffffffff;
}

/* placeholder */
#textarea_id::-webkit-input-placeholder { /* WebKit browsers */ 
    color:#ffffff;
} 
#textarea_id:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color:#ffffff;
} 
#textarea_id::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color:#ffffff;
} 
#textarea_id:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color:#ffffff;  
}

.input-result-box::-webkit-input-placeholder { /* WebKit browsers */ 
    color:#ffffffff;
} 
.input-result-box:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color:#ffffffff;
} 
.input-result-box::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color:#ffffffff;
} 
.input-result-box:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color:#ffffffff;  
}