diora-web/static/js/audiobooks.js

/*
 * Audiobooks, the section "Hörbücher" of Hören (docs/audiobooks.md, docs/navigation.md):
 * podcast subscriptions marked as a Hörbuch or Hörspiel are listened to like a book —
 * "Weiterhören", one progress per book, the chapters in order, bookmarks with a note,
 * the sleep timer to the end of the chapter. The server knows the books
 * (/podcasts/audiobooks/), the podcast host plays them (podcastPlayBook: the chapters in
 * order, outside the queue). Runs in the web page, the desktop app and the Android app
 * (not in diora Reader, which has no podcasts). Chrome-61-safe: no ?. / ??.
 */
(function () {
  'use strict';
  const tab = document.getElementById('tab-audiobooks');
  if (!tab) return;
  if (typeof IS_AUTHENTICATED !== 'undefined' && !IS_AUTHENTICATED) return;

  // The podcast host: the app's own on Android, podcasts-web.js elsewhere.
  function host() {
    const n = window.DioraNative;
    if (n && typeof n.podcastPlayBook === 'function') return n;
    const h = window.DioraPodcastHost;
    return h && typeof h.podcastPlayBook === 'function' ? h : null;
  }

  const st = {
    books: null,       // /podcasts/audiobooks/ books
    open: null,        // feed id of the book shown
    detail: null,      // /podcasts/audiobooks/<id>/
    picking: false,    // choosing a podcast to make an audiobook
    pickQuery: '',
    now: null,         // playerState() of the last poll
    folder: null,      // the folder chip chosen (null: all, '': without a folder)
    folderOrder: [],   // the podcasts' folder order (/podcasts/folders/)
    series: null,      // the series shown (its key), inside the folder
  };

  const shelf = document.createElement('div');
  shelf.id = 'audiobook-shelf';
  tab.appendChild(shelf);

  // ---- helpers ------------------------------------------------------------------------

  function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
      ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
  }

  function hours(seconds) {
    const m = Math.round(Math.max(0, seconds) / 60);
    if (m < 60) return m + ' min';
    const h = Math.floor(m / 60);
    return h + ' h' + (m % 60 ? ' ' + (m % 60) + ' min' : '');
  }

  function clock(ms) {
    const s = Math.max(0, Math.floor(ms / 1000));
    const h = Math.floor(s / 3600);
    const mm = String(Math.floor(s / 60) % 60);
    const ss = String(s % 60).padStart(2, '0');
    return h ? h + ':' + mm.padStart(2, '0') + ':' + ss : mm + ':' + ss;
  }

  function progressText(b) {
    const parts = [];
    if (b.total_seconds > 0) parts.push(hours(b.heard_seconds) + ' von ' + hours(b.total_seconds));
    if (!b.next) parts.push('fertig gehört');
    else parts.push('Kapitel ' + (b.next.index + 1) + '/' + b.chapters);
    return parts.join(' · ');
  }

  function pct(b) {
    if (b.total_seconds > 0) return Math.min(100, Math.round(100 * b.heard_seconds / b.total_seconds));
    return b.chapters ? Math.round(100 * b.done / b.chapters) : 0;
  }

  function cover(url, title, cls, author) {
    const art = String(url || '').replace(/^http:/, 'https:');
    if (!art && window.DioraGenCover) {   // none: one drawn from the title (gencover.js)
      return '<img class="' + cls + '" src="' + DioraGenCover.url({title: title || '', author: author || ''}) + '" alt="">';
    }
    return art
      ? '<img class="' + cls + '" src="' + esc(art) + '" alt="" loading="lazy">'
      : '<span class="' + cls + ' ab-nocover">' + esc((title || '?').trim().charAt(0).toUpperCase()) + '</span>';
  }

  function toast(text) {
    let t = document.getElementById('ab-toast');
    if (!t) {
      t = document.createElement('div');
      t.id = 'ab-toast';
      document.body.appendChild(t);
    }
    t.textContent = text;
    t.classList.add('ab-show');
    clearTimeout(toast.timer);
    toast.timer = setTimeout(() => t.classList.remove('ab-show'), 2600);
  }

  function cached(name, value) {
    try {
      if (value === undefined) return JSON.parse(localStorage.getItem('diora_ab_' + name) || 'null');
      localStorage.setItem('diora_ab_' + name, JSON.stringify(value));
    } catch (e) {}
    return null;
  }

  async function api(path, body) {
    const opts = {credentials: 'same-origin', cache: 'no-store'};
    if (body !== undefined) {
      opts.method = 'POST';
      opts.headers = {'Content-Type': 'application/json'};
      opts.body = JSON.stringify(body);
    }
    const r = await fetch(path, opts);
    const d = await r.json().catch(() => null);
    if (!r.ok || !d) throw new Error((d && d.error) || ('HTTP ' + r.status));
    return d;
  }

  function podcastState() {
    const h = host();
    if (!h) return null;
    try { return JSON.parse(h.podcastState()); } catch (e) { return null; }
  }

  function playerState() {
    const h = host();
    if (!h || typeof h.playerState !== 'function') return null;
    try { return JSON.parse(h.playerState()); } catch (e) { return null; }
  }

  // The chapter of the open book playing (or paused) now, else null.
  function nowInBook() {
    const p = st.now;
    const d = st.detail;
    if (!p || !d || p.kind !== 'podcast') return null;
    for (let i = 0; i < d.chapters.length; i++) {
      if (d.chapters[i].episode__id === p.episodeId) return {index: i, pos: p.pos || 0, dur: p.dur || 0, playing: !!p.playing};
    }
    return null;
  }

  // ---- loading ------------------------------------------------------------------------

  async function loadList() {
    if (!host()) { shelf.innerHTML = ''; return; }
    if (!st.books) { st.books = cached('books'); renderShelf(); }
    try {
      const got = await Promise.all([api('/podcasts/audiobooks/'), loadFolderOrder()]);
      st.books = got[0].books || [];
      cached('books', st.books);
    } catch (e) {
      if (!st.books) st.books = [];
    }
    renderShelf();
  }

  async function loadDetail(feedId) {
    if (!st.detail || st.detail.book.feed_id !== feedId) st.detail = cached('book_' + feedId);
    renderView();
    try {
      const d = await api('/podcasts/audiobooks/' + feedId + '/');
      if (st.open !== feedId) return d;
      st.detail = d;
      cached('book_' + feedId, d);
    } catch (e) {
      if (!st.detail) toast('Das Hörbuch braucht eine Verbindung.');
    }
    renderView();
    return st.detail;
  }

  // ---- the shelf in "Bücher" ------------------------------------------------------------

  function renderShelf() {
    const h = host();
    const books = st.books || [];
    const state = h ? podcastState() : null;
    const pods = state && state.feeds ? state.feeds.filter(f => f.kind !== 'audiobook') : [];
    if (!h) { shelf.innerHTML = ''; return; }
    if (!books.length && !pods.length) {
      shelf.innerHTML = '<p class="ab-empty">Hörbücher und Hörspiele sind hier Podcasts, die wie ein Buch gehört ' +
        'werden: Kapitel in Reihenfolge, Lesezeichen. Erst einen Podcast abonnieren (Podcasts → Suche), dann hier markieren.</p>';
      return;
    }
    let html = '';
    const go = books.filter(b => b.next && b.last_played_at)[0];
    if (go) {
      html += '<div class="ab-continue" data-ab-open="' + go.feed_id + '">' +
        cover(go.artwork_url, go.title, 'ab-cover ab-cover-s') +
        '<div class="ab-card-text"><div class="ab-label">Weiterhören</div>' +
        '<div class="ab-title">' + esc(go.title) + '</div>' +
        '<div class="ab-meta">' + esc(progressText(go)) + '</div>' +
        '<div class="ab-bar"><span style="width:' + pct(go) + '%"></span></div></div>' +
        '<button type="button" class="ab-play" data-ab-go="' + go.feed_id + '" aria-label="Weiterhören">▶</button></div>';
    }
    html += '<div class="ab-head"><h3 class="ab-h">Hörbücher</h3>' +
      (pods.length ? '<button type="button" class="ab-link" data-ab="pick">+ Hörbuch</button>' : '') + '</div>';
    if (books.length) {
      html += gridHtml(books);
    } else {
      html += '<p class="ab-empty">Podcasts, die eigentlich Hörbücher oder Hörspiele sind, lassen sich hier ' +
        'wie ein Buch hören: in Kapitelreihenfolge, mit Lesezeichen. „+ Hörbuch“ wählt einen aus.</p>';
    }
    if (st.picking) html += pickHtml(pods);
    shelf.innerHTML = html;
    drawChips(books);
    const input = shelf.querySelector('.ab-pick-q');
    if (input && document.activeElement !== input && st.pickFocus) { input.focus(); st.pickFocus = false; }
  }

  // ---- organising: folders (set per book) and series (found in the titles) ----------------

  // "Das Kapital – Erster Band", "Harry Potter: Teil 3", "Die drei ??? – Folge 12":
  // the series' name and the volume's number, or null.
  const VOLUME_WORD = /\b(band|bd\.|teil|buch|folge|staffel|episode|vol\.?|volume|part|book)\b/i;
  const ORDINALS = ['erst', 'zweit', 'dritt', 'viert', 'fünft', 'sechst', 'siebt', 'acht', 'neunt', 'zehnt',
    'elft', 'zwölft'];
  const ORDINALS_EN = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth'];
  const ROMAN = {i: 1, ii: 2, iii: 3, iv: 4, v: 5, vi: 6, vii: 7, viii: 8, ix: 9, x: 10, xi: 11, xii: 12};

  function volumeNumber(text) {
    const t = text.toLowerCase();
    const digits = /(\d+)/.exec(t);
    if (digits) return parseInt(digits[1], 10);
    for (const word of t.split(/[^a-zäöüß]+/)) {
      if (ROMAN[word]) return ROMAN[word];
      for (let i = 0; i < ORDINALS.length; i++) if (word.indexOf(ORDINALS[i]) === 0) return i + 1;
      for (let i = 0; i < ORDINALS_EN.length; i++) if (word === ORDINALS_EN[i]) return i + 1;
    }
    return 999;
  }

  function seriesOf(b) {
    const m = /^(.+?)\s+[–—-]\s+(.+)$/.exec(b.title) || /^(.+?):\s+(.+)$/.exec(b.title) ||
      /^(.+?)\.\s+(.+)$/.exec(b.title);   // "Der Zauberberg. Erster Band"
    if (!m || !(VOLUME_WORD.test(m[2]) || /^\s*\d+\s*$/.test(m[2]))) return null;
    const name = m[1].trim();
    return {key: (name + '|' + (b.author || '')).toLowerCase(), name, number: volumeNumber(m[2]), volume: m[2].trim()};
  }

  // The books of one level (all, or one folder) as cards: series of two or more volumes
  // become one stack; folders come first (at the top level).
  function entries(books) {
    const groups = new Map();
    const single = [];
    books.forEach(b => {
      const sr = seriesOf(b);
      if (!sr) { single.push({kind: 'book', b, sort: b.title}); return; }
      if (!groups.has(sr.key)) groups.set(sr.key, {kind: 'series', key: sr.key, name: sr.name, books: [], sort: sr.name});
      groups.get(sr.key).books.push(Object.assign({}, b, {_volume: sr.volume, _number: sr.number}));
    });
    const out = single;
    groups.forEach(g => {
      if (g.books.length < 2) { out.push({kind: 'book', b: g.books[0], sort: g.books[0].title}); return; }
      g.books.sort((x, y) => x._number - y._number || x.title.localeCompare(y.title));
      out.push(g);
    });
    // The last listened first (as the list comes), then the rest by name.
    const recent = e => {
      const list = e.kind === 'series' ? e.books : [e.b];
      return list.map(x => x.last_played_at || '').sort().pop() || '';
    };
    return out.sort((x, y) => (recent(y) > recent(x) ? 1 : recent(y) < recent(x) ? -1 : 0) ||
      x.sort.localeCompare(y.sort, 'de'));
  }

  function bookCard(b, label) {
    return '<button type="button" class="ab-card" data-ab-open="' + b.feed_id + '">' +
      cover(b.artwork_url, b.title, 'ab-cover') +
      '<span class="ab-card-text"><span class="ab-title">' + esc(label || b.title) + '</span>' +
      (b.author && !label ? '<span class="ab-meta">' + esc(b.author) + '</span>' : '') +
      '<span class="ab-meta">' + esc(progressText(b)) + '</span>' +
      '<span class="ab-bar"><span style="width:' + pct(b) + '%"></span></span></span></button>';
  }

  function seriesCard(g) {
    const total = g.books.reduce((n, b) => n + (b.total_seconds || 0), 0);
    const heard = g.books.reduce((n, b) => n + (b.heard_seconds || 0), 0);
    const going = g.books.filter(b => b.next && b.last_played_at)[0];
    const done = g.books.filter(b => !b.next).length;
    const meta = g.books.length + ' Bände' + (going ? ' · bei ' + going._volume
      : done === g.books.length ? ' · fertig gehört' : done ? ' · ' + done + ' gehört' : '');
    return '<button type="button" class="ab-card ab-stack" data-ab-series="' + esc(g.key) + '">' +
      '<span class="ab-stack-covers">' + cover(g.books[0].artwork_url, g.name, 'ab-cover') + '</span>' +
      '<span class="ab-card-text"><span class="ab-title">' + esc(g.name) + '</span>' +
      (g.books[0].author ? '<span class="ab-meta">' + esc(g.books[0].author) + '</span>' : '') +
      '<span class="ab-meta">' + esc(meta) + '</span>' +
      '<span class="ab-bar"><span style="width:' + (total ? Math.round(100 * heard / total) : 0) + '%"></span></span></span></button>';
  }

  const foldersOf = b => (b.folders && b.folders.length ? b.folders : (b.folder ? [b.folder] : []));

  // The audiobooks' folders as chips (docs/library.md), in the podcasts' folder order.
  function folderChips(books) {
    const counts = new Map();
    let none = 0;
    books.forEach(b => {
      const fs = foldersOf(b);
      if (!fs.length) none++;
      fs.forEach(f => counts.set(f, (counts.get(f) || 0) + 1));
    });
    const rank = n => { const i = st.folderOrder.indexOf(n); return i < 0 ? 1e6 : i; };
    const names = Array.from(counts.keys()).sort((a, b) => rank(a) - rank(b) || a.localeCompare(b, 'de'));
    if (st.folder && !counts.has(st.folder)) st.folder = null;
    return {folders: names.map(n => ({name: n, count: counts.get(n)})), none: names.length ? none : 0};
  }

  function gridHtml(books) {
    const here = books.filter(b => st.folder == null ? true
      : st.folder === '' ? !foldersOf(b).length : foldersOf(b).indexOf(st.folder) >= 0);
    const list = entries(here);
    if (st.series != null) {
      const g = list.filter(e => e.kind === 'series' && e.key === st.series)[0];
      if (g) {
        return '<div class="ab-place"><button type="button" class="ab-back" data-ab="up">‹ Hörbücher</button>' +
          '<strong>' + esc(g.name) + '</strong></div>' +
          '<div class="ab-grid">' + g.books.map(b => bookCard(b, b._volume)).join('') + '</div>';
      }
      st.series = null;
    }
    return '<div class="ab-chips"></div><div class="ab-grid">' +
      list.map(e => e.kind === 'series' ? seriesCard(e) : bookCard(e.b)).join('') + '</div>';
  }

  function drawChips(books) {
    const el = shelf.querySelector('.ab-chips');
    if (!el || !window.DioraFolders) return;
    const c = folderChips(books);
    if (!c.folders.length) { el.innerHTML = ''; return; }
    window.DioraFolders.chips(el, {
      folders: c.folders, active: st.folder, none: c.none,
      onPick(name) { st.folder = name; renderShelf(); },
      onManage: manageFolders,
    });
  }

  async function loadFolderOrder() {
    try { st.folderOrder = (await api('/podcasts/folders/')).order || []; } catch (e) {}
  }

  // All folder names of the podcasts and audiobooks, in their order.
  async function allFolderNames() {
    try {
      const d = await api('/podcasts/folders/');
      st.folderOrder = d.order || [];
      return st.folderOrder;
    } catch (e) {
      return Array.from(new Set([].concat.apply([], (st.books || []).map(foldersOf))));
    }
  }

  function manageFolders() {
    if (!window.DioraFolders) return;
    allFolderNames().then(names => window.DioraFolders.manage({
      title: 'Ordner der Podcasts und Hörbücher',
      folders: names,
      onRename: (old, n) => api('/podcasts/folders/rename/', {old, new: n}).then(loadList).catch(() => toast('Das braucht eine Verbindung.')),
      onDelete: name => api('/podcasts/folders/delete/', {name}).then(loadList).catch(() => toast('Das braucht eine Verbindung.')),
      onOrder: order => api('/podcasts/folders/', {order}).then(d => { st.folderOrder = d.order || order; renderShelf(); }).catch(() => {}),
    }));
  }

  // Into folders (any number): the server keeps them with the subscription.
  async function assignFolder(feedId) {
    if (!window.DioraFolders) return;
    const b = (st.books || []).filter(x => x.feed_id === feedId)[0];
    const names = await allFolderNames();
    window.DioraFolders.assign({
      title: 'Ordner für „' + (b ? b.title : 'Hörbuch') + '“',
      folders: names,
      selected: b ? foldersOf(b) : [],
      async onDone(picked) {
        try {
          await api('/podcasts/feeds/' + feedId + '/settings/', {folders: picked});
          toast(picked.length ? 'In ' + picked.map(n => '„' + n + '“').join(', ') : 'Ohne Ordner');
        } catch (e) {
          toast('Das braucht eine Verbindung.');
        }
        loadList();
        if (st.open === feedId) loadDetail(feedId);
      },
    });
  }

  function pickHtml(pods) {
    const q = st.pickQuery.trim().toLowerCase();
    const found = pods.filter(f => !q || (f.title + ' ' + (f.author || '')).toLowerCase().indexOf(q) >= 0)
      .sort((a, b) => a.title.localeCompare(b.title)).slice(0, 60);
    return '<div class="ab-pick"><div class="ab-pick-head"><strong>Welcher Podcast ist ein Hörbuch?</strong>' +
      '<button type="button" class="ab-icon" data-ab="pick-close" aria-label="Schließen">✕</button></div>' +
      '<input type="search" class="ab-pick-q" placeholder="Abo suchen …" value="' + esc(st.pickQuery) + '">' +
      '<div class="ab-pick-list">' + found.map(f =>
        '<button type="button" class="ab-row" data-ab-mark="' + f.id + '">' + cover(f.artwork_url, f.title, 'ab-cover ab-cover-xs') +
        '<span class="ab-card-text"><span class="ab-title">' + esc(f.title) + '</span>' +
        (f.author ? '<span class="ab-meta">' + esc(f.author) + '</span>' : '') + '</span></button>').join('') +
      (found.length ? '' : '<p class="ab-empty">Kein Abo gefunden.</p>') + '</div></div>';
  }

  function setKind(feedId, kind) {
    const h = host();
    if (!h) return;
    h.podcastFeedSettings(feedId, JSON.stringify({kind}));
    // The host sends it on its own; the books are asked again once the server has it.
    setTimeout(loadList, 900);
    setTimeout(loadList, 3500);
  }

  // ---- the book --------------------------------------------------------------------------

  let view = null;

  function openBook(feedId) {
    st.open = feedId;
    if (!view) {
      view = document.createElement('div');
      view.id = 'ab-view';
      view.addEventListener('click', onViewClick);
      document.body.appendChild(view);
    }
    view.style.display = '';
    document.documentElement.classList.add('ab-open');
    view.scrollTop = 0;
    poll();
    loadDetail(feedId);
  }

  function closeBook() {
    st.open = null;
    if (view) view.style.display = 'none';
    document.documentElement.classList.remove('ab-open');
    loadList();
  }

  function renderView() {
    if (!view || st.open == null) return;
    const d = st.detail && st.detail.book.feed_id === st.open ? st.detail : null;
    const fromList = (st.books || []).filter(b => b.feed_id === st.open)[0];
    const b = d ? d.book : fromList;
    if (!b) { view.innerHTML = '<div class="ab-top"><button type="button" class="ab-back" data-ab="close">‹ Bücher</button></div><p class="ab-empty">Wird geladen …</p>'; return; }
    const now = nowInBook();
    const marks = d ? d.bookmarks : [];
    const dlMap = d ? downloads() : null;
    const dl = dlMap ? bookDownloads(d, dlMap) : null;
    const titleOf = id => {
      const ch = d ? d.chapters.filter(c => c.episode__id === id)[0] : null;
      return ch ? 'Kapitel ' + (ch.index + 1) : '';
    };
    view.innerHTML =
      '<div class="ab-top"><button type="button" class="ab-back" data-ab="close">‹ Bücher</button>' +
      '<button type="button" class="ab-icon" data-ab="menu" aria-label="Optionen">⋮</button></div>' +
      '<div class="ab-menu" hidden>' +
      '<button type="button" data-ab="unplayed">Alles als ungehört markieren</button>' +
      '<button type="button" data-ab="played">Alles als gehört markieren</button>' +
      '<button type="button" data-ab="folder">In Ordner …</button>' +
      (dl && dl.held ? '<button type="button" data-ab="dl-remove">Vom Gerät löschen (' + dl.held + ' Kapitel)</button>' : '') +
      '<button type="button" data-ab="podcast">Wieder als Podcast führen</button></div>' +
      '<div class="ab-hero">' + cover(b.artwork_url, b.title, 'ab-cover ab-cover-l') +
      '<div class="ab-hero-text"><h2 class="ab-book-title">' + esc(b.title) + '</h2>' +
      (b.author ? '<div class="ab-meta">' + esc(b.author) + '</div>' : '') +
      '<div class="ab-meta ab-progress">' + esc(progressText(b)) + '</div>' +
      '<div class="ab-bar"><span style="width:' + pct(b) + '%"></span></div></div></div>' +
      '<div class="ab-actions">' +
      '<button type="button" class="ab-btn ab-primary" data-ab="go">' + goLabel(b, now) + '</button>' +
      '<button type="button" class="ab-btn" data-ab="sleep"' + (now ? '' : ' disabled') + '>☾ Kapitelende</button>' +
      '<button type="button" class="ab-btn" data-ab="mark"' + (now ? '' : ' disabled') + '>+ Lesezeichen</button>' +
      (dl ? downloadButton(dl) : '') + '</div>' +
      (marks.length ? '<h3 class="ab-h">Lesezeichen</h3><div class="ab-marks">' + marks.map(m =>
        '<div class="ab-mark"><button type="button" class="ab-row" data-ab-bm="' + m.id + '">' +
        '<span class="ab-card-text"><span class="ab-meta">' + esc(titleOf(m.episode_id)) + ' · ' + clock(m.position_ms) + '</span>' +
        '<span class="ab-title">' + (m.note ? esc(m.note) : '<span class="ab-meta">ohne Notiz</span>') + '</span></span></button>' +
        '<button type="button" class="ab-icon" data-ab-bm-edit="' + m.id + '" aria-label="Notiz ändern">✎</button>' +
        '<button type="button" class="ab-icon" data-ab-bm-del="' + m.id + '" aria-label="Löschen">✕</button></div>').join('') + '</div>' : '') +
      '<h3 class="ab-h">Kapitel</h3>' +
      (d ? '<div class="ab-chapters">' + d.chapters.map(c => chapterHtml(c, now, dlMap)).join('') + '</div>'
        : '<p class="ab-empty">Wird geladen …</p>');
  }

  function goLabel(b, now) {
    if (now && now.playing) return '❚❚ Pause';
    if (!b.next) return '↺ Von vorn';
    return '▶ ' + (b.done || b.heard_seconds > 0 ? 'Weiterhören' : 'Anfangen');
  }

  // ---- downloads (the Android app: chapters on the device, for listening without a connection) ----

  function dlHost() {
    const h = host();
    return h && typeof h.podcastDownload === 'function' && typeof h.podcastDownloads === 'function' ? h : null;
  }

  // The host's downloads: {episodeId: {state: queued|downloading|done|failed, progress …}}, or null.
  function downloads() {
    const h = dlHost();
    if (!h) return null;
    try { return JSON.parse(h.podcastDownloads()) || {}; } catch (e) { return {}; }
  }

  function bookDownloads(d, map) {
    const n = {total: d.chapters.length, done: 0, busy: 0, failed: 0, held: 0};
    d.chapters.forEach(c => {
      const e = map[c.episode__id];
      if (!e) return;
      n.held++;
      if (e.state === 'done') n.done++;
      else if (e.state === 'failed') n.failed++;
      else n.busy++;
    });
    return n;
  }

  function downloadButton(n) {
    if (n.done === n.total) return '<button type="button" class="ab-btn ab-dl-on" data-ab="dl-info">' + DL_DONE + ' Auf dem Gerät</button>';
    if (n.busy) return '<button type="button" class="ab-btn" data-ab="dl-info">↓ Lädt … ' + n.done + '/' + n.total + '</button>';
    return '<button type="button" class="ab-btn" data-ab="dl-all">↓ Herunterladen' + (n.done ? ' (noch ' + (n.total - n.done) + ')' : '') + '</button>';
  }

  // Arrow into a tray; on the device: the same, white in a full circle (not a ✓: that's "heard").
  const DL_ICON = '<svg class="ab-dl-ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 10.5l5 5 5-5M5 19.5h14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>';
  const DL_DONE = '<svg class="ab-dl-ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="currentColor"/><path d="M12 6v8M8.5 10.5l3.5 3.5 3.5-3.5M7.5 17.5h9" fill="none" stroke="var(--bg, #fff)" stroke-width="2" stroke-linecap="square"/></svg>';

  function chapterDownload(c, map) {
    const e = map[c.episode__id];
    let sign = DL_ICON;
    let label = 'Kapitel herunterladen';
    let cls = '';
    if (e && e.state === 'done') { sign = DL_DONE; label = 'Auf dem Gerät – tippen: löschen'; cls = ' ab-dl-on'; }
    else if (e && e.state === 'failed') { sign = '!'; label = 'Fehlgeschlagen – tippen: erneut versuchen'; }
    else if (e && e.state === 'downloading') { sign = Math.round((e.progress || 0) * 100) + '%'; label = 'Lädt'; cls = ' ab-dl-busy'; }
    else if (e) { sign = '…'; label = 'Wartet auf den Download'; cls = ' ab-dl-busy'; }
    return '<button type="button" class="ab-icon ab-dl' + cls + '" data-ab-dl="' + c.index + '" aria-label="' + label + '" title="' + label + '">' + sign + '</button>';
  }

  // All chapters not yet on the device, from the one that comes next on (then the ones before).
  function downloadAll() {
    const h = dlHost();
    const d = st.detail;
    if (!h || !d) return;
    const map = downloads() || {};
    const from = d.book.next ? d.book.next.index : 0;
    const order = d.chapters.slice(from).concat(d.chapters.slice(0, from));
    let n = 0;
    order.forEach(c => {
      const e = map[c.episode__id];
      if (e && e.state !== 'failed') return;
      if (e && typeof h.podcastRetryDownload === 'function') h.podcastRetryDownload(c.episode__id);
      else h.podcastDownload(JSON.stringify(c));
      n++;
    });
    toast(n ? n + (n === 1 ? ' Kapitel wird' : ' Kapitel werden') + ' heruntergeladen' : 'Schon alles auf dem Gerät');
    setTimeout(renderView, 300);
  }

  async function removeDownloads() {
    const h = dlHost();
    const d = st.detail;
    if (!h || !d || typeof h.podcastDeleteDownload !== 'function') return;
    const ok = typeof customConfirm === 'function'
      ? await customConfirm('Die Kapitel von „' + d.book.title + '“ vom Gerät löschen? Stellen und Lesezeichen bleiben; abspielen geht dann nur mit Verbindung.', {danger: true})
      : true;
    if (!ok) return;
    const map = downloads() || {};
    d.chapters.forEach(c => { if (map[c.episode__id]) h.podcastDeleteDownload(c.episode__id); });
    toast('Vom Gerät gelöscht');
    setTimeout(renderView, 300);
  }

  async function chapterDownloadTap(index) {
    const h = dlHost();
    const d = st.detail;
    const c = d && d.chapters[index];
    if (!h || !c) return;
    const e = (downloads() || {})[c.episode__id];
    if (!e) h.podcastDownload(JSON.stringify(c));
    else if (e.state === 'failed' && typeof h.podcastRetryDownload === 'function') h.podcastRetryDownload(c.episode__id);
    else if (e.state === 'done' && typeof h.podcastDeleteDownload === 'function') {
      const ok = typeof customConfirm === 'function' ? await customConfirm('Kapitel ' + (index + 1) + ' vom Gerät löschen?') : true;
      if (ok) h.podcastDeleteDownload(c.episode__id);
    }
    setTimeout(renderView, 300);
  }

  function chapterHtml(c, now, dlMap) {
    const playing = now && now.index === c.index;
    const dur = c.episode__duration_seconds || 0;
    let meta;
    if (c.played) meta = '✓ gehört';
    else if (playing && now.dur) meta = clock(now.pos) + ' / ' + clock(now.dur);
    else if (c.position_seconds > 0 && dur) meta = 'noch ' + hours(dur - c.position_seconds);
    else meta = dur ? hours(dur) : '';
    return '<div class="ab-chrow"><button type="button" class="ab-row ab-chapter' + (c.played ? ' ab-done' : '') + (playing ? ' ab-now' : '') +
      '" data-ab-ch="' + c.index + '"><span class="ab-num">' + (playing ? '♪' : (c.index + 1)) + '</span>' +
      '<span class="ab-card-text"><span class="ab-title">' + esc(c.episode__title) + '</span>' +
      '<span class="ab-meta">' + esc(meta) + '</span></span></button>' +
      '<button type="button" class="ab-icon ab-tick' + (c.played ? ' ab-ticked' : '') + '" data-ab-played="' + c.index + '" ' +
      'aria-label="' + (c.played ? 'Als nicht gehört markieren' : 'Als gehört markieren') + '" ' +
      'title="' + (c.played ? 'Als nicht gehört markieren' : 'Als gehört markieren') + '">' + (c.played ? '✓' : '○') + '</button>' +
      (dlMap ? chapterDownload(c, dlMap) : '') + '</div>';
  }

  // Play the open book's chapter `index` (from its own place, or from `ms`).
  function play(index, ms) {
    const h = host();
    const d = st.detail;
    if (!h || !d || !d.chapters[index]) return;
    const ch = d.chapters[index];
    const body = {feed_id: d.book.feed_id, chapters: d.chapters, index};
    const dur = ch.episode__duration_seconds || 0;
    if (ms != null) body.position_ms = ms;
    else if (ch.played || (dur && ch.position_seconds >= dur - 30)) body.position_ms = 0;   // heard already: from its start
    h.podcastPlayBook(JSON.stringify(body));
    setTimeout(poll, 400);
  }

  async function goOn(feedId) {
    if (st.open !== feedId || !st.detail || st.detail.book.feed_id !== feedId) {
      st.open = feedId;
      await loadDetail(feedId);
      if (!view || view.style.display === 'none') st.open = null;
    }
    const d = st.detail;
    if (!d || d.book.feed_id !== feedId) return;
    const b = d.book;
    play(b.next ? b.next.index : 0, b.next ? undefined : 0);
  }

  function togglePlay() {
    const now = nowInBook();
    const h = host();
    if (now && now.playing && h) {
      if (typeof h.podcastToggle === 'function') h.podcastToggle();
      else if (typeof h.podcastPause === 'function') h.podcastPause();
      setTimeout(poll, 300);
      return;
    }
    if (now && h) { play(now.index, now.pos); return; }
    goOn(st.open);
  }

  // The sleep timer to the end of the chapter: the episode's own chapter mark if it has
  // some (a long file), else the end of the episode.
  async function sleepAtChapterEnd() {
    const h = host();
    const now = nowInBook();
    if (!h || !now) return;
    const id = st.detail.chapters[now.index].episode__id;
    let marks = [];
    try { marks = (await api('/podcasts/episodes/' + id + '/')).chapters || []; } catch (e) {}
    const pos = (playerState() || {}).pos || now.pos;
    const next = marks.map(m => m.start * 1000).filter(s => s > pos + 1000).sort((a, b) => a - b)[0];
    if (next) {
      const speed = (st.now && st.now.speed) || 1;
      h.podcastSleep((next - pos) / speed / 60000);
      toast('Schlummer: in ' + clock((next - pos) / speed) + ', am Kapitelende');
    } else {
      h.podcastSleep(-1);
      toast('Schlummer: am Ende dieses Kapitels');
    }
  }

  async function addBookmark() {
    const now = nowInBook();
    if (!now) return;
    const pos = (playerState() || {}).pos || now.pos;
    const ch = st.detail.chapters[now.index];
    const note = typeof customPrompt === 'function'
      ? await customPrompt('Lesezeichen bei Kapitel ' + (now.index + 1) + ', ' + clock(pos) + ' – Notiz (optional):', '')
      : window.prompt('Notiz (optional):', '');
    if (note === null || note === undefined) return;
    try {
      await api('/podcasts/bookmarks/', {episode_id: ch.episode__id, position_ms: Math.round(pos), note: String(note)});
      toast('Lesezeichen gesetzt');
    } catch (e) {
      toast('Lesezeichen brauchen eine Verbindung.');
    }
    loadDetail(st.open);
  }

  async function editBookmark(id) {
    const m = st.detail.bookmarks.filter(x => x.id === id)[0];
    if (!m) return;
    const note = typeof customPrompt === 'function' ? await customPrompt('Notiz:', m.note) : window.prompt('Notiz:', m.note);
    if (note === null || note === undefined) return;
    try { await api('/podcasts/bookmarks/' + id + '/', {note: String(note)}); } catch (e) { toast('Braucht eine Verbindung.'); }
    loadDetail(st.open);
  }

  async function deleteBookmark(id) {
    const ok = typeof customConfirm === 'function' ? await customConfirm('Lesezeichen löschen?') : window.confirm('Lesezeichen löschen?');
    if (!ok) return;
    try { await api('/podcasts/bookmarks/' + id + '/delete/', {}); } catch (e) { toast('Braucht eine Verbindung.'); }
    loadDetail(st.open);
  }

  function playBookmark(id) {
    const m = st.detail.bookmarks.filter(x => x.id === id)[0];
    if (!m) return;
    const ch = st.detail.chapters.filter(c => c.episode__id === m.episode_id)[0];
    if (ch) play(ch.index, m.position_ms);
  }

  // One chapter heard or not: at once here, the host tells the server.
  function markChapter(index) {
    const h = host();
    const d = st.detail;
    const ch = d && d.chapters[index];
    if (!h || !ch) return;
    ch.played = !ch.played;
    const dur = ch.episode__duration_seconds || 0;
    if (!ch.played && dur && ch.position_seconds >= dur - 30) ch.position_seconds = 0;   // from the start again
    h.podcastMarkPlayedAll(JSON.stringify([ch.episode__id]), ch.played);
    renderView();
    setTimeout(() => loadDetail(st.open), 1500);
  }

  function markAll(played) {
    const h = host();
    const d = st.detail;
    if (!h || !d) return;
    h.podcastMarkPlayedAll(JSON.stringify(d.chapters.map(c => c.episode__id)), !!played);
    setTimeout(() => loadDetail(st.open), 900);
  }

  async function onViewClick(e) {
    const t = e.target.closest('button');
    const menu = view.querySelector('.ab-menu');
    if (menu && (!t || t.dataset.ab !== 'menu')) menu.hidden = true;
    if (!t) return;
    const act = t.dataset.ab;
    if (act === 'close') closeBook();
    else if (act === 'menu') { if (menu) menu.hidden = !menu.hidden; }
    else if (act === 'go') togglePlay();
    else if (act === 'sleep') sleepAtChapterEnd();
    else if (act === 'mark') addBookmark();
    else if (act === 'unplayed') markAll(false);
    else if (act === 'played') markAll(true);
    else if (act === 'folder') assignFolder(st.open);
    else if (act === 'dl-all') downloadAll();
    else if (act === 'dl-remove') removeDownloads();
    else if (act === 'dl-info') {
      const n = bookDownloads(st.detail, downloads() || {});
      toast(n.done === n.total ? 'Alle ' + n.total + ' Kapitel sind auf dem Gerät (löschen: ⋮ oben)' : n.done + ' von ' + n.total + ' Kapiteln sind da, der Rest lädt');
    }
    else if (act === 'podcast') {
      const ok = typeof customConfirm === 'function'
        ? await customConfirm('„' + st.detail.book.title + '“ wieder als Podcast führen? Es verlässt die Bücher; Stellen und Lesezeichen bleiben.')
        : true;
      if (!ok) return;
      setKind(st.open, 'podcast');
      closeBook();
    }
    else if (t.dataset.abPlayed != null) markChapter(Number(t.dataset.abPlayed));
    else if (t.dataset.abDl != null) chapterDownloadTap(Number(t.dataset.abDl));
    else if (t.dataset.abCh != null) play(Number(t.dataset.abCh));
    else if (t.dataset.abBm != null) playBookmark(Number(t.dataset.abBm));
    else if (t.dataset.abBmEdit != null) editBookmark(Number(t.dataset.abBmEdit));
    else if (t.dataset.abBmDel != null) deleteBookmark(Number(t.dataset.abBmDel));
  }

  shelf.addEventListener('click', e => {
    const t = e.target.closest('button, .ab-continue');
    if (!t) return;
    if (t.dataset.abGo != null) { e.stopPropagation(); goOn(Number(t.dataset.abGo)); return; }
    if (t.dataset.abOpen != null) { openBook(Number(t.dataset.abOpen)); return; }
    if (t.dataset.abSeries != null) { st.series = t.dataset.abSeries; renderShelf(); return; }
    if (t.dataset.ab === 'up') {
      st.series = null;
      renderShelf();
      return;
    }
    if (t.dataset.abMark != null) {
      const id = Number(t.dataset.abMark);
      st.picking = false;
      st.pickQuery = '';
      // At once on the shelf, before the server has it: a card that fills in when it answers.
      const f = ((podcastState() || {}).feeds || []).filter(x => x.id === id)[0];
      if (f) {
        st.books = [{feed_id: id, title: f.title, author: f.author || '', artwork_url: f.artwork_url || '',
          chapters: f.episode_count || 0, done: 0, total_seconds: 0, heard_seconds: 0, next: null, last_played_at: null}]
          .concat((st.books || []).filter(b => b.feed_id !== id));
      }
      setKind(id, 'audiobook');
      renderShelf();
      toast('„' + (f ? f.title : 'Podcast') + '“ ist jetzt ein Hörbuch');
      return;
    }
    if (t.dataset.ab === 'pick') { st.picking = !st.picking; st.pickFocus = st.picking; renderShelf(); return; }
    if (t.dataset.ab === 'pick-close') { st.picking = false; renderShelf(); }
  });
  shelf.addEventListener('input', e => {
    if (!e.target.classList.contains('ab-pick-q')) return;
    st.pickQuery = e.target.value;
    const box = shelf.querySelector('.ab-pick-list');
    const pods = ((podcastState() || {}).feeds || []).filter(f => f.kind !== 'audiobook');
    const tmp = document.createElement('div');
    tmp.innerHTML = pickHtml(pods);
    const fresh = tmp.querySelector('.ab-pick-list');
    if (box && fresh) box.innerHTML = fresh.innerHTML;
  });

  // Home's "Weiterhören" card (home.js) plays the book from where it was left.
  window.__dioraAudiobookGo = feedId => goOn(feedId);
  // Abos & Quellen (sources.js): open a book.
  window.__dioraAudiobookOpen = feedId => openBook(Number(feedId));

  // ---- following the player ------------------------------------------------------------

  let pollTimer = 0;
  let lastEpisode = null;
  function poll() {
    clearTimeout(pollTimer);
    const p = playerState();
    st.now = p;
    const ep = p && p.kind === 'podcast' ? p.episodeId : null;
    if (st.open != null && view && view.style.display !== 'none') {
      if (ep !== lastEpisode && lastEpisode != null) loadDetail(st.open);   // a chapter ended: progress moved
      else renderView();
      pollTimer = setTimeout(poll, 1000);
    } else if (ep !== lastEpisode && lastEpisode != null && tab.style.display !== 'none') {
      loadList();
    }
    lastEpisode = ep;
    if (st.open == null) pollTimer = setTimeout(poll, 5000);
  }

  // ---- when to look ------------------------------------------------------------------------

  const showTab = window.showTab;
  if (typeof showTab === 'function') {
    window.showTab = function (name) {
      const r = showTab.apply(this, arguments);
      if (name === 'audiobooks') loadList();
      else if (st.open != null) closeBook();
      return r;
    };
  }

  const back = window.__dioraBack;
  window.__dioraBack = function () {
    if (st.open != null) {
      const menu = view && view.querySelector('.ab-menu');
      if (menu && !menu.hidden) { menu.hidden = true; return true; }
      closeBook();
      return true;
    }
    if (st.picking && tab.style.display !== 'none') { st.picking = false; renderShelf(); return true; }
    if (st.series != null && tab.style.display !== 'none') {
      st.series = null;
      renderShelf();
      return true;
    }
    return back ? back() : false;
  };
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && st.open != null) closeBook();
  });
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden && tab.style.display !== 'none') loadList();
  });

  // The podcast host fills its state a moment after the page; the shelf needs its abos.
  setTimeout(loadList, 300);
  setTimeout(poll, 1500);

  // ---- styles ----------------------------------------------------------------------------

  const style = document.createElement('style');
  style.textContent = [
    '#audiobook-shelf { margin: 0 0 14px; }',
    '#audiobook-shelf:empty { display: none; }',
    '.ab-h { margin: 18px 0 8px; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #9a9a9a); }',
    '.ab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }',
    '.ab-link { background: none; border: none; color: var(--accent, #e63946); font: inherit; font-size: 14px; padding: 8px 0; cursor: pointer; }',
    '.ab-empty { color: var(--muted, #9a9a9a); font-size: 13px; line-height: 1.45; margin: 6px 0; }',
    '.ab-meta { display: block; color: var(--muted, #9a9a9a); font-size: 12px; line-height: 1.35; }',
    '.ab-title { display: block; font-size: 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }',
    '.ab-label { color: var(--accent, #e63946); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }',
    '.ab-bar { display: block; height: 3px; border-radius: 2px; background: var(--border, #2a2a2a); margin-top: 6px; overflow: hidden; }',
    '.ab-bar > span { display: block; height: 100%; background: var(--accent, #e63946); }',
    '.ab-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--panel, #161616); display: block; }',
    '.ab-nocover { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--muted, #9a9a9a); }',
    '.ab-cover-s { width: 56px; height: 56px; flex: none; }',
    '.ab-cover-xs { width: 40px; height: 40px; flex: none; font-size: 16px; }',
    '.ab-cover-l { width: 120px; height: 120px; flex: none; }',
    '.ab-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }',
    '.ab-continue { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 4px 0 6px; border: 1px solid var(--border, #2a2a2a); border-radius: 8px; background: var(--card, #0b0b0b); box-shadow: var(--shadow, none); cursor: pointer; }',
    '.ab-play { flex: none; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--accent, #e63946); color: var(--on-accent, #fff); font-size: 18px; cursor: pointer; }',
    '.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }',
    '.ab-card { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: none; color: inherit; font: inherit; cursor: pointer; text-align: left; min-width: 0; }',
    '.ab-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; background: none; border: none; border-bottom: 1px solid var(--border, #2a2a2a); color: inherit; font: inherit; cursor: pointer; text-align: left; }',
    '.ab-icon { background: none; border: none; color: inherit; font: inherit; font-size: 18px; min-width: 40px; min-height: 40px; cursor: pointer; }',
    '.ab-pick { margin-top: 10px; border: 1px solid var(--border, #2a2a2a); border-radius: 8px; padding: 10px 12px; background: var(--card, #0b0b0b); }',
    '.ab-pick-head { display: flex; align-items: center; justify-content: space-between; }',
    '.ab-pick-q { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a); background: var(--bg, #000); color: inherit; font: inherit; }',
    '.ab-pick-list { max-height: 50vh; overflow-y: auto; }',
    // Above the tab bar (150), below the page's dialogs (990): a note is asked for on top of it.
    '#ab-view { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; overflow-y: auto; background: var(--bg, #000); color: var(--fg, #eee); padding: 8px 16px 120px; box-sizing: border-box; }',
    '#ab-view > * { max-width: 760px; margin-left: auto; margin-right: auto; }',
    'html.ab-open { overflow: hidden; }',
    '.ab-top { display: flex; align-items: center; justify-content: space-between; position: relative; }',
    '.ab-back { background: none; border: none; color: inherit; font: inherit; font-size: 15px; padding: 10px 0; cursor: pointer; }',
    '.ab-menu { position: absolute; right: 16px; z-index: 2; display: flex; flex-direction: column; min-width: 240px; background: var(--raised, #222); border: 1px solid var(--border, #2a2a2a); border-radius: 8px; box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.4)); }',
    '#ab-view .ab-menu { margin: 0; left: auto; }',
    '.ab-menu[hidden] { display: none; }',
    '.ab-menu button { background: none; border: none; color: inherit; font: inherit; text-align: left; padding: 12px 14px; cursor: pointer; }',
    '.ab-menu button:hover, .ab-row:hover { background: var(--hover, rgba(255,255,255,0.05)); }',
    '.ab-hero { display: flex; gap: 16px; align-items: center; margin: 6px auto 14px; }',
    '.ab-hero-text { flex: 1; min-width: 0; }',
    '.ab-book-title { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }',
    '.ab-progress { margin-top: 6px; }',
    '.ab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }',
    '.ab-btn { min-height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--border-strong, #444); background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }',
    '.ab-btn[disabled] { opacity: 0.4; cursor: default; }',
    '.ab-primary { background: var(--accent, #e63946); border-color: var(--accent, #e63946); color: var(--on-accent, #fff); min-width: 150px; }',
    '.ab-num { flex: none; width: 28px; text-align: right; color: var(--muted, #9a9a9a); font-size: 13px; }',
    '.ab-chapter.ab-done .ab-title { color: var(--muted, #9a9a9a); }',
    '.ab-chapter.ab-now .ab-title, .ab-chapter.ab-now .ab-num { color: var(--accent, #e63946); }',
    '.ab-mark, .ab-chrow { display: flex; align-items: center; }',
    '.ab-place { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }',
    '.ab-place .ab-back { padding: 6px 0; }',
    '.ab-chips { margin: 0 0 10px; }',
    '.ab-stack-covers { position: relative; display: block; }',
    '.ab-stack-covers::before, .ab-stack-covers::after { content: ""; position: absolute; left: 6%; right: 6%; height: 100%; border-radius: 6px; border: 1px solid var(--border-strong, #444); background: var(--panel, #161616); }',
    '.ab-stack-covers::before { top: -8px; left: 12%; right: 12%; }',
    '.ab-stack-covers::after { top: -4px; }',
    '.ab-stack-covers .ab-cover { position: relative; z-index: 1; }',
    '.ab-chrow .ab-row { flex: 1; min-width: 0; }',
    '.ab-chrow { border-bottom: 1px solid var(--border, #2a2a2a); }',
    '.ab-chrow .ab-row { border-bottom: none; }',
    '.ab-tick { color: var(--muted, #9a9a9a); font-size: 17px; }',
    '.ab-tick.ab-ticked { color: var(--accent, #e63946); }',
    '.ab-dl { color: var(--muted, #9a9a9a); font-size: 15px; min-width: 44px; }',
    '.ab-dl-ic { width: 20px; height: 20px; vertical-align: -4px; }',
    '.ab-dl.ab-dl-on { color: var(--fg, inherit); }',
    '.ab-dl.ab-dl-busy { font-size: 12px; }',
    '.ab-btn.ab-dl-on { border-color: var(--fg, currentColor); }',
    '.ab-mark .ab-row { flex: 1; min-width: 0; }',
    '#ab-toast { position: fixed; left: 50%; bottom: calc(var(--nui-dock-h, 0px) + 90px); transform: translateX(-50%); z-index: 2500; background: var(--raised, #222); color: var(--fg, #eee); padding: 10px 16px; border-radius: 8px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - 32px); }',
    '#ab-toast.ab-show { opacity: 1; }',
    '@media (max-width: 480px) { .ab-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .ab-cover-l { width: 96px; height: 96px; } }',
  ].join('\n');
  document.head.appendChild(style);
})();