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

/* 🎨 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);
  }
}

/* ===== 浅色主题覆盖（当根元素包含 .theme-light 时生效） ===== */
.theme-light {
  --primary-color: #007AFF;
  --primary-light: #5AC8FA;
  --primary-dark: #0051D5;
  --background-color: #FFFFFF;
  --surface-color: #FFFFFF;
  --text-primary: #000000;
  --text-secondary: #8E8E93;
  --text-tertiary: #C7C7CC;
  --border-color: #E5E5EA;
  --shadow-light: 0 1rpx 3rpx rgba(0,0,0,0.1);
  --shadow-medium: 0 4rpx 12rpx rgba(0,0,0,0.15);
}

/* 恢复浅色会话项样式（多数规则使用变量，会自动适配） */
.theme-light .telegram-container { 
  background: var(--background-color) !important; 
  color: var(--text-primary); 
}
.theme-light .search-section { 
  background: var(--surface-color); 
  border-bottom: 1rpx solid var(--border-color); 
}
.theme-light .search-bar { 
  background: var(--background-color); 
  border: 1rpx solid var(--border-color); 
}
.theme-light .conversation-item { 
  background: var(--surface-color) !important; 
  border-bottom: 1rpx solid var(--border-color); 
}
.theme-light .conversations-section {
  background: transparent !important;
}
.theme-light .avatar-placeholder { 
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); 
  color: white; 
}
.theme-light .unread-badge { 
  border: 3rpx solid var(--surface-color); 
  box-shadow: var(--shadow-medium); 
}
.theme-light .empty-state { 
  color: var(--text-secondary); 
}

.telegram-container {
  min-height: 100vh;
  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;
}

/* === 主题切换过渡（类 Telegram）=== */
.telegram-container.theme-transitioning {
  transition: background 320ms ease, color 320ms ease, filter 320ms ease;
}

/* 关键区域同步过渡，避免突变 */
.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 {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
  box-shadow: var(--shadow-medium);
  z-index: 1000;
  backdrop-filter: blur(12rpx);
}

/* === 主题切换径向遮罩动画 === */
.theme-overlay {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 3000;
}
.theme-overlay-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--background-color);
  transform: scale(0.001);
  opacity: 0;
}
.theme-overlay-circle.play {
  animation: themeExpand 380ms ease forwards;
}
@keyframes themeExpand {
  0% { transform: scale(0.001); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.header-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.4);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.header-btn {
  width: 72rpx;
  height: 72rpx;
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10rpx);
}

.header-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.header-icon {
  font-size: 32rpx;
  color: white;
}

/* 🎨 现代化内容区域 */
.telegram-content {
  flex: 1;
  background: transparent;
  box-sizing: border-box;
  /* 让内容自然流式布局，避免覆盖搜索栏与头部 */
  position: relative;
}

/* 🎨 现代化搜索栏 */
.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: 28rpx 32rpx;
  border-bottom: 1rpx solid rgba(255,255,255,0.03);
  transition: all 0.2s ease;
  position: relative;
  background: transparent;
}

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

.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; }
.theme-light .presence-indicator { border-color: var(--surface-color); }

/* 🎨 现代化未读徽章 */
.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: 24rpx 28rpx;
  }

  .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: 32rpx 36rpx;
  }

  .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;
}