Add full transcript viewer with clickable timestamps

static/style.css

@@ -223,3 +223,94 @@ mark {
   padding: 2px 8px;
   font-size: 12px;
 }
+
+.transcript-toggle {
+  margin-top: 8px;
+  padding: 6px 12px;
+  background: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #0366d6;
+  transition: background 0.2s;
+}
+
+.transcript-toggle:hover {
+  background: #e8e8e8;
+}
+
+.transcript-toggle:disabled {
+  cursor: not-allowed;
+  color: #999;
+}
+
+.full-transcript {
+  margin-top: 12px;
+  padding: 12px;
+  background: #fafafa;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.transcript-segment {
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ececec;
+}
+
+.transcript-segment:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.timestamp-link {
+  display: inline-block;
+  color: #0366d6;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 11px;
+  font-family: monospace;
+  margin-right: 8px;
+  padding: 2px 6px;
+  background: #e8f4ff;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.timestamp-link:hover {
+  background: #cce5ff;
+  text-decoration: underline;
+}
+
+.transcript-text {
+  color: #333;
+  line-height: 1.5;
+}
+
+.transcript-header {
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #444;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.transcript-close {
+  cursor: pointer;
+  color: #666;
+  font-size: 18px;
+  padding: 0 4px;
+}
+
+.transcript-close:hover {
+  color: #000;
+}
+
+.loading-text {
+  color: #666;
+  font-style: italic;
+}