diff --git a/web/src/pages/SongPage.tsx b/web/src/pages/SongPage.tsx
index ca77c37..f64d1b9 100644
--- a/web/src/pages/SongPage.tsx
+++ b/web/src/pages/SongPage.tsx
@@ -116,20 +116,22 @@ function Avatar({
   }
   return (
     <div
-      style={{
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        background: mc.bg,
-        border: `1.5px solid ${mc.border}`,
-        color: mc.text,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: size * 0.38,
-        fontWeight: 700,
-        flexShrink: 0,
-      }}
+      style={
+        {
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          background: mc.bg,
+          border: `1.5px solid ${mc.border}`,
+          color: mc.text,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: size * 0.38,
+          fontWeight: 700,
+          flexShrink: 0,
+        }
+      }
     >
       {getInitials(name)}
     </div>
@@ -200,19 +202,21 @@ function WaveformPins({
         return (
           <div
             key={c.id}
-            style={{
-              position: "absolute",
-              left,
-              top: 0,
-              transform: "translateX(-50%)",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              cursor: "pointer",
-              zIndex: 10,
-              transition: "transform 0.12s",
-              ...(isHovered ? { transform: "translateX(-50%) scale(1.15)" } : {}),
-            }}
+            style={
+              {
+                position: "absolute",
+                left,
+                top: 0,
+                transform: "translateX(-50%)",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                cursor: "pointer",
+                zIndex: 10,
+                transition: "transform 0.12s",
+                ...(isHovered ? { transform: "translateX(-50%) scale(1.15)" } : {}),
+              }
+            }
             onMouseEnter={() => setHoveredId(c.id)}
             onMouseLeave={() => setHoveredId(null)}
             onClick={() => {
@@ -223,34 +227,38 @@ function WaveformPins({
             {/* Tooltip */}
             {isHovered && (
               <div
-                style={{
-                  position: "absolute",
-                  bottom: "calc(100% + 6px)",
-                  left: "50%",
-                  transform: "translateX(-50%)",
-                  background: "#1c1c22",
-                  border: "1px solid rgba(255,255,255,0.1)",
-                  borderRadius: 8,
-                  padding: "8px 10px",
-                  width: 180,
-                  zIndex: 50,
-                  pointerEvents: "none",
-                }}
+                style={
+                  {
+                    position: "absolute",
+                    bottom: "calc(100% + 6px)",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    background: "#1c1c22",
+                    border: "1px solid rgba(255,255,255,0.1)",
+                    borderRadius: 8,
+                    padding: "8px 10px",
+                    width: 180,
+                    zIndex: 50,
+                    pointerEvents: "none",
+                  }
+                }
               >
                 <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                   <div
-                    style={{
-                      width: 18,
-                      height: 18,
-                      borderRadius: "50%",
-                      background: mc.bg,
-                      color: mc.text,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: 8,
-                      fontWeight: 700,
-                    }}
+                    style={
+                      {
+                        width: 18,
+                        height: 18,
+                        borderRadius: "50%",
+                        background: mc.bg,
+                        color: mc.text,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 8,
+                        fontWeight: 700,
+                      }
+                    }
                   >
                     {getInitials(c.author_name)}
                   </div>
@@ -266,20 +274,22 @@ function WaveformPins({
             )}
             {/* Avatar circle */}
             <div
-              style={{
-                width: 24,
-                height: 24,
-                borderRadius: "50%",
-                background: mc.bg,
-                border: `2px solid ${mc.border}`,
-                color: mc.text,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: 9,
-                fontWeight: 700,
-                boxShadow: "0 2px 8px rgba(0,0,0,0.45)",
-              }}
+              style={
+                {
+                  width: 24,
+                  height: 24,
+                  borderRadius: "50%",
+                  background: mc.bg,
+                  border: `2px solid ${mc.border}`,
+                  color: mc.text,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 9,
+                  fontWeight: 700,
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.45)",
+                }
+              }
             >
               {getInitials(c.author_name)}
             </div>
@@ -307,7 +317,7 @@ export function SongPage() {
   const [composeFocused, setComposeFocused] = useState(false);
   const [waveformWidth, setWaveformWidth] = useState(0);
 
-  // ── Data fetching ────────────────────────────────────────────────────────
+  // ── Data fetching ──────────────────────────────────────────────────────
 
   const { data: me } = useQuery({
     queryKey: ["me"],
@@ -338,7 +348,7 @@ export function SongPage() {
     enabled: !!songId,
   });
 
-  // ── Version selection ────────────────────────────────────────────────────
+  // ── Version selection ──────────────────────────────────────────────────
 
   const activeVersion = selectedVersionId ?? versions?.[0]?.id ?? null;
 
@@ -361,7 +371,7 @@ export function SongPage() {
     return () => ro.disconnect();
   }, []);
 
-  // ── Keyboard shortcut: Space ──────────────────────────────────────────────
+  // ── Keyboard shortcut: Space ────────────────────────────────────────────
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -401,26 +411,27 @@ export function SongPage() {
   }, []);
 
 
-
-  // ── Styles ────────────────────────────────────────────────────────────────
+  // ── Styles ──────────────────────────────────────────────────────────────
 
   const border = "rgba(255,255,255,0.055)";
 
-  // ── Render ────────────────────────────────────────────────────────────────
+  // ── Render ──────────────────────────────────────────────────────────────
 
   return (
     <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden", background: "#0f0f12" }}>
 
       {/* ── Breadcrumb header ──────────────────────────────────────────── */}
       <div
-        style={{
-          padding: "11px 20px",
-          borderBottom: `1px solid ${border}`,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          flexShrink: 0,
-        }}
+        style={
+          {
+            padding: "11px 20px",
+            borderBottom: `1px solid ${border}`,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            flexShrink: 0,
+          }
+        }
       >
         <div style={{ display: "flex", alignItems: "center", gap: 5, flex: 1, minWidth: 0 }}>
           <button
@@ -446,14 +457,16 @@ export function SongPage() {
           )}
           <span style={{ color: "rgba(255,255,255,0.15)", fontSize: 11 }}>›</span>
           <span
-            style={{
-              fontSize: 12,
-              color: "rgba(255,255,255,0.7)",
-              fontFamily: "'SF Mono', 'Fira Code', monospace",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}
+            style={
+              {
+                fontSize: 12,
+                color: "rgba(255,255,255,0.7)",
+                fontFamily: "'SF Mono', 'Fira Code', monospace",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }
+            }
           >
             {song?.title ?? "…"}
           </span>
@@ -466,16 +479,18 @@ export function SongPage() {
               <button
                 key={v.id}
                 onClick={() => setSelectedVersionId(v.id)}
-                style={{
-                  background: v.id === activeVersion ? "rgba(232,162,42,0.14)" : "transparent",
-                  border: `1px solid ${v.id === activeVersion ? "rgba(232,162,42,0.28)" : "rgba(255,255,255,0.09)"}`,
-                  borderRadius: 6,
-                  padding: "4px 10px",
-                  color: v.id === activeVersion ? "#e8a22a" : "rgba(255,255,255,0.38)",
-                  cursor: "pointer",
-                  fontSize: 11,
-                  fontFamily: "monospace",
-                }}
+                style={
+                  {
+                    background: v.id === activeVersion ? "rgba(232,162,42,0.14)" : "transparent",
+                    border: `1px solid ${v.id === activeVersion ? "rgba(232,162,42,0.28)" : "rgba(255,255,255,0.09)"}`,
+                    borderRadius: 6,
+                    padding: "4px 10px",
+                    color: v.id === activeVersion ? "#e8a22a" : "rgba(255,255,255,0.38)",
+                    cursor: "pointer",
+                    fontSize: 11,
+                    fontFamily: "monospace",
+                  }
+                }
               >
                 v{v.version_number}{v.label ? ` · ${v.label}` : ""}
               </button>
@@ -484,38 +499,42 @@ export function SongPage() {
         )}
 
         <button
-          style={{
-            background: "transparent",
-            border: "1px solid rgba(255,255,255,0.09)",
-            borderRadius: 6,
-            color: "rgba(255,255,255,0.38)",
-            cursor: "pointer",
-            fontSize: 12,
-            padding: "5px 12px",
-            fontFamily: "inherit",
-            flexShrink: 0,
-          }}
+          style={
+            {
+              background: "transparent",
+              border: "1px solid rgba(255,255,255,0.09)",
+              borderRadius: 6,
+              color: "rgba(255,255,255,0.38)",
+              cursor: "pointer",
+              fontSize: 12,
+              padding: "5px 12px",
+              fontFamily: "inherit",
+              flexShrink: 0,
+            }
+          }
         >
           Share
         </button>
       </div>
 
       {/* ── Body: waveform | comments ────────────────────────────────── */}
-      <div className="song-page-body" style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+      <div className="song-page-body" style={{ display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }}>
 
-        {/* ── Left: waveform + transport ──────────────────────────────── */}
-        <div className="waveform-section" style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", padding: "16px 20px" }}>
+        {/* ── Waveform section (top) ──────────────────────────────── */}
+        <div className="waveform-section" style={{ display: "flex", flexDirection: "column", overflow: "hidden", padding: "16px 20px" }}>
 
           {/* Waveform card */}
           <div
-            style={{
-              background: "rgba(255,255,255,0.02)",
-              border: `1px solid ${border}`,
-              borderRadius: 10,
-              padding: "14px 14px 10px",
-              marginBottom: 12,
-              flexShrink: 0,
-            }}
+            style={
+              {
+                background: "rgba(255,255,255,0.02)",
+                border: `1px solid ${border}`,
+                borderRadius: 10,
+                padding: "14px 14px 10px",
+                marginBottom: 12,
+                flexShrink: 0,
+              }
+            }
           >
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
               <span style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", fontFamily: "monospace" }}>
@@ -559,13 +578,15 @@ export function SongPage() {
 
           {/* Transport */}
           <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              gap: 10,
-              padding: "4px 0 12px",
-              flexShrink: 0,
-            }}
+            style={
+              {
+                display: "flex",
+                justifyContent: "center",
+                gap: 10,
+                padding: "4px 0 12px",
+                flexShrink: 0,
+              }
+            }
           >
               {/* Skip back */}
               <TransportButton onClick={() => seekTo(Math.max(0, currentTime - 30))} title="−30s">
@@ -576,20 +597,22 @@ export function SongPage() {
               <button
                 onClick={isPlaying ? pause : play}
                 disabled={!activeVersion}
-                style={{
-                  width: 46,
-                  height: 46,
-                  background: "#e8a22a",
-                  borderRadius: "50%",
-                  border: "none",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  cursor: activeVersion ? "pointer" : "default",
-                  opacity: activeVersion ? 1 : 0.4,
-                  flexShrink: 0,
-                  transition: "background 0.15s, transform 0.15s",
-                }}
+                style={
+                  {
+                    width: 46,
+                    height: 46,
+                    background: "#e8a22a",
+                    borderRadius: "50%",
+                    border: "none",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: activeVersion ? "pointer" : "default",
+                    opacity: activeVersion ? 1 : 0.4,
+                    flexShrink: 0,
+                    transition: "background 0.15s, transform 0.15s",
+                  }
+                }
                 onMouseEnter={(e) => { if (activeVersion) e.currentTarget.style.background = "#f0b740"; }}
                 onMouseLeave={(e) => { e.currentTarget.style.background = "#e8a22a"; }}
               >
@@ -606,49 +629,207 @@ export function SongPage() {
 
         </div>
 
-        {/* ── Right: comment panel ──────────────────────────────────────── */}
+        {/* ── Comments section (bottom) ──────────────────────────────── */}
         <div
           className="comment-panel"
-          style={{
-            width: 280,
-            minWidth: 280,
-            borderLeft: `1px solid ${border}`,
-            display: "flex",
-            flexDirection: "column",
-            overflow: "hidden",
-            background: "rgba(0,0,0,0.12)",
-            // Responsive: center on mobile
-            margin: "0 auto",
-          }}
+          style={
+            {
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              background: "rgba(0,0,0,0.12)",
+              borderTop: `1px solid ${border}`,
+              flex: 1,
+            }
+          }
         >
           {/* Header */}
           <div
-            style={{
-              padding: "12px 15px",
-              borderBottom: `1px solid ${border}`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              flexShrink: 0,
-            }}
+            style={
+              {
+                padding: "12px 15px",
+                borderBottom: `1px solid ${border}`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                flexShrink: 0,
+              }
+            }
           >
             <span style={{ fontSize: 13, fontWeight: 500, color: "rgba(255,255,255,0.72)" }}>Comments</span>
             {comments && comments.length > 0 && (
               <span
-                style={{
-                  fontSize: 11,
-                  background: "rgba(232,162,42,0.14)",
-                  color: "#e8a22a",
-                  padding: "1px 8px",
-                  borderRadius: 10,
-                }}
+                style={
+                  {
+                    fontSize: 11,
+                    background: "rgba(232,162,42,0.14)",
+                    color: "#e8a22a",
+                    padding: "1px 8px",
+                    borderRadius: 10,
+                  }
+                }
               >
                 {comments.length}
               </span>
             )}
           </div>
 
-          {/* Comment list */}
+          {/* Compose section (moved to top) */}
+          <div
+            style={
+              {
+                padding: "11px 14px",
+                borderBottom: `1px solid ${border}`,
+                flexShrink: 0,
+              }
+            }
+          >
+            <div style={{ display: "flex", gap: 9, alignItems: "flex-start" }}>
+              {/* My avatar */}
+              {me ? (
+                <Avatar name={me.display_name} avatarUrl={me.avatar_url ?? null} authorId={me.id} size={26} />
+              ) : (
+                <div style={{ width: 26, height: 26, borderRadius: "50%", background: "rgba(255,255,255,0.06)", flexShrink: 0 }} />
+              )}
+
+              <div style={{ flex: 1, minWidth: 0 }}>
+                {/* Timestamp pill */}
+                <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 6 }}>
+                  <div
+                    style={
+                      {
+                        fontSize: 11,
+                        fontFamily: "monospace",
+                        background: "rgba(232,162,42,0.1)",
+                        color: "#e8a22a",
+                        border: "1px solid rgba(232,162,42,0.22)",
+                        padding: "3px 9px",
+                        borderRadius: 20,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 6,
+                      }
+                    }
+                  >
+                    {isPlaying && (
+                      <div
+                        style={
+                          {
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            background: "#e8a22a",
+                            animation: "rh-blink 1.1s infinite",
+                          }
+                        }
+                      />
+                    )}
+                    {formatTime(currentTime)}
+                  </div>
+                  <span style={{ fontSize: 11, color: "rgba(255,255,255,0.18)" }}>· pins to playhead</span>
+                </div>
+
+                {/* Textarea */}
+                <textarea
+                  value={commentBody}
+                  onChange={(e) => setCommentBody(e.target.value)}
+                  onFocus={() => setComposeFocused(true)}
+                  onBlur={() => {
+                    if (!commentBody.trim()) setComposeFocused(false);
+                  }}
+                  placeholder="What do you hear at this moment…"
+                  style={
+                    {
+                      width: "100%",
+                      background: "rgba(255,255,255,0.05)",
+                      border: composeFocused
+                        ? "1px solid rgba(232,162,42,0.35)"
+                        : "1px solid rgba(255,255,255,0.07)",
+                      borderRadius: 7,
+                      padding: "8px 10px",
+                      color: "#e0e0e8",
+                      fontSize: 12,
+                      resize: "none",
+                      outline: "none",
+                      fontFamily: "inherit",
+                      height: composeFocused ? 68 : 42,
+                      transition: "height 0.18s, border-color 0.15s",
+                      boxSizing: "border-box",
+                    }
+                  }
+                />
+
+                {/* Tag buttons + Post (visible when focused) */}
+                {composeFocused && (
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 7 }}>
+                    <div style={{ display: "flex", gap: 5 }}>
+                      {(["suggestion", "issue", "keeper"] as const).map((tag) => (
+                        <button
+                          key={tag}
+                          onClick={() => setSelectedTag((t) => (t === tag ? "" : tag))}
+                          style={
+                            {
+                              fontSize: 11,
+                              padding: "3px 8px",
+                              borderRadius: 4,
+                              cursor: "pointer",
+                              fontFamily: "inherit",
+                              background:
+                                selectedTag === tag
+                                  ? TAG_STYLES[tag].bg
+                                  : "rgba(255,255,255,0.05)",
+                              border:
+                                selectedTag === tag
+                                  ? `1px solid ${TAG_STYLES[tag].color}44`
+                                  : "1px solid rgba(255,255,255,0.07)",
+                              color:
+                                selectedTag === tag
+                                  ? TAG_STYLES[tag].color
+                                  : "rgba(255,255,255,0.32)",
+                              transition: "all 0.12s",
+                            }
+                          }
+                        >
+                          {tag}
+                        </button>
+                      ))}
+                    </div>
+                    <button
+                      onClick={() => {
+                        if (commentBody.trim()) {
+                          addCommentMutation.mutate({
+                            body: commentBody.trim(),
+                            timestamp: currentTime,
+                            tag: selectedTag,
+                          });
+                        }
+                      }}
+                      disabled={!commentBody.trim() || addCommentMutation.isPending}
+                      style={
+                        {
+                          padding: "5px 14px",
+                          borderRadius: 6,
+                          background: "#e8a22a",
+                          border: "none",
+                          color: "#0f0f12",
+                          cursor: commentBody.trim() ? "pointer" : "default",
+                          fontSize: 12,
+                          fontWeight: 600,
+                          fontFamily: "inherit",
+                          opacity: commentBody.trim() ? 1 : 0.35,
+                          transition: "opacity 0.12s",
+                        }
+                      }
+                    >
+                      Post
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Scrollable comment list */}
           <div style={{ flex: 1, overflowY: "auto", padding: "12px 14px" }}>
             {comments?.map((c) => {
               const tagStyle = c.tag ? TAG_STYLES[c.tag] : null;
@@ -658,15 +839,17 @@ export function SongPage() {
                 <div
                   key={c.id}
                   id={`comment-${c.id}`}
-                  style={{
-                    marginBottom: 14,
-                    paddingBottom: 14,
-                    borderBottom: "1px solid rgba(255,255,255,0.04)",
-                    borderRadius: isNearPlayhead ? 6 : undefined,
-                    background: isNearPlayhead ? "rgba(232,162,42,0.04)" : undefined,
-                    border: isNearPlayhead ? "1px solid rgba(232,162,42,0.12)" : undefined,
-                    padding: isNearPlayhead ? 8 : undefined,
-                  }}
+                  style={
+                    {
+                      marginBottom: 14,
+                      paddingBottom: 14,
+                      borderBottom: "1px solid rgba(255,255,255,0.04)",
+                      borderRadius: isNearPlayhead ? 6 : undefined,
+                      background: isNearPlayhead ? "rgba(232,162,42,0.04)" : undefined,
+                      border: isNearPlayhead ? "1px solid rgba(232,162,42,0.12)" : undefined,
+                      padding: isNearPlayhead ? 8 : undefined,
+                    }
+                  }
                 >
                   {/* Author row */}
                   <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
@@ -679,17 +862,19 @@ export function SongPage() {
                         onClick={() => {
                           seekTo(c.timestamp!);
                         }}
-                        style={{
-                          marginLeft: "auto",
-                          fontSize: 10,
-                          fontFamily: "monospace",
-                          color: "#e8a22a",
-                          background: "rgba(232,162,42,0.1)",
-                          border: "none",
-                          borderRadius: 3,
-                          padding: "1px 5px",
-                          cursor: "pointer",
-                        }}
+                        style={
+                          {
+                            marginLeft: "auto",
+                            fontSize: 10,
+                            fontFamily: "monospace",
+                            color: "#e8a22a",
+                            background: "rgba(232,162,42,0.1)",
+                            border: "none",
+                            borderRadius: 3,
+                            padding: "1px 5px",
+                            cursor: "pointer",
+                          }
+                        }
                         onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(232,162,42,0.2)")}
                         onMouseLeave={(e) => (e.currentTarget.style.background = "rgba(232,162,42,0.1)")}
                       >
@@ -698,13 +883,15 @@ export function SongPage() {
                     )}
                     {tagStyle && (
                       <span
-                        style={{
-                          fontSize: 10,
-                          padding: "1px 5px",
-                          borderRadius: 3,
-                          background: tagStyle.bg,
-                          color: tagStyle.color,
-                        }}
+                        style={
+                          {
+                            fontSize: 10,
+                            padding: "1px 5px",
+                            borderRadius: 3,
+                            background: tagStyle.bg,
+                            color: tagStyle.color,
+                          }
+                        }
                       >
                         {c.tag}
                       </span>
@@ -744,148 +931,6 @@ export function SongPage() {
             )}
           </div>
 
-          {/* Compose */}
-          <div
-            style={{
-              padding: "11px 14px",
-              borderTop: `1px solid ${border}`,
-              flexShrink: 0,
-            }}
-          >
-            <div style={{ display: "flex", gap: 9, alignItems: "flex-start" }}>
-              {/* My avatar */}
-              {me ? (
-                <Avatar name={me.display_name} avatarUrl={me.avatar_url ?? null} authorId={me.id} size={26} />
-              ) : (
-                <div style={{ width: 26, height: 26, borderRadius: "50%", background: "rgba(255,255,255,0.06)", flexShrink: 0 }} />
-              )}
-
-              <div style={{ flex: 1, minWidth: 0 }}>
-                {/* Timestamp pill */}
-                <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 6 }}>
-                  <div
-                    style={{
-                      fontSize: 11,
-                      fontFamily: "monospace",
-                      background: "rgba(232,162,42,0.1)",
-                      color: "#e8a22a",
-                      border: "1px solid rgba(232,162,42,0.22)",
-                      padding: "3px 9px",
-                      borderRadius: 20,
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 6,
-                    }}
-                  >
-                    {isPlaying && (
-                      <div
-                        style={{
-                          width: 6,
-                          height: 6,
-                          borderRadius: "50%",
-                          background: "#e8a22a",
-                          animation: "rh-blink 1.1s infinite",
-                        }}
-                      />
-                    )}
-                    {formatTime(currentTime)}
-                  </div>
-                  <span style={{ fontSize: 11, color: "rgba(255,255,255,0.18)" }}>· pins to playhead</span>
-                </div>
-
-                {/* Textarea */}
-                <textarea
-                  value={commentBody}
-                  onChange={(e) => setCommentBody(e.target.value)}
-                  onFocus={() => setComposeFocused(true)}
-                  onBlur={() => {
-                    if (!commentBody.trim()) setComposeFocused(false);
-                  }}
-                  placeholder="What do you hear at this moment…"
-                  style={{
-                    width: "100%",
-                    background: "rgba(255,255,255,0.05)",
-                    border: composeFocused
-                      ? "1px solid rgba(232,162,42,0.35)"
-                      : "1px solid rgba(255,255,255,0.07)",
-                    borderRadius: 7,
-                    padding: "8px 10px",
-                    color: "#e0e0e8",
-                    fontSize: 12,
-                    resize: "none",
-                    outline: "none",
-                    fontFamily: "inherit",
-                    height: composeFocused ? 68 : 42,
-                    transition: "height 0.18s, border-color 0.15s",
-                    boxSizing: "border-box",
-                  }}
-                />
-
-                {/* Tag buttons + Post (visible when focused) */}
-                {composeFocused && (
-                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 7 }}>
-                    <div style={{ display: "flex", gap: 5 }}>
-                      {(["suggestion", "issue", "keeper"] as const).map((tag) => (
-                        <button
-                          key={tag}
-                          onClick={() => setSelectedTag((t) => (t === tag ? "" : tag))}
-                          style={{
-                            fontSize: 11,
-                            padding: "3px 8px",
-                            borderRadius: 4,
-                            cursor: "pointer",
-                            fontFamily: "inherit",
-                            background:
-                              selectedTag === tag
-                                ? TAG_STYLES[tag].bg
-                                : "rgba(255,255,255,0.05)",
-                            border:
-                              selectedTag === tag
-                                ? `1px solid ${TAG_STYLES[tag].color}44`
-                                : "1px solid rgba(255,255,255,0.07)",
-                            color:
-                              selectedTag === tag
-                                ? TAG_STYLES[tag].color
-                                : "rgba(255,255,255,0.32)",
-                            transition: "all 0.12s",
-                          }}
-                        >
-                          {tag}
-                        </button>
-                      ))}
-                    </div>
-                    <button
-                      onClick={() => {
-                        if (commentBody.trim()) {
-                          addCommentMutation.mutate({
-                            body: commentBody.trim(),
-                            timestamp: currentTime,
-                            tag: selectedTag,
-                          });
-                        }
-                      }}
-                      disabled={!commentBody.trim() || addCommentMutation.isPending}
-                      style={{
-                        padding: "5px 14px",
-                        borderRadius: 6,
-                        background: "#e8a22a",
-                        border: "none",
-                        color: "#0f0f12",
-                        cursor: commentBody.trim() ? "pointer" : "default",
-                        fontSize: 12,
-                        fontWeight: 600,
-                        fontFamily: "inherit",
-                        opacity: commentBody.trim() ? 1 : 0.35,
-                        transition: "opacity 0.12s",
-                      }}
-                    >
-                      Post
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
         </div>
       </div>
 
@@ -928,24 +973,24 @@ function TransportButton({ onClick, title, children }: { onClick: () => void; ti
       title={title}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
-      style={{
-        width: 34,
-        height: 34,
-        borderRadius: "50%",
-        background: hovered ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.04)",
-        border: "1px solid rgba(255,255,255,0.07)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer",
-        color: hovered ? "rgba(255,255,255,0.7)" : "rgba(255,255,255,0.35)",
-        flexShrink: 0,
-        transition: "all 0.12s",
-      }}
+      style={
+        {
+          width: 34,
+          height: 34,
+          borderRadius: "50%",
+          background: hovered ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.04)",
+          border: "1px solid rgba(255,255,255,0.07)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          color: hovered ? "rgba(255,255,255,0.7)" : "rgba(255,255,255,0.35)",
+          flexShrink: 0,
+          transition: "all 0.12s",
+        }
+      }
     >
       {children}
     </button>
   );
 }
-
-