<div class="chat-container">
            <div class="chat-header">
                <span>DRAW A QUOTE!</span>
                <button class="przycisk" id="toggle-theme">change theme</button>
                <button class="przycisk" id="expand-collapse-btn">-</button>
            </div>
            <div class="chat-content">
                <p>See what someone has to say to you today. Think about it...</p>
                <button class="przycisk" id="get-quote">Download quote</button>
                <div class="przycisk" id="quote-display"></div>
            </div>
        </div>
        <script>
          document.getElementById('toggle-theme').addEventListener('click', toggleTheme);
          document.getElementById('expand-collapse-btn').addEventListener('click', toggleChat);
          document.getElementById('get-quote').addEventListener('click', fetchRandomQuote);
          function toggleTheme() {
              // Pobierz element kontenera czatu
              const chatContainer = document.querySelector('.chat-container');
              // Przełącz klasę 'dark-mode', która kontroluje motyw
              chatContainer.classList.toggle('dark-mode');
          }
          function toggleChat() {
              const chatContainer = document.querySelector('.chat-container');
              const chatContent = document.querySelector('.chat-content');
              const chatHeaderSpan = chatContainer.querySelector('.chat-header span');
              const toggleThemeButton = chatContainer.querySelector('#toggle-theme');
              const isExpanded = chatContainer.classList.toggle('expanded');
              chatContent.style.display = isExpanded ? 'block' : 'none';
              document.getElementById('expand-collapse-btn').textContent = isExpanded ? '−' : '+';
              chatContainer.style.transform = isExpanded ? 'translateY(0)' : 'translateY(calc(100% - 50px))';
              if (window.innerWidth <= 600) {
                  if (isExpanded) {
                      // Rozwiń kontener czatu do pełnego widoku
                      chatContainer.style.width = '350px'; // Przywróć standardową szerokość
                      chatHeaderSpan.style.display = 'block'; // Pokaż tytuł
                      toggleThemeButton.style.display = 'block'; // Pokaż przycisk zmiany motywu
                  } else {
                      // Zwiń kontener czatu do widoku z tylko przyciskiem '+'
                      chatContainer.style.width = '70px'; // Zmień szerokość na minimalną
                      chatHeaderSpan.style.display = 'none'; // Ukryj tytuł
                      toggleThemeButton.style.display = 'none'; // Ukryj przycisk zmiany motywu
                  }
              }
              chatContent.style.display = isExpanded ? 'block' : 'none';
              const expandCollapseBtn = document.getElementById('expand-collapse-btn');
              expandCollapseBtn.textContent = isExpanded ? '−' : '+';
          }
          function displayProverbAndNavigate(data) {
              const quoteDisplay = document.getElementById('quote-display');
              quoteDisplay.textContent = `"${data.content}" — ${data.author}`;
              // Użyj BOM do nawigacji, ustaw hasz na 'quote'
              window.location.hash = 'quote';
          }
          function fetchQuote() {
              return new Promise((resolve, reject) => {
                  fetch('https://api.quotable.io/random')
                      .then(response => response.json())
                      .then(data => resolve(data))
                      .catch(error => reject(error));
              });
          }
          async function fetchRandomQuote() {
              const chatContainer = document.querySelector('.chat-container');
              const quoteDisplay = document.getElementById('quote-display');
              try {
                  const data = await fetchQuote(); // Pobierz cytatu korzystając z Promise
                  quoteDisplay.textContent = `"${data.content}" — ${data.author}`;
                  quoteDisplay.classList.add('quote-style'); // Stylizacja cytatu
                  chatContainer.style.backgroundColor = '#7c4200'; // Sukces: zmiana koloru tła na pomarańczowy
              } catch (error) {
                  quoteDisplay.textContent = 'Nie udało się pobrać przysłowia.';
                  console.error('Error fetching random quote:', error);
                  chatContainer.style.backgroundColor = ''; // Niepowodzenie: przywrócenie standardowego koloru tła
              }
          }
          window.addEventListener('DOMContentLoaded', () => {
              toggleChat();
          });
      </script>