/* 🎨 现代化消息页面设计 - 深色主题 */

/* 🎨 CSS变量定义 - 黑色主题 */
page {
  --primary-color: #0A84FF;
  --primary-light: #3EA8FF;
  --primary-dark: #0056CC;
  --background-color: #070709;
  --surface-color: #0F0F11;
  --text-primary: #ECECEC;
  --text-secondary: #A8A8A8;
  --text-tertiary: #7A7A7A;
  --border-color: rgba(255,255,255,0.06);
  --shadow-light: 0 1rpx 6rpx rgba(0,0,0,0.6);
  --shadow-medium: 0 6rpx 18rpx rgba(0,0,0,0.7);
  --radius-small: 8rpx;
  --radius-medium: 12rpx;
  --radius-large: 20rpx;
  --safe-area-bottom: env(safe-area-inset-bottom);
}

/* 🌙 深色模式支持 */
@media (prefers-color-scheme: dark) {
  page {
    --primary-color: #0A84FF;
    --primary-light: #64D2FF;
    --primary-dark: #0056CC;
    --background-color: #000000;
    --surface-color: #1C1C1E;
    --text-primary: #FFFFFF;
    --text-secondary: #8E8E93;
    --text-tertiary: #48484A;
    --border-color: #38383A;
    --shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
  }
}


.telegram-container {
   min-height: 100vh; 
  /* height: calc( 100vh - 250px); */
  background: var(--background-color);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-area-bottom);
  box-sizing: border-box;
  position: relative;
  color: var(--text-primary);
  transition: background-color 280ms ease, color 280ms ease, background 280ms ease;
   /* border: 10rpx solid red;  */
  font-weight: 24rpx;
  
}

/* 关键区域同步过渡，避免突变 */
.search-section,
.search-bar,
.conversation-item,
.empty-state,
.telegram-header {
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.telegram-header{
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 85%;
  margin: 0 auto;
  margin-top: 20rpx;
  
}
.Search-header-left{
  width: 640rpx;
  height: 80rpx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 40rpx;
  
}
.Search-input{
  width: 80%;
  /* border: 1px solid red; */
  margin-left: 30rpx;
}
.Search-img{
  width: 32rpx;
  height: 32rpx;
  margin-right: 30rpx;
}
.Search-img-add{
  width: 64rpx;
  height: 64rpx;
  vertical-align: bottom;
  margin-left: 20rpx;
  
}
.group-chat{
  height: 120rpx;
  /* border: 1px solid red; */
  display: flex;
  justify-content:center;
  align-items: center;
  margin-top: 20rpx;
  background-color: #1A1A1A;
  

}
.group-chat-conten{
  /* border: 1px solid red; */
  display: flex;
  justify-content:space-around;
  align-items: center;
  height: 100rpx;
  width: 660rpx;
}
.chat-left{
  /* border: 1px solid red; */
  display: flex;
  justify-content:center;
  align-items: center;
  width: 100rpx;
  height: 100rpx;
  background-color:#212121;
  border-radius: 24rpx;
}
.chat-text{
  width: 500rpx;
  height: 76rpx;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.titel{
  font-size: 32rpx;
  font-weight: 700;
}
.chat-img{
  width: 60rpx;
  height: 60rpx;
}
.chat-img-rigth{
  width: 34rpx;
  height: 34rpx;
  margin-right: 50rpx;
  vertical-align: bottom;
}

.chat-conten{
  height: 100%;
  /* border: 1px solid red; */
  box-sizing: border-box;
  padding-bottom: 100rpx;
  margin-top: 20rpx;
}
.conten-area{
display: flex;
justify-content: center;
align-items: center;
height: 130rpx;
background-color:#212121;
border-radius: 24rpx;
margin-bottom: 0;
margin-top: 10rpx;
width: 650rpx;
margin-left: 50rpx;  
padding-left: 20rpx;
}


.conten-area-img{
  height: 100rpx;
  width:100rpx;
  border-radius: 24rpx;
  vertical-align: bottom;
}
.conten-area-center{

  width: 500rpx;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20rpx;
  flex: 1;
}
.center-titel{
  font-size: 32rpx;
  font-weight: 700;
}
.header-content {
  height: 66rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 改为起始对齐，按钮通过 margin-left:auto 靠右 */
  padding: 0 32rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.4);
}
.center-time{
  /* border: 1px solid red; */
  margin-right: 40rpx;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-left: auto; /* 将按钮组推到最右侧 */
}

.header-btn {
  width: 50rpx; /* 与图标一致，避免可见留白 */
  height: 50rpx;
  border-radius: 8rpx; /* 小幅圆角以贴合图片边缘 */
  background: transparent; /* 透明，无底色 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease; /* 去掉背景过渡，仅保留轻微缩放反馈 */
}

.header-btn:active {
  transform: scale(0.92);
}

.header-icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* 🎨 现代化内容区域 */
.telegram-content {
  /* flex: 1; */
  height: 90vh;
  background: transparent;
  box-sizing: border-box;
 
  /* 让内容自然流式布局，避免覆盖搜索栏与头部 */
  /* position: relative; */
  /* border: 10px solid greenyellow; */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* padding-bottom: 260rpx */
  margin-top: 20rpx;
}

.telegram-content::-webkit-scrollbar {
  display: none;
}

/* 🎨 现代化搜索栏 */
.search-section {
  padding: 20rpx 32rpx;
  background: var(--background-color);
  border-bottom: 1rpx solid var(--border-color);
  animation: searchSlideDown 0.3s ease-out;
}

@keyframes searchSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-bar {
  height: 80rpx;
  background: var(--background-color);
  border: 1rpx solid var(--border-color);
  border-radius: var(--radius-large);
  display: flex;
  align-items: center;
  padding: 0 28rpx;
  gap: 16rpx;
  box-shadow: var(--shadow-light);
  transition: all 0.2s ease;
}

.search-bar:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06);
}

