<div class="cinematic-scene-container">
  {{!-- Scene background image/video --}}
  {{#if sceneBackground}}
    {{#if isVideoBackground}}
    <video class="cinematic-bg" src="{{sceneBackground}}" autoplay loop muted playsinline></video>
    {{else}}
    <div class="cinematic-bg" style="background-image: url('{{sceneBackground}}')"></div>
    {{/if}}
  {{/if}}


  {{!-- Dark vignette overlay --}}
  <div class="vignette-overlay"></div>

  {{!-- Active Speaker or Image Preview (center stage) --}}
  {{#if previewImageSrc}}
  <div class="cinematic-image-preview">
    <img src="{{previewImageSrc}}" class="preview-portrait">
    <button type="button" class="preview-popout-btn" data-action="popoutImagePreview"
            data-tooltip="{{localize 'STORYFRAME.CinematicScene.PopoutImage'}}">
      <i class="fas fa-up-right-from-square"></i>
    </button>
    <button type="button" class="preview-close-btn" data-action="closeImagePreview">
      <i class="fas fa-times"></i>
    </button>
  </div>
  {{else if hasAnySpeakerActive}}
  <div class="cinematic-spotlight-stage{{#if secondarySpeaker}}{{#if activeSpeaker}} dual{{/if}}{{/if}}">
    {{#if activeSpeaker}}
    <div class="cinematic-spotlight primary" data-speaker-id="{{activeSpeaker.id}}">
      <div class="spotlight-glow-cinematic"></div>
      <img src="{{activeSpeaker.img}}" alt="{{activeSpeaker.name}}" class="spotlight-portrait" loading="eager">
      <div class="spotlight-nameplate">
        <span class="nameplate-text">{{activeSpeaker.name}}</span>
        {{#if hasPartySheet}}
        <button type="button" class="spotlight-party-btn" data-action="openPartySheet" data-tooltip="{{localize 'STORYFRAME.CinematicScene.PartySheet'}}">
          <i class="fas fa-users" aria-hidden="true"></i>
        </button>
        {{/if}}
      </div>
    </div>
    {{/if}}
    {{!-- Secondary (responding) speaker --}}
    <div class="cinematic-spotlight secondary" data-speaker-id="{{#if secondarySpeaker}}{{secondarySpeaker.id}}{{/if}}" {{#unless secondarySpeaker}}style="display:none"{{/unless}}>
      <div class="spotlight-glow-cinematic"></div>
      {{#if secondarySpeaker}}
      <img src="{{secondarySpeaker.img}}" alt="{{secondarySpeaker.name}}" class="spotlight-portrait" loading="eager">
      <div class="spotlight-nameplate">
        <span class="nameplate-text">{{secondarySpeaker.name}}</span>
      </div>
      {{/if}}
    </div>
  </div>
  {{else}}
  <div class="cinematic-no-active">
    <i class="fas fa-masks-theater" aria-hidden="true"></i>
  </div>
  {{/if}}

  {{!-- Film strip (inactive speakers along bottom) --}}
  {{#if inactiveSpeakers.length}}
  <div class="cinematic-filmstrip-container">
    <div class="filmstrip-scroll-indicator filmstrip-scroll-left">
      <i class="fas fa-chevron-left"></i>
    </div>
    <div class="cinematic-filmstrip controls-{{speakerControlsMode}}" role="list">
      {{#each allSpeakers}}
      <div class="filmstrip-speaker{{#if (lookup ../requestingSpeakerIds this.id)}} has-request{{/if}}"
           role="listitem"
           data-speaker-id="{{this.id}}"
           data-tooltip="{{this.name}}"
           {{#if this.isActive}}style="display:none"{{/if}}>
        <img src="{{this.img}}" alt="{{this.name}}" loading="lazy">
        <span class="filmstrip-name">{{this.name}}</span>
      </div>
      {{/each}}
    </div>
    <div class="filmstrip-scroll-indicator filmstrip-scroll-right">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
  {{/if}}

  {{!-- Bottom row: camera feeds + PC portraits + player speaker controls --}}
  <div class="cinematic-bottom-row">
    {{#if allowPlayerSpeakers}}
    <div class="player-speaker-controls">
      {{#if canJoinMore}}
      <button type="button" class="player-speaker-btn join-btn" data-action="joinAsSpeaker" data-tooltip="{{localize 'STORYFRAME.CinematicScene.JoinAsSpeaker'}}">
        <i class="fas fa-plus" aria-hidden="true"></i>
        {{#unless hasPlayerSpeakers}}<span>{{localize "STORYFRAME.CinematicScene.JoinAsSpeaker"}}</span>{{/unless}}
      </button>
      {{/if}}
      {{#each playerSpeakers}}
      <div class="player-speaker-group" data-speaker-id="{{this.id}}">
        {{#if (eq this.state "joined")}}
        <button type="button" class="player-speaker-btn request-btn" data-action="requestFloor" data-speaker-id="{{this.id}}" data-tooltip="{{localize 'STORYFRAME.CinematicScene.RequestToSpeak'}}">
          <i class="fas fa-hand-paper" aria-hidden="true"></i>
          {{#if ../hasMultipleSpeakers}}<span>{{this.name}}</span>{{else}}<span>{{localize "STORYFRAME.CinematicScene.RequestToSpeak"}}</span>{{/if}}
        </button>
        {{else if (eq this.state "requesting")}}
        <button type="button" class="player-speaker-btn cancel-btn requesting" data-action="cancelFloorRequest" data-speaker-id="{{this.id}}" data-tooltip="{{localize 'STORYFRAME.CinematicScene.CancelRequest'}}">
          <i class="fas fa-hand-paper" aria-hidden="true"></i>
          {{#if ../hasMultipleSpeakers}}<span>{{this.name}}</span>{{else}}<span>{{localize "STORYFRAME.CinematicScene.CancelRequest"}}</span>{{/if}}
        </button>
        {{else if (eq this.state "active")}}
        <button type="button" class="player-speaker-btn stepdown-btn" data-action="stepDown" data-speaker-id="{{this.id}}" data-tooltip="{{localize 'STORYFRAME.CinematicScene.StepDown'}}">
          <i class="fas fa-microphone-slash" aria-hidden="true"></i>
          {{#if ../hasMultipleSpeakers}}<span>{{this.name}}</span>{{else}}<span>{{localize "STORYFRAME.CinematicScene.StepDown"}}</span>{{/if}}
        </button>
        {{/if}}
      </div>
      {{/each}}
      {{#if hasPlayerSpeakers}}
      <button type="button" class="player-speaker-btn leave-btn" data-action="leaveAsSpeaker" data-tooltip="{{localize 'STORYFRAME.CinematicScene.LeaveAsSpeaker'}}">
        <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
      </button>
      {{/if}}
    </div>
    {{/if}}
    {{#each pcRow}}
    <div class="cinematic-pc-item" data-action="openCharacterSheet" data-actor-uuid="{{this.actorUuid}}" data-user-id="{{this.userId}}" data-tooltip="{{this.name}}">
      <img src="{{this.img}}" alt="{{this.name}}" loading="lazy">
      <span class="pc-item-name">{{this.name}}</span>
    </div>
    {{/each}}
  </div>

  {{!-- Player roll panel (bottom-right, always expanded when rolls are pending) --}}
  <div class="cinematic-roll-panel {{#if hasPendingRolls}}expanded{{/if}} {{#unless hasPendingRolls}}hidden{{/unless}}">
    <div class="roll-panel-toggle">
      <i class="fas fa-dice-d20" aria-hidden="true"></i>
      <span class="roll-badge">{{totalPendingRolls}}</span>
    </div>
    <div class="roll-panel-content">
      {{#each actorRollGroups}}
      <div class="cinematic-roll-group {{#if this.hasAllowOnlyOne}}allow-only-one-group{{/if}}">
        <div class="roll-group-header">
          <img src="{{this.actorImg}}" alt="{{this.actorName}}" class="roll-actor-avatar" loading="lazy">
          <span class="roll-actor-name">{{this.actorName}}</span>
          {{#if this.hasAllowOnlyOne}}
          <span class="cinematic-allow-one-badge">
            <i class="fas fa-hand-pointer" aria-hidden="true"></i>
            {{localize "STORYFRAME.UI.Labels.ChooseOne"}}
          </span>
          {{/if}}
        </div>
        <div class="roll-group-buttons">
          {{#each this.rolls}}
          <button type="button" class="cinematic-roll-btn" data-action="executeRoll" data-request-id="{{this.id}}" data-check-type="{{this.checkType}}">
            <span class="roll-skill-name">{{this.skillName}}</span>
            {{#if this.dc}}<span class="dc-mini">{{formatDC this.dc}}</span>{{/if}}
          </button>
          {{/each}}
        </div>
      </div>
      {{/each}}
    </div>
  </div>

  {{!-- Player challenge panel (bottom-left, collapsible) --}}
  <div class="cinematic-challenge-panel {{#if challengePanelExpanded}}expanded{{/if}} {{#unless hasPendingChallenges}}hidden{{/unless}}">
    <button type="button" class="challenge-panel-toggle" data-action="toggleChallengePanel">
      <i class="fas fa-tasks" aria-hidden="true"></i>
      <span class="challenge-badge">{{totalChallenges}}</span>
    </button>
    <div class="challenge-panel-content">
      {{#each activeChallenges}}
      <div class="cinematic-challenge-group" data-challenge-id="{{this.id}}">
        <div class="challenge-group-header">
          {{#if this.image}}<img src="{{this.image}}" alt="{{this.name}}" class="challenge-thumb" loading="lazy">{{/if}}
          <span class="challenge-group-name">{{this.name}}</span>
        </div>
        {{#each this.options}}
        <div class="challenge-option-compact">
          {{#if this.name}}<span class="option-label">{{this.name}}</span>{{/if}}
          <div class="challenge-skill-buttons">
            {{#each this.skillOptionsDisplay}}
            <button type="button"
                    class="cinematic-roll-btn{{#unless this.canRoll}} proficiency-locked{{/unless}}"
                    data-action="selectChallengeOption"
                    data-skill="{{this.skill}}"
                    data-check-type="{{this.checkType}}"
                    data-dc="{{this.dc}}"
                    data-action-slug="{{this.action}}"
                    data-action-variant="{{this.actionVariant}}"
                    data-is-secret="{{this.isSecret}}"
                    {{#unless this.canRoll}}disabled{{/unless}}>
              {{#unless this.canRoll}}<i class="fas fa-lock proficiency-lock-icon" aria-hidden="true"></i>{{/unless}}
              <span class="roll-skill-name">{{this.skillName}}</span>
              {{#if this.showDC}}<span class="dc-mini">{{formatDC this.dc}}</span>{{/if}}
            </button>
            {{/each}}
          </div>
        </div>
        {{/each}}
      </div>
      {{/each}}
    </div>
  </div>

  {{!-- Journal button + panel (top-left) --}}
  <div class="cinematic-player-journal">
    <button type="button" class="player-utility-btn" data-action="toggleJournalSidebar"
            data-tooltip="{{localize 'STORYFRAME.CinematicScene.Journal'}}">
      <i class="fas fa-book-open" aria-hidden="true"></i>
    </button>
    <div class="cinematic-player-journal-panel hidden"></div>
  </div>

  {{!-- Player utility buttons (top-right) --}}
  <div class="cinematic-player-utilities">
    <button type="button" class="player-utility-btn" data-action="togglePlayerVolume"
            data-tooltip="{{localize 'STORYFRAME.UI.Tooltips.MusicVolume'}}">
      <i class="fas fa-volume-up" aria-hidden="true"></i>
    </button>
    <button type="button" class="player-utility-btn" data-action="togglePlayerChat"
            data-tooltip="{{localize 'STORYFRAME.CinematicScene.ChatLog'}}">
      <i class="fas fa-comments" aria-hidden="true"></i>
    </button>
  </div>

  {{!-- Player volume slider (top-right, collapsible) --}}
  <div class="cinematic-player-volume {{#if playerVolumeExpanded}}expanded{{/if}}">
    <div class="player-volume-content">
      <i class="fas fa-volume-down" aria-hidden="true"></i>
      <input type="range" class="player-volume-slider" min="0" max="1" step="0.05" value="{{currentVolume}}">
      <i class="fas fa-volume-up" aria-hidden="true"></i>
    </div>
  </div>

  {{!-- Player chat log (top-right, collapsible) --}}
  <div class="cinematic-player-chat {{#if playerChatExpanded}}expanded{{/if}}">
    <div class="player-chat-content">
      <div class="side-panel-chat-messages player-chat-messages"></div>
    </div>
  </div>
</div>
