/* PresetBrowser.jsx — port of the redesigned plugin preset browser
   (magicVocals/app/src/components/PresetBrowser.tsx) into the
   JSX-via-Babel format used by the desktop.html Live demo. Replaces
   the legacy 7-tile preset gallery on the Magic Vocals LP.

   Source of truth for preset metadata: magicVocals/Presets/MVPresets.json.
   Audio engine state fields are stripped — this browser is the marketing
   surface; audio playback in the LP still flows through the hero ABBar
   driven by the legacy MV_PRESETS in Presets.jsx (Phase 3 of D17 wires
   per-preset audio into this browser).

   Exposes globals: MV_FACTORY_PRESETS, MV_PRESET_CATEGORIES,
   MV_PRESET_TAGS, MV_PRESET_TAG_GROUPS, MV_BROWSER_CATEGORIES,
   PresetBrowser. Loaded by desktop.html before MagicVocalsApp.jsx. */

const { useCallback: _ucb, useEffect: _uef, useMemo: _ume, useState: _ust } = React;

const MV_PRESET_CATEGORIES = ['Essentials','North America','Europe','Brazil','Latin','Global','Character','Custom'];
const MV_PRESET_TAGS = ['Modern','Vintage','Wet','Dry','Smooth','In Your Face','Warm','Bright','Wide','Intimate','Female'];
const MV_PRESET_TAG_GROUPS = [['Modern','Vintage'],['Wet','Dry'],['Smooth','In Your Face'],['Warm','Bright'],['Wide','Intimate']];
const MV_BROWSER_CATEGORIES = ['Custom','All','Essentials','Character','North America','Europe','Brazil','Latin','Global'];

const MV_CATEGORY_LABEL = {
  All: 'All',
  Essentials: 'Essentials',
  'North America': 'North America',
  Europe: 'Europe',
  Brazil: 'Brazil',
  Latin: 'Latin',
  Global: 'Global',
  Character: 'Character',
  Custom: 'User Presets',
};

