body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 25px;
    font-size: 16px; /* 默认字体大小 */
	margin:0px;
	overflow-x:none;
	overflow-y:none;
}

#chatLog {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
	width:1100px;
	left:650px;
}

#inputArea, #sendButton {
    width: 95%;
    border-radius: 10px;
	margin:10px;
	padding:10px;
}

#sendButton{
	background-color:orange;
}

#inputArea {
    height: 80px; /* 固定输入框的高度为80px */
    flex-shrink: 0; /* 防止 inputArea 被压缩 */
}

.userMessage, .aiMessage {
	
    position: relative;
    max-width:75%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    text-align: left; /* 文字居左 */
	ling-height:30px;
}
#answering,#stopAnswer{
	
    text-align: center;
	margin: auto;
}

.userMessage {
    background-color: #cfc;
    margin-left: auto; /* 提问的框居右 */
}

.aiMessage {
    background-color: #ccf;
    margin-right: auto; /* 回答的框居左 */
}

/* 当屏幕宽度小于1200px时，应用以下样式 */
@media (max-width: 1200px) {
    body {
        font-size: 20px; /* 增大字体大小 */
    }

    #inputArea {
        height: 100px; /* 增大输入框的高度 */
    }

    .userMessage, .aiMessage {
        max-width: 100%; /* 提问和回答占满整个宽度 */
    }

    .userMessage {
        margin-left: 0; /* 提问的框不再居右，而是占满整个宽度 */
    }

    .aiMessage {
        margin-right: 0; /* 回答的框不再居左，而是占满整个宽度 */
    }
}

		#textarea,#controll_tts {
		display: none;
		}
		#circle1{
		top:290px;
		left:210px;
		z-index:1;
		background-image:url('eyeBall.jpg');
		background-size: 100% 100%
		}
		#circle2{
		top:290px;
		left:350px;
		z-index:1;
		background-image:url('eyeBall.jpg');
		background-size: 100% 100%
		}
		#face{
		position: absolute;
		top:0px;
		left:0px;
		z-index:3;
		width:650px;
		height:650px;
		background-image:url('face.png');
		background-size: 100% 100%
		}
		#circle1, #circle2 {
		  transition: top 0.5s, left 0.5s;
		}
		#animation_container{

		z-index:5;
		}

		#canvasYanpi{
		z-index:6;
		}
		#chatArea{
		position: absolute;
		left:680px;
		width:1160px;
		background-color:#DEDEDE;
		border-radius: 20px;
		
		}
		
  .mouth-animation {
    width: 100px;
    height: 100px;
    background-image: url('mouth-sprite.png');
    background-repeat: no-repeat;
    position: absolute; /* 或者其他定位方式 */
    left: 260px; /* 您的具体位置 */
    top: 340px; /* 您的具体位置 */
	z-index:10;
  }