<template>
  <PhoneMockup :theme="settings.theme" :class="{ 'ios-font': settings.phoneModel === 'ios' }">
    <!-- Status Bar -->
    <StatusBar :time="settings.statusTime" :battery="settings.battery" :signal="settings.signal" :wifi="settings.wifi"
      :is-charging="settings.isCharging" :theme="settings.theme"
      :bgColor="settings.theme == 'light' ? '#ECECEC' : '#111111'" />

    <!-- Nav Bar -->
    <div class="nav-bar">
      <div class="between-box left-box">
        <img class="back-icon" :src="`/src/public/common/back-${settings.theme}.png`" alt="">
        <span v-if="settings.unread > 0" class="unread">{{ settings.unread }}</span>
      </div>
      <div class="center-box" :style="{ 'margin-right': !settings.earpiece && !settings.notDisturb ? '0' : '14px' }">
        <div class="title-wrapper">
          <div class="text-primary">{{ settings.theirName }}</div>
          <div class="icons-wrapper">
            <img v-if="settings.earpiece" class="icon tingtong" src="@/public/wx-chat/tingtong.png" alt="">
            <img v-if="settings.notDisturb" class="icon miandarao" src="@/public/wx-chat/miandarao.png" alt="">
          </div>
        </div>
      </div>
      <div class="between-box right-box">
        <img class="back-icon" :src="`/src/public/common/more-${settings.theme}.png`" alt="">
      </div>

    </div>


    <!-- Chat Area -->
    <div class="chat-area" :style="chatAreaStyle">
      <!-- Messages -->
      <div v-for="(msg, idx) in messages" :key="msg.id" :class="['msg-row', msg.type, msg.sender]">

        <!-- Time divider -->
        <div v-if="msg.type === 'time'" class="flex-row flex-1" style="justify-content: center;display: flex;">
          <div class="time-divider" :class="{ 'has-bg': settings.wallpaper, 'dark': settings.theme == 'dark' }">
            {{ formatTimeDisplay(msg.timeText) }}
          </div>
        </div>

        <!-- System message -->
        <div v-else-if="msg.type === 'system'" class="flex-row flex-1" style="justify-content: center;display: flex;">
          <div class="system-msg" :class="{ 'has-bg': settings.wallpaper, 'dark': settings.theme == 'dark' }"
            v-html="msg.content"></div>
        </div>


        <!-- Text message -->
        <div v-else-if="msg.type === 'text'" class="bubble-wrap" :class="msg.sender">
          <img :src="getAvatar(msg.sender)" class="avatar" alt="" />
          <div class="bubble text-bubble" :class="{ 'failed': msg.status === 'failed' && msg.sender === 'me' }">
            <span v-html="msg.content"></span>
          </div>
        </div>

        <!-- Red packet -->
        <div v-else-if="msg.type === 'redpacket'" class="bubble-wrap" :class="msg.sender">
          <img :src="getAvatar(msg.sender)" class="avatar" alt="" />
          <div class="bubble redpacket-bubble"
            :class="{ 'failed': msg.status === 'failed' && msg.sender === 'me', 'rp-received': msg.status != 'send' }">
            <div class="rp-content flex-row flex-1">
              <div class="rp-icon">
                <img style="width: 100%;height: 100%;"
                  :src="`/src/public/wx-chat/${msg.status == 'received' ? 'open-red-bag' : 'red-bag'}${settings.theme === 'dark' ? '-dark' : ''}.png`"
                  alt="">
              </div>
              <div class="flex column">
                <span class="rp-text">{{ truncateText(msg.title || '恭喜发财，大吉大利', 144, 16) }}</span>
                <span v-if="msg.status != 'send'" class="rp-desc-text">{{ msg.status == 'received' ? '已领取' : '已过期'
                }}</span>
              </div>
            </div>
            <div class="rp-label">微信红包</div>
          </div>
        </div>

        <!-- Transfer -->
        <div v-else-if="msg.type === 'transfer'" class="bubble-wrap" :class="msg.sender">
          <img :src="getAvatar(msg.sender)" class="avatar" alt="" />
          <div class="bubble transfer-bubble" :class="{
            'failed': msg.status === 'failed' && msg.sender === 'me',
            'tr-received': msg.status === 'received' || msg.status === 'returned',
            'tr-expired': msg.status === 'expired'
          }">
            <div class="rp-content tr-content-box flex-row flex-1">
              <div class="tr-icon">
                <img v-if="msg.status == 'expired'" style="width: 100%;height: 100%;"
                  :src="`/src/public/wx-chat/zhuanzhang-yiguoqi${settings.theme === 'dark' ? '-dark' : ''}.png`" alt="">
                <img v-else-if="msg.status == 'received'" style="width: 100%;height: 100%;"
                  :src="`/src/public/wx-chat/zhuanzhang-yijieshou${settings.theme === 'dark' ? '-dark' : ''}.png`"
                  alt="">
                <img v-else-if="msg.status == 'returned'" style="width: 100%;height: 100%;"
                  :src="`/src/public/wx-chat/zhuanzhang-yituihuan${settings.theme === 'dark' ? '-dark' : ''}.png`"
                  alt="">
                <img v-else style="width: 100%;height: 100%;"
                  :src="`/src/public/wx-chat/zhuanzhang-weijieshou${settings.theme === 'dark' ? '-dark' : ''}.png`"
                  alt="">
              </div>
              <div class="tr-content">
                <div class="tr-amount wx-font-regular"> <span class="symbol">¥</span>{{ (msg.amount || 0).toFixed(2) }}
                </div>
                <div class="tr-remark">{{ truncateText(msg.remark || '你发起了一笔转账', 155, 12) }}</div>
              </div>
            </div>
            <div class="tr-label">微信转账</div>
          </div>
        </div>

        <!-- Call Message (Video/Audio) -->
        <div v-else-if="msg.type === 'call'" class="bubble-wrap" :class="msg.sender">
          <img :src="getAvatar(msg.sender)" class="avatar" alt="" />
          <div class="bubble text-bubble" style="display: flex; align-items: center; gap: 6px; padding: 10px 14px;">
            <template v-if="msg.sender === 'me'">
              <span style="font-size: 15px;">{{ getCallText(msg) }}</span>
              <img v-if="msg.callType === 'video'" class="call-icon" src="@/public/wx-chat/video-light.png" alt="">
              <img v-else class="call-icon" src="@/public/wx-chat/voice-light.png" alt="">
            </template>
            <template v-else>
              <img v-if="msg.callType === 'video'" class="call-icon other"
                :src="`/src/public/wx-chat/video-${settings.theme === 'dark' ? 'dark' : 'light'}.png`" alt="">
              <img v-else class="call-icon other"
                :src="`/src/public/wx-chat/voice-${settings.theme === 'dark' ? 'dark' : 'light'}.png`" alt="">
              <span style="font-size: 15px;">{{ getCallText(msg) }}</span>
            </template>
          </div>
        </div>

        <!-- Voice Message (Hold-to-talk) -->
        <div v-else-if="msg.type === 'voice'" class="bubble-wrap" :class="msg.sender">
          <img :src="getAvatar(msg.sender)" class="avatar" alt="" />
          <div class="bubble text-bubble voice-msg"
            :class="{ 'failed': msg.status === 'failed' && msg.sender === 'me' }"
            :style="`display: flex; align-items: center; gap: 2px; padding: 10px 14px; width: ${getVoiceWidth(msg.duration)}px;`">
            <template v-if="msg.sender === 'me'">
              <span style="font-size: 15px; flex: 1;text-align: right;">{{ msg.duration || 1 }}"</span>
              <img class="voice-msg-icon" src="@/public/wx-chat/voice-msg-light.png" alt="">
            </template>
            <template v-else>
              <img class="voice-msg-icon other"
                :src="`/src/public/wx-chat/voice-msg-${settings.theme === 'dark' ? 'dark' : 'light'}.png`" alt="">
              <span style="font-size: 15px; flex: 1; text-align: left;">{{ msg.duration || 1 }}"</span>
            </template>
          </div>
          <!-- Unread red dot -->
          <div v-if="msg.sender === 'other' && msg.status === 'unread'"
            style="width: 8px; height: 8px; background-color: #F35651; border-radius: 50%; margin-left: 11px; margin-top: 16px;">
          </div>
          <div v-if="msg.sender === 'other' && msg.id === firstUnreadVoiceId" class="voice-text"
            :class="settings.theme">
            <span>转文字</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Input Bar -->
    <div class="input-bar" v-if="settings.showInput !== false">
      <img class="icon" :src="`/src/public/wx-chat/keyboard-${settings.theme}.png`" alt="">
      <div class="input-field">
        <span v-if="settings.voiceMode" class="text">按住 说话</span>
        <img v-if="settings.showMicIcon" class="mic" src="@/public/wx-chat/mic.png" alt="">
      </div>
      <img class="icon" :src="`/src/public/wx-chat/sticker-${settings.theme}.png`" alt="">
      <img class="icon" :src="`/src/public/wx-chat/add-${settings.theme}.png`" alt="">
    </div>

    <!-- Home Bar -->
    <HomeBar v-if="settings.showBottomBar !== false" />
  </PhoneMockup>