// 58 factory presets snapshot from magicVocals/Presets/MVPresets.json.
const MV_FACTORY_PRESETS = [
  { name: 'INIT',                    category: 'Essentials',    tags: [] },
  { name: 'Full Power',              category: 'Essentials',    tags: ['In Your Face'] },
  { name: 'Just Delay',              category: 'Essentials',    tags: ['Wet'] },
  { name: 'Just Reverb',             category: 'Essentials',    tags: ['Wet'] },
  { name: 'Bedroom Pop',             category: 'North America', tags: ['Smooth','Wet','Intimate'] },
  { name: 'Country Folk',            category: 'North America', tags: ['Smooth','Dry','Intimate'] },
  { name: 'Drill',                   category: 'North America', tags: ['Modern','Dry','In Your Face'] },
  { name: 'Indie Rock',              category: 'North America', tags: ['Modern','Wet','Wide'] },
  { name: 'Lo-Fi Hip-Hop',           category: 'North America', tags: ['Vintage','Wet','Warm'] },
  { name: 'Modern Country',          category: 'North America', tags: ['Modern','Smooth'] },
  { name: 'Modern Hip-Hop',          category: 'North America', tags: ['Modern','Dry'] },
  { name: 'Modern Pop',              category: 'North America', tags: ['Modern','Bright'] },
  { name: 'Neo-Soul',                category: 'North America', tags: ['Vintage','Smooth','Warm'] },
  { name: 'Pop Chorus',              category: 'North America', tags: ['Modern','Wet','Wide','Female'] },
  { name: 'Rock',                    category: 'North America', tags: ['Modern'] },
  { name: 'Smooth R&B',              category: 'North America', tags: ['Smooth','Wet','Warm'] },
  { name: 'Trap',                    category: 'North America', tags: ['Modern','Wet'] },
  { name: 'Dancehall UK',            category: 'Europe',        tags: ['Modern','Dry','In Your Face'] },
  { name: 'EDM Festival',            category: 'Europe',        tags: ['Modern','Wet','Wide','In Your Face','Bright','Female'] },
  { name: 'Eurodance',               category: 'Europe',        tags: ['Modern','Wet','Wide','In Your Face','Female'] },
  { name: 'Hyperpop',                category: 'Europe',        tags: ['Modern','In Your Face','Bright','Female'] },
  { name: 'Indie UK',                category: 'Europe',        tags: ['Vintage','Wet','Warm'] },
  { name: 'Synth-Pop',               category: 'Europe',        tags: ['Vintage','Wet','Wide','Bright','Female'] },
  { name: 'UK Drill',                category: 'Europe',        tags: ['Modern','Dry','In Your Face'] },
  { name: 'UK Garage',               category: 'Europe',        tags: ['Modern','Wet','Wide','Female'] },
  { name: 'Arrocha',                 category: 'Brazil',        tags: ['Smooth','Wet','Warm'] },
  { name: 'Brega Funk',              category: 'Brazil',        tags: ['Modern','Wet','Wide'] },
  { name: 'Forró Eletrônico',        category: 'Brazil',        tags: ['Modern','Wet','In Your Face'] },
  { name: 'Funk Carioca',            category: 'Brazil',        tags: ['Modern','Dry','In Your Face'] },
  { name: 'Funk Consciente',         category: 'Brazil',        tags: ['Modern','Dry'] },
  { name: 'Funk Mandelão',           category: 'Brazil',        tags: ['Modern','Wet','Wide','In Your Face'] },
  { name: 'Gospel',                  category: 'Brazil',        tags: ['Smooth','Wet','Wide','Female'] },
  { name: 'MPB Moderno',             category: 'Brazil',        tags: ['Modern','Smooth'] },
  { name: 'Pagode',                  category: 'Brazil',        tags: ['Smooth','Wet','Warm'] },
  { name: 'Piseiro',                 category: 'Brazil',        tags: ['Modern','Wet'] },
  { name: 'Sertanejo Raiz',          category: 'Brazil',        tags: ['Vintage','Dry','Warm'] },
  { name: 'Sertanejo Sofrência',     category: 'Brazil',        tags: ['Smooth','Wet','Female'] },
  { name: 'Sertanejo Universitário', category: 'Brazil',        tags: ['Modern'] },
  { name: 'Trap BR',                 category: 'Brazil',        tags: ['Modern','Wet'] },
  { name: 'Bachata',                 category: 'Latin',         tags: ['Vintage','Wet','Smooth','Warm'] },
  { name: 'Cumbia',                  category: 'Latin',         tags: ['Vintage','Wet','Warm'] },
  { name: 'Latin Pop',               category: 'Latin',         tags: ['Modern','Wet','Bright'] },
  { name: 'Latin Trap',              category: 'Latin',         tags: ['Modern','Wet'] },
  { name: 'Reggaeton Modern',        category: 'Latin',         tags: ['Modern','Wet','In Your Face'] },
  { name: 'Regional Mexicano',       category: 'Latin',         tags: ['Modern','Warm'] },
  { name: 'Salsa',                   category: 'Latin',         tags: ['Vintage','Wet'] },
  { name: 'Afrobeats',               category: 'Global',        tags: ['Modern','Wet','Smooth'] },
  { name: 'Amapiano',                category: 'Global',        tags: ['Modern','Wet','Wide','Smooth'] },
  { name: 'Bollywood',               category: 'Global',        tags: ['Modern','Wet','Wide','Warm'] },
  { name: 'J-Pop',                   category: 'Global',        tags: ['Modern','Wet','Bright','Female'] },
  { name: 'K-Pop',                   category: 'Global',        tags: ['Modern','Wet','Wide','Bright','Female'] },
  { name: 'Mandopop',                category: 'Global',        tags: ['Modern','Wet','Smooth'] },
  { name: '80s',                     category: 'Character',     tags: ['Vintage','Wet','Wide'] },
  { name: 'Cathedral',               category: 'Character',     tags: ['Wet','Wide','Smooth'] },
  { name: 'Megaphone Hard',          category: 'Character',     tags: ['Vintage','In Your Face'] },
  { name: 'Telephone',               category: 'Character',     tags: ['Vintage','In Your Face'] },
  { name: 'Vintage Soul',            category: 'Character',     tags: ['Vintage','Wet','Smooth','Warm'] },
  { name: 'Whisper',                 category: 'Character',     tags: ['Smooth','Dry','Intimate'] },
];

const FAV_KEY = 'mv.lp.preset.favorites';
const REC_KEY = 'mv.lp.preset.recent';
const REC_CAP = 8;

