feat: redesign standard player idle state as pill-style row

Replace the two-row layout (toolbar + lonely 'Play narration' button)
with a single pill row:
- Large circular play button on the left (brand color, active:scale-95)
- 'Play narration' label + voice selector button + estimated duration
  (based on word count at ~150wpm) in the centre
- Chapters icon button on the right

Voice panel drops inline below the pill when open.
Non-idle states (loading / generating / ready / other-chapter-playing)
keep the existing toolbar + status layout unchanged.

Also adds wordCount prop to AudioPlayer and passes it from the chapter page.

.gitea/workflows/release.yaml

@@ -62,24 +62,115 @@ jobs:
           path: ui/build
           retention-days: 1
 
-  # ── docker: backend ───────────────────────────────────────────────────────────
-  docker-backend:
-    name: Docker / backend
+  # ── ui: source map upload ─────────────────────────────────────────────────────
+  # Commented out — re-enable when GlitchTip source map uploads are needed again.
+  #
+  # upload-sourcemaps:
+  #   name: Upload source maps
+  #   runs-on: ubuntu-latest
+  #   needs: [check-ui]
+  #   steps:
+  #     - name: Compute release version (strip leading v)
+  #       id: ver
+  #       run: |
+  #         V="${{ gitea.ref_name }}"
+  #         echo "version=${V#v}" >> "$GITHUB_OUTPUT"
+  #
+  #     - name: Download build artifacts
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: ui-build
+  #         path: build
+  #
+  #     - name: Install sentry-cli
+  #       run: npm install -g @sentry/cli
+  #
+  #     - name: Inject debug IDs into build artifacts
+  #       run: sentry-cli sourcemaps inject ./build
+  #       env:
+  #         SENTRY_URL: https://errors.libnovel.cc/
+  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+  #         SENTRY_ORG: libnovel
+  #         SENTRY_PROJECT: ui
+  #
+  #     - name: Upload injected build (for docker-ui)
+  #       uses: actions/upload-artifact@v3
+  #       with:
+  #         name: ui-build-injected
+  #         path: build
+  #         retention-days: 1
+  #
+  #     - name: Create GlitchTip release
+  #       run: sentry-cli releases new ${{ steps.ver.outputs.version }}
+  #       env:
+  #         SENTRY_URL: https://errors.libnovel.cc/
+  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+  #         SENTRY_ORG: libnovel
+  #         SENTRY_PROJECT: ui
+  #
+  #     - name: Upload source maps to GlitchTip
+  #       run: sentry-cli sourcemaps upload ./build --release ${{ steps.ver.outputs.version }}
+  #       env:
+  #         SENTRY_URL: https://errors.libnovel.cc/
+  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+  #         SENTRY_ORG: libnovel
+  #         SENTRY_PROJECT: ui
+  #
+  #     - name: Finalize GlitchTip release
+  #       run: sentry-cli releases finalize ${{ steps.ver.outputs.version }}
+  #       env:
+  #         SENTRY_URL: https://errors.libnovel.cc/
+  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+  #         SENTRY_ORG: libnovel
+  #         SENTRY_PROJECT: ui
+  #
+  #     - name: Prune old GlitchTip releases (keep latest 10)
+  #       run: |
+  #         set -euo pipefail
+  #         KEEP=10
+  #         OLD=$(curl -sf \
+  #           -H "Authorization: Bearer $SENTRY_AUTH_TOKEN" \
+  #           "$SENTRY_URL/api/0/organizations/$SENTRY_ORG/releases/?project=$SENTRY_PROJECT&per_page=100" \
+  #           | python3 -c "
+  #         import sys, json
+  #         releases = json.load(sys.stdin)
+  #         for r in releases[$KEEP:]:
+  #             print(r['version'])
+  #         " KEEP=$KEEP)
+  #         for ver in $OLD; do
+  #           echo "Deleting old release: $ver"
+  #           sentry-cli releases delete "$ver" || true
+  #         done
+  #       env:
+  #         SENTRY_URL: https://errors.libnovel.cc
+  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+  #         SENTRY_ORG: libnovel
+  #         SENTRY_PROJECT: ui
+
+  # ── docker: all images in one job (single login) ──────────────────────────────
+  # backend, runner, ui, and caddy are built sequentially in one job so Docker
+  # Hub only needs to be authenticated once. This also eliminates 3 redundant
+  # checkout + setup-buildx + scheduler round-trips compared to separate jobs.
+  docker:
+    name: Docker
     runs-on: ubuntu-latest
-    needs: [test-backend]
+    needs: [test-backend, check-ui]
     steps:
       - uses: actions/checkout@v4
 
       - uses: docker/setup-buildx-action@v3
 
+      # Single login — credential is written to ~/.docker/config.json and
+      # reused by all subsequent build-push-action steps in this job.
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USER }}
           password: ${{ secrets.DOCKER_TOKEN }}
 
-      - name: Docker meta
-        id: meta
+      # ── backend ──────────────────────────────────────────────────────────────
+      - name: Docker meta / backend
+        id: meta-backend
         uses: docker/metadata-action@v5
         with:
           images: ${{ secrets.DOCKER_USER }}/libnovel-backend
@@ -88,38 +179,23 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
             type=raw,value=latest
 
-      - name: Build and push
+      - name: Build and push / backend
         uses: docker/build-push-action@v6
         with:
           context: backend
           target: backend
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ steps.meta-backend.outputs.tags }}
+          labels: ${{ steps.meta-backend.outputs.labels }}
           build-args: |
-            VERSION=${{ steps.meta.outputs.version }}
+            VERSION=${{ steps.meta-backend.outputs.version }}
             COMMIT=${{ gitea.sha }}
           cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-backend:latest
           cache-to: type=inline
 
-  # ── docker: runner ────────────────────────────────────────────────────────────
-  docker-runner:
-    name: Docker / runner
-    runs-on: ubuntu-latest
-    needs: [test-backend]
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_USER }}
-          password: ${{ secrets.DOCKER_TOKEN }}
-
-      - name: Docker meta
-        id: meta
+      # ── runner ───────────────────────────────────────────────────────────────
+      - name: Docker meta / runner
+        id: meta-runner
         uses: docker/metadata-action@v5
         with:
           images: ${{ secrets.DOCKER_USER }}/libnovel-runner
@@ -128,115 +204,25 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
             type=raw,value=latest
 
-      - name: Build and push
+      - name: Build and push / runner
         uses: docker/build-push-action@v6
         with:
           context: backend
           target: runner
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ steps.meta-runner.outputs.tags }}
+          labels: ${{ steps.meta-runner.outputs.labels }}
           build-args: |
-            VERSION=${{ steps.meta.outputs.version }}
+            VERSION=${{ steps.meta-runner.outputs.version }}
             COMMIT=${{ gitea.sha }}
           cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-runner:latest
           cache-to: type=inline
 
-  # ── ui: source map upload ─────────────────────────────────────────────────────
-  upload-sourcemaps:
-    name: Upload source maps
-    runs-on: ubuntu-latest
-    needs: [check-ui]
-    steps:
-      - name: Compute release version (strip leading v)
-        id: ver
-        run: |
-          V="${{ gitea.ref_name }}"
-          echo "version=${V#v}" >> "$GITHUB_OUTPUT"
-
-      - name: Download build artifacts
+      # ── ui ───────────────────────────────────────────────────────────────────
+      - name: Download ui build artifacts
         uses: actions/download-artifact@v3
         with:
           name: ui-build