</template>

<script setup>
import { computed } from 'vue'
import PhoneMockup from '@/components/simulator/PhoneMockup.vue'
import StatusBar from '@/components/simulator/StatusBar.vue'
import HomeBar from '@/components/simulator/homeBar.vue'

const props = defineProps({
  messages: { type: Array, default: () => [] },
  settings: { type: Object, default: () => ({}) },
})

const displayTitle = computed(() => {
  return props.settings.title || props.settings.theirName || '微信'
})

const firstUnreadVoiceId = computed(() => {
  const msg = props.messages.find(m => m.type === 'voice' && m.sender === 'other' && m.status === 'unread')
  return msg ? msg.id : null
})

function getAvatar(sender) {
  if (sender === 'me') return props.settings.myAvatarUrl || '/src/public/header/logo-img.png'
  return props.settings.theirAvatarUrl || '/src/public/common/default-avatar.png'
}

function getVoiceWidth(dur) {
  let d = parseInt(dur, 10) || 1
  if (d > 60) d = 60
  if (d <= 1) return 70

  let w = 70
  if (d <= 10) {
    w += (d - 1) * 8
  } else {
    w += 9 * 8 // 1-10秒的总增量
    w += (d - 10) * 8 / 10
  }
  return w
}

function getCallText(msg) {
  const isMe = msg.sender === 'me'

  if (msg.status === 'connected') {
    let dur = msg.duration || '00:00'
    // 如果只输入了纯数字（例如：8 或 12），则自动转为 mm:ss
    if (/^\d+$/.test(dur)) {
      const d = parseInt(dur, 10)
      const m = Math.floor(d / 60).toString().padStart(2, '0')
      const s = (d % 60).toString().padStart(2, '0')
      dur = `${m}:${s}`
    }
    return `通话时长 ${dur}`
  }

  if (msg.status === 'refused') return isMe ? '对方已拒绝' : '已拒绝'
  if (msg.status === 'missed') return isMe ? '对方无应答' : '未应答'
  if (msg.status === 'cancelled') return isMe ? '已取消' : '对方已取消'

  if (msg.status === 'unread' || msg.status === 'read') return `${msg.duration || 1}''`

  return '中断通话'
}

