app.py

"""Podify — AI Podcast Studio (Gradio + HuggingFace Spaces).

Phase 1: research agents (LangGraph + HF LLM + DuckDuckGo) write a script.
Phase 2: Fish Audio (OpenAudio S1-mini) voices the script, with presets + cloning.

The UI is themed to match the Podify "AI Podcast Studio" design: a dark, gradient
studio shell with a left sidebar (Create / Voices / Library) and a three-step Create
flow — topic → review the script → the finished episode.
"""

from __future__ import annotations

import glob
import html
import json
import os
import re
import shutil
import time
import uuid
from typing import List

import gradio as gr

from research.graph import generate_script, parse_script
from tts import engine as tts_engine
from tts import music as music_lib

MAX_SPEAKERS = 4
STYLES = ["interview", "conversational", "storytelling", "educational", "debate", "news"]

# Decorative sound-design beds (the demo TTS engine voices speech only; the bed is a
# label that travels with the episode for flavour, matching the design mockups).
SOUND_BEDS = [
    ("No music", "Pure voice"),
    ("Ambient Drift", "Soft, airy pads"),
    ("Lo-fi Pulse", "Mellow beats"),
    ("Cinematic Rise", "Epic & swelling"),
    ("Newsroom Bed", "Tense underscore"),
]

# Avatar gradients keyed by speaker order of appearance.
_AVATAR_GRADIENTS = [
    "linear-gradient(135deg,#ff5cce,#b14dff)",
    "linear-gradient(135deg,#3ad0ff,#4d7bff)",
    "linear-gradient(135deg,#3ddf9f,#2bbf8f)",
    "linear-gradient(135deg,#ffb45c,#ff7a59)",
]

SUGGESTIONS = [
    "The science of why we dream",
    "Could we actually live on Mars?",
    "How AI is reshaping music",
    "The hidden history of coffee",
    "Why do cities feel lonely?",
]

# Voice library shown on the Voices page. Each id maps to a playable sample clip under
# tts/voices/samples/<id>.wav (built by scripts/build_voice_samples.py from CMU ARCTIC).
# id=None is the "clone your own" slot (no bundled sample). Labels reflect the real
# underlying speaker so playback matches the description.
VOICE_LIBRARY = [
    ("nova", "Nova", "Female · American", 0, ["Warm", "Conversational", "Host"]),
    ("atlas", "Atlas", "Male · Scottish", 1, ["Deep", "Cinematic", "Narration"]),
    ("echo", "Echo", "Male · American", 2, ["Crisp", "News", "Authoritative"]),
    ("sage", "Sage", "Male · Canadian", 2, ["Calm", "Thoughtful", "Smooth"]),
    ("vivi", "Vivi", "Female · American", 3, ["Energetic", "Upbeat", "Bright"]),
    ("onyx", "Onyx", "Male · American", 1, ["Smooth", "Late-night", "Radio"]),
    ("rune", "Rune", "Male · Indian", 2, ["Gravelly", "Documentary", "Rich"]),
    (None, "My Voice", "You · Cloned", 3, ["Cloned", "Custom", "Clone to use"]),
]

_SAMPLES_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "tts", "voices", "samples")


def _sample_path(voice_id):
    """Absolute path to a voice's sample clip, or None if not bundled."""
    if not voice_id:
        return None
    p = os.path.join(_SAMPLES_DIR, f"{voice_id}.wav")
    return p if os.path.isfile(p) else None


# Selectable library voices (those with a bundled sample), by display name.
_VOICE_NAME_TO_ID = {name: vid for vid, name, *_ in VOICE_LIBRARY if vid}
_VOICE_AVATAR_IDX = {name: idx for vid, name, meta, idx, chips in VOICE_LIBRARY if vid}
LIBRARY_VOICE_NAMES = list(_VOICE_NAME_TO_ID.keys())
_VOICE_DEFAULTS = ["Nova", "Atlas", "Echo", "Sage"]


def _speaker_count(value, default: int = 2) -> int:
    """Normalize transient Gradio slider values such as None or 2.0."""
    try:
        n = int(float(value))
    except (TypeError, ValueError):
        n = default
    return max(1, min(MAX_SPEAKERS, n))


def _voice_config_for(name):
    """Resolve a library voice name (e.g. 'Nova') to its cloning reference clip + text."""
    vid = _VOICE_NAME_TO_ID.get(name)
    if not vid:
        return tts_engine.VoiceConfig()
    wav = os.path.join(_SAMPLES_DIR, f"{vid}.wav")
    txt = os.path.join(_SAMPLES_DIR, f"{vid}.txt")
    ref_text = ""
    if os.path.isfile(txt):
        with open(txt, encoding="utf-8") as f:
            ref_text = f.read().strip()
    return tts_engine.VoiceConfig(ref_audio=wav if os.path.isfile(wav) else None, ref_text=ref_text)


# --------------------------------------------------------------------------- cues
# OpenAudio emotion/tone cues like "(excited)" / "(chuckling)". The 0.5B S1-mini tends
# to *read* these aloud rather than act on them, so we strip them from the audio text
# and instead show them as styled "direction" tags in the script/transcript.
_CUE_RE = re.compile(r"\(([a-z][a-z \-']{1,28})\)")


def _strip_cues(text: str) -> str:
    """Remove parenthetical emotion cues from text destined for the TTS engine."""
    return re.sub(r"\s{2,}", " ", _CUE_RE.sub("", text)).strip()


def _cues_to_chips(escaped_text: str) -> str:
    """Wrap cues (in already-HTML-escaped text) as small styled tags for display."""
    return _CUE_RE.sub(lambda m: f"<span class='pf-cue'>{m.group(1)}</span>", escaped_text)