-          path: build
-
-      - name: Install sentry-cli
-        run: npm install -g @sentry/cli
-
-      - name: Inject debug IDs into build artifacts
-        run: sentry-cli sourcemaps inject ./build
-        env:
-          SENTRY_URL: https://errors.libnovel.cc/
-          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-          SENTRY_ORG: libnovel
-          SENTRY_PROJECT: ui
-
-      - name: Upload injected build (for docker-ui)
-        uses: actions/upload-artifact@v3
-        with:
-          name: ui-build-injected
-          path: build
-          retention-days: 1
-
-      - name: Create GlitchTip release
-        run: sentry-cli releases new ${{ steps.ver.outputs.version }}
-        env:
-          SENTRY_URL: https://errors.libnovel.cc/
-          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-          SENTRY_ORG: libnovel
-          SENTRY_PROJECT: ui
-
-      - name: Upload source maps to GlitchTip
-        run: sentry-cli sourcemaps upload ./build --release ${{ steps.ver.outputs.version }}
-        env:
-          SENTRY_URL: https://errors.libnovel.cc/
-          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-          SENTRY_ORG: libnovel
-          SENTRY_PROJECT: ui
-
-      - name: Finalize GlitchTip release
-        run: sentry-cli releases finalize ${{ steps.ver.outputs.version }}
-        env:
-          SENTRY_URL: https://errors.libnovel.cc/
-          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-          SENTRY_ORG: libnovel
-          SENTRY_PROJECT: ui
-
-      - name: Prune old GlitchTip releases (keep latest 10)
-        run: |
-          set -euo pipefail
-          KEEP=10
-          OLD=$(curl -sf \
-            -H "Authorization: Bearer $SENTRY_AUTH_TOKEN" \
-            "$SENTRY_URL/api/0/organizations/$SENTRY_ORG/releases/?project=$SENTRY_PROJECT&per_page=100" \
-            | python3 -c "
-          import sys, json
-          releases = json.load(sys.stdin)
-          for r in releases[$KEEP:]:
-              print(r['version'])
-          " KEEP=$KEEP)
-          for ver in $OLD; do
-            echo "Deleting old release: $ver"
-            sentry-cli releases delete "$ver" || true
-          done
-        env:
-          SENTRY_URL: https://errors.libnovel.cc
-          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-          SENTRY_ORG: libnovel
-          SENTRY_PROJECT: ui
-
-  # ── docker: ui ────────────────────────────────────────────────────────────────
-  docker-ui:
-    name: Docker / ui
-    runs-on: ubuntu-latest
-    needs: [check-ui, upload-sourcemaps]
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Download injected build (debug IDs already embedded)
-        uses: actions/download-artifact@v3
-        with:
-          name: ui-build-injected
           path: ui/build
 
       - name: Allow build/ into Docker context (override .dockerignore)
@@ -244,16 +230,8 @@ jobs:
           grep -v '^build$' ui/.dockerignore > ui/.dockerignore.tmp
           mv ui/.dockerignore.tmp ui/.dockerignore
 
-      - uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_USER }}
-          password: ${{ secrets.DOCKER_TOKEN }}
-
-      - name: Docker meta
-        id: meta
+      - name: Docker meta / ui
+        id: meta-ui
         uses: docker/metadata-action@v5
         with:
           images: ${{ secrets.DOCKER_USER }}/libnovel-ui
@@ -262,38 +240,24 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
             type=raw,value=latest
 
-      - name: Build and push
+      - name: Build and push / ui
         uses: docker/build-push-action@v6
         with:
           context: ui
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ steps.meta-ui.outputs.tags }}
+          labels: ${{ steps.meta-ui.outputs.labels }}
           build-args: |
-            BUILD_VERSION=${{ steps.meta.outputs.version }}
+            BUILD_VERSION=${{ steps.meta-ui.outputs.version }}
             BUILD_COMMIT=${{ gitea.sha }}
             BUILD_TIME=${{ gitea.event.head_commit.timestamp }}
             PREBUILT=1
           cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-ui:latest
           cache-to: type=inline
 
-  # ── docker: caddy ─────────────────────────────────────────────────────────────
-  docker-caddy:
-    name: Docker / caddy
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_USER }}
-          password: ${{ secrets.DOCKER_TOKEN }}
-
-      - name: Docker meta
-        id: meta
+      # ── caddy ────────────────────────────────────────────────────────────────
+      - name: Docker meta / caddy
+        id: meta-caddy
         uses: docker/metadata-action@v5
         with:
           images: ${{ secrets.DOCKER_USER }}/libnovel-caddy
@@ -302,13 +266,13 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
             type=raw,value=latest
 
-      - name: Build and push
+      - name: Build and push / caddy
         uses: docker/build-push-action@v6
         with:
           context: caddy
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ steps.meta-caddy.outputs.tags }}
+          labels: ${{ steps.meta-caddy.outputs.labels }}
           cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-caddy:latest
           cache-to: type=inline
 
@@ -316,7 +280,7 @@ jobs:
   release:
     name: Gitea Release
     runs-on: ubuntu-latest
-    needs: [docker-backend, docker-runner, docker-ui, docker-caddy, upload-sourcemaps]
+    needs: [docker]
     steps:
       - uses: actions/checkout@v4
         with:

backend/internal/backend/handlers.go

@@ -9,6 +9,7 @@ package backend
 //   handleGetRanking, handleGetCover
 //   handleBookPreview, handleChapterText, handleChapterTextPreview, handleChapterMarkdown, handleReindex
 //   handleAudioGenerate, handleAudioStatus, handleAudioProxy, handleAudioStream
+//   handleTTSAnnounce
 //   handleVoices
 //   handlePresignChapter, handlePresignAudio, handlePresignVoiceSample
 //   handlePresignAvatarUpload, handlePresignAvatar
@@ -904,7 +905,119 @@ func (s *Server) handleAudioStream(w http.ResponseWriter, r *http.Request) {
 	// on its next poll as soon as the MinIO object is present.
 }
 
