<!--
  群聊对话页

  布局规则：
  - 自己的消息：靠右对齐，顺序 [状态图标] [蓝色气泡] [自己头像]
  - 他人的消息：靠左对齐，顺序 [头像] [昵称 + 白色气泡]
  - 系统消息（type === 10）：居中灰色文字，无头像无气泡
  - 导航栏：返回 / 群名称 / 群设置入口
-->
<template>
  <view class="page-wrapper">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <uni-icons type="back" size="20" color="#1E293B" />
      </view>
      <view class="nav-center">
        <text class="nav-title">{{ groupName || '群聊' }}</text>
        <text v-if="memberCount" class="nav-subtitle">({{ memberCount }})</text>
      </view>
      <view class="nav-right" @tap="goToSettings">
        <uni-icons type="more-filled" size="20" color="#475569" />
      </view>
    </view>

    <!-- 消息列表 -->
    <scroll-view
      scroll-y
      class="msg-list"
      :scroll-into-view="scrollToId"
      :scroll-with-animation="true"
      @scrolltoupper="onLoadMore"
      @scrolltolower="onScrollToLower"
      @scroll="onScroll"
      :lower-threshold="150"
    >
      <view v-if="hasMore" class="load-more" @tap="onLoadMore">
        <text class="load-more-text">{{ loadingMore ? '加载中...' : '加载更多' }}</text>
      </view>

      <view
        v-for="msg in messages"
        :key="msg.client_msg_id || msg.id"
        :id="'msg-' + (msg.id || msg.client_msg_id)"
      >
        <!-- ====== 系统消息（居中灰色文字） ====== -->
        <view v-if="msg.type === 10 || msg.sender_id === 0" class="msg-row-system">
          <text class="system-text">{{ msg.content }}</text>
        </view>

        <!-- ====== 普通消息 ====== -->
        <view
          v-else
          class="msg-row"
          :class="isSelf(msg) ? 'msg-row-self' : 'msg-row-other'"
        >
          <!-- 他人消息（左侧）：[头像] [昵称 + 气泡] -->
          <template v-if="!isSelf(msg)">
            <view class="avatar-wrap">
              <image
                v-if="getMemberAvatar(msg.sender_id)"
                class="avatar-img"
                :src="getMemberAvatar(msg.sender_id)"
                mode="aspectFill"
              />
              <view v-else class="avatar-img avatar-placeholder avatar-peer">
                <text class="avatar-char">{{ getMemberName(msg.sender_id)[0] || '?' }}</text>
              </view>
            </view>
            <view class="bubble-col">
              <text class="sender-name">{{ getMemberName(msg.sender_id) }}</text>
              <view
                class="bubble bubble-other"
                :class="{ 'bubble-recalled': msg.status === 2, 'bubble-media': msg.type === 2 }"
                @longpress="onMsgLongPress(msg)"
              >
                <MsgText v-if="msg.type === 1" :msg="msg" :isSelf="false" />
                <MsgImage v-else-if="msg.type === 2" :msg="msg" :isSelf="false" />
                <MsgVoice v-else-if="msg.type === 3" :msg="msg" :isSelf="false" />
                <MsgFile v-else-if="msg.type === 5" :msg="msg" :isSelf="false" />
                <MsgText v-else :msg="msg" :isSelf="false" />
              </view>
            </view>
          </template>

          <!-- 自己消息（右侧）：[状态] [气泡] [头像] -->
          <template v-else>
            <view class="self-msg-col">
              <view class="self-msg-row">
                <view v-if="msg._sending" class="msg-status">
                  <uni-icons type="loop" size="16" color="#94A3B8" />
                </view>
                <view v-if="msg._failed" class="msg-status msg-status-tap" @tap="onResend(msg)">
                  <uni-icons type="info-filled" size="18" color="#EF4444" />
                </view>
                <view
                  class="bubble bubble-self"
                  :class="{ 'bubble-recalled': msg.status === 2, 'bubble-media': msg.type === 2 }"
                  @longpress="onMsgLongPress(msg)"
                >
                  <MsgText v-if="msg.type === 1" :msg="msg" :isSelf="true" />
                  <MsgImage v-else-if="msg.type === 2" :msg="msg" :isSelf="true" />
                  <MsgVoice v-else-if="msg.type === 3" :msg="msg" :isSelf="true" />
                  <MsgFile v-else-if="msg.type === 5" :msg="msg" :isSelf="true" />
                  <MsgText v-else :msg="msg" :isSelf="true" />
                </view>
                <view class="avatar-wrap">
                  <image v-if="selfAvatar" class="avatar-img" :src="selfAvatar" mode="aspectFill" />
                  <view v-else class="avatar-img avatar-placeholder avatar-self">
                    <text class="avatar-char">{{ (selfName || '我')[0] }}</text>
                  </view>
                </view>
              </view>
              <!-- 群聊已读计数 -->
              <text
                v-if="getReadLabel(msg)"
                class="read-label"
                @tap="goToReadDetail(msg)"
              >
                {{ getReadLabel(msg) }}
              </text>
            </view>
          </template>
        </view>
      </view>

      <view id="msg-bottom" style="height: 2rpx;" />
    </scroll-view>

    <!-- 新消息悬浮提示（仅当用户远离底部且有新消息时显示） -->
    <view v-if="newMsgCount > 0" class="new-msg-hint" @tap="jumpToBottom">
      <uni-icons type="bottom" size="14" color="#2563EB" />
      <text class="new-msg-hint-text">{{ newMsgCount }} 条新消息</text>
    </view>

    <!-- @成员选择器 -->
    <view v-if="showAtPicker" class="at-overlay" @tap="showAtPicker = false">
      <view class="at-panel" @tap.stop>
        <view class="at-header">
          <text class="at-header-text">选择成员</text>
          <view class="at-close" @tap="showAtPicker = false">
            <uni-icons type="close" size="18" color="#475569" />
          </view>
        </view>
        <scroll-view scroll-y class="at-member-list">
          <view class="at-member-item" @tap="onSelectAtMember(null)">
            <view class="avatar-img avatar-placeholder avatar-all">
              <text class="avatar-char">@</text>
            </view>
            <text class="at-member-name">所有人</text>
          </view>
          <view
            v-for="member in atMemberList"
            :key="member.user_id"
            class="at-member-item"
            @tap="onSelectAtMember(member)"
          >
            <image
              v-if="member.avatar"
              class="avatar-img at-avatar"
              :src="member.avatar"
              mode="aspectFill"
            />
            <view v-else class="avatar-img avatar-placeholder avatar-peer at-avatar">
              <text class="avatar-char">{{ (member.nickname || member.user_nickname || '?')[0] }}</text>
            </view>
            <text class="at-member-name">{{ member.nickname || member.user_nickname }}</text>
            <text v-if="member.role === GROUP_ROLE.OWNER" class="at-role-tag">群主</text>
            <text v-else-if="member.role === GROUP_ROLE.ADMIN" class="at-role-tag">管理</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 输入栏 -->
    <view v-if="isMuted" class="input-bar input-bar-muted">
      <text class="muted-tip">{{ isAllMuted ? '当前群聊已开启全体禁言' : '你已被禁言，无法发送消息' }}</text>
    </view>
    <view v-else class="input-bar">
      <view class="voice-toggle-btn" @tap="toggleVoiceMode">
        <uni-icons :type="voiceMode ? 'compose' : 'mic'" :size="22" color="#64748B" />
      </view>
      <template v-if="voiceMode">
        <VoiceRecorder @recorded="onVoiceRecorded" />
      </template>
      <template v-else>
        <view class="input-wrap">
          <input
            class="msg-input"
            v-model="inputText"
            placeholder="输入消息..."
            placeholder-style="color: #94A3B8"
            confirm-type="send"
            @confirm="onSend"
            @input="onInputChange"
            :adjust-position="true"
          />
        </view>
      </template>
      <view v-if="!voiceMode && inputText.trim()" class="send-btn send-btn-active" @tap="onSend">
        <uni-icons type="paperplane" size="22" color="#FFFFFF" />
      </view>
      <view v-else class="more-btn" @tap="toggleMorePanel">
        <uni-icons type="plusempty" :size="22" color="#64748B" />
      </view>
    </view>
    <MorePanel
      :visible="showMorePanel"
      @choose-image="onChooseImage"
      @choose-file="onChooseFile"
    />
  </view>