const safeReadArr = (key) => {
  if (typeof window === 'undefined') return [];
  try {
    const raw = window.localStorage.getItem(key);
    if (raw == null) return [];
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed)) return [];
    return parsed.filter(v => typeof v === 'string');
  } catch { return []; }
};
const safeWriteArr = (key, value) => {
  if (typeof window === 'undefined') return;
  try { window.localStorage.setItem(key, JSON.stringify(value)); } catch {}
};

const filterByTags = (presets, tags) => {
  if (tags.size === 0) return presets;
  return presets.filter(p => {
    for (const t of tags) if (!p.tags.includes(t)) return false;
    return true;
  });
};
const filterByQuery = (presets, q) => {
  const s = q.trim().toLowerCase();
  if (s.length === 0) return presets;
  return presets.filter(p => p.name.toLowerCase().includes(s));
};

// Inline-styled preset browser. Matches the plugin's PresetBrowser
// modal visually but lives as a section panel inside the LP — same
// sidebar / tags / search / list / favorites / recent.
const PresetBrowser = ({ current, onLoad }) => {
  const [activeCategory, setActiveCategoryRaw] = _ust('All');
  const [activeTags, setActiveTags] = _ust(() => new Set());
  const [searchQuery, setSearchQuery] = _ust('');
  const [showFavoritesOnly, setShowFavoritesOnlyRaw] = _ust(false);
  const [showRecentOnly, setShowRecentOnlyRaw] = _ust(false);
  const [favorites, setFavorites] = _ust(() => new Set());
  const [recent, setRecent] = _ust([]);

  _uef(() => {
    setFavorites(new Set(safeReadArr(FAV_KEY)));
    setRecent(safeReadArr(REC_KEY).slice(0, REC_CAP));
  }, []);

  const setActiveCategory = _ucb((c) => {
    setActiveCategoryRaw(c);
    setShowFavoritesOnlyRaw(false);
    setShowRecentOnlyRaw(false);
  }, []);
  const setShowFavoritesOnly = _ucb((v) => {
    setShowFavoritesOnlyRaw(v);
    if (v) setShowRecentOnlyRaw(false);
  }, []);
  const setShowRecentOnly = _ucb((v) => {
    setShowRecentOnlyRaw(v);
    if (v) setShowFavoritesOnlyRaw(false);
  }, []);

  const toggleTag = _ucb((tag) => {
    setActiveTags(prev => {
      const next = new Set(prev);
      if (next.has(tag)) {
        next.delete(tag);
      } else {
        for (const [a, b] of MV_PRESET_TAG_GROUPS) {
          if (tag === a) next.delete(b);
          else if (tag === b) next.delete(a);
        }
        next.add(tag);
      }
      return next;
    });
  }, []);
  const clearTags = _ucb(() => setActiveTags(new Set()), []);

  const isFavorite = _ucb((name) => favorites.has(name), [favorites]);
  const toggleFavorite = _ucb((name) => {
    if (!name) return;
    setFavorites(prev => {
      const next = new Set(prev);
      if (next.has(name)) next.delete(name);
      else next.add(name);
      safeWriteArr(FAV_KEY, Array.from(next));
      return next;
    });
  }, []);

  const handleLoad = _ucb((name) => {
    if (!name) return;
    setRecent(prev => {
      const next = [name, ...prev.filter(n => n !== name)].slice(0, REC_CAP);
      safeWriteArr(REC_KEY, next);
      return next;
    });
    if (typeof onLoad === 'function') onLoad(name);
  }, [onLoad]);

  const filteredPresets = _ume(() => {
    let scope;
    if (showFavoritesOnly) {
      scope = MV_FACTORY_PRESETS.filter(p => favorites.has(p.name));
    } else if (showRecentOnly) {
      const order = new Map(recent.map((n, i) => [n, i]));
      scope = MV_FACTORY_PRESETS.filter(p => order.has(p.name))
        .sort((a, b) => order.get(a.name) - order.get(b.name));
    } else if (activeCategory === 'All') {
      scope = MV_FACTORY_PRESETS;
    } else if (activeCategory === 'Custom') {
      scope = [];
    } else {
      scope = MV_FACTORY_PRESETS.filter(p => p.category === activeCategory);
    }
    return filterByQuery(filterByTags(scope, activeTags), searchQuery);
  }, [activeCategory, activeTags, searchQuery, showFavoritesOnly, showRecentOnly, favorites, recent]);

  const visibleTags = _ume(() => {
    const scope =
      activeCategory === 'All' || activeCategory === 'Custom' || showFavoritesOnly || showRecentOnly
        ? MV_FACTORY_PRESETS
        : MV_FACTORY_PRESETS.filter(p => p.category === activeCategory);
    const seen = new Set();
    for (const p of scope) for (const t of p.tags) seen.add(t);
    return seen;
  }, [activeCategory, showFavoritesOnly, showRecentOnly]);

  const orderedVisibleTags = _ume(
    () => MV_PRESET_TAGS.filter(t => visibleTags.has(t)),
    [visibleTags]
  );

  const isCustomEmpty = activeCategory === 'Custom' && !showFavoritesOnly && !showRecentOnly;

  return (
    <div className="mv-pb-frame">
      <div className="mv-pb-modal mv-pb-modal--inline" role="region" aria-label="Magic Vocals preset browser">
        <div className="mv-pb-header">
          <input
            className="mv-pb-search"
            type="text"
            placeholder="Search presets…"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            aria-label="Search presets"
          />
          {current && (
            <span className="mv-pb-current" aria-live="polite">
              <span className="mv-pb-current__dot" aria-hidden="true"/>
              <span className="mv-pb-current__label">Loaded</span>
              <span className="mv-pb-current__name">{current}</span>
            </span>
          )}
        </div>

        <div className="mv-pb-body">
          <aside className="mv-pb-sidebar">
            <button
              className={`mv-pb-shortcut ${showFavoritesOnly ? 'on' : ''}`}
              onClick={() => setShowFavoritesOnly(!showFavoritesOnly)}
              type="button">
              ★ Favorites
            </button>
            <button
              className={`mv-pb-shortcut ${showRecentOnly ? 'on' : ''}`}
              onClick={() => setShowRecentOnly(!showRecentOnly)}
              type="button">
              ◷ Recent
            </button>
            <div className="mv-pb-divider" role="separator"/>
            {MV_BROWSER_CATEGORIES.map(c => {
              const isActive = !showFavoritesOnly && !showRecentOnly && activeCategory === c;
              const isUserPresets = c === 'Custom';
              return (
                <button
                  key={c}
                  className={`mv-pb-cat ${isActive ? 'on' : ''} ${isUserPresets ? 'mv-pb-cat--gold' : ''}`}
                  onClick={() => setActiveCategory(c)}
                  type="button">
                  {MV_CATEGORY_LABEL[c]}
                </button>
              );
            })}
          </aside>

          <section className="mv-pb-content">
            {orderedVisibleTags.length > 0 && !isCustomEmpty && (
              <div className="mv-pb-tags" role="group" aria-label="Filter by tag">
                {orderedVisibleTags.map(t => {
                  const on = activeTags.has(t);
                  return (
                    <button
                      key={t}
                      className={`mv-pb-tag ${on ? 'on' : ''}`}
                      onClick={() => toggleTag(t)}
                      type="button"
                      aria-pressed={on}>
                      {t}
                    </button>
                  );
                })}
                {activeTags.size > 0 && (
                  <button className="mv-pb-tag mv-pb-tag--clear" onClick={clearTags} type="button">
                    clear
                  </button>
                )}
              </div>
            )}

            <div className="mv-pb-list">
              {isCustomEmpty ? (
                <div className="mv-pb-empty">
                  Your saved patches show up here. Buy the plugin to start your library.
                </div>
              ) : filteredPresets.length === 0 ? (
                <div className="mv-pb-empty">
                  No presets match — try clearing filters.
                </div>
              ) : (
                filteredPresets.map(p => {
                  const isCurrent = p.name === current;
                  const fav = isFavorite(p.name);
                  return (
                    <div key={p.name} className={`mv-pb-row ${isCurrent ? 'current' : ''}`}>
                      <button
                        className="mv-pb-fav"
                        onClick={() => toggleFavorite(p.name)}
                        aria-label={fav ? `Unfavorite ${p.name}` : `Favorite ${p.name}`}
                        aria-pressed={fav}
                        type="button">
                        {fav ? '★' : '☆'}
                      </button>
                      <button
                        className="mv-pb-name"
                        onClick={() => handleLoad(p.name)}
                        type="button">
                        <span className="mv-pb-name-label">{p.name}</span>
                        {p.tags.length > 0 && (
                          <span className="mv-pb-row-tags">{p.tags.join(' · ')}</span>
                        )}
                      </button>
                    </div>
                  );
                })
              )}
            </div>
          </section>
        </div>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        .mv-pb-frame { max-width: 920px; margin: 0 auto; }
        .mv-pb-modal--inline {
          width: 100%;
          height: 580px;
          display: flex; flex-direction: column;
          background: linear-gradient(180deg, #0c0c18, #050509);
          border: 1px solid rgba(167,165,255,0.32);
          border-radius: 12px;
          box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 30px rgba(167,165,255,0.12);
          overflow: hidden;
          font-family: var(--font-main, inherit);
        }
        .mv-pb-header {
          display: flex; align-items: center; gap: 10px;
          padding: 12px 14px;
          border-bottom: 1px solid rgba(167,165,255,0.12);
          flex-shrink: 0;
        }
        .mv-pb-search {
          flex: 1; height: 36px; padding: 0 12px;
          background: #05050a;
          border: 1px solid rgba(167,165,255,0.22);
          border-radius: 6px;
          color: #fff; font-size: 13px; font-family: inherit; outline: none;
        }
        .mv-pb-search::placeholder { color: rgba(255,255,255,0.35); }
        .mv-pb-search:focus { border-color: var(--iris, #a7a5ff); }
        .mv-pb-current {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 6px 12px;
          background: rgba(167,165,255,0.10);
          border: 1px solid rgba(167,165,255,0.35);
          border-radius: 999px;
          font-size: 11px; letter-spacing: 0.04em;
          color: rgba(255,255,255,0.85);
          white-space: nowrap; max-width: 280px;
        }
        .mv-pb-current__dot {
          width: 7px; height: 7px; border-radius: 50%;
          background: var(--iris, #a7a5ff);
          box-shadow: 0 0 6px rgba(167,165,255,0.85);
          flex-shrink: 0;
        }
        .mv-pb-current__label {
          text-transform: uppercase; font-size: 9px; letter-spacing: 0.18em;
          color: rgba(255,255,255,0.55);
        }
        .mv-pb-current__name { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
        .mv-pb-body { flex: 1; min-height: 0; display: flex; }
        .mv-pb-sidebar {
          width: 160px; flex-shrink: 0;
          display: flex; flex-direction: column;
          padding: 8px 6px;
          border-right: 1px solid rgba(167,165,255,0.10);
          background: rgba(0,0,0,0.25);
          overflow-y: auto;
        }
        .mv-pb-shortcut, .mv-pb-cat {
          appearance: none; display: block; width: 100%;
          text-align: left; padding: 7px 10px; margin: 1px 0;
          background: transparent; border: 1px solid transparent;
          border-radius: 5px; color: #d4d4e0;
          font-size: 12px; font-family: inherit; letter-spacing: 0.02em;
          cursor: pointer;
          transition: background .12s ease, color .12s ease, border-color .12s ease;
        }
        .mv-pb-shortcut:hover, .mv-pb-cat:hover {
          background: rgba(167,165,255,0.08); color: #fff;
        }
        .mv-pb-shortcut.on, .mv-pb-cat.on {
          background: rgba(167,165,255,0.16);
          border-color: rgba(167,165,255,0.32);
          color: #fff; font-weight: 600;
        }
        .mv-pb-cat--gold { color: #f5c518; font-weight: 600; }
        .mv-pb-cat--gold:hover { color: #ffd76b; background: rgba(245,197,24,0.10); }
        .mv-pb-cat--gold.on {
          background: rgba(245,197,24,0.18);
          border-color: rgba(245,197,24,0.5);
          color: #ffd76b;
        }
        .mv-pb-shortcut {
          font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
          color: rgba(255,255,255,0.65);
        }
        .mv-pb-divider {
          height: 1px; margin: 6px 6px;
          background: rgba(167,165,255,0.12);
        }
        .mv-pb-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .mv-pb-tags {
          display: flex; flex-wrap: wrap; gap: 6px;
          padding: 10px 14px;
          border-bottom: 1px solid rgba(167,165,255,0.08);
        }
        .mv-pb-tag {
          appearance: none; padding: 5px 11px;
          background: transparent;
          border: 1px solid rgba(255,255,255,0.18);
          border-radius: 999px;
          color: rgba(255,255,255,0.7);
          font-size: 10px; font-family: inherit;
          letter-spacing: 0.12em; text-transform: uppercase;
          cursor: pointer;
          transition: color .12s ease, border-color .12s ease, background .12s ease;
        }
        .mv-pb-tag:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
        .mv-pb-tag.on {
          background: rgba(167,165,255,0.18);
          border-color: rgba(167,165,255,0.55);
          color: #fff;
        }
        .mv-pb-tag--clear {
          border-style: dashed;
          border-color: rgba(255,255,255,0.22);
          color: rgba(255,255,255,0.55);
        }
        .mv-pb-list { flex: 1; overflow-y: auto; padding: 4px 0; }
        .mv-pb-empty {
          padding: 28px 16px; text-align: center;
          color: rgba(255,255,255,0.4); font-style: italic; font-size: 13px;
        }
        .mv-pb-row {
          display: flex; align-items: stretch;
          border-bottom: 1px solid rgba(255,255,255,0.04);
        }
        .mv-pb-row:hover { background: rgba(167,165,255,0.06); }
        .mv-pb-row.current { background: rgba(167,165,255,0.12); }
        .mv-pb-fav {
          appearance: none; width: 36px; flex-shrink: 0;
          background: transparent; border: none;
          color: rgba(255,255,255,0.35);
          font-size: 14px; cursor: pointer; font-family: inherit;
          transition: color .12s ease;
        }
        .mv-pb-fav:hover { color: #fff; }
        .mv-pb-fav[aria-pressed='true'] { color: #f5c518; }
        .mv-pb-name {
          appearance: none; flex: 1;
          display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 11px 14px 11px 4px;
          background: transparent; border: none; text-align: left;
          color: #e6e6f0; font-size: 13px; font-family: inherit; cursor: pointer;
        }
        .mv-pb-row.current .mv-pb-name-label { font-weight: 600; color: #fff; }
        .mv-pb-row-tags {
          font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
          color: rgba(255,255,255,0.4); white-space: nowrap;
        }
      `}}/>
    </div>
  );
};

Object.assign(window, {
  MV_FACTORY_PRESETS,
  MV_PRESET_CATEGORIES,
  MV_PRESET_TAGS,
  MV_PRESET_TAG_GROUPS,
  MV_BROWSER_CATEGORIES,
  PresetBrowser,
});

const _injectMobileCss = () => {
  if (typeof document === 'undefined') return;
  if (document.getElementById('mv-pb-mobile-style')) return;
  const s = document.createElement('style');
  s.id = 'mv-pb-mobile-style';
  s.textContent = `
@media (max-width: 768px) {
  /* Per Chrys feedback: keep the desktop sidebar+content layout on
     mobile too — categories on the left, list on the right. The
     previous "stack everything" mobile attempt put presets BELOW
     categories which felt wrong. The sidebar is narrower on phone
     to leave room for the list, and the list rows shed their tag
     subtitle to keep names readable. */
  .mv-pb-frame { max-width: 100%; }
  .mv-pb-modal--inline {
    height: clamp(520px, 78vh, 720px);
    border-radius: 10px;
  }
  .mv-pb-header { gap: 8px; padding: 10px; }
  .mv-pb-search { height: 38px; font-size: 13px; }
  .mv-pb-current { max-width: 50%; }
  .mv-pb-current__name { display: none; } /* save room — pill still shows "Loaded" */
  .mv-pb-sidebar {
    width: 116px;          /* narrower on phone */
    padding: 6px 4px;
  }
  .mv-pb-shortcut, .mv-pb-cat {
    padding: 8px 8px;      /* taller for thumbs */
    font-size: 11px;
    letter-spacing: .04em;
  }
  .mv-pb-shortcut { font-size: 10px; letter-spacing: .12em; }
  .mv-pb-tags { padding: 8px 10px; gap: 5px; }
  .mv-pb-tag { padding: 7px 10px; font-size: 10px; }
  .mv-pb-row-tags { display: none; } /* names get full row */
  .mv-pb-row { min-height: 44px; }
  .mv-pb-fav { width: 38px; font-size: 14px; }
  .mv-pb-name { padding: 12px 12px 12px 4px; font-size: 13px; }
}
  `;
  document.head.appendChild(s);
};
_injectMobileCss();