-// handleAudioPreview handles GET /api/audio-preview/{slug}/{n}.
+// handleTTSAnnounce handles GET /api/tts-announce.
+//
+// Streams a short TTS clip for arbitrary text — used by the UI to announce
+// the upcoming chapter number/title through the real <audio> element instead
+// of the Web Speech API (which is silently muted on mobile after the audio
+// session ends).
+//
+// Query params:
+//   - text  — the text to synthesize (required, max 300 chars)
+//   - voice — voice ID (defaults to server default)
+//   - format — "mp3" or "wav" (default "mp3")
+//
+// No MinIO caching — announcement clips are tiny and ephemeral.
+func (s *Server) handleTTSAnnounce(w http.ResponseWriter, r *http.Request) {
+	text := r.URL.Query().Get("text")
+	if text == "" {
+		jsonError(w, http.StatusBadRequest, "text is required")
+		return
+	}
+	if len(text) > 300 {
+		text = text[:300]
+	}
+
+	voice := r.URL.Query().Get("voice")
+	if voice == "" {
+		voice = s.cfg.DefaultVoice
+	}
+
+	format := r.URL.Query().Get("format")
+	if format != "wav" {
+		format = "mp3"
+	}
+
+	contentType := "audio/mpeg"
+	if format == "wav" {
+		contentType = "audio/wav"
+	}
+
+	var (
+		audioStream io.ReadCloser
+		err         error
+	)
+
+	if format == "wav" {
+		if cfai.IsCFAIVoice(voice) {
+			if s.deps.CFAI == nil {
+				jsonError(w, http.StatusServiceUnavailable, "cloudflare AI TTS not configured")
+				return
+			}
+			audioStream, err = s.deps.CFAI.StreamAudioWAV(r.Context(), text, voice)
+		} else if pockettts.IsPocketTTSVoice(voice) {
+			if s.deps.PocketTTS == nil {
+				jsonError(w, http.StatusServiceUnavailable, "pocket-tts not configured")
+				return
+			}
+			audioStream, err = s.deps.PocketTTS.StreamAudioWAV(r.Context(), text, voice)
+		} else {
+			if s.deps.Kokoro == nil {
+				jsonError(w, http.StatusServiceUnavailable, "kokoro not configured")
+				return
+			}
+			audioStream, err = s.deps.Kokoro.StreamAudioWAV(r.Context(), text, voice)
+		}
+	} else {
+		if cfai.IsCFAIVoice(voice) {
+			if s.deps.CFAI == nil {
+				jsonError(w, http.StatusServiceUnavailable, "cloudflare AI TTS not configured")
+				return
+			}
+			audioStream, err = s.deps.CFAI.StreamAudioMP3(r.Context(), text, voice)
+		} else if pockettts.IsPocketTTSVoice(voice) {
+			if s.deps.PocketTTS == nil {
+				jsonError(w, http.StatusServiceUnavailable, "pocket-tts not configured")
+				return
+			}
+			audioStream, err = s.deps.PocketTTS.StreamAudioMP3(r.Context(), text, voice)
+		} else {
+			if s.deps.Kokoro == nil {
+				jsonError(w, http.StatusServiceUnavailable, "kokoro not configured")
+				return
+			}
+			audioStream, err = s.deps.Kokoro.StreamAudioMP3(r.Context(), text, voice)
+		}
+	}
+	if err != nil {
+		s.deps.Log.Error("handleTTSAnnounce: TTS stream failed", "voice", voice, "err", err)
+		jsonError(w, http.StatusInternalServerError, "tts stream failed")
+		return
+	}
+	defer audioStream.Close()
+
+	w.Header().Set("Content-Type", contentType)
+	w.Header().Set("Cache-Control", "no-store")
+	w.Header().Set("X-Accel-Buffering", "no")
+	w.WriteHeader(http.StatusOK)
+
+	flusher, canFlush := w.(http.Flusher)
+	buf := make([]byte, 32*1024)
+	for {
+		nr, readErr := audioStream.Read(buf)
+		if nr > 0 {
+			if _, writeErr := w.Write(buf[:nr]); writeErr != nil {
+				return
+			}
+			if canFlush {
+				flusher.Flush()
+			}
+		}
+		if readErr != nil {
+			break
+		}
+	}
+}
 //
 // CF AI voices are batch-only and can take 1-2+ minutes to generate a full
 // chapter. This endpoint generates only the FIRST chunk of text (~1 800 chars,

backend/internal/backend/server.go

@@ -180,6 +180,8 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	// Streaming audio: serves from MinIO if cached, else streams live TTS
 	// while simultaneously uploading to MinIO for future requests.
 	mux.HandleFunc("GET /api/audio-stream/{slug}/{n}", s.handleAudioStream)
+	// TTS for arbitrary short text (chapter announcements) — no MinIO caching.
+	mux.HandleFunc("GET /api/tts-announce", s.handleTTSAnnounce)
 	// CF AI preview: generates only the first ~1 800-char chunk so the client
 	// can start playing immediately while the full audio is generated by the runner.
 	mux.HandleFunc("GET /api/audio-preview/{slug}/{n}", s.handleAudioPreview)

homelab/otel/collector.yaml

@@ -55,7 +55,13 @@ service:
   extensions: [health_check, pprof]
   telemetry:
     metrics:
-      address: 0.0.0.0:8888
+      # otel-collector v0.103+ replaced `address` with `readers`
+      readers:
+        - pull:
+            exporter:
+              prometheus:
+                host: 0.0.0.0
+                port: 8888
   pipelines:
     traces:
       receivers: [otlp]

ui/messages/en.json

@@ -161,6 +161,9 @@
   "profile_theme_amber": "Amber",
   "profile_theme_slate": "Slate",
   "profile_theme_rose": "Rose",
+  "profile_theme_forest": "Forest",
+  "profile_theme_mono": "Mono",
+  "profile_theme_cyber": "Cyberpunk",
   "profile_theme_light": "Light",
   "profile_theme_light_slate": "Light Blue",
   "profile_theme_light_rose": "Light Rose",

ui/messages/fr.json

@@ -161,6 +161,9 @@
   "profile_theme_amber": "Ambre",
   "profile_theme_slate": "Ardoise",
   "profile_theme_rose": "Rose",
+  "profile_theme_forest": "Forêt",
+  "profile_theme_mono": "Mono",
+  "profile_theme_cyber": "Cyberpunk",
   "profile_theme_light": "Light",
   "profile_theme_light_slate": "Light Blue",
   "profile_theme_light_rose": "Light Rose",

ui/messages/id.json

@@ -161,6 +161,9 @@
   "profile_theme_amber": "Amber",
   "profile_theme_slate": "Abu-abu",
   "profile_theme_rose": "Mawar",
+  "profile_theme_forest": "Hutan",
+  "profile_theme_mono": "Mono",
+  "profile_theme_cyber": "Cyberpunk",
   "profile_theme_light": "Light",
   "profile_theme_light_slate": "Light Blue",
   "profile_theme_light_rose": "Light Rose",

ui/messages/pt.json

@@ -161,6 +161,9 @@
   "profile_theme_amber": "Âmbar",
   "profile_theme_slate": "Ardósia",
   "profile_theme_rose": "Rosa",
+  "profile_theme_forest": "Floresta",
+  "profile_theme_mono": "Mono",
+  "profile_theme_cyber": "Cyberpunk",
   "profile_theme_light": "Light",
   "profile_theme_light_slate": "Light Blue",
   "profile_theme_light_rose": "Light Rose",

ui/messages/ru.json

@@ -161,6 +161,9 @@
   "profile_theme_amber": "Янтарь",
   "profile_theme_slate": "Сланец",
   "profile_theme_rose": "Роза",
+  "profile_theme_forest": "Лес",
+  "profile_theme_mono": "Моно",
+  "profile_theme_cyber": "Киберпанк",
   "profile_theme_light": "Light",
   "profile_theme_light_slate": "Light Blue",
   "profile_theme_light_rose": "Light Rose",

ui/src/app.css

@@ -97,6 +97,48 @@
 	--color-success:   #16a34a;   /* green-600 */
 }
 