</template>

<script>
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { ref, computed, nextTick, watch } from 'vue'
import { useChatStore } from '@/store/chat'
import { useGroupStore } from '@/store/group'
import { useUserStore } from '@/store/user'
import { GROUP_ROLE } from '@/constants/group'
import { uploadImage, uploadFile, uploadVoice } from '@/api/file'
import MsgText from '@/components/msg/MsgText.vue'
import MsgImage from '@/components/msg/MsgImage.vue'
import MsgVoice from '@/components/msg/MsgVoice.vue'
import MsgFile from '@/components/msg/MsgFile.vue'
import MorePanel from '@/components/chat/MorePanel.vue'
import VoiceRecorder from '@/components/chat/VoiceRecorder.vue'

export default {
  name: 'GroupConversation',
  components: { MsgText, MsgImage, MsgVoice, MsgFile, MorePanel, VoiceRecorder },
  setup() {
    const chatStore = useChatStore()
    const groupStore = useGroupStore()
    const userStore = useUserStore()

    const conversationId = ref(0)
    const groupId = ref(0)
    const groupName = ref('')
    const groupAvatar = ref('')
    const inputText = ref('')
    const scrollToId = ref('')
    const loadingMore = ref(false)
    const showAtPicker = ref(false)
    const atUserIds = ref([])
    const voiceMode = ref(false)
    const showMorePanel = ref(false)

    // 滚动位置感知（与单聊一致）：远离底部时新消息转为悬浮提示，避免视图未见却已标已读
    // 使用 maxScrollTop 追踪策略：scrollTop 相对历史最大值回退 > 150 视为远离底部
    const nearBottom = ref(true)
    const newMsgCount = ref(0)
    let scrollReady = false
    let maxScrollTop = 0

    const messages = computed(() => chatStore.currentMessages)
    const hasMore = computed(() => chatStore.hasMoreMap[conversationId.value] !== false)
    const selfAvatar = computed(() => userStore.userInfo?.avatar || '')
    const selfName = computed(() => userStore.userInfo?.nickname || userStore.userInfo?.username || '我')
    const myId = computed(() => Number(userStore.userInfo?.id) || 0)
    const memberCount = computed(() => groupStore.currentMembers.length || 0)

    /** 构建成员 ID → 信息的映射，用于显示发送者昵称 / 头像 */
    const memberMap = computed(() => {
      const map = {}
      for (const m of groupStore.currentMembers) {
        map[m.user_id] = m
      }
      return map
    })

    /** @选择器中排除自己的成员列表 */
    const atMemberList = computed(() => {
      return groupStore.currentMembers.filter(m => m.user_id !== myId.value)
    })

    /** 当前用户在群中的角色（用于判断撤回权限） */
    const myRole = computed(() => {
      const me = memberMap.value[myId.value]
      return me ? me.role : GROUP_ROLE.MEMBER
    })

    /** 当前群是否全体禁言 */
    const isAllMuted = computed(() => {
      return groupStore.currentGroup?.is_all_muted === true
    })

    /** 当前用户是否被禁言（个人禁言或全体禁言且非管理员/群主） */
    const isMuted = computed(() => {
      const me = memberMap.value[myId.value]
      if (!me) return false
      if (me.is_muted) return true
      if (isAllMuted.value && me.role === GROUP_ROLE.MEMBER) return true
      return false
    })

    const isSelf = (msg) => {
      return msg.sender_id === myId.value
    }

    const getMemberName = (userId) => {
      const member = memberMap.value[userId]
      if (member) return member.nickname || member.user_nickname || '未知'
      return '未知成员'
    }

    const getMemberAvatar = (userId) => {
      const member = memberMap.value[userId]
      return member ? member.avatar : ''
    }

    /** 群聊已读标签：自己发送的消息始终显示 "X人已读"（含 0 人） */
    const getReadLabel = (msg) => {
      if (msg.status === 2 || msg._sending || msg._failed || !msg.id) return ''
      if (msg.sender_id !== myId.value) return ''
      const count = chatStore.groupReadCountMap[msg.id] || 0
      return `${count}人已读`
    }

    // ==================== 生命周期 ====================

    onLoad(async (query) => {
      conversationId.value = parseInt(query.conversationId) || 0
      groupId.value = parseInt(query.groupId) || 0
      groupName.value = decodeURIComponent(query.peerName || '')
      groupAvatar.value = decodeURIComponent(query.peerAvatar || '')

      chatStore.initWsListeners()
      groupStore.initWsListeners()

      if (conversationId.value) {
        chatStore.setCurrentConversation(conversationId.value)
        loadInitialMessages()
      }

      if (!groupId.value && conversationId.value) {
        const conv = chatStore.conversationList.find(c => c.id === conversationId.value)
        if (conv && conv.group_id) {
          groupId.value = conv.group_id
        }
      }

      if (groupId.value) {
        groupStore.fetchMembers(groupId.value)
        groupStore.fetchGroupDetail(groupId.value)
      }
    })

    onUnload(() => {
      chatStore.setCurrentConversation(null)
    })

    watch(() => chatStore.currentConversationId, (newId) => {
      if (newId && newId !== conversationId.value) {
        conversationId.value = newId
      }
    })

    // ==================== 消息加载 ====================

    const loadInitialMessages = async () => {
      if (!chatStore.messagesMap[conversationId.value]?.length) {
        await chatStore.loadHistoryMessages(conversationId.value)
      }
      scrollToBottom()
      markVisibleMessagesRead()
      nextTick(() => { scrollReady = true })
    }

    const scrollToBottom = () => {
      nextTick(() => {
        scrollToId.value = ''
        nextTick(() => { scrollToId.value = 'msg-bottom' })
      })
    }

    /** 标记当前可见消息为已读 */
    const markVisibleMessagesRead = () => {
      const msgs = chatStore.messagesMap[conversationId.value] || []
      const messageIds = msgs.filter(m => m.id && m.sender_id !== myId.value).map(m => m.id)
      if (messageIds.length > 0) {
        chatStore.markGroupRead(conversationId.value, messageIds)
      }
    }

    /** 滚动事件：维护 maxScrollTop 并判断是否贴底（与单聊一致） */
    const onScroll = (e) => {
      if (!scrollReady) return
      const scrollTop = e.detail?.scrollTop
      if (typeof scrollTop !== 'number') return
      if (scrollTop > maxScrollTop) maxScrollTop = scrollTop
      const wasNear = nearBottom.value
      nearBottom.value = (maxScrollTop - scrollTop) < 150
      if (!wasNear && nearBottom.value) {
        if (newMsgCount.value > 0) newMsgCount.value = 0
        markVisibleMessagesRead()
      }
    }

    /** 滚动接近底部触发：将 nearBottom 置 true 并立即标记已读 */
    const onScrollToLower = () => {
      nearBottom.value = true
      if (newMsgCount.value > 0) {
        newMsgCount.value = 0
      }
      markVisibleMessagesRead()
    }

    /** 点击悬浮提示：滚到底、清零、标记已读 */
    const jumpToBottom = () => {
      scrollToBottom()
      newMsgCount.value = 0
      nearBottom.value = true
      markVisibleMessagesRead()
    }

    // ==================== 消息发送 ====================

    const onSend = () => {
      const content = inputText.value.trim()
      if (!content) return
      chatStore.sendMessage({
        conversationId: conversationId.value,
        content,
        type: 1,
        at_user_ids: atUserIds.value.length > 0 ? [...atUserIds.value] : undefined
      })
      inputText.value = ''
      atUserIds.value = []
      scrollToBottom()
    }

    /** 输入变化检测：输入 @ 时弹出成员选择器 */
    const onInputChange = (e) => {
      const val = e.detail.value || inputText.value
      if (val.endsWith('@')) {
        showAtPicker.value = true
      }
    }

    /** 选择 @成员（null 表示 @所有人） */
    const onSelectAtMember = (member) => {
      showAtPicker.value = false
      if (member === null) {
        atUserIds.value.push(0)
        inputText.value = inputText.value + '所有人 '
      } else {
        atUserIds.value.push(member.user_id)
        const name = member.nickname || member.user_nickname || ''
        inputText.value = inputText.value + name + ' '
      }
    }

    // ==================== 加载更多 ====================

    const onLoadMore = async () => {
      if (loadingMore.value || !hasMore.value) return
      loadingMore.value = true
      try { await chatStore.loadHistoryMessages(conversationId.value) }
      finally { loadingMore.value = false }
    }

    // ==================== 消息撤回 ====================

    /**
     * 撤回权限判断
     * - 管理员/群主：可撤回任何人消息，无时间限制
     * - 普通成员：仅可撤回自己消息，2 分钟内
     */
    const canRecall = (msg) => {
      if (msg.status === 2 || !msg.id) return false
      const isAdmin = myRole.value === GROUP_ROLE.OWNER || myRole.value === GROUP_ROLE.ADMIN
      if (isAdmin) return true
      if (!isSelf(msg)) return false
      if (!msg.created_at) return false
      return (Date.now() - new Date(msg.created_at).getTime()) < 2 * 60 * 1000
    }

    const onMsgLongPress = (msg) => {
      if (msg.status === 2 || !canRecall(msg)) return
      uni.showActionSheet({
        itemList: ['撤回'],
        success: (res) => {
          if (res.tapIndex === 0 && msg.id) chatStore.recallMessage(msg.id)
        }
      })
    }

    const onResend = (msg) => {
      uni.showModal({
        title: '提示',
        content: '是否重新发送？',
        success: (res) => {
          if (res.confirm) {
            chatStore.sendMessage({
              conversationId: conversationId.value,
              content: msg.content,
              type: msg.type || 1
            })
          }
        }
      })
    }

    // ==================== 导航 ====================

    const goBack = () => {
      if (getCurrentPages().length > 1) {
        uni.navigateBack()
      } else {
        uni.switchTab({ url: '/pages/chat/index' })
      }
    }

    const goToSettings = () => {
      uni.navigateTo({
        url: `/pages/group/settings?groupId=${groupId.value}&conversationId=${conversationId.value}&peerName=${encodeURIComponent(groupName.value)}&peerAvatar=${encodeURIComponent(groupAvatar.value)}`
      })
    }

    const goToReadDetail = (msg) => {
      if (!msg.id) return
      uni.navigateTo({
        url: `/pages/chat/read-detail?messageId=${msg.id}`
      })
    }

    // ==================== 富媒体消息 ====================

    const toggleVoiceMode = () => {
      voiceMode.value = !voiceMode.value
      showMorePanel.value = false
    }

    const toggleMorePanel = () => {
      showMorePanel.value = !showMorePanel.value
      voiceMode.value = false
    }

    const onChooseImage = async () => {
      showMorePanel.value = false
      uni.chooseImage({
        count: 9,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          const images = []
          for (const path of res.tempFilePaths) {
            try {
              uni.showLoading({ title: '上传中...' })
              const result = await uploadImage(path)
              images.push({
                url: result.url,
                thumbnail_url: result.thumbnail_url,
                width: result.width,
                height: result.height,
                size: result.size,
                file_name: result.file_name
              })
            } catch (e) {
              uni.showToast({ title: e?.message || '图片上传失败', icon: 'none' })
            } finally {
              uni.hideLoading()
            }
          }
          if (images.length > 0) {
            chatStore.sendImageMessage({ conversationId: conversationId.value, images })
            scrollToBottom()
          }
        }
      })
    }

    const onChooseFile = async () => {
      showMorePanel.value = false
      // #ifdef H5
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = async (e) => {
        const file = e.target.files[0]
        if (!file) return
        if (file.size > 50 * 1024 * 1024) {
          uni.showToast({ title: '文件大小不能超过 50MB', icon: 'none' })
          return
        }
        try {
          uni.showLoading({ title: '上传中...' })
          const result = await uploadFile(URL.createObjectURL(file), file.name)
          chatStore.sendFileMessage({
            conversationId: conversationId.value,
            file: {
              url: result.url,
              // 优先使用前端原始文件名（H5 下 blob URL 会丢失原名）
              file_name: file.name || result.file_name,
              size: result.size,
              mime_type: file.type || 'application/octet-stream',
              ext: '.' + (file.name.split('.').pop() || '')
            }
          })
          scrollToBottom()
        } catch (e) {
          uni.showToast({ title: e?.message || '文件上传失败', icon: 'none' })
        } finally {
          uni.hideLoading()
        }
      }
      input.click()
      // #endif
      // #ifndef H5
      uni.chooseFile({
        count: 1,
        success: async (res) => {
          const file = res.tempFiles[0]
          if (file.size > 50 * 1024 * 1024) {
            uni.showToast({ title: '文件大小不能超过 50MB', icon: 'none' })
            return
          }
          try {
            uni.showLoading({ title: '上传中...' })
            const result = await uploadFile(file.path, file.name)
            chatStore.sendFileMessage({
              conversationId: conversationId.value,
              file: {
                url: result.url,
                file_name: file.name || result.file_name,
                size: result.size,
                mime_type: file.type || 'application/octet-stream',
                ext: '.' + (file.name.split('.').pop() || '')
              }
            })
            scrollToBottom()
          } catch (e) {
            uni.showToast({ title: e?.message || '文件上传失败', icon: 'none' })
          } finally {
            uni.hideLoading()
          }
        }
      })
      // #endif
    }

    const mimeTypeToExt = (mime) => {
      if (!mime) return ''
      const m = mime.toLowerCase()
      if (m.includes('webm')) return 'webm'
      if (m.includes('ogg')) return 'ogg'
      if (m.includes('mp4') || m.includes('aac')) return 'm4a'
      if (m.includes('mpeg') || m.includes('mp3')) return 'mp3'
      if (m.includes('wav')) return 'wav'
      return ''
    }

    const onVoiceRecorded = async ({ tempFilePath, duration, blob, mimeType }) => {
      try {
        uni.showLoading({ title: '发送中...' })
        const ext = mimeTypeToExt(mimeType)
        const fileName = ext ? `voice-${Date.now()}.${ext}` : undefined
        const result = await uploadVoice(tempFilePath, duration, fileName, blob)
        chatStore.sendVoiceMessage({
          conversationId: conversationId.value,
          voice: { url: result.url, duration: result.duration || duration, size: result.size, file_name: result.file_name }
        })
        scrollToBottom()
      } catch (e) {
        uni.showToast({ title: e?.message || '语音发送失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    }

    // ==================== 监听新消息到达，按滚动位置分流处理 ====================
    // 关键点：对比末尾消息标识，避免"加载更多"时头部插入历史消息被误计入 newMsgCount
    let lastTailKey = ''
    const getTailKey = (msg) => msg ? String(msg.id || msg.client_msg_id || '') : ''
    watch(
      () => messages.value.length,
      (newLen) => {
        if (!scrollReady) return
        const tail = messages.value[newLen - 1]
        const tailKey = getTailKey(tail)
        if (!tailKey || tailKey === lastTailKey) {
          lastTailKey = tailKey || lastTailKey
          return
        }
        const prevKey = lastTailKey
        lastTailKey = tailKey
        if (!prevKey) return

        // 系统消息（type===10 或 sender_id===0）与自己发的消息，不计入悬浮计数
        const isSystem = tail.type === 10 || tail.sender_id === 0
        const fromSelf = tail.sender_id === myId.value
        if (isSystem || fromSelf) {
          if (nearBottom.value) scrollToBottom()
          return
        }

        if (nearBottom.value) {
          scrollToBottom()
          markVisibleMessagesRead()
        } else {
          newMsgCount.value += 1
        }
      }
    )

    return {
      GROUP_ROLE,
      groupName, groupAvatar, selfAvatar, selfName,
      inputText, scrollToId, loadingMore, memberCount,
      messages, hasMore, showAtPicker, atMemberList, isMuted, isAllMuted,
      newMsgCount,
      isSelf, getMemberName, getMemberAvatar, getReadLabel,
      onSend, onInputChange, onSelectAtMember,
      onLoadMore, onMsgLongPress, onResend,
      onScroll, onScrollToLower, jumpToBottom,
      goBack, goToSettings, goToReadDetail,
      voiceMode, showMorePanel,
      toggleVoiceMode, toggleMorePanel,
      onChooseImage, onChooseFile, onVoiceRecorded,
    }
  }
}
</script>

<style scoped>
.page-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #F1F5F9;
  overflow: hidden;
}

/* ===== 导航栏 ===== */
.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 24rpx;
  padding-top: var(--status-bar-height, 44px);
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #E2E8F0;
}
.nav-left, .nav-right {
  min-width: 88rpx;
  min-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms ease;
}
.nav-left:active, .nav-right:active { opacity: 0.6; }
.nav-center {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.nav-title { font-size: 32rpx; font-weight: 600; color: #1E293B; }
.nav-subtitle { font-size: 24rpx; color: #94A3B8; margin-left: 8rpx; }

/* ===== 消息列表 ===== */
.msg-list {
  flex: 1;
  height: 0;
  min-height: 0;
  padding: 16rpx 24rpx;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.load-more { text-align: center; padding: 16rpx 0; }
.load-more-text { font-size: 24rpx; color: #94A3B8; }

/* ===== 系统消息 ===== */
.msg-row-system {
  text-align: center;
  padding: 16rpx 48rpx;
  margin-bottom: 24rpx;
}
.system-text {
  font-size: 24rpx;
  color: #94A3B8;
  line-height: 36rpx;
  background-color: rgba(148, 163, 184, 0.12);
  padding: 8rpx 20rpx;
  border-radius: 12rpx;
}

/* ===== 消息行 ===== */
.msg-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
}
.msg-row-other { justify-content: flex-start; }
.msg-row-self { justify-content: flex-end; }

/* ===== 头像 ===== */
.avatar-wrap { flex-shrink: 0; }
.msg-row-other .avatar-wrap { margin-right: 16rpx; }
.msg-row-self .avatar-wrap { margin-left: 16rpx; }

.avatar-img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 18rpx;
}
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-peer { background-color: #2563EB; }
.avatar-self { background-color: #64748B; }
.avatar-all { background-color: #F59E0B; }
.avatar-char { color: #FFFFFF; font-size: 28rpx; font-weight: 600; }

/* ===== 发送者昵称 + 气泡列 ===== */
.bubble-col {
  display: flex;
  flex-direction: column;
  max-width: 65vw;
}
.sender-name {
  font-size: 22rpx;
  color: #94A3B8;
  margin-bottom: 6rpx;
  line-height: 30rpx;
}

/* ===== 气泡 ===== */
.bubble {
  max-width: 65vw;
  padding: 20rpx 24rpx;
  border-radius: 24rpx;
  word-break: break-word;
  overflow-wrap: break-word;
}
.bubble-self {
  background-color: #2563EB;
  border-bottom-right-radius: 8rpx;
}
.bubble-other {
  background-color: #FFFFFF;
  border-bottom-left-radius: 8rpx;
}
.bubble-recalled {
  background-color: transparent !important;
  padding: 8rpx 16rpx;
}

.msg-text { font-size: 30rpx; line-height: 42rpx; color: #1E293B; }
.msg-text-self { color: #FFFFFF; }
.recalled-text { font-size: 24rpx; color: #94A3B8; font-style: italic; }

/* ===== 自己消息布局（含已读标记） ===== */
.self-msg-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.self-msg-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.read-label {
  font-size: 20rpx;
  margin-top: 4rpx;
  margin-right: 88rpx;
  color: #2563EB;
}

/* ===== 发送状态 ===== */
.msg-status {
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0 8rpx;
}
.msg-status-tap {
  min-width: 44rpx;
  min-height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== @成员选择器 ===== */
.at-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}
.at-panel {
  width: 100%;
  max-height: 60vh;
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.at-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #E2E8F0;
}
.at-header-text { font-size: 30rpx; font-weight: 600; color: #1E293B; }
.at-close {
  min-width: 44rpx;
  min-height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-member-list {
  flex: 1;
  max-height: 50vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.at-member-item {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx;
  transition: background-color 150ms ease;
}
.at-member-item:active { background-color: #F8FAFC; }
.at-avatar { width: 64rpx; height: 64rpx; border-radius: 16rpx; }
.at-member-name {
  flex: 1;
  font-size: 28rpx;
  color: #1E293B;
  margin-left: 20rpx;
}
.at-role-tag {
  font-size: 22rpx;
  color: #2563EB;
  background-color: rgba(37, 99, 235, 0.08);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}

/* ===== 输入栏 ===== */
.input-bar {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom, 0));
  background-color: #FFFFFF;
  border-top: 1rpx solid #E2E8F0;
}
.input-wrap {
  flex: 1;
  background-color: #F1F5F9;
  border-radius: 36rpx;
  padding: 0 28rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
}
.msg-input { flex: 1; font-size: 28rpx; color: #1E293B; }
.send-btn {
  min-width: 72rpx;
  min-height: 72rpx;
  margin-left: 16rpx;
  border-radius: 50%;
  background-color: #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease;
}
.send-btn-active { background-color: #2563EB; }
.send-btn:active { opacity: 0.85; }

/* ===== 禁言状态 ===== */
.input-bar-muted {
  justify-content: center;
}
.muted-tip {
  font-size: 26rpx;
  color: #94A3B8;
  text-align: center;
}

/* ===== 语音/更多 ===== */
.voice-toggle-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  border-radius: 50%;
  background-color: #F1F5F9;
}
.voice-toggle-btn:active { background-color: #E2E8F0; }
.more-btn {
  min-width: 72rpx;
  min-height: 72rpx;
  margin-left: 16rpx;
  border-radius: 50%;
  background-color: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.more-btn:active { background-color: #E2E8F0; }
.bubble-media {
  max-width: 420rpx;
}

/* ===== 新消息悬浮提示（远离底部时展示，点击滚到底并标记已读） ===== */
.new-msg-hint {
  position: fixed;
  right: 32rpx;
  bottom: calc(120rpx + env(safe-area-inset-bottom, 0rpx));
  display: flex;
  align-items: center;
  padding: 12rpx 24rpx;
  background-color: #FFFFFF;
  border: 1rpx solid #E2E8F0;
  border-radius: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.12);
  z-index: 10;
  transition: opacity 150ms ease, transform 150ms ease;
}
.new-msg-hint:active {
  opacity: 0.85;
  transform: translateY(1rpx);
}
.new-msg-hint-text {
  font-size: 24rpx;
  color: #2563EB;
  margin-left: 6rpx;
  font-weight: 500;
}
</style>