function truncateText(text, maxWidth, fontSize) {
  if (!text) return ''
  let totalWidth = 0
  for (let i = 0; i < text.length; i++) {
    const charCode = text.charCodeAt(i)
    totalWidth += (charCode > 255) ? fontSize : (fontSize * 0.55)
  }
  if (totalWidth <= maxWidth) return text

  let width = 0
  let result = ''
  // 估算 '...' 的宽度，大约为 fontSize
  const limit = maxWidth - fontSize
  for (let i = 0; i < text.length; i++) {
    const charCode = text.charCodeAt(i)
    // 全角字符/中文字符算作 fontSize 宽度，半角算作 fontSize * 0.55
    const charWidth = (charCode > 255) ? fontSize : (fontSize * 0.55)
    if (width + charWidth > limit) {
      return result + '...'
    }
    width += charWidth
    result += text[i]
  }
  return text
}

function formatTimeDisplay(timeText) {
  if (!timeText) return ''

  let dateStr = timeText
  if (typeof dateStr === 'string') {
    dateStr = dateStr.replace(/年|月/g, '/').replace(/日/g, '')
    dateStr = dateStr.replace(/-/g, '/')
  }

  let date = new Date(dateStr)

  if (isNaN(date.getTime())) {
    if (/^\s*\d{1,2}:\d{1,2}(:\d{1,2})?\s*$/.test(timeText)) {
      const timeStr = timeText.trim()
      const today = new Date()
      const yyyy = today.getFullYear()
      const mm = String(today.getMonth() + 1).padStart(2, '0')
      const dd = String(today.getDate()).padStart(2, '0')
      date = new Date(`${yyyy}/${mm}/${dd} ${timeStr}`)
    }

    if (isNaN(date.getTime())) {
      return timeText
    }
  }

  const now = new Date()

  const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
  const todayDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())

  const diffTime = todayDate.getTime() - targetDate.getTime()
  const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24))

  const hhmm = date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0')

  if (diffDays === 0) {
    return hhmm
  } else if (diffDays === 1) {
    return `昨天 ${hhmm}`
  } else if (diffDays > 1 && diffDays < 7) {
    const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    return `${days[date.getDay()]} ${hhmm}`
  } else if (date.getFullYear() === now.getFullYear()) {
    return `${date.getMonth() + 1}月${date.getDate()}日 ${hhmm}`
  } else {
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${hhmm}`
  }
}

const chatAreaStyle = computed(() => {
  if (!props.settings.wallpaper) return undefined
  return {
    backgroundImage: `url(${props.settings.wallpaper})`,
    backgroundSize: 'cover',
  }
})
</script>

<style lang="scss" scoped>
.ios-font {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.flex-row {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.nav-bar {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: var(--wx-bg-secondary);
  color: var(--wx-text-primary);

  .left-box {
    display: flex;
    align-items: center;

    .unread {
      padding: 2px 6px;
      font-size: 13px;
      color: var(--wx-text-primary);
      line-height: 16px;
      background-color: var(--wx-chat-unread-bg);
      border-radius: 508px;
      height: 20px;
      margin-left: -1px;
    }
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--wx-chat-line-color);
    transform: scaleY(0.5);
  }

  .back-icon {
    width: 24px;
    height: 24px;
  }

  .right-title {
    font-size: 16px;
    color: var(--wx-text-primary);
    line-height: 23px;
    text-align: right;
  }

  .right-box {
    text-align: right;
    padding-right: 10px;
  }

  .between-box {
    width: 60px;
  }

  .center-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    margin-left: 6px;

    .title-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      max-width: calc(100%);
      /* 给绝对定位的图标留出空间，防止重叠右侧按钮 */
    }

    .text-primary {
      color: var(--wx-text-primary);
      font-size: 16px;
      line-height: 16px;
      overflow: hidden;
      white-space: nowrap;
    }

    .icons-wrapper {
      position: absolute;
      left: 100%;
      display: flex;
      align-items: center;
    }

    .icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
  }
}

.chat-area {
  flex: 1;
  overflow-y: auto;
  background: var(--wx-bg-secondary);
  padding: 12px;
  min-height: 0;

  &::-webkit-scrollbar {
    width: 0;
  }

  .time-divider {
    text-align: center;
    color: var(--wx-chat-time);
    font-size: 12px;
    line-height: 18px;
    padding: 0 3px;
    border-radius: 4px;
    margin: 8px 0;
  }

  .system-msg {
    text-align: center;
    color: #767676;
    font-size: 13px;
    padding: 0px 10px;
    line-height: 20px;
    border-radius: 4px;
    margin: 0 8px;

    &.dark {
      color: #AAAAAA;
    }
  }

  .has-bg {
    background-color: var(--wx-chat-time-bg);
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
  }

  .msg-row {
    margin-bottom: 12px;
  }

  .bubble-wrap {
    display: flex;
    align-items: flex-start;

    &.me {
      margin-left: 50px;
      flex-direction: row-reverse;

      .avatar {
        margin-left: 10px;
      }
    }

    &.other {
      margin-right: 50px;

      .avatar {
        margin-right: 10px !important;
      }
    }

    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 4px;
      flex-shrink: 0;
      margin: 0;
      object-fit: cover;
    }

    .voice-text {
      padding: 3px 7px;
      background-color: #E1E1E1;
      border-radius: 243px 243px 243px 243px;
      font-size: 11px;
      color: #A1A1A1;
      line-height: 12px;
      margin-top: 11px;
      margin-left: 8px;

      &.dark {
        background-color: #1D1D1D;
        color: #767676;
      }
    }
  }

  .bubble {
    padding: 8px 10px;
    position: relative;
    font-size: 16px;
    line-height: 1.5;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-radius: 4px;
  }

  .text-bubble {
    p {
      margin: 0;
    }

    .call-icon {
      width: 26px;
      height: 16px;
      margin-left: 2px;

      &.other {
        margin-right: 2px;
        margin-left: 0;
      }
    }

    .voice-msg-icon {
      width: 16px;
      height: 16px;

      &.other {
        transform: rotate(180deg);
      }
    }

    &.voice-msg {
      display: flex;
      justify-content: flex-end !important;
      min-width: 80px !important;
    }
  }

  .bubble-wrap.other .text-bubble {
    background: var(--wx-chat-bubble-other);
    color: var(--wx-text-primary);
    font-size: 16px;
    line-height: 22px;

    &::after {
      content: "";
      position: absolute;
      top: 14px;
      left: -4px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-top: 3px solid transparent;
      border-right: 3px solid var(--wx-chat-bubble-other);
      border-bottom: 6px solid var(--wx-chat-bubble-other);
      transform: rotate(135deg);
      border-bottom-right-radius: 2px;
    }
  }

  .bubble-wrap.me .text-bubble {
    background: var(--wx-chat-bubble-me);
    color: #1A1A1A;

    &::after {
      content: "";
      position: absolute;
      top: 14px;
      right: -4px;
      width: 0;
      height: 0;
      border-left: 6px solid var(--wx-chat-bubble-me);
      border-top: 3px solid var(--wx-chat-bubble-me);
      border-right: 3px solid transparent;
      border-bottom: 6px solid transparent;
      transform: rotate(135deg);
      border-top-left-radius: 2px;
    }
  }

  .bubble-wrap.me .bubble {
    &.failed {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        background: url('/src/public/wx-chat/send-filled.png');
        background-size: 100% 100%;
        width: 20px;
        height: 20px;
        left: -26px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }


  .redpacket-bubble,
  .transfer-bubble {
    height: 82px;
    width: 230px;
    background: var(--wx-redpacket-bg);
    color: var(--wx-redpacket-text);
    padding: 10px 13px;
    border-radius: 4px;
    position: relative;

    .rp-content {
      position: relative;
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      gap: 18px;
    }

    .tr-content-box {
      gap: 8px;
      padding-bottom: 6px;
      position: relative;
    }

    .rp-icon,
    .tr-icon {
      width: 36px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .tr-icon {
      width: 43px;
      height: 43px;
    }

    .rp-text {
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
      line-height: 20px;
    }

    .rp-desc-text {
      font-size: 11px;
      margin-top: 5px;
      color: var(--wx-redpacket-redpacket-text);
      line-height: 14px;
    }

    .tr-remark {
      font-size: 13px;
      color: var(--wx-redpacket-text);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 160px;
      /* Use width instead of max-width for html2canvas */
    }

    .rp-label,
    .tr-label {
      position: absolute;
      bottom: 6px;
      left: 13px;
      font-size: 11px;
      color: var(--wx-redpacket-desc-text);
      line-height: 12px;
    }

    padding-bottom: 24px;
  }

  .redpacket-bubble.rp-received {
    background-color: var(--wx-redpacket-received-bg);
    color: var(--wx-redpacket-redpacket-text);

    .rp-label {
      color: var(--wx-redpacket-redpacket-text);
    }
  }

  .transfer-bubble {
    padding: 12px 11px;

    .tr-amount {
      font-size: 16px;
      color: var(--wx-redpacket-text);
      line-height: 21px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .symbol {
        display: block;
        width: 15px;
        height: 21px;
        text-align: center;
        line-height: 21px;
      }
    }

    .tr-remark {
      line-height: 16px;
      margin-left: 2px;
    }

    &.tr-received {
      background-color: var(--wx-transfer-received-bg);

      .tr-amount {
        color: var(--wx-transfer-received-text);
      }

      .tr-remark {
        color: var(--wx-transfer-received-text);
      }

      .tr-label {
        color: var(--wx-transfer-received-text);
      }
    }

    &.tr-expired {
      background-color: var(--wx-transfer-expired-bg);

      .tr-amount {
        color: var(--wx-transfer-expired-text);
      }

      .tr-remark {
        color: var(--wx-transfer-expired-text);
      }

      .tr-label {
        color: var(--wx-transfer-expired-text);
      }
    }
  }

  .bubble-wrap.other .redpacket-bubble,
  .bubble-wrap.other .transfer-bubble {
    &::after {
      content: "";
      position: absolute;
      top: 14px;
      left: -4px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-top: 3px solid transparent;
      border-right: 3px solid var(--wx-redpacket-bg);
      border-bottom: 6px solid var(--wx-redpacket-bg);
      transform: rotate(135deg);
      border-bottom-right-radius: 2px;
    }

    &.rp-received::after {
      border-left: 6px solid transparent;
      border-top: 3px solid transparent;
      border-right: 3px solid var(--wx-redpacket-received-bg);
      border-bottom: 6px solid var(--wx-redpacket-received-bg);
    }

    &.tr-received::after {
      border-left: 6px solid transparent;
      border-top: 3px solid transparent;
      border-right: 3px solid var(--wx-transfer-received-bg);
      border-bottom: 6px solid var(--wx-transfer-received-bg);
    }

    &.tr-expired::after {
      border-left: 6px solid transparent;
      border-top: 3px solid transparent;
      border-right: 3px solid var(--wx-transfer-expired-bg);
      border-bottom: 6px solid var(--wx-transfer-expired-bg);
    }
  }

  .bubble-wrap.me .redpacket-bubble,
  .bubble-wrap.me .transfer-bubble {
    &::after {
      content: "";
      position: absolute;
      top: 14px;
      right: -4px;
      width: 0;
      height: 0;
      border-left: 6px solid var(--wx-redpacket-bg);
      border-top: 3px solid var(--wx-redpacket-bg);
      border-right: 3px solid transparent;
      border-bottom: 6px solid transparent;
      transform: rotate(135deg);
      border-top-left-radius: 2px;
    }

    &.rp-received::after {
      border-left: 6px solid var(--wx-redpacket-received-bg);
      border-top: 3px solid var(--wx-redpacket-received-bg);
      border-right: 3px solid transparent;
      border-bottom: 6px solid transparent;
    }

    &.tr-received::after {
      border-left: 6px solid var(--wx-transfer-received-bg);
      border-top: 3px solid var(--wx-transfer-received-bg);
      border-right: 3px solid transparent;
      border-bottom: 6px solid transparent;
    }

    &.tr-expired::after {
      border-left: 6px solid var(--wx-transfer-expired-bg);
      border-top: 3px solid var(--wx-transfer-expired-bg);
      border-right: 3px solid transparent;
      border-bottom: 6px solid transparent;
    }
  }
}

.input-bar {
  position: relative;
  background: var(--wx-chat-input-bg-color);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  padding-bottom: 42px;
  padding-top: 8px;

  .icon {
    width: 30px;
    height: 30px;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--wx-chat-line-color);
    transform: scaleY(0.5);
  }

  .input-icon {
    font-size: 26px;
    cursor: pointer;
    color: var(--wx-chat-line-color);
  }

  .input-field {
    flex: 1;
    position: relative;
    height: 38px;
    background: var(--wx-chat-bubble-other);
    border-radius: 4px;
    border: none;
    margin-right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;

    .text {
      font-size: 16px;
      color: #1A1A1A;
      line-height: 21px;
      font-weight: 500;
    }

    .mic {
      width: 26px;
      height: 26px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .add-icon {
    width: 28px;
    height: 28px;
    background: var(--wx-bg-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
  }
}
</style>
<style>
.flex.column {
  display: flex;
  flex-direction: column;
}
</style>
