diff --git a/TajikGanjoor/Pages/Index.cshtml b/TajikGanjoor/Pages/Index.cshtml
index 1d4563ef..2873d110 100644
--- a/TajikGanjoor/Pages/Index.cshtml
+++ b/TajikGanjoor/Pages/Index.cshtml
@@ -183,13 +183,27 @@
}
}
+
+
}
}
else
diff --git a/TajikGanjoor/wwwroot/css/tajik-ganjoor.css b/TajikGanjoor/wwwroot/css/tajik-ganjoor.css
index 139073a9..2df4b3a2 100644
--- a/TajikGanjoor/wwwroot/css/tajik-ganjoor.css
+++ b/TajikGanjoor/wwwroot/css/tajik-ganjoor.css
@@ -803,3 +803,57 @@ html, body {
border-radius: 4px;
transition: background-color 0.2s ease;
}
+
+/* ---------- sticky mini audio-player (recitation seek controls stay
+ reachable while scrolling the poem text) ---------- */
+
+.tg-sticky-player {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 14px;
+ background: var(--tg-paper-edge);
+ border-top: 1px solid var(--tg-rule);
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
+}
+
+.tg-sticky-player-narrator {
+ font-weight: 600;
+ white-space: nowrap;
+ color: var(--tg-ink);
+ flex-shrink: 0;
+}
+
+.tg-sticky-player-audio-slot {
+ flex: 1;
+ min-width: 0;
+}
+
+.tg-sticky-player-audio-slot audio {
+ width: 100%;
+ display: block;
+}
+
+.tg-sticky-player-btn {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ color: var(--tg-ink);
+ padding: 4px 6px;
+ flex-shrink: 0;
+}
+
+.tg-sticky-player-btn:hover {
+ color: var(--tg-accent);
+}
+
+@media (max-width: 600px) {
+ .tg-sticky-player-narrator {
+ display: none;
+ }
+}
diff --git a/TajikGanjoor/wwwroot/js/recitation-sync.js b/TajikGanjoor/wwwroot/js/recitation-sync.js
index b3115109..51edf3dd 100644
--- a/TajikGanjoor/wwwroot/js/recitation-sync.js
+++ b/TajikGanjoor/wwwroot/js/recitation-sync.js
@@ -1,10 +1,11 @@
-/* Syncs poem text highlighting to an