+/* ── Forest theme — dark green ────────────────────────────────────────── */
+[data-theme="forest"] {
+	--color-brand:     #4ade80;   /* green-400 */
+	--color-brand-dim: #16a34a;   /* green-600 */
+	--color-surface:   #0a130d;   /* custom near-black green */
+	--color-surface-2: #111c14;   /* custom dark green */
+	--color-surface-3: #1a2e1e;   /* custom mid green */
+	--color-muted:     #6b9a77;   /* custom muted green */
+	--color-text:      #e8f5e9;   /* custom light green-tinted white */
+	--color-border:    #1e3a24;   /* custom green border */
+	--color-danger:    #f87171;   /* red-400 */
+	--color-success:   #4ade80;   /* green-400 */
+}
+
+/* ── Mono theme — pure dark with white accent ─────────────────────────── */
+[data-theme="mono"] {
+	--color-brand:     #f4f4f5;   /* zinc-100 — white accent */
+	--color-brand-dim: #a1a1aa;   /* zinc-400 */
+	--color-surface:   #09090b;   /* zinc-950 */
+	--color-surface-2: #18181b;   /* zinc-900 */
+	--color-surface-3: #27272a;   /* zinc-800 */
+	--color-muted:     #71717a;   /* zinc-500 */
+	--color-text:      #f4f4f5;   /* zinc-100 */
+	--color-border:    #27272a;   /* zinc-800 */
+	--color-danger:    #f87171;   /* red-400 */
+	--color-success:   #4ade80;   /* green-400 */
+}
+
+/* ── Cyberpunk theme — dark with neon cyan/magenta accents ────────────── */
+[data-theme="cyber"] {
+	--color-brand:     #22d3ee;   /* cyan-400 — neon cyan */
+	--color-brand-dim: #06b6d4;   /* cyan-500 */
+	--color-surface:   #050712;   /* custom near-black blue */
+	--color-surface-2: #0d1117;   /* custom dark blue-black */
+	--color-surface-3: #161b27;   /* custom dark blue */
+	--color-muted:     #6272a4;   /* dracula comment blue */
+	--color-text:      #e2e8f0;   /* slate-200 */
+	--color-border:    #1e2d45;   /* custom dark border */
+	--color-danger:    #ff5555;   /* dracula red */
+	--color-success:   #50fa7b;   /* dracula green */
+}
+
 html {
 	background-color: var(--color-surface);
 	color: var(--color-text);

ui/src/lib/audio.svelte.ts

@@ -160,6 +160,19 @@ class AudioStore {
 		return this.slug === slug && this.chapter === chapter;
 	}
 
+	// ── Announce-chapter navigation state ────────────────────────────────────
+	/**
+	 * When true, the <audio> element is playing a short announcement clip
+	 * (not chapter audio).  The next `onended` should navigate to
+	 * announcePendingSlug / announcePendingChapter instead of the normal
+	 * auto-next flow.
+	 */
+	announceNavigatePending = $state(false);
+	/** Target book slug for the pending announce-then-navigate transition. */
+	announcePendingSlug    = $state('');
+	/** Target chapter number for the pending announce-then-navigate transition. */
+	announcePendingChapter = $state(0);
+
 	/** Reset all next-chapter pre-fetch state. */
 	resetNextPrefetch() {
 		this.nextStatus = 'none';

ui/src/lib/components/AudioPlayer.svelte

@@ -72,6 +72,8 @@
 		onProRequired?: () => void;
 		/** Visual style of the player card. 'standard' = full controls; 'compact' = slim seekable player. */
 		playerStyle?: 'standard' | 'compact';
+		/** Approximate word count for the chapter, used to show estimated listen time in the idle state. */
+		wordCount?: number;
 	}
 
 	let {
@@ -84,9 +86,13 @@
 		chapters = [],
 		voices = [],
 		onProRequired = undefined,
-		playerStyle = 'standard'
+		playerStyle = 'standard',
+		wordCount = 0
 	}: Props = $props();
 
+	/** Estimated listen time in minutes at ~150 wpm average narration speed. */
+	const estimatedMinutes = $derived(wordCount > 0 ? Math.max(1, Math.round(wordCount / 150)) : 0);
+
 	// ── Derived: voices grouped by engine ──────────────────────────────────
 	const kokoroVoices = $derived(voices.filter((v) => v.engine === 'kokoro'));
 	const pocketVoices = $derived(voices.filter((v) => v.engine === 'pocket-tts'));
@@ -1063,6 +1069,134 @@
 </div>
 {:else}
 <!-- ── Standard player ─────────────────────────────────────────────────────── -->
+
+{#if
+	(!audioStore.isCurrentChapter(slug, chapter) && !audioStore.active) ||
+	(audioStore.isCurrentChapter(slug, chapter) && (audioStore.status === 'idle' || audioStore.status === 'error'))
+}
+<!-- ── Idle / not-yet-started pill ─────────────────────────────────────────── -->
+<div class="px-3 py-2.5">
+	{#if audioStore.isCurrentChapter(slug, chapter) && audioStore.status === 'error'}
+		<p class="text-(--color-danger) text-xs mb-2">{audioStore.errorMsg || 'Failed to load audio.'}</p>
+	{/if}
+	<div class="flex items-center gap-3">
+		<!-- Big play button -->
+		<button
+			type="button"
+			onclick={handlePlay}
+			class="w-11 h-11 rounded-full bg-(--color-brand) text-(--color-surface) flex items-center justify-center hover:bg-(--color-brand-dim) active:scale-95 transition-all flex-shrink-0 shadow-sm"
+			aria-label={m.reader_play_narration()}
+		>
+			<svg class="w-5 h-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M8 5v14l11-7z"/>
+			</svg>
+		</button>
+
+		<!-- Track info -->
+		<div class="flex-1 min-w-0">
+			<p class="text-sm font-semibold text-(--color-text) leading-tight truncate">
+				{m.reader_play_narration()}
+			</p>
+			<div class="flex items-center gap-1.5 mt-0.5">
+				<!-- Voice indicator -->
+				{#if voices.length > 0}
+					<button
+						type="button"
+						onclick={() => { stopSample(); showVoicePanel = !showVoicePanel; showChapterPanel = false; chapterSearch = ''; }}
+						class={cn('flex items-center gap-1 text-xs transition-colors leading-none', showVoicePanel ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+						title={m.reader_change_voice()}
+					>
+						<svg class="w-3 h-3 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+						</svg>
+						<span class="max-w-[90px] truncate">{voiceLabel(audioStore.voice)}</span>
+						<svg class={cn('w-2.5 h-2.5 flex-shrink-0 transition-transform', showVoicePanel && 'rotate-180')} fill="currentColor" viewBox="0 0 24 24">
+							<path d="M7 10l5 5 5-5z"/>
+						</svg>
+					</button>
+				{/if}
+				<!-- Estimated duration -->
+				{#if estimatedMinutes > 0}
+					{#if voices.length > 0}<span class="text-(--color-border) text-xs leading-none">·</span>{/if}
+					<span class="text-xs text-(--color-muted) leading-none tabular-nums">~{estimatedMinutes} min</span>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Chapters button (right side) -->
+		{#if chapters.length > 0}
+			<button
+				type="button"
+				onclick={() => { showChapterPanel = !showChapterPanel; showVoicePanel = false; stopSample(); }}
+				class={cn('flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors flex-shrink-0', showChapterPanel ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3)')}
+				title="Browse chapters"
+			>
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/>
+				</svg>
+				<span class="hidden sm:inline">Chapters</span>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Voice selector panel (inline below pill) -->
+	{#if showVoicePanel && voices.length > 0}
+		<div class="mt-3 rounded-lg border border-(--color-border) bg-(--color-surface) overflow-hidden">
+			<div class="px-3 py-2 border-b border-(--color-border) flex items-center justify-between">
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">{m.reader_choose_voice()}</span>
+				<Button
+					variant="ghost"
+					size="icon"
+					class="h-6 w-6 text-(--color-muted) hover:text-(--color-text)"
+					onclick={() => { stopSample(); showVoicePanel = false; }}
+					aria-label={m.reader_close_voice_panel()}
+				>
+					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+					</svg>
+				</Button>
+			</div>
+			<div class="max-h-64 overflow-y-auto">
+				{#if kokoroVoices.length > 0}
+					<div class="px-3 py-1.5 bg-(--color-surface-2)/70 border-b border-(--color-border)/50">
+						<span class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-widest">Kokoro (GPU)</span>
+					</div>
+					{#each kokoroVoices as v (v.id)}{@render voiceRow(v)}{/each}
+				{/if}
+				{#if pocketVoices.length > 0}
+					<div class="px-3 py-1.5 bg-(--color-surface-2)/70 border-b border-(--color-border)/50 {kokoroVoices.length > 0 ? 'border-t border-(--color-border)' : ''}">
+						<span class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-widest">Pocket TTS (CPU)</span>
+					</div>
+					{#each pocketVoices as v (v.id)}{@render voiceRow(v)}{/each}
+				{/if}
+				{#if cfaiVoices.length > 0}
+					<div class="px-3 py-1.5 bg-(--color-surface-2)/70 border-b border-(--color-border)/50 {kokoroVoices.length > 0 || pocketVoices.length > 0 ? 'border-t border-(--color-border)' : ''}">
+						<span class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-widest">Cloudflare AI</span>
+					</div>
+					{#each cfaiVoices as v (v.id)}{@render voiceRow(v)}{/each}
+				{/if}
+			</div>
+			<div class="px-3 py-2 border-t border-(--color-border) bg-(--color-surface-2)/50">
+				<p class="text-xs text-(--color-muted)">
+					{m.reader_voice_applies_next()}
+					{#if voices.length > 0}
+						<a
+							href="/api/audio/voice-samples"
+							class="text-(--color-muted) hover:text-(--color-brand) transition-colors underline"
+							onclick={(e) => {
+								e.preventDefault();
+								fetch('/api/audio/voice-samples', { method: 'POST' }).catch(() => {});
+							}}
+						>{m.reader_generate_samples()}</a>
+					{/if}
+				</p>
+			</div>
+		</div>
+	{/if}
+</div>
+
+{:else}
+<!-- ── Non-idle states (loading / generating / ready / other-chapter-playing) ── -->
 <div class="p-4">
 	<div class="flex items-center justify-end gap-2 mb-3">
 		<!-- Chapter picker button -->
@@ -1166,94 +1300,11 @@
 		</div>
 	{/if}
 
-	<!-- ── Chapter picker overlay ────────────────────────────────────────── -->
-	{#if showChapterPanel && audioStore.chapters.length > 0}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="fixed inset-0 z-[60] flex flex-col"
-			style="background: var(--color-surface);"
-		>
-			<!-- Header -->
-			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
-				<button
-					type="button"
-					onclick={() => { showChapterPanel = false; chapterSearch = ''; }}
-					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
-					aria-label="Close chapter picker"
-				>
-					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-					</svg>
-				</button>
-				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Chapters</span>
-			</div>
-			<!-- Search -->
-			<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
-				<div class="relative">
-					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-					</svg>
-					<input
-						type="search"
-						placeholder="Search chapters…"
-						bind:value={chapterSearch}
-						class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
-					/>
-				</div>
-			</div>
-			<!-- Chapter list -->
-			<div class="flex-1 overflow-y-auto">
-				{#each filteredChapters as ch (ch.number)}
-					<button
-						type="button"
-						onclick={() => playChapter(ch.number)}
-						class={cn(
-							'w-full flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors text-left',
-							ch.number === chapter ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
-						)}
-					>
-						<!-- Chapter number badge (mirrors voice radio indicator) -->
-						<span class={cn(
-							'w-8 h-8 shrink-0 rounded-full border-2 flex items-center justify-center tabular-nums text-xs font-semibold transition-colors',
-							ch.number === chapter
-								? 'border-(--color-brand) bg-(--color-brand) text-(--color-surface)'
-								: 'border-(--color-border) text-(--color-muted)'
-						)}>{ch.number}</span>
-						<!-- Title -->
-						<span class={cn(
-							'flex-1 text-sm truncate',
-							ch.number === chapter ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)'
-						)}>{ch.title || `Chapter ${ch.number}`}</span>
-						<!-- Now-playing indicator -->
-						{#if ch.number === chapter}
-							<svg class="w-4 h-4 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M8 5v14l11-7z"/>
-							</svg>
-						{/if}
-					</button>
-				{/each}
-				{#if filteredChapters.length === 0}
-					<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
-				{/if}
-			</div>
-		</div>
-	{/if}
 
 	{#if audioStore.isCurrentChapter(slug, chapter)}
-		<!-- ── This chapter is the active one ── -->
+		<!-- ── This chapter is the active one (non-idle states) ── -->
 
-		{#if audioStore.status === 'idle' || audioStore.status === 'error'}
-			{#if audioStore.status === 'error'}
-				<p class="text-(--color-danger) text-sm mb-2">{audioStore.errorMsg || 'Failed to load audio.'}</p>
-			{/if}
-		<Button variant="default" size="sm" onclick={handlePlay}>
-			<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-				<path d="M8 5v14l11-7z"/>
-			</svg>
-			{m.reader_play_narration()}
-		</Button>
-
-		{:else if audioStore.status === 'loading'}
+		{#if audioStore.status === 'loading'}
 			<Button variant="default" size="sm" disabled>
 				<svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
 					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -1306,15 +1357,82 @@
 				{m.reader_load_this_chapter()}
 			</Button>
 		</div>
-
-	{:else}
-		<!-- ── Idle — nothing playing ── -->
-		<Button variant="default" size="sm" onclick={handlePlay}>
-			<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-				<path d="M8 5v14l11-7z"/>
-			</svg>
-			{m.reader_play_narration()}
-		</Button>
 	{/if}
 </div>
 {/if}
+
+<!-- ── Chapter picker overlay ─────────────────────────────────────────────────
+     Rendered as a top-level sibling (outside all player containers) so that
+     the fixed inset-0 positioning is never clipped by overflow-hidden or
+     border-radius on any ancestor wrapping the AudioPlayer component.        -->
+{#if showChapterPanel && audioStore.chapters.length > 0}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-[60] flex flex-col"
+		style="background: var(--color-surface);"
+	>
+		<!-- Header -->
+		<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+			<span class="text-sm font-semibold text-(--color-text) flex-1">Chapters</span>
+			<button
+				type="button"
+				onclick={() => { showChapterPanel = false; chapterSearch = ''; }}
+				class="w-9 h-9 flex items-center justify-center rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+				aria-label="Close chapter picker"
+			>
+				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+				</svg>
+			</button>
+		</div>
+		<!-- Search -->
+		<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
+			<div class="relative">
+				<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+				</svg>
+				<input
+					type="search"
+					placeholder="Search chapters…"
+					bind:value={chapterSearch}
+					class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+				/>
+			</div>
+		</div>
+		<!-- Chapter list -->
+		<div class="flex-1 overflow-y-auto">
+			{#each filteredChapters as ch (ch.number)}
+				<button
+					type="button"
+					onclick={() => playChapter(ch.number)}
+					class={cn(
+						'w-full flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors text-left',
+						ch.number === chapter ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
+					)}
+				>
+					<!-- Chapter number badge -->
+					<span class={cn(
+						'w-8 h-8 shrink-0 rounded-full border-2 flex items-center justify-center tabular-nums text-xs font-semibold transition-colors',
+						ch.number === chapter
+							? 'border-(--color-brand) bg-(--color-brand) text-(--color-surface)'
+							: 'border-(--color-border) text-(--color-muted)'
+					)}>{ch.number}</span>
+					<!-- Title -->
+					<span class={cn(
+						'flex-1 text-sm truncate',
+						ch.number === chapter ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)'
+					)}>{ch.title || `Chapter ${ch.number}`}</span>
+					<!-- Now-playing indicator -->
+					{#if ch.number === chapter}
+						<svg class="w-4 h-4 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M8 5v14l11-7z"/>
+						</svg>
+					{/if}
+				</button>
+			{/each}
+			{#if filteredChapters.length === 0}
+				<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
+			{/if}
+		</div>
+	</div>
+{/if}

ui/src/lib/components/ListeningMode.svelte

@@ -373,11 +373,11 @@
 	{#if showVoiceModal && voices.length > 0}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="absolute inset-0 z-70 flex flex-col"
+			class="fixed inset-0 z-[80] flex flex-col"
 			style="background: var(--color-surface);"
 		>
 			<!-- Modal header -->
-			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0" style="padding-top: max(0.75rem, env(safe-area-inset-top));">
 				<button
 					type="button"
 					onclick={() => { stopSample(); showVoiceModal = false; voiceSearch = ''; }}
@@ -405,7 +405,7 @@
 				</div>
 			</div>
 			<!-- Voice list -->
-			<div class="flex-1 overflow-y-auto">
+			<div class="flex-1 overflow-y-auto overscroll-contain" style="padding-bottom: env(safe-area-inset-bottom);">
 				{#each ([['Kokoro', filteredKokoro], ['Pocket TTS', filteredPocket], ['CF AI', filteredCfai]] as [string, Voice[]][]) as [label, group]}
 					{#if group.length > 0}
 						<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider px-4 py-2 sticky top-0 bg-(--color-surface) border-b border-(--color-border)/50">{label}</p>
@@ -454,8 +454,11 @@
 	<!-- Chapter modal (full-screen overlay) -->
 	{#if showChapterModal && audioStore.chapters.length > 0}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="absolute inset-0 z-70 flex flex-col" style="background: var(--color-surface);">
-			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+		<div
+			class="fixed inset-0 z-[80] flex flex-col"
+			style="background: var(--color-surface);"
+		>
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0" style="padding-top: max(0.75rem, env(safe-area-inset-top));">
 				<button
 					type="button"
 					onclick={() => { showChapterModal = false; }}
@@ -481,7 +484,7 @@
 					/>
 				</div>
 			</div>
-			<div class="flex-1 overflow-y-auto">
+			<div class="flex-1 overflow-y-auto overscroll-contain" style="padding-bottom: env(safe-area-inset-bottom);">
 				{#each filteredChapters as ch (ch.number)}
 					<button
 						type="button"

ui/src/lib/paraglide/messages/_index.js

@@ -150,6 +150,9 @@ export * from './profile_theme_label.js'
 export * from './profile_theme_amber.js'
 export * from './profile_theme_slate.js'
 export * from './profile_theme_rose.js'
+export * from './profile_theme_forest.js'
+export * from './profile_theme_mono.js'
+export * from './profile_theme_cyber.js'
 export * from './profile_theme_light.js'
 export * from './profile_theme_light_slate.js'
 export * from './profile_theme_light_rose.js'

ui/src/lib/paraglide/messages/profile_theme_cyber.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Profile_Theme_CyberInputs */
+
+const en_profile_theme_cyber = /** @type {(inputs: Profile_Theme_CyberInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Cyberpunk`)
+};
+
+const ru_profile_theme_cyber = /** @type {(inputs: Profile_Theme_CyberInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Киберпанк`)
+};
+
+const id_profile_theme_cyber = /** @type {(inputs: Profile_Theme_CyberInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Cyberpunk`)
+};
+
+const pt_profile_theme_cyber = /** @type {(inputs: Profile_Theme_CyberInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Cyberpunk`)
+};
+
+const fr_profile_theme_cyber = /** @type {(inputs: Profile_Theme_CyberInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Cyberpunk`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Cyberpunk" |
+*
+* @param {Profile_Theme_CyberInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const profile_theme_cyber = /** @type {((inputs?: Profile_Theme_CyberInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Profile_Theme_CyberInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_profile_theme_cyber(inputs)
+	if (locale === "ru") return ru_profile_theme_cyber(inputs)
+	if (locale === "id") return id_profile_theme_cyber(inputs)
+	if (locale === "pt") return pt_profile_theme_cyber(inputs)
+	return fr_profile_theme_cyber(inputs)
+});

ui/src/lib/paraglide/messages/profile_theme_forest.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Profile_Theme_ForestInputs */
+
+const en_profile_theme_forest = /** @type {(inputs: Profile_Theme_ForestInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Forest`)
+};
+
+const ru_profile_theme_forest = /** @type {(inputs: Profile_Theme_ForestInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Лес`)
+};
+
+const id_profile_theme_forest = /** @type {(inputs: Profile_Theme_ForestInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Hutan`)
+};
+
+const pt_profile_theme_forest = /** @type {(inputs: Profile_Theme_ForestInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Floresta`)
+};
+
+const fr_profile_theme_forest = /** @type {(inputs: Profile_Theme_ForestInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Forêt`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Forest" |
+*
+* @param {Profile_Theme_ForestInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const profile_theme_forest = /** @type {((inputs?: Profile_Theme_ForestInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Profile_Theme_ForestInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_profile_theme_forest(inputs)
+	if (locale === "ru") return ru_profile_theme_forest(inputs)
+	if (locale === "id") return id_profile_theme_forest(inputs)
+	if (locale === "pt") return pt_profile_theme_forest(inputs)
+	return fr_profile_theme_forest(inputs)
+});

ui/src/lib/paraglide/messages/profile_theme_mono.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Profile_Theme_MonoInputs */
+
+const en_profile_theme_mono = /** @type {(inputs: Profile_Theme_MonoInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mono`)
+};
+
+const ru_profile_theme_mono = /** @type {(inputs: Profile_Theme_MonoInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Моно`)
+};
+
+const id_profile_theme_mono = /** @type {(inputs: Profile_Theme_MonoInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mono`)
+};
+
+const pt_profile_theme_mono = /** @type {(inputs: Profile_Theme_MonoInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mono`)
+};
+
+const fr_profile_theme_mono = /** @type {(inputs: Profile_Theme_MonoInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mono`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Mono" |
+*
+* @param {Profile_Theme_MonoInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const profile_theme_mono = /** @type {((inputs?: Profile_Theme_MonoInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Profile_Theme_MonoInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_profile_theme_mono(inputs)
+	if (locale === "ru") return ru_profile_theme_mono(inputs)
+	if (locale === "id") return id_profile_theme_mono(inputs)
+	if (locale === "pt") return pt_profile_theme_mono(inputs)
+	return fr_profile_theme_mono(inputs)
+});

ui/src/routes/+layout.svelte

@@ -38,6 +38,9 @@
 		{ id: 'amber',       color: '#f59e0b' },
 		{ id: 'slate',       color: '#818cf8' },
 		{ id: 'rose',        color: '#fb7185' },
+		{ id: 'forest',      color: '#4ade80' },
+		{ id: 'mono',        color: '#f4f4f5' },
+		{ id: 'cyber',       color: '#22d3ee' },
 		{ id: 'light',       color: '#d97706', light: true },
 		{ id: 'light-slate', color: '#4f46e5', light: true },
 		{ id: 'light-rose',  color: '#e11d48', light: true },
@@ -257,6 +260,11 @@
 		navigator.mediaSession.playbackState = audioStore.isPlaying ? 'playing' : 'paused';
 	});
 
+	// ── Announce-chapter safety timeout ──────────────────────────────────────
+	// Module-level so the onended handler can clear it if the clip completes
+	// before the timeout fires.
+	let announceTimeout = 0;
+
 	// ── Save audio time on pause/end (debounced 2s) ─────────────────────────
 	let audioTimeSaveTimer = 0;
 	function saveAudioTime() {
@@ -363,6 +371,22 @@
 	}}
 	onended={() => {
 		audioStore.isPlaying = false;
+
+		// ── If we just finished playing an announcement clip, navigate now ──
+		if (audioStore.announceNavigatePending) {
+			audioStore.announceNavigatePending = false;
+			clearTimeout(announceTimeout);
+			announceTimeout = 0;
+			const slug    = audioStore.announcePendingSlug;
+			const chapter = audioStore.announcePendingChapter;
+			audioStore.announcePendingSlug    = '';
+			audioStore.announcePendingChapter = 0;
+			goto(`/books/${slug}/chapters/${chapter}`).catch(() => {
+				audioStore.autoStartChapter = null;
+			});
+			return;
+		}
+
 		// Cancel any pending debounced save and reset the position to 0 for
 		// the chapter that just finished. Without this, the 2s debounce fires
 		// after navigation and saves currentTime≈duration, causing resume to
@@ -387,45 +411,53 @@
 			// Capture values synchronously before any async work — the AudioPlayer
 			// component will unmount during navigation, but we've already read what
 			// we need.
-			const targetSlug = audioStore.slug;
+			const targetSlug    = audioStore.slug;
 			const targetChapter = audioStore.nextChapter;
 			// Store the target chapter number so only the newly-mounted AudioPlayer
 			// for that chapter reacts — not the outgoing chapter's component.
 			audioStore.autoStartChapter = targetChapter;
 
-			// Announce the upcoming chapter via Web Speech API if enabled.
 			const doNavigate = () => {
 				goto(`/books/${targetSlug}/chapters/${targetChapter}`).catch(() => {
 					audioStore.autoStartChapter = null;
 				});
 			};
 
-			if (audioStore.announceChapter && typeof window !== 'undefined' && 'speechSynthesis' in window) {
-				const nextInfo = audioStore.chapters.find((c) => c.number === targetChapter);
+			// Announce via a real audio clip so the audio session stays alive on
+			// iOS Safari / Chrome Android (speechSynthesis is silently muted after
+			// onended because the audio session has been released).
+			if (audioStore.announceChapter) {
+				const nextInfo  = audioStore.chapters.find((c) => c.number === targetChapter);
 				const titlePart = nextInfo?.title ? ` — ${nextInfo.title}` : '';
-				const text = `Chapter ${targetChapter}${titlePart}`;
-				window.speechSynthesis.cancel();
-				const utterance = new SpeechSynthesisUtterance(text);
+				const text      = `Chapter ${targetChapter}${titlePart}`;
 
-				// Guard: ensure doNavigate can only fire once even if both
-				// onend and the timeout fire, or onerror fires after onend.
-				let navigated = false;
-				const safeNavigate = () => {
-					if (navigated) return;
-					navigated = true;
-					clearTimeout(announceTimeout);
-					doNavigate();
-				};
+				// Always request MP3 — universally supported and the backend
+				// auto-selects the right TTS engine from the voice ID.
+				const qs       = new URLSearchParams({ text, voice: audioStore.voice, format: 'mp3' });
+				const announceUrl = `/api/announce?${qs}`;
 
-				// Hard fallback: if speechSynthesis silently drops the utterance
-				// (common on Chrome Android due to gesture policy, or when the
-				// browser is busy fetching the next chapter's audio), navigate
-				// anyway after a generous 8-second window.
-				const announceTimeout = setTimeout(safeNavigate, 8000);
+				// Store pending navigation target so the next onended (from the
+				// announcement clip) knows where to go.
+				audioStore.announcePendingSlug    = targetSlug;
+				audioStore.announcePendingChapter = targetChapter;
+				audioStore.announceNavigatePending = true;
 
-				utterance.onend = safeNavigate;
-				utterance.onerror = safeNavigate;
-				window.speechSynthesis.speak(utterance);
+				// Safety timeout: if the clip never loads/ends (network issue,
+				// browser policy, unsupported codec), navigate anyway after 10s.
+				clearTimeout(announceTimeout);
+				announceTimeout = setTimeout(() => {
+					if (audioStore.announceNavigatePending) {
+						audioStore.announceNavigatePending = false;
+						audioStore.announcePendingSlug    = '';
+						audioStore.announcePendingChapter = 0;
+						doNavigate();
+					}
+				}, 10_000) as unknown as number;
+
+				// Point the persistent <audio> element at the announcement clip.
+				// The $effect in the layout that watches audioStore.audioUrl will
+				// pick this up, set audioEl.src, and call play().
+				audioStore.audioUrl = announceUrl;
 			} else {
 				doNavigate();
 			}

ui/src/routes/+page.svelte

@@ -73,50 +73,76 @@
 	];
 
 	// ── Hero carousel ────────────────────────────────────────────────────────
+	const CAROUSEL_INTERVAL = 6000; // ms
 	const heroBooks  = $derived(data.continueInProgress);
 	let heroIndex    = $state(0);
 	const heroBook   = $derived(heroBooks[heroIndex] ?? null);
-	// Shelf shows remaining books not in the hero
-	const shelfBooks = $derived(
-		heroBooks.length > 1 ? heroBooks.filter((_, i) => i !== heroIndex) : []
-	);
+	// Shelf always shows books at positions 1…n — stable regardless of heroIndex
+	// so that navigating the carousel doesn't reshuffle the shelf below.
+	const shelfBooks = $derived(heroBooks.length > 1 ? heroBooks.slice(1) : []);
 	const streak     = $derived(data.stats.streak ?? 0);
 
-	function heroPrev() {
-		heroIndex = (heroIndex - 1 + heroBooks.length) % heroBooks.length;
-		resetAutoAdvance();
-	}
-	function heroNext() {
-		heroIndex = (heroIndex + 1) % heroBooks.length;
-		resetAutoAdvance();
-	}
 	function heroDot(i: number) {
 		heroIndex = i;
 		resetAutoAdvance();
 	}
 
-	// Auto-advance carousel every 6 s when there are multiple books.
-	// We use a $state counter as a "restart token" so the $effect can be
-	// re-triggered by manual navigation without reading heroIndex (which would
-	// cause an infinite loop when the interval itself mutates heroIndex).
+	// Auto-advance carousel every CAROUSEL_INTERVAL ms when there are multiple books.
+	// autoAdvanceSeed is bumped on manual swipe/dot to restart the interval.
 	let autoAdvanceSeed = $state(0);
+	// progressStart tracks when the current interval began (for the progress bar).
+	let progressStart   = $state(browser ? performance.now() : 0);
 
 	$effect(() => {
 		if (heroBooks.length <= 1) return;
-		// Subscribe to heroBooks.length and autoAdvanceSeed only — not heroIndex.
 		const len = heroBooks.length;
-		void autoAdvanceSeed; // track the seed
+		void autoAdvanceSeed; // restart when seed changes
+		progressStart = browser ? performance.now() : 0;
 		const id = setInterval(() => {
 			heroIndex = (heroIndex + 1) % len;
-		}, 6000);
+			progressStart = browser ? performance.now() : 0;
+		}, CAROUSEL_INTERVAL);
 		return () => clearInterval(id);
 	});
 
 	function resetAutoAdvance() {
-		// Bump the seed to restart the interval after manual navigation.
 		autoAdvanceSeed++;
 	}
 
+	// ── Swipe handling ───────────────────────────────────────────────────────
+	let swipeStartX = 0;
+	function onSwipeStart(e: TouchEvent) {
+		swipeStartX = e.touches[0].clientX;
+	}
+	function onSwipeEnd(e: TouchEvent) {
+		const dx = e.changedTouches[0].clientX - swipeStartX;
+		if (Math.abs(dx) < 40) return; // ignore tiny movements
+		if (dx < 0) {
+			// swipe left → next
+			heroIndex = (heroIndex + 1) % heroBooks.length;
+		} else {
+			// swipe right → prev
+			heroIndex = (heroIndex - 1 + heroBooks.length) % heroBooks.length;
+		}
+		resetAutoAdvance();
+	}
+
+	// ── Progress bar animation ───────────────────────────────────────────────
+	// rAF loop drives a 0→1 progress value that resets on each advance.
+	let rafProgress = $state(0);
+	$effect(() => {
+		if (!browser || heroBooks.length <= 1) return;
+		void autoAdvanceSeed; // re-subscribe so effect re-runs on manual nav
+		void heroIndex;
+		let raf: number;
+		function tick() {
+			rafProgress = Math.min((performance.now() - progressStart) / CAROUSEL_INTERVAL, 1);
+			raf = requestAnimationFrame(tick);
+		}
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	});
+
 	function playChapter(slug: string, chapter: number) {
 		audioStore.autoStartChapter = chapter;
 		goto(`/books/${slug}/chapters/${chapter}`);
@@ -131,8 +157,13 @@
 {#if heroBook}
 <section class="mb-6">
 	<div class="relative">
-		<!-- Card -->
-		<div class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all">
+		<!-- Card — swipe to navigate -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all"
+			ontouchstart={onSwipeStart}
+			ontouchend={onSwipeEnd}
+		>
 			<!-- Cover -->
 			<a href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
 				class="w-32 sm:w-44 shrink-0 aspect-[2/3] overflow-hidden block">
@@ -188,44 +219,32 @@
 					{/each}
 				</div>
 			</div>
-
-			<!-- Prev / Next arrow buttons (only when multiple books) -->
-			{#if heroBooks.length > 1}
-				<button
-					type="button"
-					onclick={heroPrev}
-					class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-(--color-surface)/80 border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors flex items-center justify-center backdrop-blur-sm z-10"
-					aria-label="Previous book"
-				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-					</svg>
-				</button>
-				<button
-					type="button"
-					onclick={heroNext}
-					class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-(--color-surface)/80 border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors flex items-center justify-center backdrop-blur-sm z-10"
-					aria-label="Next book"
-				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-					</svg>
-				</button>
-			{/if}
 		</div>
 
-		<!-- Dot indicators -->
+		<!-- Dot indicators with animated progress line under active dot -->
 		{#if heroBooks.length > 1}
-			<div class="flex items-center justify-center gap-1.5 mt-2.5">
+			<div class="flex items-center justify-center gap-2 mt-2.5">
 				{#each heroBooks as _, i}
 					<button
 						type="button"
 						onclick={() => heroDot(i)}
 						aria-label="Go to book {i + 1}"
-						class="rounded-full transition-all duration-300 {i === heroIndex
+						class="relative flex flex-col items-center gap-0.5 group/dot"
+					>
+						<!-- dot -->
+						<span class="block rounded-full transition-all duration-300 {i === heroIndex
 							? 'w-4 h-1.5 bg-(--color-brand)'
-							: 'w-1.5 h-1.5 bg-(--color-border) hover:bg-(--color-muted)'}"
-					></button>
+							: 'w-1.5 h-1.5 bg-(--color-border) group-hover/dot:bg-(--color-muted)'}"></span>
+						<!-- progress line — only visible under the active dot -->
+						{#if i === heroIndex}
+							<span class="absolute -bottom-1.5 left-0 h-0.5 w-full bg-(--color-border) rounded-full overflow-hidden">
+								<span
+									class="block h-full bg-(--color-brand) rounded-full"
+									style="width: {rafProgress * 100}%"
+								></span>
+							</span>
+						{/if}
+					</button>
 				{/each}
 			</div>
 		{/if}

ui/src/routes/api/announce/+server.ts

@@ -0,0 +1,39 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { backendFetch } from '$lib/server/scraper';
+
+/**
+ * GET /api/announce?text=...&voice=...&format=...
+ *
+ * Thin proxy to backend GET /api/tts-announce.
+ * No paywall — this is a short announcement clip (a few words), not chapter audio.
+ * No MinIO caching — the backend streams the clip directly.
+ */
+export const GET: RequestHandler = async ({ url }) => {
+	const text = url.searchParams.get('text') ?? '';
+	if (!text) error(400, 'text is required');
+
+	const qs = new URLSearchParams();
+	qs.set('text', text);
+
+	const voice = url.searchParams.get('voice');
+	if (voice) qs.set('voice', voice);
+
+	const format = url.searchParams.get('format') ?? 'mp3';
+	qs.set('format', format);
+
+	const backendRes = await backendFetch(`/api/tts-announce?${qs}`);
+
+	if (!backendRes.ok) {
+		error(backendRes.status as Parameters<typeof error>[0], 'TTS announce failed');
+	}
+
+	return new Response(backendRes.body, {
+		status: 200,
+		headers: {
+			'Content-Type': backendRes.headers.get('Content-Type') ?? 'audio/mpeg',
+			'Cache-Control': 'no-store',
+			'X-Accel-Buffering': 'no'
+		}
+	});
+};

ui/src/routes/api/settings/+server.ts

@@ -45,7 +45,7 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 	}
 
 	// theme is optional — if provided (and non-empty) it must be a known value
-	const validThemes = ['amber', 'slate', 'rose', 'light', 'light-slate', 'light-rose'];
+	const validThemes = ['amber', 'slate', 'rose', 'forest', 'mono', 'cyber', 'light', 'light-slate', 'light-rose'];
 	if (body.theme !== undefined && body.theme !== '' && !validThemes.includes(body.theme)) {
 		error(400, `Invalid theme — must be one of: ${validThemes.join(', ')}`);
 	}

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -526,6 +526,7 @@
 							chapters={data.chapters}
 							voices={data.voices}
 							playerStyle={layout.playerStyle}
+							wordCount={wordCount}
 							onProRequired={() => { audioProRequired = true; }}
 						/>
 					{/if}

ui/src/routes/discover/+page.svelte

@@ -458,6 +458,7 @@
 			<button
 				type="button"
 				onclick={() => (showHistory = false)}
+				aria-label="Close history"
 				class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
 			>
 				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

ui/src/routes/profile/+page.svelte

@@ -145,6 +145,9 @@
 		{ id: 'amber',       label: () => m.profile_theme_amber(),       swatch: '#f59e0b' },
 		{ id: 'slate',       label: () => m.profile_theme_slate(),       swatch: '#818cf8' },
 		{ id: 'rose',        label: () => m.profile_theme_rose(),        swatch: '#fb7185' },
+		{ id: 'forest',      label: () => m.profile_theme_forest(),      swatch: '#4ade80' },
+		{ id: 'mono',        label: () => m.profile_theme_mono(),        swatch: '#f4f4f5' },
+		{ id: 'cyber',       label: () => m.profile_theme_cyber(),       swatch: '#22d3ee' },
 		{ id: 'light',       label: () => m.profile_theme_light(),       swatch: '#d97706', light: true },
 		{ id: 'light-slate', label: () => m.profile_theme_light_slate(), swatch: '#4f46e5', light: true },
 		{ id: 'light-rose',  label: () => m.profile_theme_light_rose(),  swatch: '#e11d48', light: true },