<!-- SS · part 13 -->
ia-selected', on ? 'true' : 'false'); });
    $$('.ss-panel').forEach(function (p) { p.classList.toggle('is-on', p.getAttribute('data-panel') === name); });
    if (name === 'voice') renderLines();
    if (name === 'songs') loadSongs();
    if (name === 'studio' || name === 'voice') checkUnlock();
    try { history.replaceState(null, '', '#' + name); } catch (e) {}
    window.scrollTo(0, 0);
  }
  $$('.ss-tab').forEach(function (b) { b.addEventListener('click', function () { showTab(b.getAttribute('data-tab')); }); });
  function updateNow() { $('#ss-now').textContent = S.title ? '♪ ' + S.title : ''; }

  // ---------------------------------------------------------------- WRITE
  function fillWrite() {
    var out = $('#ss-write-out');
    if (!S.lyrics && !S.title) { out.hidden = true; return; }
    out.hidden = false;
    $('#ss-title').value = S.title || '';
    $('#ss-lyrics').value = S.lyrics || '';
    $('#ss-suno').value = S.suno || '';
    var chips = [S.bpm + ' BPM', S.key].concat(S.chords && S.chords.length ? [S.chords.join(' – ')] : []);
    $('#ss-meta').innerHTML = chips.map(function (c) { return '<span class="ss-chip">' + esc(c) + '</span>'; }).join('');
    updateNow();
  }
  $('#ss-topic').value = S.topic || '';
  $('#ss-mood').value = S.mood || ''; $('#ss-genre').value = S.genre || '';
  $('#ss-title').addEventListener('input', function () { S.title = this.value; updateNow(); save(); });
  $('#ss-lyrics').addEventListener('input', function () { S.lyrics = this.value; save(); });
  $('#ss-copy-suno').addEventListener('click', function () {
    var t = $('#ss-suno'); t.select();
    (navigator.clipboard ? navigator.clipboard.writeText(t.value) : Promise.reject()).then(function () { toast('Copied.'); }, function () { try { document.execCommand('copy'); toast('Copied.'); } catch (e) { toast('Select the text and copy it.'); } });
  });
  $('#ss-write-btn').addEventListener('click', function () {
    var btn = this, topic = $('#ss-topic').value.trim();
    if (!topic && !S.remix) { toast('Tell the AI what the song is about first.'); $('#ss-topic').focus(); return; }
    S.mood = $('#ss-mood').value.trim(); S.genre = $('#ss-genre').value.trim();
    busy(btn, true); btn.textContent = 'Writing… (up to ~30s)';
    api('POST', '/api/ss/write', { topic: topic, mood: S.mood, genre: S.genre, remix_id: S.remix ? S.remix.id : undefined })
      .then(function (j) {
        var s = j.song;
        S.title = s.title; S.lyrics = s.lyrics; S.suno = s.suno_prompt; S.bpm = s.bpm; S.key = parseKey(s.key).name; S.chords = s.chords || [];
        S.ai = s.patterns; S.patterns = JSON.parse(JSON.stringify(s.patterns)); S.vox = null;
        save(); fillWrite(); syncStudio(); toast('Song written. Beat loaded in Studio.');
        $('#ss-write-out').scrollIntoView({ behavior: 'smooth', block: 'start' });
      })
      .catch(function (e) { toast(e.message, 5000); })
      .then(function () { busy(btn, false); btn.textContent = 'Write with AI'; });
  });
  $('#ss-to-studio').addEventListener('click', function () { showTab('studio'); });
  $('#ss-to-voice').addEventListener('click', function () { showTab('voice'); });

  // Remix picker
  var remixList = null;
  function drawRemix() {
    var q = $('#ss-remix-q').value.trim().toLowerCase();
    var items = (remixList || []).filter(function (s) { return !q || s.title.toLowerCase().indexOf(q) >= 0; }).slice(0, 200);
    $('#ss-remix-list').innerHTML = items.length ? items.map(function (s) { return '<li><button type="button" data-id="' + esc(s.id) + '">' + esc(s.title) + (s.date ? '<small>' + esc(s.date) + '</small>' : '') + '</button></li>'; }).join('') : '<li class="ss-hint">No songs found.</li>';
  }
  $('#ss-remix-btn').addEventListener('click', function () {
    var dlg = $('#ss-remix-dlg');
    if (dlg.showModal) dlg.showModal(); else dlg.setAttribute('open', '');
    if (remixList) { drawRemix(); return; }
    $('#ss-remix-list').innerHTML = '<li class="ss-hint">Loading…</li>';
    api('GET', '/api/ss/remix').then(function (j) { remixList = j.songs || []; drawRemix(); }).catch(function (e) { $('#ss-remix-list').innerHTML = '<li class="ss-hint">' + esc(e.message) + '</li>'; });
  });
  $('#ss-remix-q').addEventListener('input', drawRemix);
  $('#ss-remix-list').addEventListener('click', function (e) {
    var b = e.target.closest('button[data-id]'); if (!b) return;
    var s = (remixList || []).filter(function (x) { return x.id === b.getAttribute('data-id'); })[0]; if (!s) return;
    S.remix = { id: s.id, title: s.title };
    $('#ss-remix-title').textContent = s.title; $('#ss-remix-box').hidden = false;
    var dlg = $('#ss-remix-dlg'); if (dlg.close) dlg.close(); else dlg.removeAttribute('open');
    if (!$('#ss-topic').value.trim()) $('#ss-topic').value = 'A fresh remix of "' + s.title + '"';
    toast('Now press Write with AI to remix it.');
  });
  $('#ss-remix-clear').addEventListener('click', function () { S.remix = null; $('#ss-remi