<div class="clue-browser-app clue-browser-compact clue-browser-player-compact">
  <div class="clue-compact-inner">

    {{!-- Tab strip --}}
    <div class="clue-compact-tabstrip">
      <button type="button" class="clue-compact-tab {{#if (eq currentTab "clues")}}is-active{{/if}}"
        data-action="switch-tab" data-tab="clues">
        <i class="fas fa-cards"></i>
        <span>Clues</span>
      </button>
      <button type="button" class="clue-compact-tab {{#if (eq currentTab "messages")}}is-active{{/if}}"
        data-action="switch-tab" data-tab="messages">
        <i class="fas fa-comments"></i>
        <span>Messages</span>
      </button>
    </div>

    {{!-- Toolbar --}}
    <div class="clue-compact-toolbar">
      {{#if (eq currentTab "clues")}}
        <button type="button" class="clue-browser-back-button" data-action="go-back-folder"
          {{#unless canGoBack}}disabled{{/unless}}>
          <i class="fas fa-arrow-left"></i>
        </button>
        <div class="clue-browser-location">
          <div class="clue-browser-location-label">Current Location</div>
          <div class="clue-browser-location-name">{{currentFolderName}}</div>
        </div>
      {{else}}
        <div class="clue-browser-location">
          <div class="clue-browser-location-label">Messages</div>
          <div class="clue-browser-location-name">GM</div>
        </div>
      {{/if}}
      <div class="clue-compact-actions">
        {{#if (eq currentTab "clues")}}
          <button type="button" class="clue-compact-btn" data-action="new-personal-clue" title="New Personal Clue">
            <i class="fas fa-plus"></i>
          </button>
          <button type="button" class="clue-compact-btn clue-compact-expand-btn" data-action="expand-window" title="Open Full View">
            <i class="fas fa-expand-arrows-alt"></i>
          </button>
        {{/if}}
        <button type="button" class="clue-compact-btn clue-compact-board-btn" data-action="open-clue-board" title="Open Clue Board">
          <i class="fas fa-thumbtack"></i>
        </button>
      </div>
    </div>

    {{!-- ═══════════════════ CLUES TAB ═══════════════════ --}}
    {{#if (eq currentTab "clues")}}
      {{#if hasParentDropTarget}}
        <div class="clue-browser-parent-drop" style="cursor:pointer;" data-action="go-back-folder"
          data-folder-drop-parent="true"
          title="Go back to parent folder">
          <div class="clue-browser-parent-drop-icon"><i class="fas fa-level-up-alt"></i></div>
          <div class="clue-browser-parent-drop-text">
            <strong>Move Back</strong>
            <span>Parent{{#unless parentFolderId}} / root{{/unless}}</span>
          </div>
        </div>
      {{/if}}
      <div class="clue-browser-left-scroll">
        <div class="clue-browser-entry-grid">
          {{#each visibleEntries}}
            {{#if (eq this.entryType "folder")}}
              <article
                class="clue-browser-item clue-folder-tile"
                data-folder-tile-id="{{this.id}}"
                data-folder-drop-id="{{this.id}}"
                style="--folder-color: {{this.color}}; --folder-text-color: {{this.textColor}};"
              >
                <div class="clue-folder-tile-top">
                  <textarea class="clue-folder-tile-name-input" rows="1"
                    data-folder-name-input="{{this.id}}">{{this.name}}</textarea>
                </div>
                <div class="clue-folder-tile-center">
                  <div class="clue-folder-tile-icon"><i class="fas fa-folder"></i></div>
                </div>
                <div class="clue-folder-tile-actions">
                  <label class="clue-folder-color-button" title="Change folder color">
                    <input type="color" value="{{this.color}}" data-folder-color-input="{{this.id}}">
                    <i class="fas fa-palette"></i>
                  </label>
                  <label class="clue-folder-color-button" title="Change folder text color">
                    <input type="color" value="{{this.textColor}}" data-folder-text-color-input="{{this.id}}">
                    <i class="fas fa-font"></i>
                  </label>
                  <button type="button" data-action="delete-folder" data-folder-id="{{this.id}}">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </article>
            {{/if}}
            {{#if (eq this.entryType "clue")}}
              <article
                class="clue-browser-item clue-tile-card {{#if this.isSelected}}is-selected{{/if}} {{#if this.isPersonal}}is-personal{{/if}} {{#if this.isHandout}}is-handout{{/if}}"
                style="{{#if this.isHandout}}--handout-aspect: {{this.handoutAspectRatio}};{{/if}}"
                data-select-clue-id="{{this.id}}"
                data-drag-clue-id="{{this.id}}"
                draggable="true"
              >
                <div class="clue-tile-media{{#if this.externalType}} clue-external-paper{{/if}}" {{#if this.externalType}}data-external-clue-tile="{{this.id}}"{{/if}}>
                  {{#if this.externalType}}
                    {{#if this.imagePath}}<img src="{{this.imagePath}}" alt="{{this.title}}" draggable="false">{{/if}}
                  {{else}}
                    {{#if this.imagePath}}
                      <img src="{{this.imagePath}}" alt="{{this.title}}" draggable="false"
                        style="object-position: {{this.imagePositionX}}% {{this.imagePositionY}}%;
                               transform: scale({{this.imageScale}});">
                    {{else}}
                      <div class="clue-tile-no-image" style="background: {{this.fallbackColor}};">
                        {{#if this.fallbackIcon}}<i class="fas {{this.fallbackIcon}}"></i>{{/if}}
                      </div>
                    {{/if}}
                  {{/if}}
                </div>
                <div class="clue-tile-content">
                  <div class="clue-tile-title">{{this.title}}</div>
                </div>
                <div class="clue-tile-toolbar">
                  <div class="clue-tile-actions">
                    {{#if this.isPersonal}}
                      <button type="button" data-action="edit-personal-clue" data-clue-id="{{this.id}}">
                        <i class="fas fa-pen"></i>
                      </button>
                      <button type="button" data-action="delete-personal-clue" data-clue-id="{{this.id}}">
                        <i class="fas fa-trash"></i>
                      </button>
                    {{else}}
                      <button type="button" data-action="remove-own-clue" data-clue-id="{{this.id}}">
                        <i class="fas fa-trash"></i>
                      </button>
                    {{/if}}
                  </div>
                </div>
              </article>
            {{/if}}
          {{/each}}
        </div>
      </div>
    {{/if}}

    {{!-- ═══════════════════ MESSAGES TAB ═══════════════════ --}}
    {{#if (eq currentTab "messages")}}
      <div class="clue-compact-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!</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>
    {{/if}}

  </div>
</div>
