<div class="clue-player-chat-app">
  <div class="clue-player-chat-messages">
    {{#if messages.length}}
      {{#each messages}}
        <div class="clue-chat-msg {{#if this.isSelf}}is-self{{else}}is-other{{/if}}">
          <div class="clue-chat-msg-meta">
            <span class="clue-chat-msg-sender">{{this.senderName}}</span>
            <span class="clue-chat-msg-time">{{this.timeStr}}</span>
          </div>
          {{#if this.audio}}
            <div class="clue-chat-msg-voice" data-voice-duration="{{this.duration}}">
              <audio preload="metadata" src="data:audio/webm;base64,{{this.audio}}"></audio>
              <button type="button" class="clue-voice-play-btn" data-voice-play><i class="fas fa-play"></i></button>
              <div class="clue-voice-waveform" data-voice-seek>
                <div class="clue-voice-waveform-progress"></div>
              </div>
              <span class="clue-voice-duration">0:00</span>
            </div>
          {{else}}
            <div class="clue-chat-msg-text">{{this.text}}</div>
          {{/if}}
        </div>
      {{/each}}
    {{else}}
      <div class="clue-chat-empty">No messages yet. The GM will reach out soon!</div>
    {{/if}}
  </div>
  <div class="clue-chat-input-row">
    <input type="text" class="clue-chat-input" placeholder="Type a message...">
    <button type="button" class="clue-chat-voice-btn" data-action="voice-record" title="Record voice message">
      <i class="fas fa-microphone"></i>
    </button>
    <button type="button" class="clue-chat-send-btn" data-action="send-reply">
      <i class="fas fa-paper-plane"></i>
    </button>
  </div>
</div>