.search-icon { color: var(--text-secondary); font-size:32rpx; }
.search-input { flex:1; font-size:32rpx; color:var(--text-primary); background:transparent }
.search-input::placeholder {
  color: var(--text-secondary);
}

.search-cancel {
  padding: 8rpx 16rpx;
  border-radius: var(--radius-small);
  transition: background-color 0.2s ease;
}

.search-cancel:active {
  background: rgba(0, 122, 255, 0.1);
}

.cancel-text {
  font-size: 32rpx;
  color: var(--primary-color);
  font-weight: 500;
}

/* 🎨 现代化会话列表 */
.conversations-section {
  background: transparent;
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  margin-top: 16rpx;
  overflow: hidden;
  min-height: 0;
  padding-bottom: 200rpx; /* 保留空间给底部操作栏，避免白条 */
}

/* 更紧凑 + 国际化（略微灰背景 & 居中收窄） */
 .conversation-item {
  display: flex;
  align-items: center;
  padding: 22rpx 28rpx; /* 缩小整体高度与左右留白 */
  transition: all 0.22s ease;
  position: relative;
  background: rgba(255,255,255,0.05); /* 更明显的浅灰块（暗色） */
  margin: 0 auto 16rpx; /* 底部分隔形成卡片间距 */
  width: 100%;
  max-width: 1180rpx; /* 大屏时不过宽 */
  border-radius: 20rpx; /* 轻圆角 */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1rpx solid rgba(255,255,255,0.10); /* 明确边界 */
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.35), 0 4rpx 14rpx -4rpx rgba(0,0,0,0.4);
}

 .conversation-item:active { background: rgba(255,255,255,0.08); transform: scale(0.992); }

.conversation-item:last-child { border-bottom: none; }