# --------------------------------------------------------------------- HTML builders
def _avatar(letter: str, idx: int, size: int = 30) -> str:
    grad = _AVATAR_GRADIENTS[idx % len(_AVATAR_GRADIENTS)]
    fs = max(11, size // 2 - 1)
    return (
        f"<span class='pf-avatar' style='background:{grad};width:{size}px;height:{size}px;"
        f"font-size:{fs}px'>{html.escape(letter[:1].upper())}</span>"
    )


def _speaker_index_map(script: str) -> dict:
    order: List[str] = []
    for spk, _ in parse_script(script or ""):
        if spk not in order:
            order.append(spk)
    return {spk: i for i, spk in enumerate(order)}


def script_to_bubbles(script: str) -> str:
    """Render the review-step chat bubbles from a `Speaker: text` script."""
    lines = parse_script(script or "")
    if not lines:
        return (
            "<div class='pf-empty'>Your script will appear here as editable lines once "
            "Podify finishes writing it.</div>"
        )
    idx = _speaker_index_map(script)
    roles = {}
    bubbles = []
    for spk, txt in lines:
        i = idx.get(spk, 0)
        # First distinct speaker reads as HOST, the rest as GUEST.
        role = "HOST" if i == 0 else "GUEST"
        roles.setdefault(spk, role)
        bubbles.append(
            "<div class='pf-bubble'>"
            f"<div class='pf-bubble-side'>{_avatar(spk, i)}"
            f"<div class='pf-bubble-meta'><span class='pf-name'>{html.escape(spk)}</span>"
            f"<span class='pf-role'>{roles[spk]} ▾</span></div></div>"
            f"<div class='pf-bubble-text'>{_cues_to_chips(html.escape(txt))}</div>"
            "</div>"
        )
    return "<div class='pf-bubbles'>" + "".join(bubbles) + "</div>"


def script_to_transcript(script: str) -> str:
    """Render the finished-episode transcript with running timestamps."""
    lines = parse_script(script or "")
    if not lines:
        return "<div class='pf-empty'>No transcript available.</div>"
    idx = _speaker_index_map(script)
    rows = []
    elapsed = 0.0
    for n, (spk, txt) in enumerate(lines):
        ts = f"{int(elapsed // 60)}:{int(elapsed % 60):02d}"
        # ~2.6 words/sec speaking rate for a plausible running clock.
        elapsed += max(3.0, len(txt.split()) / 2.6)
        active = " pf-tr-active" if n == 0 else ""
        rows.append(
            f"<div class='pf-tr-row{active}'>"
            f"<span class='pf-ts'>{ts}</span>"
            f"{_avatar(spk, idx.get(spk, 0), 26)}"
            f"<span class='pf-tr-text'>{_cues_to_chips(html.escape(txt))}</span>"
            "</div>"
        )
    return "<div class='pf-transcript'>" + "".join(rows) + "</div>"


def loading_html(topic: str, mode: str = "script") -> str:
    """Full-panel 'producing' loader matching the studio mockup."""
    if mode == "script":
        title = "Writing your script"
        steps = [
            ("Planning the research", "done"),
            ("Searching the web", "done"),
            ("Outlining the episode", "done"),
            ("Writing the script", "active"),
        ]
    else:
        title = "Producing your episode"
        steps = [
            ("Analyzing script & pacing", "done"),
            ("Synthesizing voices", "done"),
            ("Mixing the sound bed", "done"),
            ("Mastering audio", "active"),
        ]
    eyebrow = "GENERATING · " + html.escape((topic or "your episode").strip().upper())
    items = "".join(
        f"<div class='pf-lstep {state}'><span class='pf-ldot'>"
        f"{'✓' if state == 'done' else ''}</span>{html.escape(label)}</div>"
        for label, state in steps
    )
    return (
        "<div class='pf-loading'>"
        "<div class='pf-orb'></div>"
        f"<div class='pf-eyebrow'>{eyebrow}</div>"
        f"<h2>{title}</h2>"
        f"<div class='pf-load-steps'>{items}</div>"
        "</div>"
    )


def _episode_meta(topic: str, script: str, bed: str) -> str:
    speakers = list(_speaker_index_map(script).keys())[:MAX_SPEAKERS]
    chips = "".join(
        _avatar(s, i, 22) for i, s in enumerate(speakers)
    )
    names = " & ".join(speakers) if speakers else "Podify voices"
    lines = parse_script(script or "")
    total = 0.0
    for _, txt in lines:
        total += max(3.0, len(txt.split()) / 2.6)
    dur = f"{int(total // 60)}:{int(total % 60):02d}"
    title = html.escape(topic.strip() or "Untitled episode")
    return (
        "<div class='pf-player-head'>"
        "<div class='pf-player-art'>🎙️</div>"
        "<div class='pf-player-info'>"
        "<div class='pf-eyebrow'>EPISODE READY · MP3 · 48KHZ</div>"
        f"<div class='pf-player-title'>{title}</div>"
        f"<div class='pf-player-sub'>{chips}&nbsp; {html.escape(names)} "
        f"&nbsp;·&nbsp; ♫ {html.escape(bed)} &nbsp;·&nbsp; {dur}</div>"
        "</div></div>"
    )


# ------------------------------------------------------------------------- library
MAX_LIBRARY = 9
_HERE = os.path.dirname(os.path.abspath(__file__))

# Freshly generated audio (for the result-page player) lives in a local, ephemeral dir.
EPISODES_DIR = os.path.join(_HERE, "_episodes")
os.makedirs(EPISODES_DIR, exist_ok=True)


def _resolve_store_dir() -> str:
    """Shared, persistent episode store.

    On the Space the bucket hf://buckets/build-small-hackathon/podify is mounted
    read-write at /data, so saved episodes persist there and are visible to every
    visitor. Locally (no mount) we fall back to a repo dir so the app still runs.
    """
    base = "/data" if os.path.isdir("/data") else os.path.join(_HERE, "_library")
    d = os.path.join(base, "episodes")
    try:
        os.makedirs(d, exist_ok=True)
        return d
    except OSError:
        d = os.path.join(_HERE, "_library", "episodes")
        os.makedirs(d, exist_ok=True)
        return d


STORE_DIR = _resolve_store_dir()
print(f"[podify] episode store: {STORE_DIR} "
      f"({'shared bucket /data' if STORE_DIR.startswith('/data') else 'LOCAL fallback'})", flush=True)
_CARD_GRADIENTS = [
    "linear-gradient(135deg,#4d8dff,#7c5cff)",
    "linear-gradient(135deg,#b14dff,#ff5cce)",
    "linear-gradient(135deg,#3ad0ff,#4d7bff)",
    "linear-gradient(135deg,#ffb45c,#ff7a59)",
    "linear-gradient(135deg,#c9a3ff,#a78bfa)",
    "linear-gradient(135deg,#3ddf9f,#2bbf8f)",
]


def _episode_duration(script: str) -> str:
    total = 0.0
    for _, txt in parse_script(script or ""):
        total += max(3.0, len(txt.split()) / 2.6)
    return f"{int(total // 60)}:{int(total % 60):02d}"


def _episode_card_html(ep: dict, idx: int) -> str:
    import random

    grad = _CARD_GRADIENTS[idx % len(_CARD_GRADIENTS)]
    rnd = random.Random(hash(ep.get("title", "")) & 0xFFFF)
    bars = "".join(f"<i style='height:{rnd.randint(20, 90)}%'></i>" for _ in range(34))
    return (
        f"<div class='pf-ep-art' style='background:{grad}'>"
        f"<div class='pf-ep-wave'>{bars}</div>"
        f"<span class='pf-ep-dur'>{html.escape(ep.get('dur', ''))}</span></div>"
        "<div class='pf-ep-body'>"
        f"<div class='pf-ep-title'>{html.escape(ep.get('title', 'Untitled episode'))}</div>"
        f"<div class='pf-ep-meta'>🎙 {html.escape(ep.get('meta', ''))}</div>"
        "</div>"
    )


def _load_saved_episodes():
    """Read every saved episode (newest first) from the shared store."""
    eps = []
    for jp in glob.glob(os.path.join(STORE_DIR, "*.json")):
        try:
            with open(jp, encoding="utf-8") as f:
                m = json.load(f)
        except Exception:
            continue
        wav = os.path.join(STORE_DIR, f"{m.get('id')}.wav")
        if not os.path.isfile(wav):
            continue
        m["wav_path"] = wav
        eps.append(m)
    eps.sort(key=lambda e: e.get("created", 0), reverse=True)
    return eps


def render_library():
    """Build slot updates from the shared store (visible to every visitor)."""
    eps = _load_saved_episodes()[:MAX_LIBRARY]
    out = [
        gr.update(
            value="<div class='pf-step-h'><span class='t'>▥ Your episodes</span>"
            f"<span class='h'>{len(eps)}</span></div>"
        ),
        gr.update(visible=len(eps) == 0),
    ]
    for i in range(MAX_LIBRARY):
        if i < len(eps):
            out += [gr.update(visible=True),
                    gr.update(value=_episode_card_html(eps[i], i)),
                    gr.update(value=eps[i]["wav_path"])]
        else:
            out += [gr.update(visible=False), gr.update(), gr.update()]
    return out


def save_episode(ep):
    """Persist the episode (audio + metadata) to the shared store/bucket."""
    if not ep:
        raise gr.Error("Generate an episode first, then save it.")
    src = ep.get("wav_path")
    if not src or not os.path.isfile(src):
        raise gr.Error("Episode audio not found — try generating again.")
    eid = ep.get("id") or uuid.uuid4().hex[:10]
    dst_wav = os.path.join(STORE_DIR, f"{eid}.wav")
    try:
        if not os.path.exists(dst_wav):
            shutil.copyfile(src, dst_wav)
        meta = {k: ep.get(k) for k in ("id", "title", "voices", "bed", "dur", "meta", "created")}
        meta["id"] = eid
        with open(os.path.join(STORE_DIR, f"{eid}.json"), "w", encoding="utf-8") as f:
            json.dump(meta, f)
    except OSError as e:
        raise gr.Error(f"Couldn't save to the library store: {e}")
    gr.Info("Saved to library.")


# ------------------------------------------------------------------- Phase 1 handler
def run_research(topic, style, duration, num_speakers, *voice_names, progress=gr.Progress()):
    topic = (topic or "").strip()
    if not topic:
        raise gr.Error("Please enter a topic for the podcast.")
    n = _speaker_count(num_speakers)
    # Use the picked voice names as the script's speaker names when they're distinct, so the
    # dialogue reads "Nova: …" / "Atlas: …". (Audio mapping is order-based regardless, so a
    # duplicate pick simply falls back to generic Host/Guest labels.)
    names = [voice_names[i] for i in range(n) if i < len(voice_names) and voice_names[i]]
    speaker_names = names if (len(names) == n and len(set(names)) == n) else None
    progress(0.1, desc="Planning research…")
    state = generate_script(
        topic,
        style=style,
        duration_min=int(duration),
        num_speakers=n,
        speaker_names=speaker_names,
    )
    progress(0.9, desc="Finalizing script…")
    script = state.get("script", "")
    return script, script, script_to_bubbles(script)


# ------------------------------------------------- parse script into lines + speakers
def setup_voices(script_text):
    lines = parse_script(script_text or "")
    speakers: List[str] = []
    for spk, _ in lines:
        if spk not in speakers:
            speakers.append(spk)
    return lines, speakers[:MAX_SPEAKERS]


# ------------------------------------------------------------------- Phase 2 handler
def run_tts(lines, speakers, topic, bed, *voice_names, progress=gr.Progress()):
    if not tts_engine.is_available():
        raise gr.Error(
            "The TTS stack (fish-speech + GPU) is not available in this environment. "
            "Deploy to a ZeroGPU Space to generate audio."
        )
    if not lines:
        raise gr.Error("No script is loaded. Generate a script, then review it before "
                       "producing the episode.")

    # Map each speaker to the voice picked on the Create page. Prefer a name match (the
    # script's speaker labels are the picked voice names), else fall back to slot order.
    voice_map = {}
    for i, speaker in enumerate(speakers):
        if speaker in _VOICE_NAME_TO_ID:
            voice_map[speaker] = _voice_config_for(speaker)
        else:
            name = voice_names[i] if i < len(voice_names) else (voice_names[0] if voice_names else None)
            voice_map[speaker] = _voice_config_for(name)

    # Strip emotion cues from the spoken text (S1-mini would read them aloud).
    tts_lines = [(spk, _strip_cues(txt)) for spk, txt in lines]

    progress(0.05, desc="Analyzing script & pacing…")
    try:
        sr, audio = tts_engine.generate_podcast(tts_lines, voice_map, progress=progress)
    except tts_engine.TTSModelAccessError as e:
        raise gr.Error(str(e)) from e

    # Mix the selected background-music bed under the voices (no-op for "No music").
    progress(0.95, desc="Mixing the sound bed…")
    audio = music_lib.mix(audio, bed, sr)

    # Rebuild a script string from the (possibly edited) lines for the transcript.
    script = "\n".join(f"{spk}: {txt}" for spk, txt in lines)

    # Write the wav to the local (ephemeral) dir for the result-page player. It's only
    # copied into the shared store/bucket when the user clicks "Save to library".
    eid = uuid.uuid4().hex[:10]
    wav_file = os.path.join(EPISODES_DIR, f"{eid}.wav")
    shutil.copyfile(tts_engine.write_wav(sr, audio), wav_file)

    voices = " & ".join(speakers) if speakers else "Podify"
    dur = _episode_duration(script)
    episode = {
        "id": eid,
        "title": (topic or "").strip() or "Untitled episode",
        "script": script,
        "wav_path": wav_file,
        "bed": bed,
        "dur": dur,
        "voices": voices,
        "meta": f"{voices} · {bed} · {dur}",
        "created": time.time(),
    }
    return (
        (sr, audio),
        wav_file,
        _episode_meta(topic, script, bed),
        script_to_transcript(script),
        episode,
    )


# ----------------------------------------------------------------------------- views
def _show(create=False, voices=False, library=False):
    return (
        gr.update(visible=create),
        gr.update(visible=voices),
        gr.update(visible=library),
        gr.update(elem_classes=["pf-nav"] + (["active"] if create else [])),
        gr.update(elem_classes=["pf-nav"] + (["active"] if voices else [])),
        gr.update(elem_classes=["pf-nav"] + (["active"] if library else [])),
    )


def goto_create():
    return _show(create=True)


def goto_voices():
    return _show(voices=True)


def goto_library():
    return _show(library=True)


def show_step(step):  # step in {1, 2, 3, "loading"}
    return (
        gr.update(visible=step == 1),
        gr.update(visible=step == 2),
        gr.update(visible=step == 3),
        gr.update(visible=step == "loading"),
    )


def enter_loading_script(topic):
    # Validate before swapping to the loader so an empty topic keeps step 1 visible.
    if not (topic or "").strip():
        raise gr.Error("Please enter a topic for the podcast.")
    return (*show_step("loading"), loading_html(topic, "script"))


def enter_loading_podcast(topic):
    return (*show_step("loading"), loading_html(topic, "podcast"))


# -------------------------------------------------------------------------------- CSS
CUSTOM_CSS = """
:root, .dark {
  --pf-bg:#08080c; --pf-panel:#101017; --pf-panel-2:#15151f; --pf-line:rgba(255,255,255,.07);
  --pf-text:#e9e9f2; --pf-mut:#7d7d8e; --pf-faint:#5a5a6b;
  --pf-grad:linear-gradient(135deg,#7c5cff 0%,#4d8dff 100%);
}
.gradio-container, .gradio-container.dark { background:var(--pf-bg) !important; max-width:100% !important;
  padding:0 !important; color:var(--pf-text); font-family:Inter,system-ui,sans-serif; }
footer { display:none !important; }
.gradio-container * { --button-secondary-text-color:var(--pf-text); }

/* ---------- shell ---------- */
#pf-shell { gap:0 !important; min-height:100vh; flex-wrap:nowrap !important; }
#pf-sidebar { background:#0a0a10; border-right:1px solid var(--pf-line); min-width:248px !important;
  max-width:248px !important; flex:0 0 248px !important; padding:22px 16px !important; gap:6px !important; }
#pf-main { padding:26px 34px !important; gap:0 !important; min-width:0 !important; }

/* brand */
.pf-brand { display:flex; align-items:center; gap:11px; padding:4px 6px 14px; }
.pf-brand .logo { width:42px;height:42px;border-radius:12px;background:var(--pf-grad);
  display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:0 6px 18px rgba(124,92,255,.4); }
.pf-brand .name { font-size:20px;font-weight:800;
  background:linear-gradient(90deg,#b9a3ff,#7fb6ff);-webkit-background-clip:text;background-clip:text;color:transparent; }
.pf-brand .tag { font-size:9.5px;letter-spacing:2px;color:var(--pf-faint);font-weight:600; }

/* new episode button */
#pf-newep { background:var(--pf-grad) !important; border:none !important; color:#fff !important;
  font-weight:700 !important; border-radius:13px !important; box-shadow:0 8px 22px rgba(124,92,255,.35) !important;
  margin:4px 0 16px !important; }
.pf-section-label { font-size:10px;letter-spacing:2.5px;color:var(--pf-faint);font-weight:700;
  padding:6px 8px 4px; }

/* nav buttons */
.pf-nav { background:transparent !important; border:1px solid transparent !important; color:var(--pf-mut) !important;
  text-align:left !important; justify-content:flex-start !important; font-weight:600 !important;
  border-radius:11px !important; padding:11px 13px !important; box-shadow:none !important; min-height:0 !important; }
.pf-nav:hover { background:rgba(255,255,255,.04) !important; color:var(--pf-text) !important; }
.pf-nav.active { background:rgba(124,92,255,.12) !important; border-color:rgba(124,92,255,.35) !important;
  color:#fff !important; }

/* ---------- header ---------- */
.pf-header { display:flex;align-items:flex-start;justify-content:space-between;
  border-bottom:1px solid var(--pf-line); padding-bottom:18px; margin-bottom:22px; }
.pf-header h1 { font-size:25px;font-weight:800;margin:0;color:#fff; }
.pf-header .sub { color:var(--pf-mut);font-size:13px;margin-top:3px; }
.pf-status { display:flex;gap:12px;align-items:center; }
.pf-pill { display:inline-flex;align-items:center;gap:7px;background:var(--pf-panel-2);
  border:1px solid var(--pf-line);border-radius:999px;padding:7px 13px;font-size:12px;color:var(--pf-mut); }
.pf-dot { width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399; }
.pf-voicepill { display:inline-flex;align-items:center;gap:8px;background:var(--pf-panel-2);
  border:1px solid var(--pf-line);border-radius:999px;padding:5px 14px 5px 6px;font-size:12.5px;color:var(--pf-text); }
.pf-avatar { display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  color:#fff;font-weight:700;vertical-align:middle;flex:0 0 auto; }
.pf-voicepill .pf-avatar + .pf-avatar { margin-left:-9px; }

/* ---------- cards / panels ---------- */
.pf-card { background:var(--pf-panel) !important; border:1px solid var(--pf-line) !important;
  border-radius:18px !important; padding:20px 22px !important; }
.pf-card .form {
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 !important;
}
.pf-card .form > .pf-config-card {
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.pf-eyebrow { font-size:10.5px;letter-spacing:2px;color:var(--pf-faint);font-weight:700;
  display:flex;align-items:center;gap:7px;margin-bottom:8px; }
.pf-step-h { display:flex;align-items:center;gap:11px;margin:4px 0 16px; }
.pf-step-h .num { width:24px;height:24px;border-radius:7px;background:var(--pf-grad);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800; }
.pf-step-h .t { font-size:18px;font-weight:800;color:#fff; }
.pf-step-h .h { font-size:12.5px;color:var(--pf-mut);font-weight:500; }

/* topic textbox */
#pf-topic-card, .pf-config-card {
  --block-background-fill:transparent;
  --block-border-color:transparent;
  --input-background-fill:rgba(255,255,255,.035);
  --input-border-color:rgba(255,255,255,.10);
  --input-text-color:var(--pf-text);
  --body-text-color:var(--pf-text);
  --block-label-text-color:#b9bbcf;
}
#pf-topic, #pf-topic .block, #pf-topic .form, #pf-topic .wrap,
#pf-topic .container, #pf-topic .input-container,
#pf-topic-card .block, #pf-topic-card .form, #pf-topic-card .wrap,
#pf-topic-card .container, #pf-topic-card .input-container {
  background:transparent !important; border:none !important; box-shadow:none !important;
}
#pf-topic textarea { background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.10) !important; border-radius:14px !important;
  font-size:21px !important; color:var(--pf-text) !important; -webkit-text-fill-color:var(--pf-text) !important;
  line-height:1.5 !important; box-shadow:none !important; padding:18px 20px !important; }
#pf-topic textarea::placeholder { color:#c3c5d5 !important; -webkit-text-fill-color:#c3c5d5 !important; opacity:1 !important; }
#pf-topic-card { background:var(--pf-panel) !important; border:1px solid var(--pf-line) !important;
  border-radius:18px !important; padding:20px 22px 22px !important; }

/* suggestion chips */
#pf-suggest { gap:9px !important; }
#pf-suggest button { background:var(--pf-panel-2) !important; border:1px solid var(--pf-line) !important;
  color:var(--pf-mut) !important; border-radius:999px !important; font-weight:500 !important;
  font-size:12.5px !important; padding:8px 15px !important; min-width:0 !important; flex:0 0 auto !important;
  box-shadow:none !important; }
#pf-suggest button:hover { color:#fff !important; border-color:rgba(124,92,255,.5) !important; }

/* config cards row */
.pf-config .wrap, .pf-config { background:transparent !important; }
.pf-config-card { background:var(--pf-panel) !important; border:1px solid var(--pf-line) !important;
  border-radius:15px !important; padding:14px 16px !important; }
.pf-config-card label span { font-size:10px !important; letter-spacing:1.5px !important;
  text-transform:uppercase !important; color:#aeb1c6 !important;
  -webkit-text-fill-color:#aeb1c6 !important; font-weight:700 !important; }
.pf-config-card .block, .pf-config-card .form, .pf-config-card .gr-box,
.pf-config-card .container, .pf-config-card .wrap {
  background:transparent !important; border:none !important; box-shadow:none !important;
}
.pf-config-card .secondary-wrap, .pf-config-card .input-container,
.pf-config-card input, .pf-config-card select,
.pf-config-card [data-testid="dropdown"], .pf-config-card [role="button"] {
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.10) !important; border-radius:10px !important;
  color:var(--pf-text) !important; -webkit-text-fill-color:var(--pf-text) !important;
  box-shadow:none !important;
}
.pf-config-card input, .pf-config-card select { min-height:40px !important; padding:7px 10px !important; }
.pf-config-card input::placeholder { color:#c3c5d5 !important; -webkit-text-fill-color:#c3c5d5 !important; opacity:1 !important; }
.pf-config-card .secondary-wrap *, .pf-config-card [data-testid="dropdown"] *,
.pf-config-card [role="button"] * {
  color:var(--pf-text) !important; -webkit-text-fill-color:var(--pf-text) !important;
}
.pf-config-card svg { color:#c9b8ff !important; fill:currentColor !important; }
.pf-config-card option { background:var(--pf-panel-2) !important; color:var(--pf-text) !important; }
.pf-config-card .slider input, .pf-config-card input[type="range"] {
  background:transparent !important; border:none !important; -webkit-text-fill-color:initial !important;
}
.pf-config-card .input-container input[type="number"],
.pf-config-card input[data-testid="number-input"] {
  width:74px !important; min-width:74px !important; max-width:74px !important;
  height:40px !important; min-height:40px !important; padding:0 10px !important;
  text-align:center !important; background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.10) !important; border-radius:9px !important;
  color:var(--pf-text) !important; -webkit-text-fill-color:var(--pf-text) !important;
}
#pf-voices input[data-testid="number-input"] {
  width:54px !important; min-width:54px !important; max-width:54px !important;
  height:34px !important; min-height:34px !important; line-height:34px !important;
  padding:0 !important; box-sizing:border-box !important; text-align:center !important;
  font-size:15px !important; font-weight:800 !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.13) !important; border-radius:9px !important;
}
#pf-voices input[data-testid="number-input"]::-webkit-outer-spin-button,
#pf-voices input[data-testid="number-input"]::-webkit-inner-spin-button {
  -webkit-appearance:none !important; margin:0 !important;
}
.pf-config-card .slider, .pf-config-card .slider * {
  color:var(--pf-text) !important; -webkit-text-fill-color:var(--pf-text) !important;
}
.gradio-container .options, .gradio-container .options ul,
.gradio-container [role="listbox"] {
  background:var(--pf-panel-2) !important; border:1px solid rgba(124,92,255,.34) !important;
  color:var(--pf-text) !important; box-shadow:0 18px 46px rgba(0,0,0,.55) !important;
}
.gradio-container .options li, .gradio-container .options .item,
.gradio-container [role="option"] {
  background:transparent !important; color:var(--pf-text) !important;
  -webkit-text-fill-color:var(--pf-text) !important;
}
.gradio-container .options li:hover, .gradio-container .options .item:hover,
.gradio-container [role="option"]:hover,
.gradio-container [role="option"][aria-selected="true"] {
  background:rgba(124,92,255,.18) !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
}
/* dropdowns open downward — keep the popup above the cards that follow it, otherwise
   the next card paints over all but the first option. Raise the row's stacking context
   (no overflow change, so nothing gets clipped). */
.pf-config { position: relative; z-index: 30; }
.pf-card:focus-within { position: relative; z-index: 30; }

/* primary CTA buttons */
.pf-cta { background:var(--pf-grad) !important; border:none !important; color:#fff !important;
  font-weight:700 !important; border-radius:13px !important; padding:13px 26px !important;
  box-shadow:0 10px 30px rgba(124,92,255,.45) !important; }
.pf-ghost { background:var(--pf-panel-2) !important; border:1px solid var(--pf-line) !important;
  color:var(--pf-text) !important; font-weight:600 !important; border-radius:12px !important; box-shadow:none !important; }

/* ---------- review bubbles ---------- */
.pf-bubbles { display:flex;flex-direction:column;gap:11px; }
.pf-bubble { display:flex;gap:16px;background:var(--pf-panel);border:1px solid var(--pf-line);
  border-radius:15px;padding:15px 18px;align-items:flex-start; }
.pf-bubble-side { display:flex;align-items:center;gap:10px;min-width:120px; }
.pf-bubble-meta { display:flex;flex-direction:column;gap:1px; }
.pf-name { font-weight:700;font-size:13.5px;color:#fff; }
.pf-role { font-size:9.5px;letter-spacing:1.5px;color:var(--pf-faint);font-weight:600; }
.pf-bubble-text { color:#d6d6e2;font-size:14px;line-height:1.55;flex:1; }
/* emotion/tone direction tags */
.pf-cue { display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.3px;
  color:#c9b8ff;background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.3);
  border-radius:6px;padding:1px 7px;margin:0 4px 0 0;vertical-align:middle;
  text-transform:lowercase; }
.pf-empty { color:var(--pf-mut);background:var(--pf-panel);border:1px dashed var(--pf-line);
  border-radius:14px;padding:26px;text-align:center;font-size:13.5px; }

/* sound design radio as chips */
#pf-bed .wrap { gap:10px !important; flex-wrap:wrap !important; background:transparent !important; }
#pf-bed label { background:var(--pf-panel-2) !important; border:1px solid var(--pf-line) !important;
  border-radius:13px !important; padding:13px 16px !important; color:var(--pf-mut) !important;
  min-width:120px !important; font-weight:600 !important; }
#pf-bed label.selected, #pf-bed input:checked + label, #pf-bed label:has(input:checked) {
  border-color:rgba(124,92,255,.6) !important; color:#fff !important; box-shadow:0 0 0 1px rgba(124,92,255,.4) inset !important; }

/* ---------- result / transcript ---------- */
.pf-player-head { display:flex;gap:16px;align-items:center;margin-bottom:6px; }
.pf-player-art { width:62px;height:62px;border-radius:15px;background:var(--pf-grad);
  display:flex;align-items:center;justify-content:center;font-size:27px;
  box-shadow:0 10px 26px rgba(124,92,255,.4);flex:0 0 auto; }
.pf-player-title { font-size:22px;font-weight:800;color:#fff;margin:2px 0; }
.pf-player-sub { color:var(--pf-mut);font-size:13px; }
.pf-transcript { display:flex;flex-direction:column;gap:4px;margin-top:6px; }
.pf-tr-row { display:flex;gap:14px;align-items:flex-start;padding:13px 14px;border-radius:12px; }
.pf-tr-row:hover { background:rgba(255,255,255,.02); }
.pf-tr-active { background:rgba(124,92,255,.08);border:1px solid rgba(124,92,255,.25); }
.pf-ts { color:var(--pf-faint);font-size:11.5px;font-family:ui-monospace,monospace;min-width:34px;padding-top:5px; }
.pf-tr-text { color:#d6d6e2;font-size:14px;line-height:1.55; }
.pf-eyebrow-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }

/* voices/library page tiles */
.pf-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px; }
.pf-tile { background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:16px;padding:16px; }
.pf-tile .vh { display:flex;align-items:center;gap:11px;margin-bottom:12px; }
.pf-tile .vn { font-weight:700;color:#fff;font-size:14.5px; }
.pf-tile .vm { font-size:10.5px;letter-spacing:1px;color:var(--pf-faint);text-transform:uppercase; }
.pf-wave { height:34px;border-radius:8px;margin:10px 0;
  background:repeating-linear-gradient(90deg,rgba(124,92,255,.5) 0 2px,transparent 2px 5px);opacity:.55; }
/* compact, on-theme audio player inside a voice tile */
.pf-voice-audio { margin:10px 0 !important; }
.pf-voice-audio .audio-container, .pf-voice-audio .component-wrapper { background:transparent !important; }
.pf-voice-audio audio { width:100% !important; height:36px !important; }
.pf-voice-audio button { color:var(--pf-text) !important; }
.pf-clone-slot { height:36px;margin:10px 0;border:1px dashed var(--pf-line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--pf-faint);font-size:11.5px;
  text-align:center;padding:0 8px; }
.pf-chips { display:flex;gap:6px;flex-wrap:wrap; }
.pf-chiplet { font-size:11px;color:var(--pf-mut);background:var(--pf-panel-2);
  border:1px solid var(--pf-line);border-radius:7px;padding:3px 9px; }
.pf-ep-card { border-radius:16px;overflow:hidden;border:1px solid var(--pf-line);background:var(--pf-panel); }
.pf-ep-art { height:130px;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;
  position:relative; }
.pf-ep-wave { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px; }
.pf-ep-wave i { width:4px;background:rgba(255,255,255,.7);border-radius:2px; }
.pf-ep-dur { background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 8px;border-radius:7px;
  font-family:ui-monospace,monospace;position:relative; }
.pf-ep-body { padding:14px 16px; }
.pf-ep-title { font-weight:700;color:#fff;font-size:14.5px; }
.pf-ep-meta { color:var(--pf-faint);font-size:11.5px;margin-top:3px; }

/* ---------- loading / producing screen ---------- */
@keyframes pf-spin { to { transform:rotate(360deg); } }
@keyframes pf-glow { 0%,100%{opacity:.75;transform:scale(.96);} 50%{opacity:1;transform:scale(1.04);} }
@keyframes pf-rise { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
.pf-loading { background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:20px;
  padding:54px 40px;text-align:center;max-width:660px;margin:14px auto;
  box-shadow:0 30px 80px rgba(0,0,0,.45); animation:pf-rise .4s ease; }
.pf-orb { width:96px;height:96px;margin:0 auto 24px;position:relative; }
.pf-orb::before { content:'';position:absolute;inset:0;border-radius:50%;border:3px solid transparent;
  border-top-color:#9d7bff;border-right-color:#4d8dff;animation:pf-spin 1.1s linear infinite; }
.pf-orb::after { content:'';position:absolute;inset:24px;border-radius:50%;background:var(--pf-grad);
  box-shadow:0 0 34px rgba(124,92,255,.65);animation:pf-glow 1.8s ease-in-out infinite; }
.pf-loading .pf-eyebrow { justify-content:center;margin-bottom:6px; }
.pf-loading h2 { font-size:23px;font-weight:800;color:#fff;margin:2px 0 28px; }
.pf-load-steps { display:inline-flex;flex-direction:column;gap:11px;text-align:left; }
.pf-lstep { display:flex;align-items:center;gap:13px;font-size:14.5px;color:var(--pf-mut); }
.pf-lstep.done { color:#d6d6e2; }
.pf-lstep.active { color:#fff; }
.pf-ldot { width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:800; }
.pf-lstep.done .pf-ldot { background:var(--pf-grad); }
.pf-lstep.active .pf-ldot { border:2px solid rgba(124,92,255,.3);border-top-color:#9d7bff;
  animation:pf-spin .8s linear infinite; }

/* ===================== rich animations & polish ===================== */
@keyframes pf-aurora { to { transform: rotate(360deg); } }
@keyframes pf-float  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes pf-rise2  { from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes pf-fade   { from{ opacity:0; } to{ opacity:1; } }
@keyframes pf-ctaPulse { 0%,100%{ box-shadow:0 10px 30px rgba(124,92,255,.45); }
  50%{ box-shadow:0 16px 50px rgba(124,92,255,.85); } }
@keyframes pf-dotPulse { 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); }
  70%{ box-shadow:0 0 0 7px rgba(52,211,153,0); } 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); } }
@keyframes pf-shimmer { to { background-position:200% center; } }
@keyframes pf-eq { 0%,100%{ transform:scaleY(.45); } 50%{ transform:scaleY(1); } }

/* moving aurora behind the whole studio */
.gradio-container { overflow-x:hidden; }
.gradio-container::before {
  content:''; position:fixed; inset:-25%; z-index:0; pointer-events:none; opacity:.65;
  background:
    radial-gradient(38% 38% at 20% 25%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(34% 34% at 82% 18%, rgba(77,141,255,.16), transparent 60%),
    radial-gradient(44% 44% at 72% 82%, rgba(255,92,206,.13), transparent 60%),
    radial-gradient(40% 40% at 22% 86%, rgba(61,223,159,.11), transparent 60%);
  filter: blur(36px); animation: pf-aurora 48s linear infinite;
}
#pf-shell { position:relative; z-index:1; }

/* entrance — replays each time a step/page becomes visible (display toggles).
   NOTE: containers holding dropdowns (.pf-config, .pf-card) must NOT animate
   `transform` — a transformed ancestor reparents the dropdown's popup and sends it
   to the top-left. Those use an opacity-only fade instead. */
#pf-main .pf-header { animation: pf-fade .55s ease both; }
#pf-main #pf-topic-card,
#pf-main .pf-bubble,
#pf-main .pf-tile,
#pf-main .pf-ep-card,
#pf-main .pf-loading { animation: pf-rise2 .5s cubic-bezier(.2,.7,.3,1) both; }
#pf-main .pf-config,
#pf-main .pf-card { animation: pf-fade .5s ease both; }
#pf-main #pf-topic-card { animation-delay:.04s; }
#pf-main .pf-config { animation-delay:.10s; }
#pf-main .pf-bubble:nth-child(1){animation-delay:.04s} #pf-main .pf-bubble:nth-child(2){animation-delay:.10s}
#pf-main .pf-bubble:nth-child(3){animation-delay:.16s} #pf-main .pf-bubble:nth-child(4){animation-delay:.22s}
#pf-main .pf-bubble:nth-child(5){animation-delay:.28s} #pf-main .pf-bubble:nth-child(6){animation-delay:.34s}
#pf-main .pf-tile:nth-child(2){animation-delay:.06s} #pf-main .pf-tile:nth-child(3){animation-delay:.12s}
#pf-main .pf-tile:nth-child(4){animation-delay:.18s}

/* sidebar brand */
.pf-brand .logo { animation: pf-float 4.5s ease-in-out infinite; transition: transform .2s ease; }
.pf-brand:hover .logo { transform: scale(1.06) rotate(-3deg); }
.pf-brand .name { background-image:linear-gradient(90deg,#b9a3ff,#7fb6ff,#ff8fe0,#b9a3ff);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  animation: pf-shimmer 5s linear infinite; }

/* live status dot */
.pf-dot { animation: pf-dotPulse 2.2s ease-out infinite; }

/* primary CTAs glow + lift */
.pf-cta { animation: pf-ctaPulse 2.8s ease-in-out infinite;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, filter .2s; }
.pf-cta:hover { transform: translateY(-2px) scale(1.025); filter:brightness(1.06); }
.pf-cta:active { transform: translateY(0) scale(.985); }
#pf-newep { transition: transform .16s ease, box-shadow .25s ease, filter .2s; }
#pf-newep:hover { transform: translateY(-2px); filter:brightness(1.07);
  box-shadow:0 14px 34px rgba(124,92,255,.55) !important; }

/* nav */
.pf-nav { transition: background .2s, color .2s, border-color .2s, transform .14s ease; }
.pf-nav:hover { transform: translateX(3px); }

/* topic focus glow */
#pf-topic-card { transition: border-color .25s ease, box-shadow .3s ease; }
#pf-topic-card:focus-within { border-color: rgba(124,92,255,.55) !important;
  box-shadow:0 0 0 3px rgba(124,92,255,.16), 0 18px 50px rgba(124,92,255,.14) !important; }

/* suggestion chips */
#pf-suggest button { transition: transform .18s ease, box-shadow .2s ease, color .2s, border-color .2s; }
#pf-suggest button:hover { transform: translateY(-2px); box-shadow:0 8px 20px rgba(124,92,255,.28); }

/* voice tiles / episode cards — hover lift (no dropdowns inside, transform is safe) */
.pf-tile, .pf-ep-card {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .28s ease; }
.pf-tile:hover { transform: translateY(-3px);
  border-color: rgba(124,92,255,.32) !important; box-shadow:0 16px 40px rgba(0,0,0,.45); }
.pf-ep-card:hover { transform: translateY(-4px); box-shadow:0 22px 54px rgba(0,0,0,.55); }
/* config cards hold dropdowns — glow only, NO transform (would misplace the popup) */
.pf-config-card { transition: border-color .22s, box-shadow .28s ease; }
.pf-config-card:hover { border-color: rgba(124,92,255,.32) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.4); }
.pf-ep-card:hover .pf-ep-art { filter: saturate(1.18) brightness(1.06); }
.pf-ep-art { transition: filter .25s ease; }

/* review bubbles hover */
.pf-bubble { transition: border-color .2s, transform .16s ease, box-shadow .22s; }
.pf-bubble:hover { border-color: rgba(124,92,255,.32); transform: translateX(3px);
  box-shadow:0 8px 26px rgba(0,0,0,.32); }

/* avatars */
.pf-avatar { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.pf-voicepill:hover .pf-avatar, .pf-bubble:hover .pf-avatar, .pf-tile:hover .pf-avatar {
  transform: scale(1.1); }

/* ghost buttons */
.pf-ghost { transition: transform .16s ease, border-color .2s, color .2s, background .2s; }
.pf-ghost:hover { transform: translateY(-1px); color:#fff !important;
  border-color: rgba(124,92,255,.45) !important; }

/* library card waveform = live equalizer */
.pf-ep-wave i { transform-origin:bottom; animation: pf-eq 1.1s ease-in-out infinite; }
.pf-ep-wave i:nth-child(2n){ animation-delay:.15s; } .pf-ep-wave i:nth-child(3n){ animation-delay:.32s; }
.pf-ep-wave i:nth-child(5n){ animation-delay:.5s; } .pf-ep-wave i:nth-child(7n){ animation-delay:.7s; }
.pf-ep-card:hover .pf-ep-wave i { animation-duration:.7s; }

/* sound-design chips + transcript rows */
#pf-bed label { transition: border-color .2s, color .2s, box-shadow .2s, transform .14s; }
#pf-bed label:hover { transform: translateY(-2px); }
.pf-tr-row { transition: background .18s ease; }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gradio-container::before, .pf-brand .logo, .pf-brand .name, .pf-dot,
  .pf-cta, .pf-ep-wave i { animation: none !important; }
  #pf-main * { animation-duration:.001s !important; }
}
"""

LOGO_HTML = """
<div class='pf-brand'>
  <div class='logo'>🎙️</div>
  <div><div class='name'>Podify</div><div class='tag'>AI PODCAST STUDIO</div></div>
</div>
"""


def _voice_chip(voices=None) -> str:
    names = [n for n in (voices or []) if n] or ["Nova", "Atlas"]
    names = names[:MAX_SPEAKERS]
    avatars = "".join(_avatar(n, _VOICE_AVATAR_IDX.get(n, i), 24) for i, n in enumerate(names))
    return f"<span class='pf-voicepill'>{avatars}&nbsp; {html.escape(' × '.join(names))}</span>"


def _header(title: str, sub: str, voices=None) -> str:
    return f"""
<div class='pf-header'>
  <div><h1>{title}</h1><div class='sub'>{sub}</div></div>
  <div class='pf-status'>
    <span class='pf-pill'><span class='pf-dot'></span> All systems live</span>
    {_voice_chip(voices)}
  </div>
</div>
"""


# --------------------------------------------------------------------------- UI build
def build_ui():
    theme = gr.themes.Base(
        primary_hue="purple",
        neutral_hue="slate",
        font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
    )
    with gr.Blocks(title="Podify — AI Podcast Studio", theme=theme, css=CUSTOM_CSS) as demo:
        lines_state = gr.State([])
        speakers_state = gr.State([])
        current_episode = gr.State(None)

        with gr.Row(elem_id="pf-shell"):
            # ---------------------------------------------------------- sidebar
            with gr.Column(elem_id="pf-sidebar"):
                gr.HTML(LOGO_HTML)
                new_ep_btn = gr.Button("＋  New episode", elem_id="pf-newep")
                gr.HTML("<div class='pf-section-label'>STUDIO</div>")
                nav_create = gr.Button("⌁  Create", elem_classes=["pf-nav", "active"])
                nav_voices = gr.Button("🎙  Voices    8", elem_classes=["pf-nav"])
                nav_library = gr.Button("▥  Library    6", elem_classes=["pf-nav"])

            # ---------------------------------------------------------- main
            with gr.Column(elem_id="pf-main"):
                # ===================== CREATE PAGE =====================
                with gr.Column(visible=True) as page_create:
                    create_header = gr.HTML(
                        _header("Create", "Type a topic — Podify writes &amp; voices it",
                                voices=_VOICE_DEFAULTS[:2])
                    )

                    # ---------- STEP 1: topic ----------
                    with gr.Column(visible=True) as step1:
                        with gr.Column(elem_id="pf-topic-card"):
                            gr.HTML("<div class='pf-eyebrow'>✦ WHAT SHOULD THIS EPISODE BE ABOUT?</div>")
                            topic = gr.Textbox(
                                elem_id="pf-topic",
                                placeholder="Describe a topic, paste an article, or drop an idea — Podify writes the script…",
                                lines=3,
                                show_label=False,
                                container=False,
                            )
                            with gr.Row(elem_id="pf-suggest"):
                                suggestion_btns = [gr.Button(s, size="sm") for s in SUGGESTIONS]

                        with gr.Row(elem_classes=["pf-config"], equal_height=True):
                            with gr.Column(elem_classes=["pf-config-card"]):
                                style = gr.Dropdown(STYLES, value="interview", label="FORMAT",
                                                    filterable=False)
                            with gr.Column(elem_classes=["pf-config-card"]):
                                duration = gr.Dropdown(
                                    [("1 min", 1), ("2 min", 2)],
                                    value=2, label="LENGTH", filterable=False,
                                )
                            with gr.Column(elem_classes=["pf-config-card"]):
                                num_speakers = gr.Slider(
                                    1, MAX_SPEAKERS, value=2, step=1, label="VOICES",
                                    elem_id="pf-voices", show_reset_button=False,
                                )
                            with gr.Column(elem_classes=["pf-config-card"]):
                                bed_step1 = gr.Dropdown(
                                    [b[0] for b in SOUND_BEDS], value="Ambient Drift", label="SOUND BED",
                                    filterable=False,
                                )

                        # ---- Cast: pick the voice used for each speaker ----
                        with gr.Column(elem_classes=["pf-card"]):
                            gr.HTML(
                                "<div class='pf-step-h'><span class='t'>🎙 Cast</span>"
                                "<span class='h'>pick the voice for each speaker — "
                                "preview them on the Voices page</span></div>"
                            )
                            with gr.Row():
                                voice_pickers = []
                                for i in range(MAX_SPEAKERS):
                                    default = (_VOICE_DEFAULTS[i] if i < len(_VOICE_DEFAULTS)
                                               else LIBRARY_VOICE_NAMES[i % len(LIBRARY_VOICE_NAMES)])
                                    vp = gr.Dropdown(
                                        LIBRARY_VOICE_NAMES, value=default,
                                        label=f"Speaker {i + 1}", visible=(i < 2),
                                        elem_classes=["pf-config-card"], filterable=False,
                                    )
                                    voice_pickers.append(vp)

                        with gr.Row():
                            gr.HTML("<div style='flex:1'></div>")
                            generate_script_btn = gr.Button("⌁  Generate script", elem_classes=["pf-cta"], scale=0)

                    # ---------- STEP 2: review ----------
                    with gr.Column(visible=False) as step2:
                        with gr.Row(elem_classes=["pf-eyebrow-row"]):
                            gr.HTML(
                                "<div class='pf-step-h'><span class='num'>2</span>"
                                "<span class='t'>Review the script</span>"
                                "<span class='h'>Edit any line · voices are set on the Create step</span></div>"
                            )
                            regenerate_btn = gr.Button("↻  Regenerate", elem_classes=["pf-ghost"], scale=0)

                        review_bubbles = gr.HTML(script_to_bubbles(""))

                        with gr.Accordion("✎  Edit raw script", open=False):
                            script_box2 = gr.Textbox(
                                label="Script (use `Speaker: text` per line)", lines=12,
                            )

                        with gr.Column(elem_classes=["pf-card"]):
                            gr.HTML("<div class='pf-step-h'><span class='t'>🎛  Sound design</span></div>")
                            bed = gr.Radio(
                                [b[0] for b in SOUND_BEDS], value="Ambient Drift",
                                show_label=False, elem_id="pf-bed", container=False,
                            )

                        with gr.Row():
                            back_btn = gr.Button("←  Back to topic", elem_classes=["pf-ghost"], scale=0)
                            gr.HTML("<div style='flex:1'></div>")
                            generate_btn = gr.Button("⚡  Generate podcast", elem_classes=["pf-cta"], scale=0)

                    # ---------- STEP 3: result ----------
                    with gr.Column(visible=False) as step3:
                        with gr.Row(elem_classes=["pf-eyebrow-row"]):
                            gr.HTML("<span class='pf-pill'><span class='pf-dot'></span> Episode generated</span>")
                            save_btn = gr.Button("⭳  Save to library", elem_classes=["pf-ghost"], scale=0)
                            new_ep_btn2 = gr.Button("＋  New episode", elem_classes=["pf-ghost"], scale=0)
                        with gr.Column(elem_classes=["pf-card"]):
                            result_meta = gr.HTML(_episode_meta("", "", "Ambient Drift"))
                            audio_out = gr.Audio(label="Episode audio", type="numpy")
                            file_out = gr.File(label="Export MP3 / WAV")
                            gr.HTML("<div class='pf-section-label'>TRANSCRIPT</div>")
                            result_transcript = gr.HTML(script_to_transcript(""))

                    # ---------- LOADING (script + podcast production) ----------
                    with gr.Column(visible=False) as step_loading:
                        loading_panel = gr.HTML(loading_html("", "script"))

                    # hidden mirror of the canonical script (kept in sync, used for reset)
                    script_box = gr.Textbox(visible=False)

                # ===================== VOICES PAGE =====================
                with gr.Column(visible=False) as page_voices:
                    voices_header = gr.HTML(
                        _header("Voices", "Browse the library or clone your own",
                                voices=_VOICE_DEFAULTS[:2])
                    )
                    with gr.Row():
                        with gr.Column(scale=2, elem_classes=["pf-card"]):
                            gr.HTML("<div class='pf-eyebrow'>VOICE LAB</div>"
                                    "<div class='pf-step-h'><span class='t'>⧉ Clone a voice</span></div>"
                                    "<div class='sub' style='color:var(--pf-mut);font-size:13px'>"
                                    "Upload 30 seconds of clean audio. Podify learns the timbre, "
                                    "cadence and accent, then lets you narrate anything in that voice.</div>")
                            gr.Audio(sources=["upload", "microphone"], type="filepath",
                                     label="Drop an audio sample (WAV, MP3 or M4A · 30s+)")
                        with gr.Column(scale=1, elem_classes=["pf-card"]):
                            gr.HTML("<div class='pf-eyebrow'>PRO TIP</div>"
                                    "<div class='pf-step-h'><span class='t'>Make hosts feel human</span></div>"
                                    "<div style='color:var(--pf-mut);font-size:13px;line-height:1.6'>"
                                    "Pair a warm host with a contrasting guest for natural back-and-forth. "
                                    "Add a subtle ambient bed so silences breathe.</div>")
                    gr.HTML(
                        "<div class='pf-eyebrow-row' style='margin-top:26px'>"
                        "<div class='pf-step-h'><span class='t'>🎙 Voice library</span>"
                        f"<span class='h'>{len(VOICE_LIBRARY)} voices</span></div></div>"
                    )
                    for _r in range(0, len(VOICE_LIBRARY), 4):
                        with gr.Row(equal_height=True):
                            for vid, vname, vmeta, vidx, vchips in VOICE_LIBRARY[_r:_r + 4]:
                                with gr.Column(elem_classes=["pf-tile"], min_width=210):
                                    gr.HTML(_voice_card_header(vname, vmeta, vidx))
                                    _sp = _sample_path(vid)
                                    if _sp:
                                        gr.Audio(
                                            value=_sp,
                                            show_label=False,
                                            interactive=False,
                                            container=False,
                                            elem_classes=["pf-voice-audio"],
                                        )
                                    else:
                                        gr.HTML(
                                            "<div class='pf-clone-slot'>Clone a voice above "
                                            "to preview it here</div>"
                                        )
                                    gr.HTML(_voice_card_chips(vchips))

                # ===================== LIBRARY PAGE =====================
                with gr.Column(visible=False) as page_library:
                    library_header = gr.HTML(
                        _header("Library", "Every episode you've produced",
                                voices=_VOICE_DEFAULTS[:2])
                    )
                    lib_header = gr.HTML(
                        "<div class='pf-step-h'><span class='t'>▥ Your episodes</span>"
                        "<span class='h'>0</span></div>"
                    )
                    lib_empty = gr.HTML(
                        "<div class='pf-empty'>No episodes yet — generate one, then tap "
                        "“Save to library” on the result screen.</div>"
                    )
                    lib_cards, lib_headers, lib_audios = [], [], []
                    for _r in range(0, MAX_LIBRARY, 3):
                        with gr.Row():
                            for _i in range(_r, min(_r + 3, MAX_LIBRARY)):
                                with gr.Column(elem_classes=["pf-ep-card"], visible=False,
                                               min_width=240) as _col:
                                    _h = gr.HTML()
                                    _a = gr.Audio(show_label=False, interactive=False,
                                                  container=False, elem_classes=["pf-voice-audio"])
                                lib_cards.append(_col)
                                lib_headers.append(_h)
                                lib_audios.append(_a)

        # ------------------------------------------------------------- wiring
        nav_outputs = [page_create, page_voices, page_library, nav_create, nav_voices, nav_library]
        lib_render_outputs = [lib_header, lib_empty]
        for _c, _h, _a in zip(lib_cards, lib_headers, lib_audios):
            lib_render_outputs += [_c, _h, _a]

        nav_create.click(goto_create, outputs=nav_outputs)
        nav_voices.click(goto_voices, outputs=nav_outputs)
        nav_library.click(goto_library, outputs=nav_outputs).then(
            render_library, outputs=lib_render_outputs
        )
        # populate the shared library for every visitor on page load
        demo.load(render_library, outputs=lib_render_outputs)

        for btn in suggestion_btns:
            btn.click(lambda s=btn.value: s, outputs=[topic])

        # keep the bubble preview in sync with raw-script edits
        script_box2.change(script_to_bubbles, inputs=[script_box2], outputs=[review_bubbles])

        # show one voice picker per selected speaker
        def _voice_picker_visibility(n):
            count = _speaker_count(n)
            return [gr.update(visible=i < count) for i in range(MAX_SPEAKERS)]

        num_speakers.change(
            _voice_picker_visibility,
            inputs=[num_speakers], outputs=voice_pickers,
        )

        # keep the header cast chip in sync with the picked voices (all pages)
        def _refresh_headers(n, *names):
            count = _speaker_count(n)
            sel = [names[i] for i in range(count) if i < len(names) and names[i]]
            return (
                gr.update(value=_header("Create",
                                        "Type a topic — Podify writes &amp; voices it", sel)),
                gr.update(value=_header("Voices",
                                        "Browse the library or clone your own", sel)),
                gr.update(value=_header("Library",
                                        "Every episode you've produced", sel)),
            )

        _header_outputs = [create_header, voices_header, library_header]
        num_speakers.change(_refresh_headers, inputs=[num_speakers] + voice_pickers,
                            outputs=_header_outputs)
        for _vp in voice_pickers:
            _vp.change(_refresh_headers, inputs=[num_speakers] + voice_pickers,
                       outputs=_header_outputs)

        setup_outputs = [lines_state, speakers_state]
        step_views = [step1, step2, step3, step_loading]

        # Step 1 -> loading -> generate -> Step 2
        generate_script_btn.click(
            enter_loading_script,
            inputs=[topic],
            outputs=step_views + [loading_panel],
        ).then(
            run_research,
            inputs=[topic, style, duration, num_speakers] + voice_pickers,
            outputs=[script_box, script_box2, review_bubbles],
        ).then(
            setup_voices, inputs=[script_box2], outputs=setup_outputs,
        ).then(
            lambda: show_step(2), outputs=step_views,
        )

        # carry the step-1 bed selection into the review radio
        bed_step1.change(lambda b: gr.update(value=b), inputs=[bed_step1], outputs=[bed])

        regenerate_btn.click(
            enter_loading_script,
            inputs=[topic],
            outputs=step_views + [loading_panel],
        ).then(
            run_research,
            inputs=[topic, style, duration, num_speakers] + voice_pickers,
            outputs=[script_box, script_box2, review_bubbles],
        ).then(
            setup_voices, inputs=[script_box2], outputs=setup_outputs,
        ).then(lambda: show_step(2), outputs=step_views)

        back_btn.click(lambda: show_step(1), outputs=step_views)

        # Step 2 -> loading -> generate podcast -> Step 3
        generate_btn.click(
            enter_loading_podcast,
            inputs=[topic],
            outputs=step_views + [loading_panel],
        ).then(
            run_tts,
            inputs=[lines_state, speakers_state, topic, bed] + voice_pickers,
            outputs=[audio_out, file_out, result_meta, result_transcript, current_episode],
        ).then(lambda: show_step(3), outputs=step_views)

        # Save the produced episode to the shared store, then show the library.
        save_btn.click(
            save_episode, inputs=[current_episode], outputs=None
        ).then(
            render_library, outputs=lib_render_outputs
        ).then(goto_library, outputs=nav_outputs)

        # New episode -> back to a fresh Step 1 on the Create page
        def reset_create():
            return (*goto_create(), *show_step(1), "")

        reset_outputs = nav_outputs + step_views + [topic]
        new_ep_btn.click(reset_create, outputs=reset_outputs)
        new_ep_btn2.click(reset_create, outputs=reset_outputs)

    return demo


# -------------------------------------------------------------- static page builders
def _voice_card_header(name: str, meta: str, idx: int) -> str:
    return (
        f"<div class='vh'>{_avatar(name, idx, 38)}"
        f"<div><div class='vn'>{html.escape(name)}</div>"
        f"<div class='vm'>{html.escape(meta)}</div></div></div>"
    )


def _voice_card_chips(chips: list) -> str:
    row = "".join(f"<span class='pf-chiplet'>{html.escape(c)}</span>" for c in chips)
    return f"<div class='pf-chips'>{row}</div>"


if __name__ == "__main__":
    build_ui().launch(allowed_paths=[EPISODES_DIR, STORE_DIR, _SAMPLES_DIR])