page{background:#ededed;}

.top-bar{
  height:88rpx;
  line-height:88rpx;
  text-align:center;
  color :#000;
  background:#f0f5f5;
  font-size:34rpx;
  display: flex;
}
.msg-area{
  position:fixed;
  top:88rpx;
  bottom:20rpx;
  left:0;
  right:0;
  padding:20rpx;
  box-sizing:border-box;
}
.date-bar{
  text-align:center;
  font-size:24rpx;
  color:#888;
  background:#e5e5e5;
  line-height:44rpx;
  border-radius:22rpx;
  margin:20rpx auto;
  padding:0 20rpx;
  display:inline-block;
}
.msg-item{
  display:flex;
  flex-direction:column;
  margin-bottom:20rpx;
}
.msg-item.self{
  align-items:flex-end;
}
.msg-item.self1{
  align-items:flex-end;
}
.bubble{
  max-width:70%;
  padding: 0rpx 20rpx 12rpx 20rpx;
  border-radius:12rpx;
  background:#fff;
  font-size:32rpx;
 
}
.msg-item.self .bubble{
  background:#95ec69;
}
.msg-item.self1 .bubble{
  background:#ADD8E6;
}
.time{
  font-size:24rpx;
  color:#888;
  margin-top:8rpx;
  margin-left:10rpx;
}



/* 底部整体 */
.input-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #e0e0e0;
}

/* 语音/键盘切换 */
.switch-btn{
  width: 36rpx;                 /* 微信同宽 */
  height: 76rpx;
  line-height: 76rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  margin-right: 16rpx;
  padding: 0;
  font-size: 40rpx;
  flex-shrink: 0;               /* 防止被挤压 */
  flex: 1;
  align-items: center;
  justify-content: center;
}

/* 文字模式容器 */
.text-row{
  flex: 9;
  display: flex;
  align-items: center;
}

/* 输入框：占满剩余空间 */
.input-box{
  flex: 4;
  height: 150rpx;
  background: #f5f5f5;
  border-radius: 18rpx;
  padding: 6 6rpx;
  margin-right: 16rpx;
  margin: 8rpx;
  
}

/* 发送按钮：固定 76 rpx */
.send-btn{
  width: 36rpx;
  height: 70rpx;
  line-height: 76rpx;
  padding: 0;
  background: #07c160;
  color: #fff;
  font-size: 26rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
  flex: 1;
  margin: 8rpx;
}

/* 语音模式大按钮 */

.voice-row{
  flex: 9;
  height: 80%;
  align-items: center;
  justify-content: center;
}
.voice-record-btn{
  font-size: 20rpx;
  width: 50%;
  height: 100%;
  /* flex: 1; */
  /* 
  height: 76rpx;
  line-height: 76rpx;
  border-radius: 12rpx;
  background: #f5f5f5;
   
  padding: 0 12rpx;
  white-space: pre-line;  
  transition: background .15s; */
}
.voice-record-btn.recording{
  background: #FF3B30;
  color: #fff;
}
.voice-record-btn.cancel{
  background: #FF3B30;
  color: #fff;
}
.voice-btn-group{

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rpx;                 /* 两按钮间距 10 rpx */
}

.nav {
	white-space: nowrap;
}
.nav .cu-item {
	height: 90%;
	display: inline-block;
	line-height: 90rpx;
	margin: 0 10rpx;
  padding: 0 5rpx;
  font-size: 26rpx;
}
.text-center {
	text-align: center;
}
.text-blue {
	color: #007aff;
}
.curline {
  border-bottom: 10rpx solid #007aff;   /* 蓝色，粗细 5rpx */
}

/* 实时语音转文字显示区域 */
.recording-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  /* height: 50rpx; */
  width: 100vw;
  transform: translate(-30%, -30%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 30rpx;
  border-radius: 16rpx;
  z-index: 1000;
  /* max-width: 80%;
  min-width: 300rpx; */
  max-height: 50vh;
  min-height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 添加消息状态样式 */
.msg-status {
  font-size: 24rpx;
  margin-left: 10rpx;
}
.msg-status.error {
  color: #ff3b30;
}
.recording-text {
  color: #fff;
  font-size: 34rpx;
  text-align: center;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-all;
}
/* 实时语音转文字显示区域 */
.recording-toast {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 30rpx;
  border-radius: 16rpx;
  z-index: 1000;
  max-width: 80%;
  min-width: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recording-text {
  color: #fff;
  font-size: 34rpx;
  text-align: center;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-all;
}
.cu-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1);
	transform: scale(1);
	backface-visibility: hidden;
	perspective: 2000rpx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}

.cu-modal::before {
	content: "\200B";
	display: inline-block;
	/* height: 100%; */
	vertical-align: middle;
}

.cu-modal.show {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}
.user-info {
  display: flex;
  align-items: center;
}
.cu-dialog {
  
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 680rpx;
	max-width: 100%;
	background-color: #f8f8f8;
	border-radius: 10rpx;
	overflow: hidden;
}

.cu-modal.bottom-modal::before {
	vertical-align: bottom;
}

.cu-modal.bottom-modal .cu-dialog {
	width: 100%;
	border-radius: 0;
}

.cu-modal.bottom-modal {
	margin-bottom: -1000rpx;
}

.cu-modal.bottom-modal.show {
	margin-bottom: 0;
}
.bg-white {
	background-color: #ffffff;
	color: #666666;
}

.justify-end {
	justify-content: flex-end;
}
.justify-between {
	justify-content: space-between;
}
.cu-bar .action {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
	max-width: 100%;
}

.cu-bar .content {
	position: absolute;
	text-align: center;
	width: calc(100% - 340rpx);
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	height: 60rpx;
	font-size: 32rpx;
	line-height: 60rpx;
	cursor: none;
	pointer-events: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.cu-bar {
	display: flex;
	position: relative;
	align-items: center;
	min-height: 100rpx;
	justify-content: space-between;
}
.cu-bar .action {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
	max-width: 100%;
}
.text-red,
.line-red,
.lines-red {
	color:  #ff3b30;
}
.cu-bar .action>text[class*="cuIcon-"],
.cu-bar .action>view[class*="cuIcon-"] {
	font-size: 36rpx;
}

[class*="cuIcon-"] {
	font-family: "cuIcon";
	font-size: inherit;
	font-style: normal;
}
.cuIcon-close:before {
	content: "\e646";
}
.textarea {
  width: 100%;
  height: 150rpx;
  padding: 10rpx;
  box-sizing: border-box; /* 确保内边距不影响总宽度 */
  word-wrap: break-word; /* 确保长内容也能换行 */
   /*border: 1rpx solid #ddd; 可选，添加边框 */
  border-radius: 8rpx; /* 可选，圆角 */
}
.Btextarea {
  width: 100%;
  height: 150rpx;
  padding: 10rpx;
  box-sizing: border-box; /* 确保内边距不影响总宽度 */
  word-wrap: break-word; /* 确保长内容也能换行 */
   border: 1rpx solid #ddd;  /*可选，添加边框 */
  border-radius: 8rpx; /* 可选，圆角 */
}