<div id="ai-chat-container"
    data-course="{{ $course->id }}"
    data-chapter="{{ $chapterData['chapter_number'] }}">
  
  <button id="ai-chat-button" title="StudyMate AI">
    <div class="loader-wrapper">
      <i class="bi bi-robot fs-4 ai-chat-icon-animate"></i>
      <span class="loader-circle" style="display:none;"></span>
    </div>
  </button>

  <button id="retry-button" style="display:none;">Try again</button>

  <!-- Botón cerrar fuera de ai-chat-expanded -->
  <span class="ai-chat-close" id="ai-chat-close" style="display:none;">✕</span>

  <div id="ai-chat-expanded">
    <!-- HEADER sin el botón cerrar -->
    <div class="ai-chat-header">
      <i class="bi bi-robot header-icon"></i>
      <span class="ai-chat-header-text">StudyMate AI</span>
    </div>

    <!-- BODY -->
    <div class="ai-chat-body">
      <div class="ai-chat-message ai-chat-message-assistant">
        <p>Hi! I'm StudyMate AI 🤖.
          <br><br>
          Feel free to ask me anything about the chapter <em>"{{ $chapterData['title'] }}"</em> of the course <em>"{{ $course->title }}"</em>!
        </p>
        
        <button class="ai-speaker-button" aria-label="Listen to the response" title="Listen to the response">
          <i class="bi bi-ear"></i>
        </button>
      </div>
    </div>

    <!-- FOOTER -->
    <div class="ai-chat-footer d-flex align-items-center">
      <button id="ai-voice-btn" class="ai-chat-btn me-2" title="Voice input">
        <i class="bi bi-mic-fill"></i>
      </button>

      <textarea
        id="ai-chat-input"
        class="ai-chat-textarea me-2"
        placeholder="Ask me any question!"
        rows="1"
        autocomplete="off"
      ></textarea>

      <button id="ai-chat-send-btn" class="ai-chat-btn" title="Send">
        <i class="bi bi-send-fill"></i>
      </button>

      <button id="ai-chat-pause-btn" class="ai-chat-btn" title="Pause">
        <i class="bi bi-stop-fill"></i>
      </button>
    </div>
  </div>
</div>