/* 🎨 现代化头像设计 */
.conversation-avatar { position: relative; margin-right: 28rpx; }
.avatar-image { width:108rpx; height:108rpx; border-radius:54rpx; box-shadow: var(--shadow-light); border: 2rpx solid rgba(255,255,255,0.03); }
.avatar-placeholder { width:108rpx; height:108rpx; border-radius:54rpx; background: linear-gradient(135deg, #151516 0%, #0F0F11 100%); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-light); }
.avatar-text { font-size:40rpx; font-weight:600; color:var(--text-primary); }

/* 在线状态角标（右下角小圆点） */
.presence-indicator {
  position: absolute;
  right: 2rpx;
  bottom: 2rpx;
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  border: 4rpx solid var(--surface-color);
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.35);
  z-index: 3;
}
.presence-indicator.online { background: #2ECC71; }
.presence-indicator.offline { background: #9E9E9E; opacity: 0.9; }

/* 🎨 现代化未读徽章 */
.unread-badge {
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  min-width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid var(--surface-color);
  box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.6);
  z-index: 2;
}
.unread-count { font-size:22rpx; font-weight:700; color:white }

/* 🎨 现代化会话信息 */
.conversation-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conversation-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 34rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  /* 允许在 flex 容器内正确触发省略号 */
  min-width: 0;
  margin-right: 16rpx;
  line-height: 1.3;
}

.conversation-meta {
  display: flex;
  align-items: center;
  gap: 8rpx;
  /* 保留时间+静音的显示空间，避免被名称挤没 */
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 120rpx;
  justify-content: flex-end;
}

.conversation-time {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 26rpx;
  white-space: nowrap;
  /* 避免被压缩隐藏 */
  flex-shrink: 0;
}

.mute-icon {
  font-size: 24rpx;
  color: var(--text-tertiary);
  opacity: 0.8;
}

/* 🎨 现代化会话预览 */
.conversation-preview {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.last-message {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  line-height: 1.4;
}

.message-indicators {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.status-indicator {
  color: var(--text-secondary);
  font-size: 20rpx;
  opacity: 0.8;
}

.status-indicator.read {
  color: var(--primary-color);
  opacity: 1;
}

/* 🎨 现代化空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 64rpx;
  color: rgba(255,255,255,0.06);
}

.empty-title {
  font-size: 32rpx;
  color: var(--text-primary);
  font-weight: 600;
}

.empty-subtitle {
  color: var(--text-secondary);
}

/* 📱 响应式设计 - 适配不同屏幕尺寸 */
@media screen and (max-width: 375px) {
  .conversation-item {
    padding: 20rpx 24rpx;
    border-radius: 16rpx;
  }

  .avatar-image, .avatar-placeholder {
    width: 96rpx;
    height: 96rpx;
    border-radius: 48rpx;
  }

  .conversation-name {
    font-size: 32rpx;
  }

  .last-message {
    font-size: 26rpx;
  }
}

@media screen and (min-width: 414px) {
  .conversation-item {
    padding: 24rpx 30rpx; /* 即便大屏也保持克制 */
  }

  .avatar-image, .avatar-placeholder {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
  }

  .conversation-name {
    font-size: 36rpx;
  }

  .last-message {
    font-size: 30rpx;
  }
}

/* 🎨 会话项增强功能 */
.conversation-item.pinned {
  background: linear-gradient(90deg, rgba(0, 122, 255, 0.05) 0%, transparent 100%);
  border-left: 4rpx solid var(--primary-color);
}

.conversation-item.muted .conversation-name {
  opacity: 0.7;
}

.conversation-item.muted .last-message {
  opacity: 0.6;
}

/* 🎨 加载状态 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80rpx 32rpx;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid var(--border-color);
  border-top: 4rpx solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 🎨 搜索结果高亮 */
.search-highlight {
  background: linear-gradient(135deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 193, 7, 0.3) 100%);
  border-radius: 4rpx;
  padding: 0 4rpx;
}