<!--消息页面 - Telegram风格设计-->
<view class="telegram-container {{themeClass}} {{isThemeTransitioning ? 'theme-transitioning' : ''}}">
  <!-- 顶部导航 -->
  <view class="telegram-header">
    <view class="header-content">
      <text class="header-title">消息</text>
      <view class="header-actions">
        <view class="header-btn" bindtap="showSearchBar"><text class="header-icon">🔍</text></view>
  <view class="header-btn" bindtap="markAllRead"><text class="header-icon">✔️</text></view>
        <view class="header-btn" bindtap="startNewChat"><text class="header-icon">➕</text></view>
      </view>
    </view>
  </view>
  <!-- 搜索栏 -->
  <view class="search-section" wx:if="{{showSearch}}">
    <view class="search-bar">
      <text class="search-icon">🔍</text>
      <input class="search-input"
             placeholder="搜索聊天记录"
             value="{{searchKeyword}}"
             bindinput="onSearchInput"
             focus="{{showSearch}}" />
      <view class="search-cancel" bindtap="hideSearchBar">
        <text class="cancel-text">取消</text>
      </view>
    </view>
  </view>

  <!-- Telegram风格内容：始终展示会话列表（filteredConversations会随搜索实时过滤） -->
  <scroll-view class="telegram-content" scroll-y="true"
               refresher-enabled="true"
               refresher-triggered="{{refreshing}}"
               bindrefresherrefresh="onRefresh">
    <view class="conversations-section">
      <view class="conversation-item {{item.isPinned ? 'pinned' : ''}} {{item.isMuted ? 'muted' : ''}}"
            wx:for="{{filteredConversations}}"
            wx:key="conversationId"
            bindtap="openChat"
            bindlongtap="showConversationOptions"
            data-conversation="{{item}}">

        <!-- 头像 -->
        <view class="conversation-avatar">
          <image wx:if="{{item.avatar}}"
                 src="{{item.avatar}}"
                 class="avatar-image"
                 mode="aspectFill" />
          <view wx:else class="avatar-placeholder">
            <text class="avatar-text">{{item.name.charAt(0)}}</text>
          </view>

      <!-- 在线状态角标（仅单聊显示） -->
      <view wx:if="{{item.type === 'single' || item.chatType === 0}}"
        class="presence-indicator {{item.isOnline ? 'online' : 'offline'}}"></view>

          <!-- 未读消息徽章 -->
          <view class="unread-badge" wx:if="{{item.unreadCount > 0}}">
            <text class="unread-count">{{item.unreadCount > 99 ? '99+' : item.unreadCount}}</text>
          </view>

          <!-- 置顶标识 -->
          <view class="pin-indicator" wx:if="{{item.isPinned}}">
            <text class="pin-icon">📌</text>
          </view>
        </view>

        <!-- 会话信息 -->
        <view class="conversation-info">
          <view class="conversation-header">
            <text class="conversation-name">{{item.name}}</text>
            <view class="conversation-meta">
              <text class="conversation-time">{{item.lastMessageTime}}</text>
              <text class="mute-icon" wx:if="{{item.isMuted}}">🔇</text>
            </view>
          </view>

          <view class="conversation-preview">
            <text class="last-message">{{item.lastMessage}}</text>
            <view class="message-indicators">
              <!-- 消息状态指示器 -->
              <text class="status-indicator" wx:if="{{item.messageStatus === 'sent'}}">✓</text>
              <text class="status-indicator read" wx:if="{{item.messageStatus === 'read'}}">✓✓</text>
            </view>
          </view>
        </view>
      </view>
  </view>

  <!-- 空状态 -->
  <view class="empty-state" wx:if="{{!loading && filteredConversations.length === 0}}">
      <text class="empty-icon">💬</text>
      <text class="empty-title">暂无聊天</text>
      <text class="empty-subtitle">开始一段新的对话吧</text>
    </view>

  </scroll-view>

  <!-- 主题切换悬浮按钮 -->
  <view class="theme-toggle" bindtap="toggleTheme" style="position:fixed; left:24rpx; top: {{statusBarHeight+20}}rpx; width:64rpx; height:64rpx; border-radius:32rpx; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; z-index:800; color:var(--text-primary);">
    <text>{{themeClass === 'theme-dark' ? '🌙' : '☀️'}}</text>
  </view>

  <!-- 主题切换径向遮罩动画 -->
  <view wx:if="{{showThemeOverlay}}" class="theme-overlay">
    <view class="theme-overlay-circle {{overlayPlaying ? 'play' : ''}}" style="width: {{overlayDiameter}}px; height: {{overlayDiameter}}px; left: {{overlayLeft}}px; top: {{overlayTop}}px;"></view>
  </view>

</view>