Make highlights clickable to jump to transcript location

static/style.css

@@ -187,6 +187,12 @@ button {
 .highlight-row {
   padding: 4px 0;
   border-bottom: 1px solid #ececec;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.highlight-row:hover {
+  background: #f0f7ff;
 }
 
 .highlight-row:last-child {
@@ -259,6 +265,8 @@ mark {
   margin-bottom: 12px;
   padding-bottom: 8px;
   border-bottom: 1px solid #ececec;
+  transition: background 0.3s, padding 0.3s;
+  border-radius: 4px;
 }
 
 .transcript-segment:last-child {
@@ -266,6 +274,22 @@ mark {
   margin-bottom: 0;
 }
 
+.transcript-segment.focused {
+  background: #fff3cd;
+  padding: 8px;
+  border: 2px solid #ffc107;
+  animation: pulse-highlight 1s ease-in-out;
+}
+
+@keyframes pulse-highlight {
+  0%, 100% {
+    background: #fff3cd;
+  }
+  50% {
+    background: #ffe69c;
+  }
+}
+
 .timestamp-link {
   display: inline-block;
   color: #0366d6;