Add right-aligned post sharing with chat, copy-link, and native share actions, plus media downloads and mobile-safe action layout.

Hop-State: A_06FPA5BJBEJ930H9MP07GNG
Hop-Proposal: R_06FPA5AQ4HY44EBZAGHH5KG
Hop-Task: T_06FPA3T7TNGR6E7KE0A2ECR
Hop-Attempt: AT_06FPA3T7TN53HDSQHEBWSS8

src/app/chat/page.tsx

@@ -41,6 +41,7 @@ export default function ChatPage() {
     const router = useRouter();
     const searchParams = useSearchParams();
     const composeHandle = searchParams.get('compose');
+    const sharedPostUrl = searchParams.get('share');
 
     // Chat Data State
     const [conversations, setConversations] = useState<Conversation[]>([]);
@@ -61,6 +62,7 @@ export default function ChatPage() {
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const messagesContainerRef = useRef<HTMLDivElement>(null);
     const [isAtBottom, setIsAtBottom] = useState(true);
+    const appliedSharedPostRef = useRef<string | null>(null);
 
     // ============================================
     // HELPER FUNCTIONS (Defined before useEffects)
@@ -337,6 +339,16 @@ export default function ChatPage() {
         }
     }, [selectedConversation]);
 
+    // A post shared from the timeline waits for the user to choose a conversation,
+    // then appears in the composer so they remain in control of sending it.
+    useEffect(() => {
+        if (!selectedConversation || !sharedPostUrl || appliedSharedPostRef.current === sharedPostUrl) return;
+
+        setNewMessage(sharedPostUrl);
+        appliedSharedPostRef.current = sharedPostUrl;
+        router.replace('/chat', { scroll: false });
+    }, [selectedConversation, sharedPostUrl, router]);
+
     // Auto-scroll to bottom of messages only if user was already at bottom
     useEffect(() => {
         if (messagesEndRef.current && isAtBottom) {
@@ -555,6 +567,12 @@ export default function ChatPage() {
                     </div>
                 </header>
 
+                {sharedPostUrl && (
+                    <div className="chat-share-intent">
+                        Choose a conversation to share this post.
+                    </div>
+                )}
+
                 <div style={{
                     padding: '16px', // Reverted from 20px to 16px as requested
                     borderBottom: '1px solid var(--border)',

src/app/globals.css

@@ -620,9 +620,79 @@ a.btn-primary:visited {
 
 .post-actions {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.post-actions-primary,
+.post-actions-secondary {
+  display: flex;
+  align-items: center;
   gap: 24px;
 }
 
+.post-actions-secondary {
+  margin-left: auto;
+}
+
+.post-share-control {
+  position: relative;
+  display: flex;
+}
+
+.post-share-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 109;
+}
+
+.post-share-menu {
+  position: absolute;
+  right: -12px;
+  bottom: calc(100% + 12px);
+  z-index: 110;
+  width: max-content;
+  min-width: 230px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--background-secondary);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
+}
+
+.post-share-menu button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 14px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.post-share-menu button:hover,
+.post-share-menu button:focus-visible {
+  background: var(--background-tertiary);
+  outline: none;
+}
+
+.chat-share-intent {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--accent) 12%, var(--background));
+  color: var(--foreground-secondary);
+  font-size: 13px;
+  text-align: center;
+}
+
 .post-action {
   display: flex;
   align-items: center;
@@ -1768,10 +1838,32 @@ a.btn-primary:visited {
 
   /* Larger touch targets for actions */
   .post-actions {
-    gap: 16px;
+    gap: 4px;
     margin-top: 12px;
   }
 
+  .post-actions-primary {
+    flex: 1;
+    min-width: 0;
+    justify-content: space-between;
+    gap: 0;
+  }
+
+  .post-actions-secondary {
+    flex-shrink: 0;
+    gap: 0;
+  }
+
+  .post-actions-primary .post-action {
+    flex: 1;
+    min-width: 0;
+    padding-inline: 4px;
+  }
+
+  .post-actions-secondary .post-action {
+    min-width: 40px;
+  }
+
   .post-action {
     padding: 8px;
     min-width: 44px;