style: enhance compose media button with dedicated styling, hover effects, and an increased icon size.

src/app/globals.css

@@ -340,7 +340,8 @@ a.btn-primary:visited {
 
 .video-embed-container {
   position: relative;
-  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  padding-bottom: 56.25%;
+  /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
   border-radius: var(--radius-md);
@@ -503,6 +504,20 @@ a.btn-primary:visited {
 .compose-media-button {
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  color: var(--foreground-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.compose-media-button:hover {
+  background: var(--background-tertiary);
+  color: var(--accent);
 }
 
 .compose-media-input {
@@ -1564,4 +1579,4 @@ a.btn-primary:visited {
 .thread-line {
   margin-left: 20px;
   border-left: 1px solid var(--border);
-}
+}

src/components/Compose.tsx

@@ -186,8 +186,8 @@ export function Compose({ onPost, replyingTo, onCancelReply, placeholder = "What
                     {remaining}
                 </span>
                 <div className="compose-actions">
-                    <label className="btn btn-ghost btn-sm compose-media-button" title="Add media">
-                        {isUploading ? '...' : <ImageIcon size={18} />}
+                    <label className="compose-media-button" title="Add media">
+                        {isUploading ? '...' : <ImageIcon size={20} />}
                         <input
                             type="file"
                             accept="image/*"