<div class="clue-browser-app clue-browser-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">

      {{!-- Left side: context-dependent --}}
      {{#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}}
        {{#if messagePlayerId}}
          <button type="button" class="clue-compact-btn" data-action="back-to-players">
            <i class="fas fa-arrow-left"></i>
          </button>
          <div class="clue-browser-location">
            <div class="clue-browser-location-label">Conversation</div>
            <div class="clue-browser-location-name">{{conversationPlayer.name}}</div>
          </div>
        {{else}}
          <div class="clue-browser-location">
            <div class="clue-browser-location-label">Messages</div>
            <div class="clue-browser-location-name">Players</div>
          </div>
        {{/if}}
      {{/if}}

      {{!-- Right side: actions --}}
      <div class="clue-compact-actions">
        {{#if (eq currentTab "clues")}}
          <button type="button" class="clue-compact-btn" data-action="toggle-create-folder" title="New Folder">
            <i class="fas fa-folder-plus"></i>
          </button>
          <button type="button" class="clue-compact-btn" data-action="new-clue" title="New Clue">
            <i class="fas fa-plus"></i>
          </button>
          <button type="button" class="clue-compact-btn" data-action="view-player-decks" title="Player Deck Inspector">
            <i class="fas fa-users"></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}}
        {{#if (eq currentTab "messages")}}
          {{#if messagePlayerId}}
            <button type="button" class="clue-compact-btn" data-action="create-clue-from-messages"
              title="Create clue card from selected messages" {{#unless hasSelectedMessages}}disabled{{/unless}}>
              <i class="fas fa-id-card-alt"></i>
            </button>
            <button type="button" class="clue-compact-btn" data-action="delete-conversation" title="Delete conversation">
              <i class="fas fa-trash"></i>
            </button>
          {{/if}}
        {{/if}}
        <button type="button" class="clue-compact-btn clue-compact-board-btn" data-action="open-clue-board" title="Open Players' Clue Board">
          <i class="fas fa-thumbtack"></i>
        </button>
        <button type="button" class="clue-compact-btn clue-compact-gm-board-btn" data-action="open-gm-clue-board" title="Open GM Clue Board">
          <i class="fas fa-lock"></i>
        </button>
      </div>
    </div>

    {{!-- ═══════════════════ CLUES TAB ═══════════════════ --}}
    {{#if (eq currentTab "clues")}}

      <div class="clue-browser-create-folder">
        <div class="clue-browser-create-folder-form">
          <input type="text" data-field="gm-new-folder-name" placeholder="Folder name">
          <button type="button" data-action="create-gm-folder">
            <i class="fas fa-check"></i>
          </button>
        </div>
      </div>

      {{#if hasParentDropTarget}}
        <div class="clue-browser-parent-drop" data-gm-folder-drop-parent="true"
          title="Drop clues here to move them back">
          <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>Drop to 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}};"
                data-gm-folder-drop-id="{{this.id}}"
              >
                <div class="clue-folder-tile-top">
                  <textarea class="clue-folder-tile-name-input" rows="1"
                    data-gm-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-gm-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-gm-folder-text-color-input="{{this.id}}">
                    <i class="fas fa-font"></i>
                  </label>
                  <button type="button" data-action="delete-gm-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.isHandout}}is-handout{{/if}}"
                style="{{#if this.isHandout}}--handout-aspect: {{this.handoutAspectRatio}};{{/if}}"
                data-select-clue-id="{{this.id}}"
                data-drag-gm-clue-id="{{this.id}}"
                draggable="true"
              >
                <div class="clue-tile-media">
                  {{#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}}
                </div>
                <div class="clue-tile-content">
                  <div class="clue-tile-title">{{this.title}}</div>
                  <div class="clue-tile-meta-row">
                    <span class="clue-tile-pill">{{this.revealLevelCount}} level(s)</span>
                  </div>
                </div>
                <div class="clue-tile-toolbar">
                  <div class="clue-tile-actions">
                    <button type="button" data-action="send-clue" data-clue-id="{{this.id}}">
                      <i class="fas fa-paper-plane"></i>
                    </button>
                    <button type="button" data-action="edit-clue" data-clue-id="{{this.id}}">
                      <i class="fas fa-pen-to-square"></i>
                    </button>
                    <button type="button" data-action="delete-clue" data-clue-id="{{this.id}}">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </div>
              </article>
            {{/if}}
          {{/each}}
        </div>
      </div>

    {{/if}}

    {{!-- ═══════════════════ MESSAGES TAB ═══════════════════ --}}
    {{#if (eq currentTab "messages")}}

      {{#if messagePlayerId}}
        {{!-- Conversation view --}}
        <div class="clue-compact-chat-messages">
          {{#if activeConversation.length}}
            {{#each activeConversation}}
              <div class="clue-chat-msg {{#if this.isSelf}}is-self{{else}}is-other{{/if}} {{#if this.isChecked}}is-checked{{/if}}"
                data-msg-id="{{this.id}}">
                <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. Say something!</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-gm-message">
            <i class="fas fa-paper-plane"></i>
          </button>
        </div>

      {{else}}
        {{!-- Player list --}}
        <div class="clue-compact-player-list">
          {{#if players.length}}
            {{#each players}}
              <button type="button" class="clue-compact-player-btn" data-player-id="{{this.id}}">
                <div class="clue-compact-player-avatar"><i class="fas fa-user"></i></div>
                <div class="clue-compact-player-name">{{this.name}}</div>
                {{#if this.hasMessages}}
                  <div class="clue-compact-player-indicator"><i class="fas fa-comment-dots"></i></div>
                {{/if}}
              </button>
            {{/each}}
          {{else}}
            <div class="clue-chat-empty">No players in game.</div>
          {{/if}}
        </div>

      {{/if}}
    {{/if}}

  </div>
</div>
